Added sagas + pages for password reset. WIP BOD-165

bodyshop_translations.babel

@@ -5662,6 +5662,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>resetpassword</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>save</name>
                                         <definition_loaded>false</definition_loaded>
@@ -5924,6 +5945,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>confirmpassword</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>email</name>
                                         <definition_loaded>false</definition_loaded>
@@ -6218,6 +6260,69 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>passwordresetsuccess</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>passwordresetsuccess_sub</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>passwordsdonotmatch</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>print</name>
                                         <definition_loaded>false</definition_loaded>

client/src/App/App.js

@@ -15,6 +15,9 @@ import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
 
 const LandingPage = lazy(() => import("../pages/landing/landing.page"));
+const ResetPassword = lazy(() =>
+  import("../pages/reset-password/reset-password.component")
+);
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
 const SignInPage = lazy(() => import("../pages/sign-in/sign-in.page"));
 const Unauthorized = lazy(() =>
@@ -51,6 +54,7 @@ export function App({ checkUserSession, currentUser }) {
             <Route exact path='/' component={LandingPage} />
             <Route exact path='/unauthorized' component={Unauthorized} />
             <Route exact path='/signin' component={SignInPage} />
+            <Route exact path='/resetpassword' component={ResetPassword} />
             <Route exact path='/csi/:surveyId' component={CsiPage} />
             <PrivateRoute
               isAuthorized={currentUser.authorized}

client/src/components/sign-in-form/sign-in-form.component.jsx

@@ -3,11 +3,14 @@ import { Button, Form, Input, Typography } from "antd";
 import React from "react";
 import { useApolloClient } from "react-apollo";
 import { connect } from "react-redux";
-import { Redirect } from "react-router-dom";
+import { Redirect, Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import ImEXOnlineLogo from "../../assets/logo240.png";
 import { UPSERT_USER } from "../../graphql/user.queries";
-import { emailSignInStart } from "../../redux/user/user.actions";
+import {
+  emailSignInStart,
+  sendPasswordReset,
+} from "../../redux/user/user.actions";
 import {
   selectCurrentUser,
   selectSignInError,
@@ -24,12 +27,14 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   emailSignInStart: (email, password) =>
     dispatch(emailSignInStart({ email, password })),
+  sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
 });
 
 export function SignInComponent({
   emailSignInStart,
   currentUser,
   signInError,
+  sendPasswordReset,
 }) {
   const apolloClient = useApolloClient();
   const { t } = useTranslation();
@@ -39,6 +44,7 @@ export function SignInComponent({
   };
   const [form] = Form.useForm();
 
+  //TODO - may be able to run this only on new user creation.
   if (currentUser.authorized === true) {
     apolloClient
       .mutate({
@@ -55,6 +61,7 @@ export function SignInComponent({
   }
 
   if (currentUser.authorized === true) return <Redirect to='/manage' />;
+
   return (
     <div className='login-container'>
       <div className='login-logo-container'>
@@ -90,6 +97,9 @@ export function SignInComponent({
           {t("general.actions.login")}
         </Button>
       </Form>
+      <Link to={"/resetpassword"}>
+        <Button>{t("general.actions.resetpassword")}</Button>
+      </Link>
     </div>
   );
 }

client/src/components/user-request-pw-reset/user-request-reset-pw.component.jsx

@@ -0,0 +1,70 @@
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  sendPasswordReset,
+  validatePasswordResetStart,
+} from "../../redux/user/user.actions";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
+import { Input, Form, Button, Result } from "antd";
+import React, { useState } from "react";
+import EmailFormItemComponent from "../form-items-formatted/email-form-item.component";
+import { useTranslation } from "react-i18next";
+import { selectPasswordReset } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+
+const mapStateToProps = createStructuredSelector({
+  passwordReset: selectPasswordReset,
+});
+const mapDispatchToProps = (dispatch) => ({
+  sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
+});
+
+export function UserRequestResetPw({ passwordReset, sendPasswordReset }) {
+  const handleFinish = (values) => {
+    try {
+      sendPasswordReset(values.email);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const { t } = useTranslation();
+  if (passwordReset.success)
+    return (
+      <Result
+        status='success'
+        title={t("general.labels.passwordresetsuccess")}
+        subTitle={t("general.labels.passwordresetsuccess_sub")}
+        extra={[
+          <Button onClick={() => sendPasswordReset(passwordReset.email)}>
+            {t("general.labels.sendagain")}
+          </Button>,
+        ]}
+      />
+    );
+
+  return (
+    <div>
+      <Form onFinish={handleFinish}>
+        <Form.Item
+          label={t("general.labels.email")}
+          name='email'
+          rules={[
+            {
+              type: "email",
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <EmailFormItemComponent />
+        </Form.Item>
+        {passwordReset.error ? (
+          <AlertComponent message={passwordReset.error} type='warning' />
+        ) : null}
+        <Button htmlType='submit'>{t("general.actions.submit")}</Button>
+      </Form>
+    </div>
+  );
+}
+export default connect(mapStateToProps, mapDispatchToProps)(UserRequestResetPw);

client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx

@@ -0,0 +1,85 @@
+import { LockOutlined } from "@ant-design/icons";
+import { Button, Form, Input } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { validatePasswordResetStart } from "../../redux/user/user.actions";
+import { selectPasswordReset } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+
+const mapStateToProps = createStructuredSelector({
+  passwordReset: selectPasswordReset,
+});
+const mapDispatchToProps = (dispatch) => ({
+  validatePasswordReset: (emailAndPin) =>
+    dispatch(validatePasswordResetStart(emailAndPin)),
+});
+
+export function UserValidatePwReset({
+  passwordReset,
+  validatePasswordReset,
+  oobCode,
+}) {
+  console.log("UserValidatePwReset -> oobCode", oobCode);
+  const { t } = useTranslation();
+
+  const handleFinish = (values) => {
+    validatePasswordReset({ code: oobCode, password: values.password });
+  };
+
+  return (
+    <div>
+      <Form onFinish={handleFinish}>
+        <Form.Item
+          label={t("general.labels.password")}
+          name='password'
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+          ]}>
+          <Input
+            prefix={<LockOutlined />}
+            type='password'
+            placeholder={t("general.labels.password")}
+          />
+        </Form.Item>
+        <Form.Item
+          label={t("general.labels.confirmpassword")}
+          name='password-confirm'
+          dependencies={["password"]}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required"),
+            },
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (!value || getFieldValue("password") === value) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(t("general.labels.passwordsdonotmatch"));
+              },
+            }),
+          ]}>
+          <Input
+            prefix={<LockOutlined />}
+            type='password'
+            placeholder={t("general.labels.password")}
+          />
+        </Form.Item>
+        {passwordReset.error ? (
+          <AlertComponent message={passwordReset.error} type='warning' />
+        ) : null}
+        <Button htmlType='submit'>{t("general.actions.submit")}</Button>
+      </Form>
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UserValidatePwReset);

client/src/firebase/firebase.utils.js

@@ -24,6 +24,8 @@ export const getCurrentUser = () => {
   });
 };
 
+
+
 export const updateCurrentUser = (userDetails) => {
   return new Promise((resolve, reject) => {
     const unsubscribe = auth.onAuthStateChanged((userAuth) => {

client/src/pages/reset-password/reset-password.component.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  sendPasswordReset,
+  validatePasswordResetStart,
+} from "../../redux/user/user.actions";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
+import UserValidatePwReset from "../../components/user-validate-pw-reset/user-validate-pw-reset.component";
+import UserRequestResetPw from "../../components/user-request-pw-reset/user-request-reset-pw.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+});
+const mapDispatchToProps = (dispatch) => ({
+  sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
+  validatePasswordReset: (emailAndPin) =>
+    dispatch(validatePasswordResetStart(emailAndPin)),
+});
+
+export default function ResetPassword({}) {
+  const searchParams = queryString.parse(useLocation().search);
+  const { mode, oobCode } = searchParams;
+  console.log("ResetPassword -> mode, oobCode", mode, oobCode);
+
+  if (mode === "passwordReset")
+    return <UserValidatePwReset oobCode={oobCode} />;
+  return <UserRequestResetPw />;
+}

client/src/redux/user/user.actions.js

@@ -72,3 +72,29 @@ export const setLocalFingerprint = (fingerprint) => ({
   type: UserActionTypes.SET_LOCAL_FINGERPRINT,
   payload: fingerprint,
 });
+
+export const sendPasswordReset = (email) => ({
+  type: UserActionTypes.SEND_PASSWORD_RESET_EMAIL_START,
+  payload: email,
+});
+export const sendPasswordResetFailure = (error) => ({
+  type: UserActionTypes.SEND_PASSWORD_RESET_EMAIL_FAILURE,
+  payload: error,
+});
+export const sendPasswordResetSuccess = () => ({
+  type: UserActionTypes.SEND_PASSWORD_RESET_EMAIL_SUCCESS,
+});
+
+export const validatePasswordResetStart = (emailAndPin) => ({
+  type: UserActionTypes.VALIDATE_PASSWORD_RESET_START,
+  payload: emailAndPin,
+});
+
+export const validatePasswordResetSuccess = () => ({
+  type: UserActionTypes.VALIDATE_PASSWORD_RESET_SUCCESS,
+});
+
+export const validatePasswordResetFailure = (error) => ({
+  type: UserActionTypes.VALIDATE_PASSWORD_RESET_FAILURE,
+  payload: error,
+});

client/src/redux/user/user.reducer.js

@@ -9,6 +9,11 @@ const INITIAL_STATE = {
   fingerprint: null,
   error: null,
   conflict: false,
+  passwordreset: {
+    email: null,
+    error: null,
+    success: false,
+  },
 };
 
 const userReducer = (state = INITIAL_STATE, action) => {
@@ -19,6 +24,25 @@ const userReducer = (state = INITIAL_STATE, action) => {
       return { ...state, conflict: false };
     case UserActionTypes.SET_INSTANCE_CONFLICT:
       return { ...state, conflict: true };
+    case UserActionTypes.VALIDATE_PASSWORD_RESET_START:
+    case UserActionTypes.SEND_PASSWORD_RESET_EMAIL_START:
+      return {
+        ...state,
+        passwordreset: {
+          email: action.payload,
+          error: null,
+          success: false,
+        },
+      };
+    case UserActionTypes.VALIDATE_PASSWORD_RESET_FAILURE:
+    case UserActionTypes.SEND_PASSWORD_RESET_EMAIL_FAILURE:
+      return { ...state, passwordreset: { error: action.payload } };
+    case UserActionTypes.VALIDATE_PASSWORD_RESET_SUCCESS:
+    case UserActionTypes.SEND_PASSWORD_RESET_EMAIL_SUCCESS:
+      return {
+        ...state,
+        passwordreset: { ...state.passwordreset, success: true },
+      };
     case UserActionTypes.SIGN_IN_SUCCESS:
       return {
         ...state,

client/src/redux/user/user.sagas.js

@@ -19,6 +19,10 @@ import {
   signOutSuccess,
   unauthorizedUser,
   updateUserDetailsSuccess,
+  sendPasswordResetFailure,
+  sendPasswordResetSuccess,
+  validatePasswordResetSuccess,
+  validatePasswordResetFailure
 } from "./user.actions";
 import UserActionTypes from "./user.types";
 
@@ -161,6 +165,41 @@ export function* signInSuccessSaga({ payload }) {
   yield logImEXEvent("redux_sign_in_success");
 }
 
+export function* onSendPasswordResetStart() {
+  yield takeLatest(
+    UserActionTypes.SEND_PASSWORD_RESET_EMAIL_START,
+    sendPasswordResetEmail
+  );
+}
+export function* sendPasswordResetEmail({ payload }) {
+  try {
+    yield auth.sendPasswordResetEmail(payload, {
+      url: "https://imex.online/passwordreset",
+    });
+    console.log("Good should send.");
+    yield put(sendPasswordResetSuccess());
+  } catch (error) {
+    yield put(sendPasswordResetFailure(error.message));
+  }
+}
+
+export function* onValidatePasswordResetStart() {
+  yield takeLatest(
+    UserActionTypes.VALIDATE_PASSWORD_RESET_START,
+    validatePasswordResetStart
+  );
+}
+export function* validatePasswordResetStart({ payload: { password, code } }) {
+  try {
+    yield auth.confirmPasswordReset(code, password);
+    console.log("Good should send.");
+    yield put(validatePasswordResetSuccess());
+  } catch (error) {
+    console.log("function*validatePasswordResetStart -> error", error);
+    yield put(validatePasswordResetFailure(error.message));
+  }
+}
+
 export function* userSagas() {
   yield all([
     call(onEmailSignInStart),
@@ -170,5 +209,7 @@ export function* userSagas() {
     call(onSetInstanceId),
     call(onCheckInstanceId),
     call(onSignInSuccess),
+    call(onSendPasswordResetStart),
+    call(onValidatePasswordResetStart)
   ]);
 }

client/src/redux/user/user.selectors.js

@@ -21,3 +21,8 @@ export const selectInstanceConflict = createSelector(
   [selectUser],
   (user) => user.conflict
 );
+
+export const selectPasswordReset = createSelector(
+  [selectUser],
+  (user) => user.passwordreset
+);

client/src/redux/user/user.types.js

@@ -19,6 +19,12 @@ const UserActionTypes = {
   SET_INSTANCE_ID: "SET_INSTANCE_ID",
   CHECK_INSTANCE_ID: "CHECK_INSTANCE_ID",
   SET_INSTANCE_CONFLICT: "SET_INSTANCE_CONFLICT",
-  SET_LOCAL_FINGERPRINT: "SET_LOCAL_FINGERPRINT"
+  SET_LOCAL_FINGERPRINT: "SET_LOCAL_FINGERPRINT",
+  SEND_PASSWORD_RESET_EMAIL_START: "SEND_PASSWORD_RESET_EMAIL_START",
+  SEND_PASSWORD_RESET_EMAIL_FAILURE: "SEND_PASSWORD_RESET_EMAIL_FAILURE",
+  SEND_PASSWORD_RESET_EMAIL_SUCCESS: "SEND_PASSWORD_RESET_EMAIL_SUCCESS",
+  VALIDATE_PASSWORD_RESET_START: "VALIDATE_PASSWORD_RESET_START",
+  VALIDATE_PASSWORD_RESET_SUCCESS: "VALIDATE_PASSWORD_RESET_SUCCESS",
+  VALIDATE_PASSWORD_RESET_FAILURE: "VALIDATE_PASSWORD_RESET_FAILURE",
 };
 export default UserActionTypes;

client/src/translations/en_us/common.json

@@ -385,6 +385,7 @@
 				"login": "Login",
 				"refresh": "Refresh",
 				"reset": "Reset your changes.",
+				"resetpassword": "Reset Password",
 				"save": "Save",
 				"saveandnew": "Save and New",
 				"submit": "Submit",
@@ -401,6 +402,7 @@
 				"actions": "Actions",
 				"areyousure": "Are you sure?",
 				"barcode": "Barcode",
+				"confirmpassword": "Confirm Password",
 				"email": "Email",
 				"errors": "Errors",
 				"exceptiontitle": "An error has occurred.",
@@ -415,6 +417,9 @@
 				"no": "No",
 				"out": "Out",
 				"password": "Password",
+				"passwordresetsuccess": "A password reset link has been sent to you.",
+				"passwordresetsuccess_sub": "You should receive this email in the next few minutes. Please check your email including any junk or spam folders. ",
+				"passwordsdonotmatch": "The passwords you have entered do not match.",
 				"print": "Print",
 				"search": "Search...",
 				"selectdate": "Select date...",

client/src/translations/es/common.json

@@ -385,6 +385,7 @@
 				"login": "",
 				"refresh": "",
 				"reset": " Restablecer a original.",
+				"resetpassword": "",
 				"save": "Salvar",
 				"saveandnew": "",
 				"submit": "",
@@ -401,6 +402,7 @@
 				"actions": "Comportamiento",
 				"areyousure": "",
 				"barcode": "código de barras",
+				"confirmpassword": "",
 				"email": "",
 				"errors": "",
 				"exceptiontitle": "",
@@ -415,6 +417,9 @@
 				"no": "",
 				"out": "Afuera",
 				"password": "",
+				"passwordresetsuccess": "",
+				"passwordresetsuccess_sub": "",
+				"passwordsdonotmatch": "",
 				"print": "",
 				"search": "Buscar...",
 				"selectdate": "",

client/src/translations/fr/common.json

@@ -385,6 +385,7 @@
 				"login": "",
 				"refresh": "",
 				"reset": " Rétablir l'original.",
+				"resetpassword": "",
 				"save": "sauvegarder",
 				"saveandnew": "",
 				"submit": "",
@@ -401,6 +402,7 @@
 				"actions": "actes",
 				"areyousure": "",
 				"barcode": "code à barre",
+				"confirmpassword": "",
 				"email": "",
 				"errors": "",
 				"exceptiontitle": "",
@@ -415,6 +417,9 @@
 				"no": "",
 				"out": "En dehors",
 				"password": "",
+				"passwordresetsuccess": "",
+				"passwordresetsuccess_sub": "",
+				"passwordsdonotmatch": "",
 				"print": "",
 				"search": "Chercher...",
 				"selectdate": "",