chore: Improve OTP input

packages/frontend/src/components/auth/Auth.tsx

@@ -1,4 +1,5 @@
 import { FC, useMemo } from "react";
+import { Spinner } from "@alphaday/ui-kit";
 import { EmailInput } from "@alphaday/ui-kit/src/mobile-components/auth/EmailInput";
 import { EAuthMethod, EAuthState, TUserAccess } from "src/api/types";
 import { validateEmail } from "src/api/utils/accountUtils";
@@ -13,6 +14,7 @@ export interface AuthProps {
     handleSSOCallback: (provider: EAuthMethod) => void;
     handleEmailSubmit: () => void;
     handleEmailChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isVerifyingOTP?: boolean;
 }
 const ENABLE_APPLE_AUTH = false;
 const OTP_INPUT_LENGTH = 6;
@@ -24,23 +26,30 @@ export const Auth: FC<AuthProps> = ({
     handleSSOCallback,
     handleEmailSubmit,
     handleEmailChange,
+    isVerifyingOTP,
 }) => {
     const isValidEmail = useMemo(() => validateEmail(email), [email]);
     return authState.status === EAuthState.VerifyingEmail ? (
         <div className="flex flex-col justify-start p-5">
-            <p className="text-primary text-sm mb-0 whitespace-normal">
+            <p className="text-primary mb-0 whitespace-normal">
                 Enter the 6 digit verification code we sent to{" "}
             </p>
             <p className="fontGroup-highlight !font-bold text-primary">
                 {email}
             </p>
 
             <div className="max-w-screen-single-col flex justify-between gap-2.5 py-4">
-                <OTPInput
-                    length={OTP_INPUT_LENGTH}
-                    autoFocus
-                    onChangeOTP={handleOtpSubmit}
-                />
+                {isVerifyingOTP ? (
+                    <div className="w-full flex justify-center mt-2 mb-4">
+                        <Spinner />
+                    </div>
+                ) : (
+                    <OTPInput
+                        length={OTP_INPUT_LENGTH}
+                        autoFocus
+                        onChangeOTP={handleOtpSubmit}
+                    />
+                )}
             </div>
             <div className="text-primary text-sm">
                 <div>Didn&apos;t get a verification code?</div>

packages/frontend/src/components/auth/OtpInput.tsx

@@ -209,9 +209,12 @@ export function OTPInput(props: IOTPInputProps) {
                 });
                 setOTPValues(updatedOTPValues);
                 setActiveInput(Math.min(nextFocusIndex + 1, length - 1));
+                if (updatedOTPValues.length === length) {
+                    handleOtpChange(updatedOTPValues);
+                }
             }
         },
-        [activeInput, getRightValue, length, otpValues]
+        [activeInput, getRightValue, handleOtpChange, length, otpValues]
     );
 
     return (

packages/frontend/src/containers/dialogs/AuthContainer.tsx

@@ -12,6 +12,7 @@ import AuthModule from "src/components/auth/AuthModule";
 const AuthContainer = () => {
     const [email, setEmail] = useState("");
     const dispatch = useAppDispatch();
+    const [verifyingOTP, setVerifyingOTP] = useState(false);
     const { authState, resetAuthState, requestCode, ssoLogin, verifyToken } =
         useAuth();
 
@@ -43,12 +44,15 @@ const AuthContainer = () => {
 
     const handleOtpSubmit = useCallback(
         (otp: string) => {
+            setVerifyingOTP(true);
             verifyToken(email, otp)
                 .then(() => {
                     toast("Successfully verified email");
+                    setVerifyingOTP(false);
                 })
                 .catch(() => {
                     toast("We couldn't verify your email. Please try again.");
+                    setVerifyingOTP(false);
                     Logger.error("Failed to verify OTP", otp);
                 });
         },
@@ -86,7 +90,7 @@ const AuthContainer = () => {
                 authState.status === EAuthState.SelectingMethod
             }
             useKeyPress={useKeyPress}
-            closeButtonProps={{ className: "border-0" }}
+            closeButtonProps={{ className: "border-0 [&_svg]:w-3 [&_svg]:h-3" }}
             onClose={resetAuthState}
         >
             <AuthModule
@@ -96,6 +100,7 @@ const AuthContainer = () => {
                 handleSSOCallback={handleSSOCallback}
                 handleEmailSubmit={handleEmailSubmit}
                 handleEmailChange={handleEmailChange}
+                isVerifyingOTP={verifyingOTP}
             />
         </Dialog>
     );

packages/ui-kit/src/mobile-components/auth/EmailInput.tsx

@@ -15,7 +15,7 @@ export const EmailInput: FC<IEmailInputProps> = ({
     return (
         <div className="mb-5">
             <p className="flex flex-col mb-5">
-                <span className="text-muted py-3">
+                <span className="text-muted pb-3">
                     Enter your email address to get started
                 </span>
                 <input