From cef7947f498c48afd567779469a215ba813d54c4 Mon Sep 17 00:00:00 2001
From: Dami-18 <damiyagondha@gmail.com>
Date: Sat, 13 Jul 2024 22:31:47 +0530
Subject: [PATCH] add otp/login spinner and fix roll number regex

---
 frontend/src/components/RollForm.tsx        |  4 ++--
 frontend/src/components/SecurityQueForm.tsx | 18 ++++++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/RollForm.tsx b/frontend/src/components/RollForm.tsx
index bbf0f9d..5f7d688 100644
--- a/frontend/src/components/RollForm.tsx
+++ b/frontend/src/components/RollForm.tsx
@@ -15,7 +15,7 @@ const schema = yup.object().shape({
     roll_number: yup
         .string()
         .required("Roll number is required!")
-        .matches(/^\d{2}[A-Z]{2}\d{5}$/, "Please enter valid roll number!"),
+        .matches(/^\d{2}[A-Z]{2}[A-Z0-9]{5}$/, "Please enter valid roll number!"),
     password: yup.string().required("Password is required!"),
 });
 
@@ -111,7 +111,7 @@ const RollForm: React.FC = () => {
                         {errors.password?.message || "\u00A0"}
                     </span>
                 </div>
-                <button type="submit" className="submit-button">
+                <button type="submit" className="submit-button" disabled={isSubmitting}>
                     {isSubmitting ? <Spinner /> : "Get security question"}
                 </button>
             </form>
diff --git a/frontend/src/components/SecurityQueForm.tsx b/frontend/src/components/SecurityQueForm.tsx
index 06e64a3..ed05cd7 100644
--- a/frontend/src/components/SecurityQueForm.tsx
+++ b/frontend/src/components/SecurityQueForm.tsx
@@ -24,11 +24,13 @@ const SecurityQueForm: React.FC = () => {
         handleSubmit,
         getValues,
         trigger,
-        formState: { errors, isLoading },
+        formState: { errors },
     } = useForm<IFormInput>({ resolver: yupResolver(schema) });
     const { user, setAuth } = useAppContext();
 
     const [otpRequested, setOtpRequested] = useState(false);
+    const [loadingOTP, setLoadingOTP] = useState(false); 
+    const [loadingLogin, setLoadingLogin] = useState(false); 
 
     const getOTP = async () => {
         const isValid = await trigger("securityAnswer");
@@ -41,6 +43,7 @@ const SecurityQueForm: React.FC = () => {
         formData.append("secret_answer", securityAns);
 
         try {
+            setLoadingOTP(true);
             const res = await fetch(`${BACKEND_URL}/request-otp`, {
                 method: "POST",
                 headers: {
@@ -75,6 +78,8 @@ const SecurityQueForm: React.FC = () => {
         } catch (error) {
             console.log(error);
             setOtpRequested(false);
+        } finally {
+            setLoadingOTP(false); 
         }
     };
 
@@ -89,6 +94,7 @@ const SecurityQueForm: React.FC = () => {
         login_data.append("otp", otp);
 
         try {
+            setLoadingLogin(true);
             const res = await fetch(`${BACKEND_URL}/login`, {
                 method: "POST",
                 headers: {
@@ -122,6 +128,8 @@ const SecurityQueForm: React.FC = () => {
             toast.success("Successfully logged in to ERP!");
         } catch (error) {
             console.error(error);
+        } finally {
+            setLoadingLogin(false); 
         }
     };
 
@@ -171,13 +179,11 @@ const SecurityQueForm: React.FC = () => {
                 </span>
             </div>
             <div>
-                <button className="submit-button" type="submit">
-                    {isLoading ? (
+                <button className="submit-button" type="submit" disabled={loadingOTP || loadingLogin}>
+                {loadingOTP || loadingLogin ? (
                         <Spinner />
-                    ) : otpRequested ? (
-                        "Login"
                     ) : (
-                        "Send OTP"
+                        otpRequested ? "Login" : "Send OTP"
                     )}
                 </button>
             </div>