musicland/starter/register.js

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,
  },
});