Reset password disable button and add loading spinner

uwblueprint · Aug 26, 2024 · 9d0503c · 9d0503c
1 parent 40ca014
commit 9d0503c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/frontend/src/components/auth/ForgotPassword.tsx b/frontend/src/components/auth/ForgotPassword.tsx
@@ -6,6 +6,7 @@ import {
   FormLabel,
   Input,
   Link,
+  Spinner,
   Text,
   VStack,
   useToast,
@@ -152,6 +153,7 @@ const ForgotPassword = () => {
           bgColor="#272D77"
           _hover={{ bgColor: "#272D77" }}
           borderRadius="6px"
+          disabled={forgotPasswordLoading}
           onClick={() => {
             if (isValidEmail(email)) {
               setEmailError(false);
@@ -161,7 +163,17 @@ const ForgotPassword = () => {
             }
           }}
         >
-          {forgotPasswordLoading ? "Loading..." : "Reset"}
+          {forgotPasswordLoading ? (
+            <Spinner
+              thickness="4px"
+              speed="0.65s"
+              emptyColor="gray.200"
+              color="primary.green"
+              size="lg"
+            />
+          ) : (
+            "Reset"
+          )}
         </Button>
         {!emailError && (
           <Text

diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
@@ -240,7 +240,10 @@ const Settings = (): React.ReactElement => {
   const [createOnsiteContact] = useMutation(CREATE_ONSITE_CONTACT);
   const [updateOnsiteContact] = useMutation(UPDATE_ONSITE_CONTACT);
   const [deleteOnsiteContact] = useMutation(DELETE_ONSITE_CONTACT);
-  const [forgotPassword] = useMutation(FORGOT_PASSWORD);
+  const [
+    forgotPassword,
+    { loading: forgotPasswordLoading },
+  ] = useMutation(FORGOT_PASSWORD);
 
   // OnsiteContact query
 
@@ -336,9 +339,20 @@ const Settings = (): React.ReactElement => {
             borderColor="primary.green"
             borderRadius="6px"
             _hover={{ color: "text.white", bgColor: "primary.green" }}
+            disabled={forgotPasswordLoading}
             onClick={onClickResetPassword}
           >
-            Reset Password
+            {forgotPasswordLoading ? (
+              <Spinner
+                thickness="4px"
+                speed="0.65s"
+                emptyColor="gray.200"
+                color="primary.green"
+                size="lg"
+              />
+            ) : (
+              "Reset Password"
+            )}
           </Button>
         </HStack>
       </Flex>