Merged in feature/GFW-1038_reset_password (pull request #134)

Normal: Reset password page (small)

Approved-by: Kevin Borrill
Approved-by: Uchenna Okafor

Author: Owen Evans

src/locales/en.json

@@ -42,6 +42,12 @@
   "signUp.success.message": "Thank you for registering",
   "signUp.success.message.extra": "Please check your emails and confirm your account",
   "signUp.error": "Sign up failed",
+  "resetPW.title": "Forgot Password",
+  "resetPW.subTitle": "To reset your password, enter your email and follow the instructions.",
+  "resetPW.input.submit": "Reset password",
+  "resetPW.success.message": "Reset password request sent",
+  "resetPW.success.message.extra": "Please check your emails to reset your password",
+  "resetPW.error": "Reset password failed",
   "common.create": "Create",
   "common.edit": "Edit",
   "common.add": "Add",

src/pages/login/SignUp.tsx

@@ -0,0 +1,117 @@
+import { FC, useState } from "react";
+import * as yup from "yup";
+import Input from "components/ui/Form/Input";
+import Button from "components/ui/Button/Button";
+import { FormattedMessage, useIntl } from "react-intl";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup/dist/yup";
+import { TSignUpBody, userService } from "services/user";
+import { TErrorResponse } from "constants/api";
+import { toastr } from "react-redux-toastr";
+import LoginLayout from "components/layouts/Login";
+import { Link, useHistory } from "react-router-dom";
+
+type TSignUpAndResetForm = TSignUpBody;
+
+const signUpAndResetSchema = yup
+  .object()
+  .shape({
+    email: yup.string().email().required()
+  })
+  .required();
+
+interface IProps {
+  isResetPassword: boolean;
+}
+
+const resetPasswordConfig = {
+  title: "resetPW.title",
+  text: "resetPW.subTitle",
+  inputLabel: "signIn.input.email",
+  inputPlaceholder: "signIn.input.email.placeholder",
+  submitBtn: "resetPW.input.submit",
+  alreadyJoinedText: "signUp.link.already.joined",
+  alreadyJoinedLink: "signUp.link.signIn",
+  successMessage: "resetPW.success.message",
+  successMessageInfo: "resetPW.success.message.extra",
+  errorMessage: "resetPW.error"
+};
+
+const signUpConfig = {
+  title: "signUp.title",
+  text: "signUp.subTitle",
+  inputLabel: "signIn.input.email",
+  inputPlaceholder: "signIn.input.email.placeholder",
+  submitBtn: "signUp.input.submit",
+  alreadyJoinedText: "signUp.link.already.joined",
+  alreadyJoinedLink: "signUp.link.signIn",
+  successMessage: "signUp.success.message",
+  successMessageInfo: "signUp.success.message.extra",
+  errorMessage: "signUp.error"
+};
+
+const SignUpAndReset: FC<IProps> = ({ isResetPassword = false }) => {
+  const config = isResetPassword ? resetPasswordConfig : signUpConfig;
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isDirty, errors }
+  } = useForm<TSignUpAndResetForm>({ resolver: yupResolver(signUpAndResetSchema) });
+  const intl = useIntl();
+  const history = useHistory();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onSubmit: SubmitHandler<TSignUpAndResetForm> = async data => {
+    setIsLoading(true);
+    try {
+      if (isResetPassword) {
+        await userService.resetPassword(data);
+      } else {
+        await userService.signUp(data);
+      }
+      history.push("/login");
+      toastr.success(
+        intl.formatMessage({ id: config.successMessage }),
+        intl.formatMessage({ id: config.successMessageInfo })
+      );
+    } catch (e: any) {
+      const error = JSON.parse(e.message) as TErrorResponse;
+      toastr.error(
+        intl.formatMessage({ id: config.errorMessage }),
+        error?.errors?.length ? error.errors[0].detail : ""
+      );
+      console.error(e);
+      reset();
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <LoginLayout isLoading={isLoading} title={config.title} text={config.text}>
+      <form className="c-login-form" onSubmit={handleSubmit(onSubmit)}>
+        <Input
+          id="login-email"
+          htmlInputProps={{
+            label: intl.formatMessage({ id: config.inputLabel }),
+            placeholder: intl.formatMessage({ id: config.inputPlaceholder }),
+            type: "text"
+          }}
+          error={errors.email}
+          registered={register("email")}
+        />
+        <Button disabled={!isDirty} className="c-login-form__submit-btn" type="submit">
+          <FormattedMessage id={config.submitBtn} />
+        </Button>
+      </form>
+      <p className="c-login-form__link c-login-form__link--larger-font">
+        <FormattedMessage id={config.alreadyJoinedText} />
+        <Link className="u-margin-left-tiny" to="/login">
+          <FormattedMessage id={config.alreadyJoinedLink} />
+        </Link>
+      </p>
+    </LoginLayout>
+  );
+};
+
+export default SignUpAndReset;

src/pages/login/SignUpAndReset.tsx

@@ -12,7 +12,7 @@ import TeamDetail from "./pages/teams-detail/TeamDetailContainer";
 import Settings from "./pages/settings/SettingsContainer";
 import Reports from "./pages/reports/ReportsContainer";
 import Login from "./pages/login/Login";
-import SignUp from "./pages/login/SignUp";
+import SignUpAndReset from "./pages/login/SignUpAndReset";
 
 const getLoginComponent = ({ user, location }) => {
   const search = location.search || "";
@@ -43,7 +43,16 @@ const Routes = props => {
     <Switch>
       <Route exact path="/" render={defaultComponent} />
       <Route path={`${match.url}login`} render={() => getLoginComponent({ user, location })} />
-      {!user.loggedIn && <Route exact path={`${match.url}sign-up`} component={SignUp} />}
+      {!user.loggedIn && (
+        <Switch>
+          <Route exact path={`${match.url}sign-up`} component={SignUpAndReset} />
+          <Route
+            exact
+            path={`${match.url}forgotten-password`}
+            render={args => <SignUpAndReset isResetPassword {...args} />}
+          />
+        </Switch>
+      )}
       {user.loggedIn ? (
         <Switch>
           <Route exact path={`${match.url}areas`} component={Areas} />

src/routes.js

@@ -21,6 +21,13 @@ export type TSignUpResponse = {
   email: string;
 };
 
+export type TResetPasswordBody = {
+  email: string;
+};
+export type TResetPasswordResponse = {
+  email: string;
+};
+
 export class UserService extends BaseService {
   checkLogged(token: string) {
     this.token = token;
@@ -55,6 +62,17 @@ export class UserService extends BaseService {
     });
   }
 
+  resetPassword(body: TResetPasswordBody): Promise<TResetPasswordResponse> {
+    return this.fetchJSON(`/auth/reset-password?callbackUrl=${API_CALLBACK_URL}`, {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: ""
+      },
+      method: "POST",
+      body: JSON.stringify(body)
+    });
+  }
+
   logout(token: string) {
     this.token = token;
     return this.fetchJSON("/auth/logout");