Moved Forget Password to Landing Page (#53)

* added functioniality for forgot password button

* added simple error check

* linter fixes

* added done reset password page, removed back to login button

backend/graphql/index.ts

@@ -61,7 +61,6 @@ const graphQLMiddlewares = {
     deleteUserById: authorizedByAdmin(),
     deleteUserByEmail: authorizedByAdmin(),
     logout: isAuthorizedByUserId("userId"),
-    resetPassword: isAuthorizedByEmail("email"),
     createSkill: authorizedByAdmin(),
     updateSkill: authorizedByAdmin(),
     deleteSkill: authorizedByAdmin(),

frontend/src/App.tsx

@@ -4,6 +4,8 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import Login from "./components/auth/Login";
 import Signup from "./components/auth/Signup";
+import ResetPassword from "./components/auth/ResetPassword";
+import DoneResetPassword from "./components/auth/DoneResetPassword";
 import PrivateRoute from "./components/auth/PrivateRoute";
 import CreatePage from "./components/pages/CreatePage";
 import Default from "./components/pages/Default";
@@ -53,6 +55,16 @@ const App = (): React.ReactElement => {
             <Switch>
               <Route exact path={Routes.LOGIN_PAGE} component={Login} />
               <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
+              <Route
+                exact
+                path={Routes.RESET_PASSWORD_PAGE}
+                component={ResetPassword}
+              />
+              <Route
+                exact
+                path={Routes.DONE_RESET_PASSWORD_PAGE}
+                component={DoneResetPassword}
+              />
               <PrivateRoute exact path={Routes.HOME_PAGE} component={Default} />
               <PrivateRoute
                 exact

frontend/src/components/auth/DoneResetPassword.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const DoneResetPassword = (): React.ReactElement => (
+  <div style={{ textAlign: "center" }}>
+    <h1>Reset Password</h1>
+    <p>
+      We have sent you an e-mail. Please contact us if you do not receive it
+      within a few minutes.
+    </p>
+  </div>
+);
+
+export default DoneResetPassword;

frontend/src/components/auth/Login.tsx

@@ -8,7 +8,11 @@ import {
 import { gql, useMutation } from "@apollo/client";
 
 import authAPIClient from "../../APIClients/AuthAPIClient";
-import { HOME_PAGE, SIGNUP_PAGE } from "../../constants/Routes";
+import {
+  RESET_PASSWORD_PAGE,
+  HOME_PAGE,
+  SIGNUP_PAGE,
+} from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import { AuthenticatedUser } from "../../types/AuthTypes";
 
@@ -64,6 +68,10 @@ const Login = (): React.ReactElement => {
     history.push(SIGNUP_PAGE);
   };
 
+  const onForgotPasswordClick = () => {
+    history.push(RESET_PASSWORD_PAGE);
+  };
+
   const onGoogleLoginSuccess = async (idToken: string) => {
     const user: AuthenticatedUser = await authAPIClient.loginWithGoogle(
       idToken,
@@ -120,6 +128,15 @@ const Login = (): React.ReactElement => {
           onFailure={(error) => window.alert(error)}
         />
       </form>
+      <div>
+        <button
+          className="btn btn-primary"
+          type="button"
+          onClick={onForgotPasswordClick}
+        >
+          Forgot Password
+        </button>
+      </div>
       <div>
         <button
           className="btn btn-primary"

frontend/src/components/auth/ResetPassword.tsx

@@ -1,6 +1,8 @@
-import React, { useContext } from "react";
+import React, { useState } from "react";
 import { gql, useMutation } from "@apollo/client";
-import AuthContext from "../../contexts/AuthContext";
+import { useHistory } from "react-router-dom";
+
+import { DONE_RESET_PASSWORD_PAGE } from "../../constants/Routes";
 
 const RESET_PASSWORD = gql`
   mutation ResetPassword($email: String!) {
@@ -9,24 +11,43 @@ const RESET_PASSWORD = gql`
 `;
 
 const ResetPassword = (): React.ReactElement => {
-  const { authenticatedUser } = useContext(AuthContext);
+  const [email, setEmail] = useState("");
+  const history = useHistory();
 
   const [resetPassword] = useMutation<{ resetPassword: boolean }>(
     RESET_PASSWORD,
   );
 
   const onResetPasswordClick = async () => {
-    await resetPassword({ variables: { email: authenticatedUser?.email } });
+    try {
+      await resetPassword({ variables: { email } });
+      history.push(DONE_RESET_PASSWORD_PAGE);
+    } catch (e) {
+      alert("invalid email");
+    }
   };
 
   return (
-    <button
-      type="button"
-      className="btn btn-primary"
-      onClick={onResetPasswordClick}
-    >
-      Reset Password
-    </button>
+    <div style={{ textAlign: "center" }}>
+      <h1>Reset Password</h1>
+      <div>
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder="username@domain.com"
+        />
+      </div>
+      <div>
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={onResetPasswordClick}
+        >
+          Reset Password
+        </button>
+      </div>
+    </div>
   );
 };
 

frontend/src/components/pages/Default.tsx

@@ -5,7 +5,6 @@ import SampleContext from "../../contexts/SampleContext";
 
 import Logout from "../auth/Logout";
 import RefreshCredentials from "../auth/RefreshCredentials";
-import ResetPassword from "../auth/ResetPassword";
 
 type ButtonProps = { text: string; path: string };
 
@@ -44,7 +43,6 @@ const Default = (): React.ReactElement => {
       <div className="btn-group" style={{ paddingRight: "10px" }}>
         <Logout />
         <RefreshCredentials />
-        <ResetPassword />
         <Button text="Create Entity" path={Routes.CREATE_ENTITY_PAGE} />
         <Button text="Update Entity" path={Routes.UPDATE_ENTITY_PAGE} />
         <Button text="Display Entities" path={Routes.DISPLAY_ENTITY_PAGE} />

frontend/src/constants/Routes.ts

@@ -4,6 +4,10 @@ export const LOGIN_PAGE = "/login";
 
 export const SIGNUP_PAGE = "/signup";
 
+export const RESET_PASSWORD_PAGE = "/reset-password";
+
+export const DONE_RESET_PASSWORD_PAGE = "/done-reset-password";
+
 export const EDIT_TEAM_PAGE = "/edit-team";
 
 export const DISPLAY_ENTITY_PAGE = "/entity";