musicland/src/screens/CreatePassword.js

import { useRoute } from "@react-navigation/native";
import React, { useMemo, useState } from "react";
import { Text, View } from "react-native";
import { useGlobal } from "reactn";
import { background } from "../assets";
import GradientButton from "../components/GradientButton";
import { Input } from "../components/Input";
import ItemContainer from "../components/ItemContainer/ItemContainer";
import { handleFirebaseError } from "../actions/signupActions";
import firebase, { usersRef } from "../config/firebase";
import Page from "../layouts/Page";
import { isWeb } from "../hooks/useLayoutType";
import { Routes } from "../navigation";
import { navigate } from "../navigation/NavigationService";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";

const CreatePassword = () => {
  const route = useRoute();
  const email = route?.params?.email || "";
  const firstName = route?.params?.firstName || "";
  const lastName = route?.params?.lastName || "";
  const city = route?.params?.city || "";
  const country = route?.params?.country || null;
  const preferredLanguage = route?.params?.preferredLanguage || null;
  const [password, setPassword] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [loading, setLoading] = useState(false);
  const [, setTooltip] = useGlobal("_tooltip");

  const passwordRegex = useMemo(
    () => /^(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9]).{8,}$/,
    []
  );

  const handlePasswordChange = (text) => {
    setPassword(text);
    if (!text) {
      setPasswordError("");
      return;
    }

    if (!passwordRegex.test(text)) {
      setPasswordError(
        "Ton mot de passe doit contenir 8 caractères, une majuscule, une minuscule et un caractère spécial."
      );
    } else {
      setPasswordError("");
    }
  };

  const isPasswordValid = passwordRegex.test(password);

  const onCreateAccount = async () => {
    try {
      if (!isPasswordValid) {
        setTooltip({
          text: "Ton mot de passe doit contenir 8 caractères, une majuscule, une minuscule et un caractère spécial.",
          type: "error",
        });
        return;
      }

      setLoading(true);
      const cred = await firebase
        .auth()
        .createUserWithEmailAndPassword(email.trim(), password);
      const uid = cred?.user?.uid || firebase.auth().currentUser?.uid;
      if (!uid) throw new Error("Création de compte échouée");
      const trimmedFirstName =
        typeof firstName === "string" ? firstName.trim() : "";
      const trimmedLastName =
        typeof lastName === "string" ? lastName.trim() : "";
      const trimmedCity = typeof city === "string" ? city.trim() : "";
      await usersRef.doc(uid).set(
        {
          email: email.trim(),
          ...(trimmedFirstName ? { firstName: trimmedFirstName } : {}),
          ...(trimmedLastName ? { lastName: trimmedLastName } : {}),
          ...(trimmedCity ? { city: trimmedCity } : {}),
          ...(preferredLanguage ? { preferredLanguage } : {}),
          ...(country?.code ? { countryCode: country.code } : {}),
          ...(country?.name ? { countryName: country.name } : {}),
          createdAt: firebase.firestore.FieldValue.serverTimestamp(),
          updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
        },
        { merge: true }
      );
      setTooltip({ text: "Compte créé, continuons", type: "success" });
      navigate(Routes.BottomTab);
    } catch (e) {
      console.log("Register error", e?.message);
      const message =
        e?.code && e.code.startsWith("auth/")
          ? handleFirebaseError(e.code)
          : e?.message || "Création impossible";
      setTooltip({ text: message, type: "error" });
    } finally {
      setLoading(false);
    }
  };

  return (
    <Page
      width={isWeb ? 600 : null}
      backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
      headerType="NAVIGATION"
      title="Inscription"
    >
      <View style={{ flex: 1, paddingTop: 20 }}>
        <ItemContainer height={300} disableKeyboardHeight>
          <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
            <View style={{ gap: 16 }}>
              <View style={{ gap: 2 }}>
                <Text
                  style={{
                    fontSize: 22,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterSemiBold,
                  }}
                >
                  Choisis un mot de passe{"\n"}sécurisé
                </Text>
                <Text
                  style={{
                    fontSize: 14,
                    color: Palette.gray,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  Utilise au moins 8 caractères pour sécuriser ton compte.
                </Text>
              </View>
              <Input
                placeholder="Mot de passe"
                label="Mot de passe"
                isBlur
                type="password"
                value={password}
                setValue={handlePasswordChange}
              />
              {passwordError ? (
                <Text
                  style={{
                    fontSize: 12,
                    color: Palette.red,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  {passwordError}
                </Text>
              ) : null}
            </View>
            <GradientButton
              title={loading ? "Création..." : "Suivant"}
              containerStyle={{
                width: "80%",
                alignSelf: "center",
              }}
              onPress={onCreateAccount}
              disabled={loading || !email || !isPasswordValid}
            />
          </View>
        </ItemContainer>
      </View>
    </Page>
  );
};

export default CreatePassword;