user registration and login

2025-04-17 02:26:15 +01:00 · 2025-04-17 02:26:15 +01:00 · 1142fd7f33
commit 1142fd7f33
parent d31a84851f
5 changed files with 222 additions and 40 deletions
--- a/app/index.tsx
+++ b/app/index.tsx
@ -9,7 +9,7 @@ const OpeningScreen = () => {

  return (
    <View style={styles.container}>
-          <StatusBar style="auto" />
+          <StatusBar style="dark" />
      <Image source={require('../assets/images/logo.png')} style={styles.logo} />
      <Text style={styles.welcomeText}>Bienvenue chez Brix Café</Text>
      <Image source={require('../assets/images/coffee_cup.jpg')} style={styles.coffeeImage} />
--- a/app/screens/auth/OpeningScreen.tsx
+++ b/app/screens/auth/OpeningScreen.tsx
--- a/app/screens/auth/SignIn-Screen.tsx
+++ b/app/screens/auth/SignIn-Screen.tsx
@ -1,6 +1,6 @@
 import { useState } from "react";
 import {View,Text,TextInput,Pressable,StyleSheet,Image,Alert,TouchableOpacity,} from "react-native";
-import { Eye, EyeOff,ArrowLeft } from "lucide-react-native";
+import { Eye, EyeOff,ArrowLeft,Check } from "lucide-react-native";
 import { router } from "expo-router";
 import { signIn } from "../../../firebase/auth"; // Assure-toi que le chemin est correct
 import { Link } from "expo-router";
@ -62,13 +62,12 @@ const SignInScreen = () => {
      keyboardShouldPersistTaps="handled"  // Ensures that taps on the inputs won't dismiss the keyboard
    >
      <View style={styles.container}>
-        <TouchableOpacity
-          style={styles.backButton}
-          onPress={() => setStep(1)}
-        >
-          <ArrowLeft size={24} color="#666" />
-        </TouchableOpacity>
-
+          <TouchableOpacity
+                style={styles.backButton}
+                onPress={() => router.back()}
+                >
+            <ArrowLeft size={24} color="#666" />
+          </TouchableOpacity>
        <Image source={require('../../../assets/images/logo.png')} style={styles.logo}/>

        <Text style={styles.title}>Se connecter</Text>
@ -131,18 +130,22 @@ const SignInScreen = () => {
          </View>

          <View style={styles.optionsContainer}>
-            <Pressable
-              style={styles.rememberMe}
-              onPress={() => setForm({ ...form, rememberMe: !form.rememberMe })}
+          <Pressable
+            style={styles.rememberMe}
+            onPress={() => setForm({ ...form, rememberMe: !form.rememberMe })}
+          >
+            <View
+              style={[
+                styles.checkbox,
+                form.rememberMe && styles.checkboxChecked,
+              ]}
            >
-              <View
-                style={[
-                  styles.checkbox,
-                  form.rememberMe && styles.checkboxChecked,
-                ]}
-              />
-              <Text style={styles.rememberText}>Rester Connecté</Text>
-            </Pressable>
+              {form.rememberMe && <Check size={16} color="white" />}
+            </View>
+
+            <Text style={styles.rememberText}>Rester Connecté</Text>
+          </Pressable>
+
              <TouchableOpacity>            
                <Text style={styles.forgotText}>Mot de passe oublié?</Text>
              </TouchableOpacity>
--- a/app/screens/auth/SignUpScreen.tsx
+++ b/app/screens/auth/SignUpScreen.tsx
@ -1,13 +1,48 @@
 import React, { useState } from 'react';
-import {View,Text,TextInput,TouchableOpacity,ScrollView,StyleSheet,SafeAreaView,Image,Pressable,} from 'react-native';
+import {View,Text,TextInput,TouchableOpacity,ScrollView,StyleSheet,SafeAreaView,Image,Pressable,Modal} from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import { ArrowLeft, Eye, EyeOff, MapPin } from 'lucide-react-native';
+import { ArrowLeft, Eye, EyeOff, MapPin,Check } from 'lucide-react-native';
 import { doc, setDoc } from 'firebase/firestore';
 import { db } from '../../../firebase/config';
 import { signUp } from '../../../firebase/auth';
 import { Alert } from 'react-native';
 import { router } from "expo-router";

+const cities = [
+  'Ariana', 'Ben Arous', 'Bizerte', 'Béja', 'El Kef', 'Ettadhamen', 'Gabes',
+  'Gafsa', 'Jendouba', 'Kairouan', 'Kasserine', 'Kebili', 'Mahdia', 'Medenine',
+  'Monastir', 'Nabeul', 'Sfax', 'Siliana', 'Sidi Bouzid', 'Sousse', 'Tataouine',
+  'Tozeur', 'Tunis', 'Zaghouan'
+];
+
+const delegationsByGouvernorat: Record<string, string[]> = {
+  Ariana: ['Ariana Medina', 'Ettadhamen', 'Kalaat El Andalous', 'Mnihla', 'Raoued', 'Sidi Thabet', 'Soukra'],
+  Béja: ['Amdoun', 'Beja North', 'Beja South', 'Goubellat', 'Mejez El Bab', 'Nefza', 'Teboursouk', 'Testour', 'Thibar'],
+  'Ben Arous': ['Ben Arous', 'Boumhel', 'El Mourouj', 'Ezzahra', 'Fouchana', 'Hammam Chott', 'Hammam Lif', 'M\'Hamdia', 'Medina Jedida', 'Mégrine', 'Mornag', 'Rades'],
+  Bizerte: ['Bizerte Nord', 'Bizerte Sud', 'Joumine', 'El Alia', 'Ghar El Melh', 'Mateur', 'Menzel Bourguiba', 'Menzel Jemil', 'Ras Jebel', 'Sejnane', 'Tinja', 'Utique', 'Zarzouna','Manzel Abderrahmen','El Alia','Ghezala'],
+  Gabès: ['Gabès', 'El Hamma', 'Matmata', 'Mareth', 'Nouvelle Matmata', 'Chouchet'],
+  Gafsa: ['Gafsa', 'El Guettar', 'Mdhila', 'Redeyef', 'Metlaoui', 'Sidi Aich', 'Belkhir', 'Om Larayes'],
+  Jendouba: ['Jendouba', 'Ain Draham', 'Fernana', 'Ghardimaou', 'Tabarka', 'Balta Bou Aouane', 'Oued Meliz'],
+  Kairouan: ['Kairouan', 'Bou Hajla', 'Chebika', 'El Alaa', 'El Fahs', 'Haffouz', 'Nasrallah', 'Oueslatia', 'Sbiba', 'Sidi Alouane', 'Soliman', 'Thala'],
+  Kasserine: ['Kasserine', 'Foussana', 'Hassi El Ferid', 'Haidra', 'Sbeitla', 'Thala', 'Tounine', 'Sidi Bouali'],
+  Kébili: ['Kébili', 'Douz', 'Souk Lahad', 'El Faouar', 'Chbika'],
+  Kef: ['Kef', 'Dahmani', 'El Ksour', 'Kalaa Khasba', 'Nebeur', 'Sers', 'Tajerouine', 'Zouila'],
+  Mahdia: ['Mahdia', 'Bou Merdes', 'Chorbane', 'El Jem', 'Ksour Essef', 'Melloulèche', 'Rejiche', 'Sahline', 'Sidi Alouane'],
+  Manouba: ['Manouba', 'Borj El Amri', 'El Battan', 'Jedaida', 'Mornaguia', 'Tebourba'],
+  Medenine: ['Medenine', 'Ben Guerdane', 'Beni Khedache', 'Djerba', 'Zarzis', 'Ajim', 'Houmt Souk'],
+  Monastir: ['Monastir', 'Bekalta', 'Ksibet El Mediouni', 'Ksar Hellal', 'Menzel Harb', 'Sahline', 'Sayada', 'Téboulba'],
+  Nabeul: ['Nabeul', 'Hammamet', 'Kelibia', 'Korba', 'Menzel Temime', 'Takelsa', 'Soliman', 'Dar Chaâbane El Fehri', 'Bou Argoub'],
+  Sfax: ['Sfax', 'El Amra', 'El Hencha', 'El Ouardia', 'Kerkennah', 'Menzel Chaker', 'Skhira', 'Thyna'],
+  'Sidi Bouzid': ['Sidi Bouzid', 'Bir El Hafey', 'Menzel Bouzelfa', 'Meknassy', 'Regueb', 'Sidi Ali Ben Aoun', 'Sbiba'],
+  Siliana: ['Siliana', 'Bou Arada', 'Gaafour', 'Kesra', 'Makthar', 'Rouhia', 'Sidi Bou Rouis'],
+  Sousse: ['Sousse', 'Akouda', 'Enfidha', 'Hergla', 'Kalaa Sghira', 'Khezama', 'Msaken', 'Sidi Bou Ali', 'Sidi El Hani'],
+  Tataouine: ['Tataouine', 'Beni Khedache', 'Dhehiba', 'Ghomrassen', 'Ksar Ouled Soltane', 'Remada'],
+  Tozeur: ['Tozeur', 'Nefta', 'Degache', 'Chbika'],
+  Tunis: ['Tunis', 'Carthage', 'Le Bardo', 'La Goulette', 'La Marsa', 'Medina', 'El Omrane', 'El Menzah', 'Ettadhamen', 'El Kabaria', 'El Kram', 'Ezzahra', 'Fouchana', 'Hammam Chott', 'Hammam Linf', 'Mornag', 'Raoued', 'Sidi Thabet', 'Soukra','Boumhel', 'El Mourouj', 'Fouchana', 'Hammam Chott', 'Hammam Lif', 'M\'Hamdia', 'Medina Jedida', 'Mégrine'],
+  Zaghouan: ['Bir Mcherga', 'El Fahs', 'Nadhour', 'Saouaf', 'Zriba', 'Zaghouan']
+};
+
+


 export default function App() {
@ -30,6 +65,19 @@ export default function App() {
    fiscalId: '',
    acceptTerms: false,
  });
+  const [showCityPicker, setShowCityPicker] = useState(false);
+  const [showDelegationPicker, setShowDelegationPicker] = useState(false);
+
+  const handleCitySelect = (city: string) => {
+    setFormData(prev => ({ ...prev, city, delegation: '' }));
+    setShowCityPicker(false);
+  };
+  
+  const handleDelegationSelect = (delegation: string) => {
+    setFormData(prev => ({ ...prev, delegation }));
+    setShowDelegationPicker(false);
+  };
+  

  const handleInputChange = (name: string, value: string | boolean) => {
    setFormData(prev => ({
@ -38,6 +86,19 @@ export default function App() {
    }));
  };

+  const formatPhoneNumber = (phone: string) => {
+    const cleaned = phone.replace(/\D/g, "").slice(0, 8); // Garde que les chiffres (max 8)
+    const part1 = cleaned.slice(0, 2);
+    const part2 = cleaned.slice(2, 5);
+    const part3 = cleaned.slice(5, 8);
+    return [part1, part2, part3].filter(Boolean).join(" ");
+  };
+
+  const handlePhoneChange = (value: string) => {
+    const cleaned = value.replace(/\D/g, "").slice(0, 8); // que les chiffres, max 8
+    setFormData({ ...formData, phone: cleaned });
+  };  
+
  const handleNext = () => {
    setStep(2);
  };
@ -104,21 +165,30 @@ export default function App() {
      </View>

      <View style={styles.inputGroup}>
-        <Text style={styles.label}>Numéro de téléphone</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="+216 00 000 000"
-          keyboardType="phone-pad"
-          value={formData.phone}
-          onChangeText={(value) => handleInputChange('phone', value)}
+      <Text style={styles.label}>Numéro de téléphone</Text>
+      <View style={styles.phoneContainer}>
+        <Image
+          source={require('../../../assets/images/Flag_Tunisia.png')} // Remplace par le chemin de ton image de drapeau
+          style={styles.flag}
        />
+        <Text style={styles.prefix}>+216</Text>
+        <TextInput
+          style={styles.phoneNum}
+          placeholder="00 000 000"
+          keyboardType="phone-pad"
+          value={formatPhoneNumber(formData.phone)}
+          onChangeText={(value) => handlePhoneChange(value)}
+          maxLength={11}
+          />
      </View>
+    </View>

      <View style={styles.inputGroup}>
        <Text style={styles.label}>Mot de passe</Text>
        <View style={styles.passwordContainer}>
          <TextInput
            style={styles.passwordInput}
+            placeholder="Entrez votre mot de passe"
            secureTextEntry={!showPassword}
            value={formData.password}
            onChangeText={(value) => handleInputChange('password', value)}
@ -137,6 +207,7 @@ export default function App() {
        <View style={styles.passwordContainer}>
          <TextInput
            style={styles.passwordInput}
+            placeholder="Confirmez votre mot de passe"
            secureTextEntry={!showConfirmPassword}
            value={formData.confirmPassword}
            onChangeText={(value) => handleInputChange('confirmPassword', value)}
@ -190,9 +261,7 @@ export default function App() {
        <View style={styles.selectContainer}>
          <Pressable
            style={styles.select}
-            onPress={() => {
-              // Add city picker logic here
-            }}
+            onPress={() => setShowCityPicker(true)}
          >
            <Text style={styles.selectText}>
              {formData.city || 'Sélectionner une ville'}
@ -201,15 +270,62 @@ export default function App() {
          </Pressable>
        </View>
      </View>
+      <Modal
+        visible={showCityPicker}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={() => setShowCityPicker(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <Text style={styles.modalTitle}>Sélectionner une Ville</Text>
+            <ScrollView>
+              {cities.map((city, index) => (
+                <TouchableOpacity key={index} onPress={() => handleCitySelect(city)}>
+                  <Text style={styles.cityItem}>{city}</Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => setShowCityPicker(false)}
+            >
+              <Text style={styles.buttonText}>Fermer</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+      
+      <Modal
+        visible={showDelegationPicker}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={() => setShowDelegationPicker(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContainer}>
+            <Text style={styles.modalTitle}>Sélectionner une Délégation</Text>
+            <ScrollView>
+              {availableDelegations.map((del, index) => (
+                <TouchableOpacity key={index} onPress={() => handleDelegationSelect(del)}>
+                  <Text style={styles.cityItem}>{del}</Text>
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
+            <TouchableOpacity style={styles.closeButton} onPress={() => setShowDelegationPicker(false)} >
+              <Text style={styles.buttonText}>Fermer</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+

      <View style={styles.inputGroup}>
        <Text style={styles.label}>Délégation</Text>
        <View style={styles.selectContainer}>
          <Pressable
            style={styles.select}
-            onPress={() => {
-              // Add delegation picker logic here
-            }}
+            onPress={() => setShowDelegationPicker(true)}
          >
            <Text style={styles.selectText}>
              {formData.delegation || 'Sélectionner une délégation'}
@ -233,17 +349,23 @@ export default function App() {
        <Pressable
          style={[styles.checkbox, formData.acceptTerms && styles.checkboxChecked]}
          onPress={() => handleInputChange('acceptTerms', !formData.acceptTerms)}
-        />
+        >
+          {formData.acceptTerms && <Check size={16} color="white" />}
+        </Pressable>
+
        <Text style={styles.checkboxLabel}>
          J'accepte les conditions générales et la politique de confidentialité.
        </Text>
      </View>

+
      <TouchableOpacity style={styles.button} onPress={handleSubmit}>
        <Text style={styles.buttonText}>Valider</Text>
      </TouchableOpacity>
    </View>
  );
+  const availableDelegations = delegationsByGouvernorat[formData.city] || [];
+

  return (
    <SafeAreaView style={styles.container}>
@ -354,7 +476,7 @@ const styles = StyleSheet.create({
  },
  selectText: {
    fontSize: 16,
-    color: '#9ca3af',
+    color: '#000',
  },
  checkboxContainer: {
    flexDirection: 'row',
@ -365,14 +487,14 @@ const styles = StyleSheet.create({
    width: 20,
    height: 20,
    borderWidth: 2,
-    borderColor: '#d1d5db',
+    borderColor: "#B17741",
    borderRadius: 4,
    marginRight: 8,
    marginTop: 2,
  },
  checkboxChecked: {
-    backgroundColor: '#22C55E',
-    borderColor: '#22C55E',
+    backgroundColor: '#B17741',
+    borderColor: "#B17741",
  },
  checkboxLabel: {
    flex: 1,
@ -404,4 +526,61 @@ const styles = StyleSheet.create({
    fontSize: 14,
    color: '#B77729',
  },
+  modalOverlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContainer: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderRadius: 10,
+    width: '90%',
+    height: '80%'
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 12,
+  },
+  cityItem: {
+    fontSize: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#d1d5db',
+  },
+  closeButton: {
+    backgroundColor: '#B77729',
+    borderRadius: 8,
+    padding: 10,
+    alignItems: 'center',
+    marginTop: 12,
+  },
+  phoneContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 3,
+    borderWidth: 1,
+    borderColor: '#ddd',
+  },
+  flag: {
+    width: 18,
+    height: 12,
+    borderRadius: 2,
+    marginRight: 8,
+    marginLeft: 8,
+  },
+  prefix: {
+    fontSize: 16,
+    color: '#B77729',
+    marginRight: 5,
+  },
+  phoneNum:{
+    color: '#000',
+    fontSize: 16,
+    width: '100%',
+  }
 });
--- a/assets/images/Flag_Tunisia.png
+++ b/assets/images/Flag_Tunisia.png