Merge pull request #200 from HackRU/182-lockout-buttons-that-take-som…

…e-time-do-something-login-signup-register

lockout buttons that take some time to do something (login, signup, register)

app/(pre-dashboard)/(entry)/login/page.tsx

@@ -27,13 +27,15 @@ export default function LoginPage() {
   type Login = z.infer<typeof LoginSchema>;
 
   const [submit_errors, setErrors] = useState("");
-
+  const [loading, setLoading] = useState(false);
   const router = useRouter();
 
   const { register, handleSubmit, reset, formState: { errors }, } = useForm<Login>({ resolver: zodResolver(LoginSchema) });
 
   const onSubmit = async (data: Login) => {
+    setLoading(true);
     const resp = await authenticate(data.email, data.password);
+    setLoading(false);
     setErrors(resp);
   }
 
@@ -83,7 +85,8 @@ export default function LoginPage() {
               {errors.password && (<p className="text-xs italic text-red-500 mt-2">{errors.password?.message}</p>)}
             </div>
           </div>
-          <Button className="mt-4 justify-center" type="submit">Login</Button>
+          <Button className="mt-4 justify-center" type="submit">
+            {loading ? 'Loading...' : 'Login'} </Button>
           <p className="text-s italic  text-white mt-2 hover:text-blue-500 cursor-pointer" onClick={() => router.push('/signup')}>Not a member? Create an Account!</p>
           <p className="text-s italic  text-white mt-2 hover:text-blue-500 cursor-pointer" onClick={() => router.push('/forgot')}>Forgot Password? Reset it Here!</p>
         </div>

app/(pre-dashboard)/(entry)/signup/page.tsx

@@ -28,11 +28,14 @@ export default function SignupPage() {
   });
 
   const [submit_errors, setErrors] = useState("");
+  const [loading, setLoading] = useState(false);
   const [submitErrors, setSubmitErrors] = useState<string[]>([]);
   const router = useRouter();
 
   const onSubmit = async (data: SignUp) => {
+    setLoading(true);
     const resp = await SignUp(data.first_name, data.last_name, data.email, data.password, data.confirm_password);
+    setLoading(false);
     if (resp) {
       setErrors(resp.error);
     }
@@ -178,7 +181,8 @@ export default function SignupPage() {
           </div>
         </div>
         <div className="text-center">
-          <Button type="submit" className="mt-4 justify-self-stretch">Sign Up</Button>
+          <Button type="submit" className="mt-4 justify-self-stretch">
+            {loading ? 'Loading...' : 'Sign Up'} </Button>
         </div>
         <p className="text-s italic text-white mt-2 text-center hover:text-blue-500 cursor-pointer" onClick={() => router.push('/login')}>
           Already a member? Log In!

app/dashboard/components/profileHeader.tsx

@@ -19,6 +19,7 @@ export default function ProfileHeader(props: {
   const { userData, onWaiverSubmit, handleChangingFile, waiverState } = props;
   const [uploadingNewConfirmationStatus, setUploadingNewConfirmationStatus] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+  const [loading, setLoading] = useState(false);
 
   const onConfirmationChange = async (isComing: boolean) => {
     setUploadingNewConfirmationStatus(true);
@@ -61,7 +62,13 @@ export default function ProfileHeader(props: {
       </div>
 
       <Card className="w-full max-w-2xl">
-        <form onSubmit={(onWaiverSubmit)}>
+        <form 
+          onSubmit={async (e) => {
+            setLoading(true);
+            await onWaiverSubmit(e);
+            setLoading(false);
+          }}
+        >
           <CardHeader>
             <CardTitle>Registration</CardTitle>
             <CardDescription>Check your registration status.</CardDescription>
@@ -112,7 +119,8 @@ export default function ProfileHeader(props: {
                 </div>
                 <div className="flex flex-row items-center justify-center">
                   <CardTitle>Unregistered</CardTitle>
-                  <Button type="submit" className="ml-auto" onClick={() => console.log("register button clicked")}>Register</Button>
+                  <Button type="submit" className="ml-auto" onClick={() => console.log("register button clicked")}> 
+                    {loading ? 'Loading...' : 'Register'} </Button>
                 </div>
               </>
             }

app/dashboard/page.tsx

@@ -178,6 +178,7 @@ export default function Dashboard() {
 
   const onWaiverSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+
     if (waiverFile) { //works
       try {
         const data = new FormData();
@@ -277,7 +278,6 @@ export default function Dashboard() {
 
         const haswaiver = await GetWaiverInfo();
         setWaiverState(haswaiver.response.hasUploaded);
-        //   setLoading(false);
 
       } catch (error) {
         console.log(error);
@@ -318,8 +318,6 @@ export default function Dashboard() {
   }
 
 
-
-
   if (userData?.role['organizer']) {
     return (<OrganizerView />)
   }
@@ -413,7 +411,7 @@ export default function Dashboard() {
                       className="mt-10"
                     >{
                         submittingTeamForm ? "Submitting..." : "Submit Team"
-                      }</Button>
+                     }</Button>
                     <PopupDialog
                       open={displayTeamFormFinalSubmissionWarning}
                       setOpen={setDisplayTeamFormFinalSubmissionWarning}

package.json

@@ -61,4 +61,4 @@
     "node": ">=18.17.0"
   },
   "packageManager": "pnpm@9.4.0"
-}
+}