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