feat(mobile): add pre-login legal pages, multi-image selection, file detail view, search, i18n, HEIC support
- Add Privacy Policy, Terms of Service, and Imprint links to WelcomeScreen and LoginScreen for GDPR/Apple compliance (pre-login access) - Enable multiple image selection in photo library picker - Add HEIC/HEIF image support to backend (allowed_types, convert_to_pdf, upload handler) - Create FileDetailScreen with processing status and logs - Add search bar to FilesScreen with debounced search - Set up i18n with expo-localization (EN, DE, ES, FR, IT) - Add language selector to ProfileScreen settings - Add Imprint link to ProfileScreen legal section - Update docs and tests Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -0,0 +1,329 @@
|
||||
/**
|
||||
* FileDetailScreen – shows detailed status and processing logs for a single file.
|
||||
*
|
||||
* Replicates the web /files/:id and /files/:id/detail views in a
|
||||
* mobile-friendly layout. Displays file metadata, processing status with
|
||||
* a progress indicator, and a chronological list of processing log entries.
|
||||
*/
|
||||
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useLocalSearchParams, useRouter } from "expo-router";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Pressable,
|
||||
RefreshControl,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import type { FileDetail } from "../services/api";
|
||||
import api from "../services/api";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function formatBytes(bytes: number | null | undefined): string {
|
||||
if (bytes === null || bytes === undefined) return "–";
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function formatDateTime(iso: string): string {
|
||||
try {
|
||||
return new Date(iso).toLocaleString(undefined, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
|
||||
function statusColor(status: string): string {
|
||||
const colors: Record<string, string> = {
|
||||
completed: "#059669",
|
||||
processing: "#d97706",
|
||||
pending: "#6b7280",
|
||||
failed: "#dc2626",
|
||||
duplicate: "#6b7280",
|
||||
};
|
||||
return colors[status?.toLowerCase()] ?? "#6b7280";
|
||||
}
|
||||
|
||||
function statusIcon(status: string): keyof typeof Ionicons.glyphMap {
|
||||
const icons: Record<string, keyof typeof Ionicons.glyphMap> = {
|
||||
completed: "checkmark-circle",
|
||||
processing: "sync-circle",
|
||||
pending: "time-outline",
|
||||
failed: "close-circle",
|
||||
duplicate: "copy-outline",
|
||||
};
|
||||
return icons[status?.toLowerCase()] ?? "document-outline";
|
||||
}
|
||||
|
||||
function logStepIcon(status: string): { name: keyof typeof Ionicons.glyphMap; color: string } {
|
||||
const lower = status?.toLowerCase();
|
||||
if (lower === "completed" || lower === "success") return { name: "checkmark-circle", color: "#059669" };
|
||||
if (lower === "failed" || lower === "error") return { name: "close-circle", color: "#dc2626" };
|
||||
if (lower === "skipped") return { name: "remove-circle-outline", color: "#9ca3af" };
|
||||
if (lower === "processing" || lower === "running") return { name: "sync-circle", color: "#d97706" };
|
||||
return { name: "ellipse-outline", color: "#6b7280" };
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function FileDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const [detail, setDetail] = useState<FileDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fileId = parseInt(id ?? "0", 10);
|
||||
|
||||
const fetchDetail = useCallback(async () => {
|
||||
if (!fileId) return;
|
||||
try {
|
||||
const data = await api.getFileDetail(fileId);
|
||||
setDetail(data);
|
||||
setError(null);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load file details");
|
||||
}
|
||||
}, [fileId]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
setLoading(true);
|
||||
await fetchDetail();
|
||||
setLoading(false);
|
||||
})();
|
||||
}, [fetchDetail]);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
await fetchDetail();
|
||||
setRefreshing(false);
|
||||
}, [fetchDetail]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color="#1e40af" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !detail) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<Text style={styles.errorText}>{error ?? "File not found"}</Text>
|
||||
<Pressable style={styles.retryButton} onPress={handleRefresh}>
|
||||
<Text style={styles.retryText}>Retry</Text>
|
||||
</Pressable>
|
||||
<Pressable style={styles.backButton} onPress={() => router.back()}>
|
||||
<Text style={styles.backButtonText}>← Back</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const file = detail.file;
|
||||
const status = detail.processing_status;
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={styles.scroll}
|
||||
contentContainerStyle={styles.content}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
|
||||
>
|
||||
{/* Header with back button */}
|
||||
<Pressable
|
||||
style={styles.backRow}
|
||||
onPress={() => router.back()}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Go back"
|
||||
>
|
||||
<Ionicons name="arrow-back" size={20} color="#1e40af" />
|
||||
<Text style={styles.backLabel}>Back to Files</Text>
|
||||
</Pressable>
|
||||
|
||||
{/* File info card */}
|
||||
<View style={styles.card}>
|
||||
<View style={styles.cardHeader}>
|
||||
<Ionicons
|
||||
name={statusIcon(status.status)}
|
||||
size={28}
|
||||
color={statusColor(status.status)}
|
||||
style={{ marginRight: 12 }}
|
||||
/>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.filename} numberOfLines={2}>
|
||||
{file.original_filename}
|
||||
</Text>
|
||||
<Text style={[styles.statusBadge, { color: statusColor(status.status) }]}>
|
||||
{status.status.charAt(0).toUpperCase() + status.status.slice(1)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.metaGrid}>
|
||||
<MetaRow label="File Size" value={formatBytes(file.file_size)} />
|
||||
<MetaRow label="MIME Type" value={file.mime_type ?? "–"} />
|
||||
<MetaRow label="Uploaded" value={formatDateTime(file.created_at)} />
|
||||
<MetaRow label="File Hash" value={file.filehash ? `${file.filehash.slice(0, 16)}…` : "–"} />
|
||||
<MetaRow label="Last Step" value={status.last_step ?? "–"} />
|
||||
<MetaRow label="Total Steps" value={String(status.total_steps)} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Processing logs */}
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.sectionTitle}>Processing Log</Text>
|
||||
{detail.logs.length === 0 ? (
|
||||
<Text style={styles.emptyLog}>No processing logs yet.</Text>
|
||||
) : (
|
||||
detail.logs.map((log, idx) => {
|
||||
const icon = logStepIcon(log.status);
|
||||
const isLast = idx === detail.logs.length - 1;
|
||||
return (
|
||||
<View key={log.id} style={[styles.logEntry, !isLast && styles.logEntryBorder]}>
|
||||
<Ionicons name={icon.name} size={18} color={icon.color} style={styles.logIcon} />
|
||||
<View style={styles.logContent}>
|
||||
<Text style={styles.logStep}>{log.step_name}</Text>
|
||||
<Text style={styles.logMessage} numberOfLines={3}>
|
||||
{log.message}
|
||||
</Text>
|
||||
<Text style={styles.logTimestamp}>{formatDateTime(log.timestamp)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sub-components
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function MetaRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<View style={styles.metaRow}>
|
||||
<Text style={styles.metaLabel}>{label}</Text>
|
||||
<Text style={styles.metaValue} numberOfLines={1}>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Styles
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scroll: { flex: 1, backgroundColor: "#f9fafb" },
|
||||
content: { padding: 16, paddingBottom: 40 },
|
||||
center: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#f9fafb",
|
||||
padding: 24,
|
||||
},
|
||||
errorText: { color: "#dc2626", fontSize: 15, textAlign: "center", marginBottom: 16 },
|
||||
retryButton: {
|
||||
backgroundColor: "#1e40af",
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 10,
|
||||
marginBottom: 12,
|
||||
},
|
||||
retryText: { color: "#fff", fontWeight: "600" },
|
||||
backButton: { paddingVertical: 10 },
|
||||
backButtonText: { color: "#6b7280", fontSize: 14 },
|
||||
backRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
minHeight: 44,
|
||||
},
|
||||
backLabel: {
|
||||
fontSize: 15,
|
||||
color: "#1e40af",
|
||||
fontWeight: "600",
|
||||
marginLeft: 6,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.04,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 6,
|
||||
elevation: 2,
|
||||
},
|
||||
cardHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
marginBottom: 16,
|
||||
},
|
||||
filename: {
|
||||
fontSize: 17,
|
||||
fontWeight: "700",
|
||||
color: "#111827",
|
||||
marginBottom: 4,
|
||||
},
|
||||
statusBadge: {
|
||||
fontSize: 13,
|
||||
fontWeight: "600",
|
||||
textTransform: "capitalize",
|
||||
},
|
||||
metaGrid: {},
|
||||
metaRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingVertical: 8,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f3f4f6",
|
||||
},
|
||||
metaLabel: { fontSize: 13, color: "#6b7280", fontWeight: "500" },
|
||||
metaValue: { fontSize: 13, color: "#374151", maxWidth: "55%", textAlign: "right" },
|
||||
sectionTitle: {
|
||||
fontSize: 15,
|
||||
fontWeight: "700",
|
||||
color: "#374151",
|
||||
marginBottom: 12,
|
||||
},
|
||||
emptyLog: { fontSize: 13, color: "#9ca3af", fontStyle: "italic" },
|
||||
logEntry: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
paddingVertical: 10,
|
||||
},
|
||||
logEntryBorder: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f3f4f6",
|
||||
},
|
||||
logIcon: { marginRight: 10, marginTop: 1 },
|
||||
logContent: { flex: 1 },
|
||||
logStep: { fontSize: 13, fontWeight: "600", color: "#374151", marginBottom: 2 },
|
||||
logMessage: { fontSize: 12, color: "#6b7280", lineHeight: 17, marginBottom: 2 },
|
||||
logTimestamp: { fontSize: 11, color: "#9ca3af" },
|
||||
});
|
||||
@@ -1,9 +1,10 @@
|
||||
/**
|
||||
* FilesScreen – list of documents processed by DocuElevate.
|
||||
* FilesScreen – list of documents processed by DocuElevate with search.
|
||||
*/
|
||||
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useRouter } from "expo-router";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
@@ -11,6 +12,7 @@ import {
|
||||
RefreshControl,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from "react-native";
|
||||
import type { FileRecord } from "../services/api";
|
||||
@@ -47,17 +49,20 @@ function statusIcon(status: string): { name: keyof typeof Ionicons.glyphMap; col
|
||||
}
|
||||
|
||||
export default function FilesScreen() {
|
||||
const router = useRouter();
|
||||
const [files, setFiles] = useState<FileRecord[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const fetchFiles = useCallback(
|
||||
async (pageNum: number, replace: boolean) => {
|
||||
async (pageNum: number, replace: boolean, search?: string) => {
|
||||
try {
|
||||
const data = await api.listFiles(pageNum, 20);
|
||||
const data = await api.listFiles(pageNum, 20, search || undefined);
|
||||
if (replace) {
|
||||
setFiles(data);
|
||||
} else {
|
||||
@@ -83,18 +88,49 @@ export default function FilesScreen() {
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
setPage(1);
|
||||
await fetchFiles(1, true);
|
||||
await fetchFiles(1, true, searchQuery);
|
||||
setRefreshing(false);
|
||||
}, [fetchFiles]);
|
||||
}, [fetchFiles, searchQuery]);
|
||||
|
||||
const handleLoadMore = useCallback(async () => {
|
||||
if (!hasMore || loading || refreshing) return;
|
||||
const next = page + 1;
|
||||
setPage(next);
|
||||
await fetchFiles(next, false);
|
||||
}, [fetchFiles, hasMore, loading, page, refreshing]);
|
||||
await fetchFiles(next, false, searchQuery);
|
||||
}, [fetchFiles, hasMore, loading, page, refreshing, searchQuery]);
|
||||
|
||||
if (loading) {
|
||||
const handleSearch = useCallback(
|
||||
(text: string) => {
|
||||
setSearchQuery(text);
|
||||
// Debounce search requests
|
||||
if (searchTimeoutRef.current) {
|
||||
clearTimeout(searchTimeoutRef.current);
|
||||
}
|
||||
searchTimeoutRef.current = setTimeout(async () => {
|
||||
setPage(1);
|
||||
setLoading(true);
|
||||
await fetchFiles(1, true, text);
|
||||
setLoading(false);
|
||||
}, 400);
|
||||
},
|
||||
[fetchFiles]
|
||||
);
|
||||
|
||||
const handleClearSearch = useCallback(() => {
|
||||
setSearchQuery("");
|
||||
setPage(1);
|
||||
setLoading(true);
|
||||
fetchFiles(1, true).then(() => setLoading(false));
|
||||
}, [fetchFiles]);
|
||||
|
||||
const handleFilePress = useCallback(
|
||||
(file: FileRecord) => {
|
||||
router.push({ pathname: "/(tabs)/file-detail", params: { id: String(file.id) } });
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
if (loading && files.length === 0) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<ActivityIndicator size="large" color="#1e40af" />
|
||||
@@ -102,7 +138,7 @@ export default function FilesScreen() {
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
if (error && files.length === 0) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
@@ -114,40 +150,77 @@ export default function FilesScreen() {
|
||||
}
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
style={styles.list}
|
||||
data={files}
|
||||
keyExtractor={(item) => String(item.id)}
|
||||
contentContainerStyle={styles.listContent}
|
||||
renderItem={({ item }) => <FileRow file={item} />}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
|
||||
}
|
||||
onEndReached={handleLoadMore}
|
||||
onEndReachedThreshold={0.4}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyState}>
|
||||
<Ionicons name="folder-open-outline" size={48} color="#9ca3af" style={{ marginBottom: 12 }} />
|
||||
<Text style={styles.emptyText}>No documents yet.</Text>
|
||||
<Text style={styles.emptyHint}>
|
||||
Upload a document from the Upload tab to get started.
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
ListFooterComponent={
|
||||
hasMore && files.length > 0 ? (
|
||||
<ActivityIndicator color="#1e40af" style={{ marginVertical: 16 }} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
<View style={styles.container}>
|
||||
{/* Search bar */}
|
||||
<View style={styles.searchContainer}>
|
||||
<Ionicons name="search-outline" size={18} color="#9ca3af" style={styles.searchIcon} />
|
||||
<TextInput
|
||||
style={styles.searchInput}
|
||||
placeholder="Search documents…"
|
||||
placeholderTextColor="#9ca3af"
|
||||
value={searchQuery}
|
||||
onChangeText={handleSearch}
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
returnKeyType="search"
|
||||
accessibilityLabel="Search documents"
|
||||
/>
|
||||
{searchQuery.length > 0 && (
|
||||
<Pressable
|
||||
onPress={handleClearSearch}
|
||||
style={styles.clearButton}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Clear search"
|
||||
>
|
||||
<Ionicons name="close-circle" size={18} color="#9ca3af" />
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
style={styles.list}
|
||||
data={files}
|
||||
keyExtractor={(item) => String(item.id)}
|
||||
contentContainerStyle={styles.listContent}
|
||||
renderItem={({ item }) => <FileRow file={item} onPress={handleFilePress} />}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
|
||||
}
|
||||
onEndReached={handleLoadMore}
|
||||
onEndReachedThreshold={0.4}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyState}>
|
||||
<Ionicons name="folder-open-outline" size={48} color="#9ca3af" style={{ marginBottom: 12 }} />
|
||||
<Text style={styles.emptyText}>
|
||||
{searchQuery ? "No documents match your search." : "No documents yet."}
|
||||
</Text>
|
||||
<Text style={styles.emptyHint}>
|
||||
{searchQuery
|
||||
? "Try a different search term."
|
||||
: "Upload a document from the Upload tab to get started."}
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
ListFooterComponent={
|
||||
hasMore && files.length > 0 ? (
|
||||
<ActivityIndicator color="#1e40af" style={{ marginVertical: 16 }} />
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function FileRow({ file }: { file: FileRecord }) {
|
||||
function FileRow({ file, onPress }: { file: FileRecord; onPress: (file: FileRecord) => void }) {
|
||||
const status = file.processing_status?.status ?? "pending";
|
||||
const icon = statusIcon(status);
|
||||
return (
|
||||
<View style={rowStyles.row}>
|
||||
<Pressable
|
||||
style={rowStyles.row}
|
||||
onPress={() => onPress(file)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`View details for ${file.original_filename}`}
|
||||
>
|
||||
<Ionicons name={icon.name} size={22} color={icon.color} style={rowStyles.icon} />
|
||||
<View style={rowStyles.info}>
|
||||
<Text style={rowStyles.filename} numberOfLines={1}>
|
||||
@@ -157,14 +230,44 @@ function FileRow({ file }: { file: FileRecord }) {
|
||||
{formatDate(file.created_at)} · {formatBytes(file.file_size)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={rowStyles.status}>{status}</Text>
|
||||
</View>
|
||||
<View style={rowStyles.right}>
|
||||
<Text style={rowStyles.status}>{status}</Text>
|
||||
<Ionicons name="chevron-forward" size={16} color="#d1d5db" />
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
list: { flex: 1, backgroundColor: "#f9fafb" },
|
||||
listContent: { padding: 16 },
|
||||
container: { flex: 1, backgroundColor: "#f9fafb" },
|
||||
list: { flex: 1 },
|
||||
listContent: { padding: 16, paddingTop: 0 },
|
||||
searchContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#fff",
|
||||
marginHorizontal: 16,
|
||||
marginVertical: 12,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e7eb",
|
||||
minHeight: 44,
|
||||
},
|
||||
searchIcon: { marginRight: 8 },
|
||||
searchInput: {
|
||||
flex: 1,
|
||||
fontSize: 15,
|
||||
color: "#111827",
|
||||
paddingVertical: 10,
|
||||
},
|
||||
clearButton: {
|
||||
padding: 4,
|
||||
minWidth: 44,
|
||||
minHeight: 44,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
center: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
@@ -213,6 +316,11 @@ const rowStyles = StyleSheet.create({
|
||||
marginBottom: 4,
|
||||
},
|
||||
meta: { fontSize: 12, color: "#6b7280" },
|
||||
right: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 6,
|
||||
},
|
||||
status: {
|
||||
fontSize: 11,
|
||||
color: "#6b7280",
|
||||
|
||||
@@ -169,6 +169,45 @@ export default function LoginScreen() {
|
||||
>
|
||||
<Text style={styles.backLinkText}>← Back</Text>
|
||||
</Pressable>
|
||||
|
||||
{/* Legal links – accessible pre-login for GDPR / Apple compliance */}
|
||||
<View style={styles.legalLinks}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
const base = serverUrl.trim() || "https://app.docuelevate.org";
|
||||
Linking.openURL(`${base.replace(/\/$/, "")}/privacy`);
|
||||
}}
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel="Privacy Policy"
|
||||
style={styles.legalLinkButton}
|
||||
>
|
||||
<Text style={styles.legalLinkText}>Privacy Policy</Text>
|
||||
</Pressable>
|
||||
<Text style={styles.legalSeparator}>·</Text>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
const base = serverUrl.trim() || "https://app.docuelevate.org";
|
||||
Linking.openURL(`${base.replace(/\/$/, "")}/terms`);
|
||||
}}
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel="Terms of Service"
|
||||
style={styles.legalLinkButton}
|
||||
>
|
||||
<Text style={styles.legalLinkText}>Terms</Text>
|
||||
</Pressable>
|
||||
<Text style={styles.legalSeparator}>·</Text>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
const base = serverUrl.trim() || "https://app.docuelevate.org";
|
||||
Linking.openURL(`${base.replace(/\/$/, "")}/imprint`);
|
||||
}}
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel="Imprint"
|
||||
style={styles.legalLinkButton}
|
||||
>
|
||||
<Text style={styles.legalLinkText}>Imprint</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
@@ -291,4 +330,26 @@ const styles = StyleSheet.create({
|
||||
fontSize: 13,
|
||||
color: "#6b7280",
|
||||
},
|
||||
legalLinks: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginTop: 16,
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
legalLinkButton: {
|
||||
minHeight: 44,
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
legalLinkText: {
|
||||
fontSize: 12,
|
||||
color: "#9ca3af",
|
||||
textDecorationLine: "underline",
|
||||
},
|
||||
legalSeparator: {
|
||||
fontSize: 12,
|
||||
color: "#d1d5db",
|
||||
marginHorizontal: 4,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
import Constants from "expo-constants";
|
||||
import * as Linking from "expo-linking";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
@@ -15,14 +15,17 @@ import {
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import { getLanguage, getSupportedLanguages, setLanguage } from "../i18n";
|
||||
|
||||
const DEFAULT_SERVER_URL = "https://app.docuelevate.org";
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const { user, signOut, baseUrl } = useAuth();
|
||||
const [selectedLanguage, setSelectedLanguage] = useState(getLanguage());
|
||||
|
||||
const effectiveBaseUrl = baseUrl || DEFAULT_SERVER_URL;
|
||||
const appVersion = Constants.expoConfig?.version ?? "1.0.0";
|
||||
const languages = getSupportedLanguages();
|
||||
|
||||
function handleSignOut() {
|
||||
Alert.alert("Sign out", "Are you sure you want to sign out?", [
|
||||
@@ -66,6 +69,12 @@ export default function ProfileScreen() {
|
||||
});
|
||||
}
|
||||
|
||||
function openImprint() {
|
||||
Linking.openURL(`${effectiveBaseUrl}/imprint`).catch(() => {
|
||||
Alert.alert("Error", "Could not open the imprint page. Please try again.");
|
||||
});
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<View style={styles.center}>
|
||||
@@ -113,6 +122,39 @@ export default function ProfileScreen() {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Settings */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Settings</Text>
|
||||
<Text style={styles.settingLabel}>Language</Text>
|
||||
<View style={styles.languageGrid}>
|
||||
{languages.map((lang) => (
|
||||
<Pressable
|
||||
key={lang.code}
|
||||
style={[
|
||||
styles.languageChip,
|
||||
selectedLanguage === lang.code && styles.languageChipActive,
|
||||
]}
|
||||
onPress={() => {
|
||||
setLanguage(lang.code);
|
||||
setSelectedLanguage(lang.code);
|
||||
}}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={`Set language to ${lang.label}`}
|
||||
accessibilityState={{ selected: selectedLanguage === lang.code }}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.languageChipText,
|
||||
selectedLanguage === lang.code && styles.languageChipTextActive,
|
||||
]}
|
||||
>
|
||||
{lang.label}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Legal & Privacy */}
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Legal</Text>
|
||||
@@ -134,6 +176,15 @@ export default function ProfileScreen() {
|
||||
<Text style={styles.linkText}>Terms of Service</Text>
|
||||
<Text style={styles.linkChevron}>›</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[styles.linkRow, styles.linkRowLast]}
|
||||
onPress={openImprint}
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel="Imprint"
|
||||
>
|
||||
<Text style={styles.linkText}>Imprint</Text>
|
||||
<Text style={styles.linkChevron}>›</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Sign out */}
|
||||
@@ -264,6 +315,9 @@ const styles = StyleSheet.create({
|
||||
borderBottomColor: "#f3f4f6",
|
||||
minHeight: 44,
|
||||
},
|
||||
linkRowLast: {
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
linkText: {
|
||||
fontSize: 15,
|
||||
color: "#1e40af",
|
||||
@@ -305,4 +359,38 @@ const styles = StyleSheet.create({
|
||||
textAlign: "center",
|
||||
marginTop: 8,
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: 14,
|
||||
color: "#374151",
|
||||
fontWeight: "500",
|
||||
marginBottom: 10,
|
||||
},
|
||||
languageGrid: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
gap: 8,
|
||||
},
|
||||
languageChip: {
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#f3f4f6",
|
||||
borderWidth: 1,
|
||||
borderColor: "#e5e7eb",
|
||||
minHeight: 36,
|
||||
justifyContent: "center",
|
||||
},
|
||||
languageChipActive: {
|
||||
backgroundColor: "#dbeafe",
|
||||
borderColor: "#1e40af",
|
||||
},
|
||||
languageChipText: {
|
||||
fontSize: 13,
|
||||
color: "#6b7280",
|
||||
fontWeight: "500",
|
||||
},
|
||||
languageChipTextActive: {
|
||||
color: "#1e40af",
|
||||
fontWeight: "700",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -301,14 +301,16 @@ export default function UploadScreen() {
|
||||
mediaTypes: ["images"],
|
||||
quality: 0.9,
|
||||
allowsEditing: false,
|
||||
allowsMultipleSelection: true,
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets.length > 0) {
|
||||
const asset = result.assets[0];
|
||||
// Derive extension from MIME type so the filename matches the actual format
|
||||
const ext = asset.mimeType?.split("/")[1]?.replace("jpeg", "jpg") ?? "jpg";
|
||||
const filename = asset.fileName ?? `photo_${Date.now()}.${ext}`;
|
||||
await uploadFile(asset.uri, filename, asset.mimeType ?? "image/jpeg");
|
||||
for (const asset of result.assets) {
|
||||
// Derive extension from MIME type so the filename matches the actual format
|
||||
const ext = asset.mimeType?.split("/")[1]?.replace("jpeg", "jpg") ?? "jpg";
|
||||
const filename = asset.fileName ?? `photo_${Date.now()}_${Math.random().toString(36).slice(2, 6)}.${ext}`;
|
||||
await uploadFile(asset.uri, filename, asset.mimeType ?? "image/jpeg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
*/
|
||||
|
||||
import { useRouter } from "expo-router";
|
||||
import * as Linking from "expo-linking";
|
||||
import React from "react";
|
||||
import {
|
||||
Image,
|
||||
@@ -87,6 +88,36 @@ export default function WelcomeScreen() {
|
||||
<Text style={styles.hint}>
|
||||
Connect to your self-hosted or cloud DocuElevate server.
|
||||
</Text>
|
||||
|
||||
{/* Legal links – accessible pre-login for GDPR / Apple compliance */}
|
||||
<View style={styles.legalLinks}>
|
||||
<Pressable
|
||||
onPress={() => Linking.openURL("https://app.docuelevate.org/privacy")}
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel="Privacy Policy"
|
||||
style={styles.legalLinkButton}
|
||||
>
|
||||
<Text style={styles.legalLinkText}>Privacy Policy</Text>
|
||||
</Pressable>
|
||||
<Text style={styles.legalSeparator}>·</Text>
|
||||
<Pressable
|
||||
onPress={() => Linking.openURL("https://app.docuelevate.org/terms")}
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel="Terms of Service"
|
||||
style={styles.legalLinkButton}
|
||||
>
|
||||
<Text style={styles.legalLinkText}>Terms</Text>
|
||||
</Pressable>
|
||||
<Text style={styles.legalSeparator}>·</Text>
|
||||
<Pressable
|
||||
onPress={() => Linking.openURL("https://app.docuelevate.org/imprint")}
|
||||
accessibilityRole="link"
|
||||
accessibilityLabel="Imprint"
|
||||
style={styles.legalLinkButton}
|
||||
>
|
||||
<Text style={styles.legalLinkText}>Imprint</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
@@ -206,4 +237,26 @@ const styles = StyleSheet.create({
|
||||
color: "rgba(255,255,255,0.55)",
|
||||
textAlign: "center",
|
||||
},
|
||||
legalLinks: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
marginTop: 20,
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
legalLinkButton: {
|
||||
minHeight: 44,
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
legalLinkText: {
|
||||
fontSize: 12,
|
||||
color: "rgba(255,255,255,0.65)",
|
||||
textDecorationLine: "underline",
|
||||
},
|
||||
legalSeparator: {
|
||||
fontSize: 12,
|
||||
color: "rgba(255,255,255,0.45)",
|
||||
marginHorizontal: 4,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user