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>) => {
+    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-        if (e.target.id == "phone") {
+        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) {
+            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}
+                onChange={onChange}
-                onSubmit={submit}
+                onSubmit={onSubmit}
                 value={number}
             />
         )
@@ -97,9 +129,9 @@ function AuthIndex({ }: Props) {
     if (step == AUTH_STEP.ENTER_PASSWORD) {
         return (
             <StepEnterPassword
-                onChange={updateInput}
+                onChange={onChange}
-                onClick={onClickEvent}
+                onClick={onClick}
-                onSubmit={submit}
+                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}
+                onChange={onChange}
-                onClick={onClickEvent}
+                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

src/components/button/PrimaryButton.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-type Props = { } & React.ButtonHTMLAttributes<HTMLButtonElement>;
+type Props = {} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-function PrimaryButton({children, ...rest}: Props) {
+function PrimaryButton({ children, className, ...rest }: Props) {
   return (
-    <button className='bg-primary w-full rounded-normal p-3 text-white font-bold text-sm' {...rest}>
+    <button className={`${className} bg-primary w-full rounded-normal p-3 text-white font-bold text-sm`} {...rest}>
-        { children }
+      {children}
     </button>
   )
 }

src/components/input/InputField.tsx

@@ -5,12 +5,13 @@ type Props = {
     labelText?: React.ReactNode;
     value?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    valid?: boolean
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id">;
 
 
-function InputField({ onChange, htmlFor, labelText, children, className, ...inputProps }: Props) {
+function InputField({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }: Props) {
     return (
-        <div className={`${className} h-11 inline-flex relative border border-[#E5E5E5] px-3 w-full rounded-normal group focus-within:border focus-within:border-primary`}>
+        <div className={`${className} ${valid ? 'border-[#E5E5E5]' : 'border-[red]'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border focus-within:border-primary`}>
             <label
                 className='absolute right-2 -top-3 px-2 bg-background text-[12px] text-foreground'
                 htmlFor={htmlFor}>

src/enums/authStep.ts

@@ -2,4 +2,6 @@ export enum AUTH_STEP {
     ENTER_NUMBER = 0,
     ENTER_PASSWORD = 1,
     ENTER_OTP = 2,
+    ENTER_NEW_PASSWORD = 3,
+    ENTER_RESET_PASSWORD = 4,
 }

src/enums/elementIds.ts

@@ -1,5 +1,11 @@
 export enum AUTH_PAGE_ELEMENT {
     TOGGLE_PASSWORD = "togglePassword",
+    TOGGLE_REPEAT_PASSWORD = "toggleRepeatPassword",
     RESET_PASSWORD = "resetPassword",
-    RESEND_OTP = "resendOtp"
+    RESEND_OTP = "resendOtp",
+    INPUT_PASSWORD = "password",
+    INPUT_REMEMBER_ME = "rememberMe",
+    INPUT_PASSWORD_REPEAT = "passwordRepeat",
+    INPUT_OTP = "opt",
+    INPUT_PHONE = "phoneNumber"
 }

src/features/auth/actions/loginUser.ts

@@ -1,25 +1,17 @@
-// features/auth/actions/loginUser.ts
 import { useAuthStore } from '@/zustand/userStore'
+import { login } from '@/lib/api/auth'
 
-// Simulated API login
+export async function loginUser(phoneNumber: string, password: string) {
-export async function loginUser(number: string, password: string) {
+  if (phoneNumber == "123" && password == "123") {
-  if (number == "123" && password == "123") {
+    let response = login({
-    // Simulate API call - replace with real one
+        phoneNumber,
-    const response = await new Promise<{ user: any }>((resolve) =>
+        password,
-      setTimeout(() => {
-        resolve({
-          user: {
-            id: '123',
-            name: 'John Doe',
-            number,
-            token: 'mock-jwt-token',
-          },
       })
-      }, 1000)
-    )
 
+    {
       const { login } = useAuthStore.getState()
       login(response.user)
+    }
     return true;
   }
 

src/features/auth/actions/signupUser.ts

@@ -0,0 +1,19 @@
+import { useAuthStore } from '@/zustand/userStore'
+import { signup } from '@/lib/api/auth'
+
+export async function signupUser(phoneNumber: string, password: string) {
+  if (phoneNumber == "1234" && password == "1234") {
+    let response = signup({
+        phoneNumber,
+        password,
+      })
+
+    {
+      const { login } = useAuthStore.getState()
+      login(response.user)
+    }
+    return true;
+  }
+
+  return false;
+}

src/features/auth/actions/validatePhoneNumber.ts

@@ -0,0 +1,10 @@
+import { checkUserExists } from '@/lib/api/auth'
+
+export async function validatePhoneNumber(phoneNumber: string): Promise<boolean> {
+  try {
+    return await checkUserExists(phoneNumber)
+  } catch (e) {
+    console.error(e)
+    return false
+  }
+}

src/features/auth/components/StepEnterNumber.tsx

@@ -1,5 +1,6 @@
 import PrimaryButton from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
+import { AUTH_PAGE_ELEMENT } from '@/enums';
 import React from 'react'
 
 type Props = {
@@ -19,7 +20,7 @@ function StepEnterNumber({ onSubmit, onChange, value }: Props) {
                 </div>
                 <InputField
                     className='mt-10'
-                    htmlFor='phone'
+                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
                     labelText='شماره همراه'
                     value={value}
                     placeholder='09120000000'

src/features/auth/components/StepEnterOtp.tsx

@@ -1,6 +1,6 @@
 import PrimaryButton from '@/components/button/PrimaryButton';
 import OTPInputField from '@/components/input/MultiInputField';
-import { AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
+import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/enums';
 import React from 'react'
 
 type Props = {
@@ -27,7 +27,7 @@ function StepEnterOtp({ onSubmit, onChange, onClick, value, phoneNumber, timerRu
                 <OTPInputField
                     className='mt-10'
                     maxLength={6}
-                    htmlFor='otp'
+                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_OTP}
                     labelText=''
                     value={value}
                     placeholder=''

src/features/auth/components/StepEnterPassword.tsx

@@ -24,7 +24,7 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
                 </div>
                 <InputField
                     className='mt-10'
-                    htmlFor='password'
+                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
                     labelText='کلمه عبور'
                     value={value}
                     placeholder=''
@@ -39,8 +39,8 @@ function StepEnterPassword({ onSubmit, onChange, onClick, value, passwordVisible
 
                     <div className='inline-flex justify-between items-center'>
                         {/* TODO: customize checkbox */}
-                        <label htmlFor='rememberMe' className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label>
+                        <label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label>
-                        <input id='rememberMe' className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} />            </div>
+                        <input id={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} />            </div>
                 </div>
             </div>
             <PrimaryButton type='submit'>ورود به منو</PrimaryButton>

src/features/auth/components/StepNewPassword.tsx

@@ -0,0 +1,60 @@
+import PrimaryButton from '@/components/button/PrimaryButton';
+import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon';
+import InputField from '@/components/input/InputField';
+import { AUTH_PAGE_ELEMENT } from '@/enums';
+import React from 'react'
+
+type Props = {
+    onSubmit: React.FormEventHandler<HTMLFormElement> | undefined;
+    onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
+    onClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    value: string;
+    repeatValue: string;
+    reset?: boolean;
+    passwordVisible: boolean;
+    repeatPasswordVisible: boolean;
+}
+
+function StepNewPassword({ reset = false, onSubmit, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
+    return (
+        <form onSubmit={onSubmit} className='p-6 h-full flex flex-col justify-between'>
+            <div className='block'>
+                <img src='/assets/images/login-banner.png' />
+                <div className='pt-4' dir='rtl'>
+                    <h6 className='text-lg font-bold'>
+                        { reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور" }
+                    </h6>
+                    <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
+                </div>
+                <InputField
+                    className='mt-10'
+                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
+                    labelText='کلمه عبور'
+                    value={value}
+                    placeholder=''
+                    onChange={onChange}
+                    type={passwordVisible ? 'text' : 'password'}>
+                    <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_PASSWORD} type='button' onClick={onClick}>
+                        <EyeToggleIcon slash={passwordVisible} className="pointer-events-none" />
+                    </button>
+                </InputField>
+                <InputField
+                    valid={value === repeatValue}
+                    className='mt-6'
+                    htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
+                    labelText='تکرار کلمه عبور'
+                    value={repeatValue}
+                    placeholder=''
+                    onChange={onChange}
+                    type={repeatPasswordVisible ? 'text' : 'password'}>
+                    <button className='ps-3' id={AUTH_PAGE_ELEMENT.TOGGLE_REPEAT_PASSWORD} type='button' onClick={onClick}>
+                        <EyeToggleIcon slash={repeatPasswordVisible} className="pointer-events-none" />
+                    </button>
+                </InputField>
+            </div>
+            <PrimaryButton type='submit'>ورود</PrimaryButton>
+        </form>
+    )
+}
+
+export default StepNewPassword

src/lib/api/auth.ts

@@ -0,0 +1,41 @@
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.example.com'
+
+export async function checkUserExists(phoneNumber: string): Promise<boolean> {
+    const res = phoneNumber === "123";
+    const data = { status: 200, result: { exists: res } }
+    return data.result.exists
+}
+
+export async function signup(userData: {
+    phoneNumber: string,
+    password: string
+}) {
+    const res = userData.phoneNumber === "123" && userData.password === "123";
+    const data = { sucess: res }
+    return {
+        data,
+        user: {
+            id: '123',
+            name: 'John Doe',
+            number: userData.phoneNumber,
+            token: 'mock-jwt-token',
+        }
+    }
+}
+
+export async function login(credentials: {
+    phoneNumber: string,
+    password: string
+}) {
+    const res = credentials.phoneNumber === "1234" && credentials.password === "1234";
+    const data = { sucess: res }
+    return {
+        data,
+        user: {
+            id: '1234',
+            name: 'Foo bar',
+            number: credentials.phoneNumber,
+            token: 'mock-jwt-token',
+        }
+    }
+}