From 3746e0557f14f28a27fff7b42887676ceeb7eab2 Mon Sep 17 00:00:00 2001
From: Timothy Choi <101849050+tinnamchoi@users.noreply.github.com>
Date: Tue, 20 Feb 2024 01:10:28 +1030
Subject: [PATCH 1/2] chore: more spelling and grammar fixes (#88)

---
 src/app/(account)/join/steps/StepTwo.tsx | 2 +-
 src/app/sponsors/page.tsx                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/src/app/(account)/join/steps/StepTwo.tsx
index c99a1aae..7e9e7de2 100644
--- a/src/app/(account)/join/steps/StepTwo.tsx
+++ b/src/app/(account)/join/steps/StepTwo.tsx
@@ -61,7 +61,7 @@ export default function StepTwo() {
             <ControlledField label="First Name" control={form.control} name="firstName" />
             <ControlledField label="Last Name" control={form.control} name="lastName" />
             <ControlledField
-                label="Are you an university student?"
+                label="Are you a university student?"
                 control={form.control}
                 name="studentStatus"
                 options={STUDENT_STATUSES}
diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx
index 3835f624..f13e25da 100644
--- a/src/app/sponsors/page.tsx
+++ b/src/app/sponsors/page.tsx
@@ -13,7 +13,7 @@ export default function SponsorsPage() {
                 <Duck colour="yellow" size={80} className="hidden md:block" />
             </div>
             <div className="max-w-3xl border-x-4 border-white p-2 text-center text-lg md:p-5 md:text-2xl">
-                The <b>University of Adelaide Computer Science Club</b> are proudly supported by our{' '}
+                The <b>University of Adelaide Computer Science Club</b> is proudly supported by our{' '}
                 <b>generous sponsors</b>. Their unwavering support make events and workshops
                 possible, fostering an environment for aspiring tech enthusiasts to excel within our
                 community.

From 6792f5b29cc171c34afff1e1c4ad6c134bfac17e Mon Sep 17 00:00:00 2001
From: Ray Okamoto <22254748+rayokamoto@users.noreply.github.com>
Date: Tue, 20 Feb 2024 01:15:34 +1030
Subject: [PATCH 2/2] feat: add button loading to indicate request in progress
 (#89)

---
 src/app/(account)/forgot-password/page.tsx | 27 +++++++++++++++++++--
 src/app/(account)/join/steps/StepOne.tsx   | 28 ++++++++++++++++++++--
 src/app/(account)/signin/page.tsx          | 15 +++++++++++-
 3 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx
index 8add8171..48f7ee82 100644
--- a/src/app/(account)/forgot-password/page.tsx
+++ b/src/app/(account)/forgot-password/page.tsx
@@ -45,8 +45,14 @@ export default function ForgotPasswordPage() {
         resolver: zodResolver(resetPasswordSchema),
     });
 
+    const [sendCodeLoading, setSendCodeLoading] = useState(false);
+    const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
+
     const handleSendCode = sendCodeForm.handleSubmit(async ({ email }) => {
         if (!isLoaded) return;
+
+        setSendCodeLoading(true);
+
         try {
             const result = await signIn.create({
                 strategy: 'reset_password_email_code',
@@ -70,10 +76,15 @@ export default function ForgotPasswordPage() {
                 },
             ]);
         }
+
+        setSendCodeLoading(false);
     });
 
     const handleResetPassword = resetPasswordForm.handleSubmit(async ({ code, password }) => {
         if (!isLoaded) return;
+
+        setResetPasswordLoading(true);
+
         try {
             const resetResult = await signIn.attemptFirstFactor({
                 strategy: 'reset_password_email_code',
@@ -105,6 +116,8 @@ export default function ForgotPasswordPage() {
                 },
             ]);
         }
+
+        setResetPasswordLoading(false);
     });
 
     return (
@@ -120,7 +133,12 @@ export default function ForgotPasswordPage() {
                                 control={sendCodeForm.control}
                                 name="email"
                             />
-                            <Button colour="orange" width="w-[19rem] md:w-[25rem]" type="submit">
+                            <Button
+                                colour="orange"
+                                width="w-[19rem] md:w-[25rem]"
+                                type="submit"
+                                loading={sendCodeLoading}
+                            >
                                 Send Code
                             </Button>
                         </form>
@@ -145,7 +163,12 @@ export default function ForgotPasswordPage() {
                                 control={resetPasswordForm.control}
                                 name="code"
                             />
-                            <Button colour="orange" width="w-[19rem] md:w-[25rem]" type="submit">
+                            <Button
+                                colour="orange"
+                                width="w-[19rem] md:w-[25rem]"
+                                type="submit"
+                                loading={resetPasswordLoading}
+                            >
                                 Reset Password
                             </Button>
                         </form>
diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx
index 3b01b4f6..9d13d0fe 100644
--- a/src/app/(account)/join/steps/StepOne.tsx
+++ b/src/app/(account)/join/steps/StepOne.tsx
@@ -31,8 +31,13 @@ function VerifyEmail() {
 
     const { isLoaded, signUp, setActive } = useSignUp();
 
+    const [verifyEmailLoading, setVerifyEmailLoading] = useState(false);
+
     const handleVerify = form.handleSubmit(async ({ code }) => {
         if (!isLoaded) return;
+
+        setVerifyEmailLoading(true);
+
         try {
             const completeSignUp = await signUp.attemptEmailAddressVerification({
                 code,
@@ -53,13 +58,20 @@ function VerifyEmail() {
                 },
             ]);
         }
+
+        setVerifyEmailLoading(false);
     });
 
     return (
         <div className="mt-4">
             <form onSubmit={handleVerify}>
                 <ControlledField label="Code" control={form.control} name="code" />
-                <Button colour="orange" width="w-[19rem] md:w-[25.5rem]" type="submit">
+                <Button
+                    colour="orange"
+                    width="w-[19rem] md:w-[25.5rem]"
+                    type="submit"
+                    loading={verifyEmailLoading}
+                >
                     Verify Email
                 </Button>
             </form>
@@ -88,8 +100,13 @@ export default function StepOne() {
     const { signUp, isLoaded } = useSignUp();
     const [pendingVerification, setPendingVerification] = useState(false);
 
+    const [emailJoinLoading, setEmailJoinLoading] = useState(false);
+
     const handleSignUp = form.handleSubmit(async (formData) => {
         if (!isLoaded) return;
+
+        setEmailJoinLoading(true);
+
         try {
             await signUp.create(formData);
             await signUp.prepareEmailAddressVerification({ strategy: 'email_code' });
@@ -111,6 +128,8 @@ export default function StepOne() {
                 },
             ]);
         }
+
+        setEmailJoinLoading(false);
     });
 
     const handleGoogleSignUp = async () => {
@@ -152,7 +171,12 @@ export default function StepOne() {
                     name="password"
                 />
                 <div className="mt-8 flex justify-center space-x-4">
-                    <Button colour="orange" width="w-[19rem] md:w-[25.5rem]" type="submit">
+                    <Button
+                        colour="orange"
+                        width="w-[19rem] md:w-[25.5rem]"
+                        type="submit"
+                        loading={emailJoinLoading}
+                    >
                         Continue
                     </Button>
                 </div>
diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx
index fb111125..cfe5d786 100644
--- a/src/app/(account)/signin/page.tsx
+++ b/src/app/(account)/signin/page.tsx
@@ -6,6 +6,7 @@ import FancyRectangle from '@/components/FancyRectangle';
 import { useSignIn } from '@clerk/clerk-react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import Link from 'next/link';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
@@ -25,8 +26,13 @@ export default function SignInPage() {
         resolver: zodResolver(signInSchema),
     });
 
+    const [signInLoading, setSignInLoading] = useState(false);
+
     const handleSignIn = form.handleSubmit(async ({ email, password }) => {
         if (!isLoaded) return;
+
+        setSignInLoading(true);
+
         try {
             const result = await signIn.create({
                 identifier: email,
@@ -59,6 +65,8 @@ export default function SignInPage() {
                 },
             ]);
         }
+
+        setSignInLoading(false);
     });
 
     const handleGoogleSignIn = async () => {
@@ -110,7 +118,12 @@ export default function SignInPage() {
                         >
                             Forgot password?
                         </Link>
-                        <Button type="submit" colour="orange" width="w-[19rem] md:w-[25rem]">
+                        <Button
+                            type="submit"
+                            colour="orange"
+                            width="w-[19rem] md:w-[25rem]"
+                            loading={signInLoading}
+                        >
                             Sign In
                         </Button>
                     </form>