Send reset password email from settings page

frontend/src/Routes.tsx

@@ -36,7 +36,6 @@ const Routes = (): React.ReactElement => {
       <Route path={Paths.FORGOT_PASSWORD_PAGE} element={<ForgotPassword />} />
       <Route path={Paths.JOIN_SUCCESS_PAGE} element={<JoinSuccess />} />
       <Route path={Paths.FORGOT_PASSWORD_PAGE} element={<ForgotPassword />} />
-      <Route path={Paths.RESET_PASSWORD_PAGE} element={<ResetPassword />} />
       <Route path={Paths.SET_PASSWORD_PAGE} element={<SetPassword />} />
       <Route
         path={Paths.CREATE_MEAL_REQUEST_PAGE}

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

frontend/src/components/auth/Login.tsx

@@ -20,7 +20,6 @@ import {
   FORGOT_PASSWORD_PAGE,
   HOME_PAGE,
   JOIN_PAGE,
-  RESET_PASSWORD_PAGE,
 } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser, LoginData } from "../../types/UserTypes";

frontend/src/constants/Routes.ts

@@ -8,8 +8,6 @@ export const JOIN_SUCCESS_PAGE = "/join-success";
 
 export const FORGOT_PASSWORD_PAGE = "/forgot-password";
 
-export const RESET_PASSWORD_PAGE = "/:objectID/reset-password";
-
 export const SET_PASSWORD_PAGE = "/:objectID/set-password";
 
 export const CREATE_MEAL_REQUEST_PAGE = "/request/scheduling";

frontend/src/pages/Settings.tsx

@@ -162,6 +162,15 @@ const DELETE_ONSITE_CONTACT = gql`
   }
 `;
 
+const FORGOT_PASSWORD = gql`
+  mutation ForgotPassword($email: String!) {
+    forgotPassword(email: $email) {
+      success
+    }
+  }    
+`;
+
+
 const Settings = (): React.ReactElement => {
   const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
 
@@ -231,6 +240,11 @@ const Settings = (): React.ReactElement => {
   const [createOnsiteContact] = useMutation(CREATE_ONSITE_CONTACT);
   const [updateOnsiteContact] = useMutation(UPDATE_ONSITE_CONTACT);
   const [deleteOnsiteContact] = useMutation(DELETE_ONSITE_CONTACT);
+  const [
+    forgotPassword,
+    { loading: forgotPasswordLoading },
+  ] = useMutation(FORGOT_PASSWORD);
+
   const apolloClient = useApolloClient();
 
   // OnsiteContact query
@@ -286,8 +300,15 @@ const Settings = (): React.ReactElement => {
     return false;
   };
 
-  const onClickResetPassword = () => {
-    navigate(`/${authenticatedUser?.id}/reset-password`);
+  const onClickResetPassword = async() => {
+    await forgotPassword({ variables: { email: userInfo?.email } });
+
+    toast({
+      title: "Reset Password Email Sent",
+      status: "success",
+      isClosable: true,
+    });
+
   };
 
   const getTitleSection = (): React.ReactElement => (
@@ -320,9 +341,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>