add backend auth

2026-07-14 09:47:55 +02:00
parent 6761141fed
commit 76ceafa56c
28 changed files with 1345 additions and 64 deletions
@@ -30,9 +30,11 @@ type FileEditRouteParams = {

 interface FileEditItemProps {
  fileId: string;
+  selected: boolean;
+  onPress: () => void;
 }

-function FileEditItem({ fileId }: FileEditItemProps) {
+function FileEditItem({ fileId, selected, onPress }: FileEditItemProps) {
  const { data: fileData, isLoading: fileLoading } = useFile(fileId);
  const { data: imageData, isLoading: imageLoading } = useFileImage(fileId);
  const file = fileData as any;
@@ -41,14 +43,14 @@ function FileEditItem({ fileId }: FileEditItemProps) {

  if (isLoading) {
    return (
-      <View style={[styles.gridItem, styles.gridItemLoading]}>
+      <TouchableOpacity style={[styles.gridItem, styles.gridItemLoading]} onPress={onPress} activeOpacity={0.7}>
        <ActivityIndicator size="small" color="#1976D2" />
-      </View>
+      </TouchableOpacity>
    );
  }

  return (
-    <View style={styles.gridItem}>
+    <TouchableOpacity style={styles.gridItem} onPress={onPress} activeOpacity={0.7}>
      {uri && file?.mimeType?.startsWith('image/') ? (
        <Image source={{ uri }} style={styles.thumb} />
      ) : (
@@ -58,7 +60,14 @@ function FileEditItem({ fileId }: FileEditItemProps) {
          size={ITEM_SIZE}
        />
      )}
-    </View>
+      {selected && (
+        <View style={styles.selectedOverlay}>
+          <View style={styles.checkCircle}>
+            <MaterialIcons name="check" size={18} color="#fff" />
+          </View>
+        </View>
+      )}
+    </TouchableOpacity>
  );
 }

@@ -74,6 +83,26 @@ export function FileEditScreen() {
  const [tagInput, setTagInput] = useState('');
  const [pendingTags, setPendingTags] = useState<string[]>([]);
  const [uploading, setUploading] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const hasSelection = selectedIds.size > 0;
+  const targetIds = hasSelection ? Array.from(selectedIds) : fileIds;
+
+  const toggleSelection = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const toggleSelectAll = useCallback(() => {
+    setSelectedIds((prev) => {
+      if (prev.size === fileIds.length) return new Set();
+      return new Set(fileIds);
+    });
+  }, [fileIds]);

  const handleAddTag = () => {
    const tag = tagInput.trim().toLowerCase();
@@ -88,21 +117,21 @@ export function FileEditScreen() {

  const handleApplyTags = useCallback(async () => {
    if (pendingTags.length === 0) return;
-    for (const fileId of fileIds) {
+    for (const fileId of targetIds) {
      await addTags.mutateAsync({ fileId, tags: pendingTags });
    }
    Alert.alert('Succès', `${pendingTags.length} tag${pendingTags.length > 1 ? 's' : ''} ajouté${pendingTags.length > 1 ? 's' : ''}`);
    setPendingTags([]);
-  }, [pendingTags, fileIds, addTags]);
+  }, [pendingTags, targetIds, addTags]);

  const handleGeneratePdf = useCallback(async () => {
-    if (fileIds.length === 0) return;
+    if (targetIds.length === 0) return;

    setUploading(true);
    try {
      const imageUris: { uri: string }[] = [];

-      for (const fileId of fileIds) {
+      for (const fileId of targetIds) {
        const response = await fetch(`${process.env.EXPO_PUBLIC_API_BASE_URL || 'http://192.168.1.17:8080/api/v1'}/files/${fileId}`);
        const data = await response.json();
        const url = data?.data?.url;
@@ -152,17 +181,26 @@ export function FileEditScreen() {
    } finally {
      setUploading(false);
    }
-  }, [fileIds, generatePdf, upload, navigation]);
+  }, [targetIds, generatePdf, upload, navigation]);

  const isLoading = generating || uploading;

  return (
    <View style={styles.container}>
      <View style={styles.header}>
-        <Text style={styles.title}>Édition</Text>
-        <Text style={styles.subtitle}>
-          {fileIds.length} fichier{fileIds.length > 1 ? 's' : ''} sélectionné{fileIds.length > 1 ? 's' : ''}
-        </Text>
+        <View style={styles.headerRow}>
+          <View>
+            <Text style={styles.title}>Édition</Text>
+            <Text style={styles.subtitle}>
+              {hasSelection
+                ? `${selectedIds.size} sélectionné${selectedIds.size > 1 ? 's' : ''} / ${fileIds.length}`
+                : `${fileIds.length} fichier${fileIds.length > 1 ? 's' : ''}`}
+            </Text>
+          </View>
+          <TouchableOpacity style={styles.selectAllBtn} onPress={toggleSelectAll}>
+            <Text style={styles.selectAllText}>{hasSelection && selectedIds.size === fileIds.length ? 'Tout' : 'Tout'}</Text>
+          </TouchableOpacity>
+        </View>
      </View>

      <FlatList
@@ -171,7 +209,13 @@ export function FileEditScreen() {
        keyExtractor={(item) => item}
        contentContainerStyle={styles.grid}
        columnWrapperStyle={styles.gridRow}
-        renderItem={({ item }) => <FileEditItem fileId={item} />}
+        renderItem={({ item }) => (
+          <FileEditItem
+            fileId={item}
+            selected={hasSelection ? selectedIds.has(item) : true}
+            onPress={() => toggleSelection(item)}
+          />
+        )}
      />

      <View style={styles.tagSection}>
@@ -243,6 +287,11 @@ const styles = StyleSheet.create({
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
  title: {
    fontSize: 20,
    fontWeight: '700',
@@ -252,6 +301,17 @@ const styles = StyleSheet.create({
    fontSize: 14,
    color: '#666',
  },
+  selectAllBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+    backgroundColor: '#E3F2FD',
+  },
+  selectAllText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#1976D2',
+  },
  grid: {
    padding: 16,
  },
@@ -270,6 +330,24 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    alignItems: 'center',
  },
+  selectedOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end',
+    padding: 4,
+  },
+  checkCircle: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#1976D2',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
  thumb: {
    width: '100%',
    height: '100%',
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  ActivityIndicator,
+} from 'react-native';
+import { useAuth } from '../contexts/AuthContext';
+
+export function LoginScreen({ navigation }: any) {
+  const { login } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleLogin() {
+    if (!username.trim() || !password) {
+      Alert.alert('Erreur', 'Veuillez remplir tous les champs');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await login(username.trim(), password);
+    } catch (error: any) {
+      Alert.alert('Erreur', error.message || 'Connexion échouée');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <View style={styles.inner}>
+        <Text style={styles.title}>Dot.</Text>
+        <Text style={styles.subtitle}>Connectez-vous à votre compte</Text>
+
+        <TextInput
+          style={styles.input}
+          placeholder="Nom d'utilisateur"
+          value={username}
+          onChangeText={setUsername}
+          autoCapitalize="none"
+          autoCorrect={false}
+          editable={!loading}
+        />
+
+        <TextInput
+          style={styles.input}
+          placeholder="Mot de passe"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+          editable={!loading}
+        />
+
+        <TouchableOpacity
+          style={[styles.button, loading && styles.buttonDisabled]}
+          onPress={handleLogin}
+          disabled={loading}
+        >
+          {loading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>Se connecter</Text>
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.linkButton}
+          onPress={() => navigation.navigate('Register')}
+          disabled={loading}
+        >
+          <Text style={styles.linkText}>Pas de compte ? S'inscrire</Text>
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  inner: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 32,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    padding: 16,
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  button: {
+    backgroundColor: '#000',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  linkButton: {
+    alignItems: 'center',
+  },
+  linkText: {
+    color: '#000',
+    fontSize: 14,
+  },
+});
@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  ActivityIndicator,
+} from 'react-native';
+import { useAuth } from '../contexts/AuthContext';
+
+export function RegisterScreen({ navigation }: any) {
+  const { register } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleRegister() {
+    if (!username.trim() || !password || !confirmPassword) {
+      Alert.alert('Erreur', 'Veuillez remplir tous les champs');
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      Alert.alert('Erreur', 'Les mots de passe ne correspondent pas');
+      return;
+    }
+
+    if (password.length < 8) {
+      Alert.alert('Erreur', 'Le mot de passe doit contenir au moins 8 caractères');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await register(username.trim(), password);
+    } catch (error: any) {
+      Alert.alert('Erreur', error.message || "Inscription échouée");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <View style={styles.inner}>
+        <Text style={styles.title}>Dot.</Text>
+        <Text style={styles.subtitle}>Créez votre compte</Text>
+
+        <TextInput
+          style={styles.input}
+          placeholder="Nom d'utilisateur"
+          value={username}
+          onChangeText={setUsername}
+          autoCapitalize="none"
+          autoCorrect={false}
+          editable={!loading}
+        />
+
+        <TextInput
+          style={styles.input}
+          placeholder="Mot de passe"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+          editable={!loading}
+        />
+
+        <TextInput
+          style={styles.input}
+          placeholder="Confirmer le mot de passe"
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          secureTextEntry
+          editable={!loading}
+        />
+
+        <TouchableOpacity
+          style={[styles.button, loading && styles.buttonDisabled]}
+          onPress={handleRegister}
+          disabled={loading}
+        >
+          {loading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>S'inscrire</Text>
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={styles.linkButton}
+          onPress={() => navigation.navigate('Login')}
+          disabled={loading}
+        >
+          <Text style={styles.linkText}>Déjà un compte ? Se connecter</Text>
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  inner: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    marginBottom: 32,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    padding: 16,
+    fontSize: 16,
+    marginBottom: 16,
+  },
+  button: {
+    backgroundColor: '#000',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  linkButton: {
+    alignItems: 'center',
+  },
+  linkText: {
+    color: '#000',
+    fontSize: 14,
+  },
+});