feat: add input validation error

src/app/auth/page.tsx

@@ -20,6 +20,7 @@ import AuthFormWrapper from '@/features/auth/components/AuthFormWrapper';
 type Props = object
 
 function AuthIndex({ }: Props) {
+    const [isPending, setIsPending] = useState(false);
     const [number, setNumber] = useState("");
     const [password, setPassword] = useState("");
     const [passwordRepeat, setPasswordRepeat] = useState("");
@@ -85,7 +86,7 @@ function AuthIndex({ }: Props) {
         }
     }
 
-    const onClick = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    const onClick = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLInputElement, MouseEvent>) => {
         e.stopPropagation();
         const target = e.target as HTMLButtonElement;
 
@@ -112,6 +113,7 @@ function AuthIndex({ }: Props) {
 
     const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+        setIsPending(true);
         if (step == AUTH_STEP.ENTER_NUMBER) {
 
             if (true) {
@@ -170,18 +172,19 @@ function AuthIndex({ }: Props) {
                 console.log("Could not signup: ", e)
             }
         }
+        setIsPending(false);
     }
 
     const stepMap = {
-        [AUTH_STEP.ENTER_NUMBER]: <StepEnterNumber onChange={onChange} value={number} />,
-        [AUTH_STEP.ENTER_PASSWORD]: <StepEnterPassword onChange={onChange} onClick={onClick} value={password} passwordVisible={showPassword} rememberMe={rememberMe} />,
-        [AUTH_STEP.ENTER_OTP]: <StepEnterOtp onChange={onChange} onClick={onClick} phoneNumber={number} value={otp} timerRunning={timerRunning} secondsLeft={secondsLeft} />,
-        [AUTH_STEP.ENTER_NEW_PASSWORD]: <StepNewPassword onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
-        [AUTH_STEP.ENTER_RESET_PASSWORD]: <StepNewPassword reset onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
+        [AUTH_STEP.ENTER_NUMBER]: <StepEnterNumber disabled={isPending} onChange={onChange} value={number} />,
+        [AUTH_STEP.ENTER_PASSWORD]: <StepEnterPassword disabled={isPending} onChange={onChange} onClick={onClick} value={password} passwordVisible={showPassword} rememberMe={rememberMe} />,
+        [AUTH_STEP.ENTER_OTP]: <StepEnterOtp disabled={isPending} onChange={onChange} onClick={onClick} phoneNumber={number} value={otp} timerRunning={timerRunning} secondsLeft={secondsLeft} />,
+        [AUTH_STEP.ENTER_NEW_PASSWORD]: <StepNewPassword disabled={isPending} onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
+        [AUTH_STEP.ENTER_RESET_PASSWORD]: <StepNewPassword isReset disabled={isPending} onChange={onChange} onClick={onClick} value={password} repeatValue={passwordRepeat} passwordVisible={showPassword} repeatPasswordVisible={showPasswordRepeat} />,
     }
 
     return (
-        <AuthFormWrapper onSubmit={onSubmit}>
+        <AuthFormWrapper isPending={isPending} onSubmit={onSubmit}>
             {stepMap[step] || 'say what now?'}
         </AuthFormWrapper>
     )

src/app/globals.css

@@ -11,7 +11,8 @@
   --color-invalid: red;
   --color-valid: #439C46;
   --color-foreground: #333333;
-  --color-disabled: #FFFFFF61;
+  --color-disabled: #E7E7E7;
+  --color-disabled-text: #8C90A3;
   --radius-normal: 10px;
   --text-sm2: 13px;
   --radius-container: 24px;