admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Patrick Fic
2020-07-20 13:52:24 -07:00
parent e6865a4bfc
commit d2aa72f5d9
15 changed files with 427 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
bodyshop_translations.babel
View File

@@ -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>

4
client/src/App/App.js
View File

@@ -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}

14
client/src/components/sign-in-form/sign-in-form.component.jsx
View File

@@ -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>
);
}

70
client/src/components/user-request-pw-reset/user-request-reset-pw.component.jsx Normal file
View File

@@ -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);

85
client/src/components/user-validate-pw-reset/user-validate-pw-reset.component.jsx Normal file
View File

@@ -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);

2
client/src/firebase/firebase.utils.js
View File

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

31
client/src/pages/reset-password/reset-password.component.jsx Normal file
View File

@@ -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 />;
}

26
client/src/redux/user/user.actions.js
View File

@@ -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,
});

24
client/src/redux/user/user.reducer.js
View File

@@ -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,

41
client/src/redux/user/user.sagas.js
View File

@@ -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)
]);
}

5
client/src/redux/user/user.selectors.js
View File

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

8
client/src/redux/user/user.types.js
View File

@@ -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;

5
client/src/translations/en_us/common.json
View File

@@ -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...",

5
client/src/translations/es/common.json
View File

@@ -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": "",

5
client/src/translations/fr/common.json
View File

@@ -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": "",