add: reset password and basic auth mock service

src/app/auth/page.tsx

@@ -9,17 +9,22 @@ import StepEnterNumber from '@/features/auth/components/StepEnterNumber';
 import StepEnterOtp from '@/features/auth/components/StepEnterOtp';
 import { AUTH_PAGE_ELEMENT, AUTH_STEP } from '@/enums';
 import { useCountdown } from '@/hooks/useCountdown';
+import StepNewPassword from '@/features/auth/components/StepNewPassword';
+import { validatePhoneNumber } from '@/features/auth/actions/validatePhoneNumber';
+import { signupUser } from '@/features/auth/actions/signupUser';
 
 type Props = object
 
 function AuthIndex({ }: Props) {
     const [number, setNumber] = useState("");
     const [password, setPassword] = useState("");
+    const [passwordRepeat, setPasswordRepeat] = useState("");
     const [otp, setOtp] = useState("");
     const [showPassword, setShowPassword] = useState(false);
+    const [showPasswordRepeat, setShowPasswordRepeat] = useState(false);
     const [rememberMe, setRememberMe] = useState(false);
     const [step, setStep] = useState(AUTH_STEP.ENTER_NUMBER);
-    const { timerRunning, secondsLeft, restart } = useCountdown(step === AUTH_STEP.ENTER_OTP);
+    const { timerRunning, secondsLeft, restart, stop } = useCountdown(step === AUTH_STEP.ENTER_OTP);
 
     const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
 
@@ -29,17 +34,20 @@ function AuthIndex({ }: Props) {
         }
     }, [isAuthenticated])
 
-    const updateInput = (e: ChangeEvent<HTMLInputElement>) => {
-        if (e.target.id == "phone") {
+    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+        if (e.target.id == AUTH_PAGE_ELEMENT.INPUT_PHONE) {
             setNumber(() => e.target.value)
         }
-        else if (e.target.id == "password") {
+        else if (e.target.id == AUTH_PAGE_ELEMENT.INPUT_PASSWORD) {
             setPassword(() => e.target.value)
         }
-        else if (e.target.id == "rememberMe") {
+        else if (e.target.id == AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT) {
+            setPasswordRepeat(() => e.target.value)
+        }
+        else if (e.target.id == AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME) {
             setRememberMe((state) => !state)
         }
-        else if (e.target.id.startsWith("otp-data")) {
+        else if (e.target.id.startsWith(AUTH_PAGE_ELEMENT.INPUT_OTP)) {
             const index = +e.target.id.split('-')[2];
             const prev = otp.padEnd(6).split('');
             prev[index] = e.target.value;
@@ -48,15 +56,18 @@ function AuthIndex({ }: Props) {
         }
     }
 
-    const onClickEvent = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    const onClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.stopPropagation();
         const target = e.target as HTMLButtonElement;
 
         if (target.id === AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD) {
             setShowPassword((state) => !state);
         }
+        if (target.id === AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD) {
+            setShowPasswordRepeat((state) => !state);
+        }
         else if (target.id === AUTH_PAGE_ELEMENT.RESET_PASSWORD) {
-            setShowPassword((state) => !state);
+            setStep(() => AUTH_STEP.ENTER_OTP)
         }
         else if (target.id === AUTH_PAGE_ELEMENT.RESEND_OTP) {
             if(!timerRunning) {
@@ -65,12 +76,16 @@ function AuthIndex({ }: Props) {
         }
     };
 
-    const submit = async (e: FormEvent<HTMLFormElement>) => {
+    const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (step == AUTH_STEP.ENTER_NUMBER) {
-            setStep(AUTH_STEP.ENTER_PASSWORD)
+            if(await validatePhoneNumber(number)) {
+                setStep(AUTH_STEP.ENTER_PASSWORD)
+            } else {
+                setStep(AUTH_STEP.ENTER_OTP);
+            }
         }
-        if (step == AUTH_STEP.ENTER_PASSWORD) {
+        else if (step == AUTH_STEP.ENTER_PASSWORD) {
             if (await loginUser(number, password)) {
                 console.log("Logged in")
             }
@@ -78,17 +93,34 @@ function AuthIndex({ }: Props) {
                 console.log("Wrong credentials")
             }
         }
-        if (step == AUTH_STEP.ENTER_OTP) {
+        else if (step == AUTH_STEP.ENTER_OTP) {
+            stop();
+            if(await validatePhoneNumber(number)) {
+                setStep(AUTH_STEP.ENTER_RESET_PASSWORD)
+            } else {
+                setStep(AUTH_STEP.ENTER_NEW_PASSWORD)
+            }
+        }
+        else if (step == AUTH_STEP.ENTER_RESET_PASSWORD) {
+            console.log("Password changed")
             setStep(AUTH_STEP.ENTER_NUMBER)
         }
+        else if (step == AUTH_STEP.ENTER_NEW_PASSWORD) {
+            if(await signupUser(number, password)) {
+                console.log("Signed up")
+                redirect("/")
+            } else {
+                console.log("Could not signup")
+            }
+        }
     }
 
     if (step == AUTH_STEP.ENTER_NUMBER) {
         // First Step -> Enter number
         return (
             <StepEnterNumber
-                onChange={updateInput}
-                onSubmit={submit}
+                onChange={onChange}
+                onSubmit={onSubmit}
                 value={number}
             />
         )
@@ -97,9 +129,9 @@ function AuthIndex({ }: Props) {
     if (step == AUTH_STEP.ENTER_PASSWORD) {
         return (
             <StepEnterPassword
-                onChange={updateInput}
-                onClick={onClickEvent}
-                onSubmit={submit}
+                onChange={onChange}
+                onClick={onClick}
+                onSubmit={onSubmit}
                 value={password}
                 passwordVisible={showPassword}
                 rememberMe={rememberMe}
@@ -110,16 +142,45 @@ function AuthIndex({ }: Props) {
     if (step == AUTH_STEP.ENTER_OTP) {
         return (
             <StepEnterOtp 
-                onChange={updateInput}
-                onClick={onClickEvent}
+                onChange={onChange}
+                onClick={onClick}
                 phoneNumber={number}
-                onSubmit={submit}
+                onSubmit={onSubmit}
                 value={otp}
                 timerRunning={timerRunning}
                 secondsLeft={secondsLeft}
             />
         )
     }
+
+    if (step == AUTH_STEP.ENTER_NEW_PASSWORD) {
+        return (
+            <StepNewPassword
+                onChange={onChange}
+                onClick={onClick}
+                onSubmit={onSubmit}
+                value={password}
+                repeatValue={passwordRepeat}
+                passwordVisible={showPassword}
+                repeatPasswordVisible={showPasswordRepeat}
+            />
+        )
+    }
+
+    if (step == AUTH_STEP.ENTER_RESET_PASSWORD) {
+        return (
+            <StepNewPassword
+                reset
+                onChange={onChange}
+                onClick={onClick}
+                onSubmit={onSubmit}
+                value={password}
+                repeatValue={passwordRepeat}
+                passwordVisible={showPassword}
+                repeatPasswordVisible={showPasswordRepeat}
+            />
+        )
+    }
 }
 
 export default AuthIndex