add: reset password and basic auth mock service

2025-07-01 00:27:16 +03:30
parent 2fc5b28925
commit a81659ef6e
13 changed files with 245 additions and 52 deletions
@@ -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