regex & hit parade

src/screens/CreatePassword.js

@@ -1,27 +1,59 @@
-import { View, Text, Pressable } from "react-native";
-import React, { useState } from "react";
+import { useRoute } from "@react-navigation/native";
+import React, { useMemo, useState } from "react";
+import { Text, View } from "react-native";
 import { useGlobal } from "reactn";
-import Page from "../layouts/Page";
 import { background } from "../assets";
+import GradientButton from "../components/GradientButton";
+import { Input } from "../components/Input";
 import ItemContainer from "../components/ItemContainer/ItemContainer";
+import firebase, { usersRef } from "../config/firebase";
+import Page from "../layouts/Page";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
-import { Input } from "../components/Input";
-import GradientButton from "../components/GradientButton";
-import { navigate } from "../navigation/NavigationService";
-import { useRoute } from "@react-navigation/native";
-import firebase, { usersRef } from "../config/firebase";
-import { Routes } from "../navigation";
 
 const CreatePassword = () => {
   const route = useRoute();
   const email = route?.params?.email || "";
   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()
@@ -34,7 +66,7 @@ const CreatePassword = () => {
           createdAt: firebase.firestore.FieldValue.serverTimestamp(),
           updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
         },
-        { merge: true },
+        { merge: true }
       );
       setTooltip({ text: "Compte créé, continuons", type: "success" });
       navigate(Routes.CreatePseudo);
@@ -82,8 +114,19 @@ const CreatePassword = () => {
                 isBlur
                 type="password"
                 value={password}
-                setValue={setPassword}
+                setValue={handlePasswordChange}
               />
+              {passwordError ? (
+                <Text
+                  style={{
+                    fontSize: 12,
+                    color: Palette.red,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  {passwordError}
+                </Text>
+              ) : null}
             </View>
             <GradientButton
               title={loading ? "Création..." : "Suivant"}
@@ -92,7 +135,7 @@ const CreatePassword = () => {
                 alignSelf: "center",
               }}
               onPress={onCreateAccount}
-              disabled={loading || !email || !password}
+              disabled={loading || !email || !isPasswordValid}
             />
           </View>
         </ItemContainer>