Fixes and tickets

2025-10-28 15:43:18 +01:00
parent 2599a25d77
commit d1be3c19a2
31 changed files with 6663 additions and 795 deletions
@@ -0,0 +1,189 @@
+import { useRouter } from 'expo-router';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import AppleSignInButton from '../../components/buttons/AppleSignInButton';
+import Button from '../../components/buttons/Button';
+import GoogleSignInButton from '../../components/buttons/GoogleSignInButton';
+import AppInput from '../../components/inputs/Input';
+import PublicScreenLayout from '../../components/layout/PublicScreenLayout';
+import useRegisterForm from '../../hooks/useRegisterForm';
+import Fonts from '../../styles/Fonts';
+import Palette from '../../styles/Palette';
+
+export default function RegisterScreen() {
+  const router = useRouter();
+  const {
+    email,
+    setEmail,
+    password,
+    setPassword,
+    confirmPassword,
+    setConfirmPassword,
+    handleSubmit,
+    signInWithGoogle,
+    signInWithApple,
+    isAppleSignInAvailable,
+    isLoading,
+  } = useRegisterForm();
+
+  const handleGoBack = () => {
+    if (router.canGoBack?.()) {
+      router.back();
+      return;
+    }
+    router.replace('/(public)/login');
+  };
+
+  return (
+    <PublicScreenLayout title="Inscription" bodyStyle={styles.body}>
+      <Text style={styles.heading}>Rejoignez Minuit</Text>
+      <Text style={styles.subheading}>
+        Créez votre compte en quelques secondes et profitez de l&apos;expérience
+        complète.
+      </Text>
+
+      <View style={styles.form}>
+        <AppInput
+          label="Email"
+          value={email}
+          setValue={setEmail}
+          placeholder="Email"
+          type="email"
+          containerStyle={styles.input}
+          textInputProps={{
+            autoCapitalize: 'none',
+            autoComplete: 'email',
+            textContentType: 'emailAddress',
+            name: 'email',
+          }}
+        />
+
+        <AppInput
+          label="Mot de passe"
+          value={password}
+          setValue={setPassword}
+          placeholder="Mot de passe"
+          type="password"
+          containerStyle={styles.input}
+          textInputProps={{
+            autoComplete: 'new-password',
+            textContentType: 'newPassword',
+            name: 'new-password',
+          }}
+        />
+
+        <AppInput
+          label="Confirmer le mot de passe"
+          value={confirmPassword}
+          setValue={setConfirmPassword}
+          placeholder="Confirmer le mot de passe"
+          type="password"
+          containerStyle={styles.input}
+          textInputProps={{
+            autoComplete: 'new-password',
+            textContentType: 'newPassword',
+            name: 'confirm-password',
+          }}
+        />
+
+        <Button
+          text="Créer mon compte"
+          onPress={handleSubmit}
+          contentContainerStyle={styles.primaryButton}
+        />
+
+        <View style={styles.socialSection}>
+          <View style={styles.socialDivider}>
+            <View style={styles.dividerLine} />
+            <Text style={styles.dividerText}>ou continuer avec</Text>
+            <View style={styles.dividerLine} />
+          </View>
+
+          <GoogleSignInButton
+            onPress={signInWithGoogle}
+            disabled={isLoading}
+            style={styles.socialButton}
+          />
+
+          {isAppleSignInAvailable ? (
+            <AppleSignInButton
+              onPress={signInWithApple}
+              disabled={isLoading}
+              style={styles.socialButton}
+            />
+          ) : null}
+        </View>
+
+        <Button
+          type="secondary"
+          text="Déjà inscrit ? Se connecter"
+          onPress={handleGoBack}
+          contentContainerStyle={styles.secondaryButton}
+        />
+      </View>
+    </PublicScreenLayout>
+  );
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: 24,
+    alignItems: 'center',
+  },
+  heading: {
+    fontSize: 28,
+    fontWeight: '700',
+    color: Palette.darkPurple,
+    textAlign: 'center',
+  },
+  subheading: {
+    ...Fonts.bodySmall,
+    color: 'rgba(15, 12, 20, 0.6)',
+    textAlign: 'center',
+  },
+  form: {
+    width: '100%',
+    maxWidth: 420,
+    gap: 16,
+  },
+  input: {
+    width: '100%',
+  },
+  primaryButton: {
+    marginTop: 8,
+  },
+  socialSection: {
+    marginTop: 4,
+    gap: 12,
+  },
+  socialDivider: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  dividerLine: {
+    flex: 1,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: 'rgba(15, 12, 20, 0.15)',
+  },
+  dividerText: {
+    ...Fonts.tinyBold,
+    textTransform: 'uppercase',
+    color: 'rgba(15, 12, 20, 0.45)',
+  },
+  socialButton: {
+    width: '100%',
+  },
+  hint: {
+    marginTop: 12,
+    ...Fonts.bodySmall,
+    textAlign: 'center',
+    color: 'rgba(15, 12, 20, 0.6)',
+  },
+  secondaryButton: {
+    marginTop: 12,
+  },
+});