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

Finished password reset functionality BOD-165

Browse Source
This commit is contained in:
Patrick Fic
2020-07-24 17:13:00 -07:00
parent 8750894c56
commit 081b33cc22
11 changed files with 208 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
bodyshop_translations.babel
View File

@@ -6491,6 +6491,27 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>sendagain</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> <concept_node>
<name>sendby</name> <name>sendby</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -19893,6 +19914,48 @@
</translation> </translation>
</translations> </translations>
</concept_node> </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>resetpasswordvalidate</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> <concept_node>
<name>schedule</name> <name>schedule</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

25
client/src/components/_test/test.component.jsx
View File

@@ -1,17 +1,14 @@
import axios from "axios";
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { auth, logImEXEvent } from "../../firebase/firebase.utils";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { setEmailOptions } from "../../redux/email/email.actions";
import { TemplateList } from "../../utils/TemplateConstants";
import { import {
PaymentRequestButtonElement, PaymentRequestButtonElement,
useStripe, useStripe
Elements,
useElements,
} from "@stripe/react-stripe-js"; } from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { setEmailOptions } from "../../redux/email/email.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { TemplateList } from "../../utils/TemplateConstants";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop, bodyshop: selectBodyshop,
@@ -47,9 +44,9 @@ function Test({ bodyshop, setEmailOptions }) {
if (result) { if (result) {
setPaymentRequest(pr); setPaymentRequest(pr);
} else { } else {
var details = { // var details = {
total: { label: "", amount: { currency: "CAD", value: "0.00" } }, // total: { label: "", amount: { currency: "CAD", value: "0.00" } },
}; // };
// new PaymentRequest( // new PaymentRequest(
// [{ supportedMethods: ["basic-card"] }], // [{ supportedMethods: ["basic-card"] }],
// {} // {}

29
client/src/components/user-request-pw-reset/user-request-pw-reset.styles.scss Normal file
View File

@@ -0,0 +1,29 @@
.login-container {
display: flex;
align-items: center;
flex-direction: column;
padding: 2rem;
form {
width: 75vw;
max-width: 20rem;
}
}
.login-logo-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
h1 {
text-align: center;
margin: 1rem;
}
}
//Required as it is position inside form.
.login-btn {
margin: 1.5rem 0rem;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}

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

@@ -1,12 +1,13 @@
import { Button, Form, Result } from "antd"; import { Button, Form, Input, Result, Typography } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import ImEXOnlineLogo from "../../assets/logo240.png";
import { sendPasswordReset } from "../../redux/user/user.actions"; import { sendPasswordReset } from "../../redux/user/user.actions";
import { selectPasswordReset } from "../../redux/user/user.selectors"; import { selectPasswordReset } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import EmailFormItemComponent from "../form-items-formatted/email-form-item.component"; import "./user-request-pw-reset.styles.scss";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
passwordReset: selectPasswordReset, passwordReset: selectPasswordReset,
@@ -28,11 +29,14 @@ export function UserRequestResetPw({ passwordReset, sendPasswordReset }) {
if (passwordReset.success) if (passwordReset.success)
return ( return (
<Result <Result
status='success' status="success"
title={t("general.labels.passwordresetsuccess")} title={t("general.labels.passwordresetsuccess")}
subTitle={t("general.labels.passwordresetsuccess_sub")} subTitle={t("general.labels.passwordresetsuccess_sub")}
extra={[ extra={[
<Button onClick={() => sendPasswordReset(passwordReset.email)}> <Button
key="send-again"
onClick={() => sendPasswordReset(passwordReset.email)}
>
{t("general.labels.sendagain")} {t("general.labels.sendagain")}
</Button>, </Button>,
]} ]}
@@ -40,24 +44,33 @@ export function UserRequestResetPw({ passwordReset, sendPasswordReset }) {
); );
return ( return (
<div> <div className="login-container">
<Form onFinish={handleFinish}> <div className="login-logo-container">
<img src={ImEXOnlineLogo} height="100" width="100" alt="ImEX Online" />
<Typography.Title>{t("titles.app")}</Typography.Title>
</div>
<Typography.Title level={3}>{t("titles.resetpassword")}</Typography.Title>
<Form layout="vertical" size="large" onFinish={handleFinish}>
<Form.Item <Form.Item
label={t("general.labels.email")} label={t("general.labels.email")}
name='email' name="email"
rules={[ rules={[
{ {
type: "email", type: "email",
required: true, required: true,
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]}> ]}
<EmailFormItemComponent /> >
<Input />
</Form.Item> </Form.Item>
{passwordReset.error ? ( {passwordReset.error ? (
<AlertComponent message={passwordReset.error} type='warning' /> <AlertComponent message={passwordReset.error} type="warning" />
) : null} ) : null}
<Button htmlType='submit'>{t("general.actions.submit")}</Button> <Button className="login-btn" type="primary" htmlType="submit">
{t("general.actions.submit")}
</Button>
</Form> </Form>
</div> </div>
); );

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

@@ -1,12 +1,15 @@
import { LockOutlined } from "@ant-design/icons"; import { LockOutlined } from "@ant-design/icons";
import { Button, Form, Input } from "antd"; import { Button, Form, Input, Result, Typography } from "antd";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import ImEXOnlineLogo from "../../assets/logo240.png";
import { validatePasswordResetStart } from "../../redux/user/user.actions"; import { validatePasswordResetStart } from "../../redux/user/user.actions";
import { selectPasswordReset } from "../../redux/user/user.selectors"; import { selectPasswordReset } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import "./user-validate-pw-reset.styles.scss";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
passwordReset: selectPasswordReset, passwordReset: selectPasswordReset,
@@ -21,34 +24,56 @@ export function UserValidatePwReset({
validatePasswordReset, validatePasswordReset,
oobCode, oobCode,
}) { }) {
console.log("UserValidatePwReset -> oobCode", oobCode);
const { t } = useTranslation(); const { t } = useTranslation();
const handleFinish = (values) => { const handleFinish = (values) => {
validatePasswordReset({ code: oobCode, password: values.password }); validatePasswordReset({ code: oobCode, password: values.password });
}; };
if (passwordReset.success)
return (
<Result
status="success"
title={t("general.labels.passwordresetvalidatesuccess")}
subTitle={t("general.labels.passwordresetvalidatesuccess_sub")}
extra={[
<Link to={`/manage`}>
<Button>{t("general.labels.signin")}</Button>
</Link>,
]}
/>
);
return ( return (
<div> <div className="reset-container">
<Form onFinish={handleFinish}> <div className="reset-logo-container">
<img src={ImEXOnlineLogo} height="100" width="100" alt="ImEX Online" />
<Typography.Title>{t("titles.app")}</Typography.Title>
</div>
<Typography.Title level={3}>
{t("titles.resetpasswordvalidate")}
</Typography.Title>
<Form onFinish={handleFinish} size="large" layout="vertical">
<Form.Item <Form.Item
label={t("general.labels.password")} label={t("general.labels.password")}
name='password' name="password"
rules={[ rules={[
{ {
required: true, required: true,
message: t("general.validation.required"), message: t("general.validation.required"),
}, },
]}> ]}
>
<Input <Input
prefix={<LockOutlined />} prefix={<LockOutlined />}
type='password' type="password"
placeholder={t("general.labels.password")} placeholder={t("general.labels.password")}
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label={t("general.labels.confirmpassword")} label={t("general.labels.confirmpassword")}
name='password-confirm' name="password-confirm"
dependencies={["password"]} dependencies={["password"]}
rules={[ rules={[
{ {
@@ -63,17 +88,20 @@ export function UserValidatePwReset({
return Promise.reject(t("general.labels.passwordsdonotmatch")); return Promise.reject(t("general.labels.passwordsdonotmatch"));
}, },
}), }),
]}> ]}
>
<Input <Input
prefix={<LockOutlined />} prefix={<LockOutlined />}
type='password' type="password"
placeholder={t("general.labels.password")} placeholder={t("general.labels.password")}
/> />
</Form.Item> </Form.Item>
{passwordReset.error ? ( {passwordReset.error ? (
<AlertComponent message={passwordReset.error} type='warning' /> <AlertComponent message={passwordReset.error} type="warning" />
) : null} ) : null}
<Button htmlType='submit'>{t("general.actions.submit")}</Button> <Button type="primary" className="reset-btn" htmlType="submit">
{t("general.actions.submit")}
</Button>
</Form> </Form>
</div> </div>
); );

29
client/src/components/user-validate-pw-reset/user-validate-pw-reset.styles.scss Normal file
View File

@@ -0,0 +1,29 @@
.reset-container {
display: flex;
align-items: center;
flex-direction: column;
padding: 2rem;
form {
width: 75vw;
max-width: 20rem;
}
}
.reset-logo-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
h1 {
text-align: center;
margin: 1rem;
}
}
//Required as it is position inside form.
.reset-btn {
margin: 1.5rem 0rem;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}

2
client/src/pages/reset-password/reset-password.component.jsx
View File

@@ -9,7 +9,7 @@ export default function ResetPassword() {
const { mode, oobCode } = searchParams; const { mode, oobCode } = searchParams;
console.log("ResetPassword -> mode, oobCode", mode, oobCode); console.log("ResetPassword -> mode, oobCode", mode, oobCode);
if (mode === "passwordReset") if (mode === "resetPassword")
return <UserValidatePwReset oobCode={oobCode} />; return <UserValidatePwReset oobCode={oobCode} />;
return <UserRequestResetPw />; return <UserRequestResetPw />;
} }

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

@@ -22,7 +22,7 @@ import {
sendPasswordResetFailure, sendPasswordResetFailure,
sendPasswordResetSuccess, sendPasswordResetSuccess,
validatePasswordResetSuccess, validatePasswordResetSuccess,
validatePasswordResetFailure validatePasswordResetFailure,
} from "./user.actions"; } from "./user.actions";
import UserActionTypes from "./user.types"; import UserActionTypes from "./user.types";
@@ -192,7 +192,6 @@ export function* onValidatePasswordResetStart() {
export function* validatePasswordResetStart({ payload: { password, code } }) { export function* validatePasswordResetStart({ payload: { password, code } }) {
try { try {
yield auth.confirmPasswordReset(code, password); yield auth.confirmPasswordReset(code, password);
console.log("Good should send.");
yield put(validatePasswordResetSuccess()); yield put(validatePasswordResetSuccess());
} catch (error) { } catch (error) {
console.log("function*validatePasswordResetStart -> error", error); console.log("function*validatePasswordResetStart -> error", error);
@@ -210,6 +209,6 @@ export function* userSagas() {
call(onCheckInstanceId), call(onCheckInstanceId),
call(onSignInSuccess), call(onSignInSuccess),
call(onSendPasswordResetStart), call(onSendPasswordResetStart),
call(onValidatePasswordResetStart) call(onValidatePasswordResetStart),
]); ]);
} }

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

@@ -428,6 +428,7 @@
"print": "Print", "print": "Print",
"search": "Search...", "search": "Search...",
"selectdate": "Select date...", "selectdate": "Select date...",
"sendagain": "Send Again",
"sendby": "Send By", "sendby": "Send By",
"text": "Text", "text": "Text",
"unknown": "Unknown", "unknown": "Unknown",
@@ -1238,6 +1239,8 @@
"productionboard": "Production - Board", "productionboard": "Production - Board",
"productionlist": "Production - List View | $t(titles.app)", "productionlist": "Production - List View | $t(titles.app)",
"profile": "My Profile | $t(titles.app)", "profile": "My Profile | $t(titles.app)",
"resetpassword": "Reset Password",
"resetpasswordvalidate": "Enter New Password",
"schedule": "Schedule | $t(titles.app)", "schedule": "Schedule | $t(titles.app)",
"scoreboard": "Scoreboard | $t(titles.app)", "scoreboard": "Scoreboard | $t(titles.app)",
"shop": "My Shop | $t(titles.app)", "shop": "My Shop | $t(titles.app)",

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

@@ -428,6 +428,7 @@
"print": "", "print": "",
"search": "Buscar...", "search": "Buscar...",
"selectdate": "", "selectdate": "",
"sendagain": "",
"sendby": "", "sendby": "",
"text": "", "text": "",
"unknown": "Desconocido", "unknown": "Desconocido",
@@ -1238,6 +1239,8 @@
"productionboard": "", "productionboard": "",
"productionlist": "", "productionlist": "",
"profile": "Mi perfil | $t(titles.app)", "profile": "Mi perfil | $t(titles.app)",
"resetpassword": "",
"resetpasswordvalidate": "",
"schedule": "Horario | $t(titles.app)", "schedule": "Horario | $t(titles.app)",
"scoreboard": "", "scoreboard": "",
"shop": "Mi tienda | $t(titles.app)", "shop": "Mi tienda | $t(titles.app)",

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

@@ -428,6 +428,7 @@
"print": "", "print": "",
"search": "Chercher...", "search": "Chercher...",
"selectdate": "", "selectdate": "",
"sendagain": "",
"sendby": "", "sendby": "",
"text": "", "text": "",
"unknown": "Inconnu", "unknown": "Inconnu",
@@ -1238,6 +1239,8 @@
"productionboard": "", "productionboard": "",
"productionlist": "", "productionlist": "",
"profile": "Mon profil | $t(titles.app)", "profile": "Mon profil | $t(titles.app)",
"resetpassword": "",
"resetpasswordvalidate": "",
"schedule": "Horaire | $t(titles.app)", "schedule": "Horaire | $t(titles.app)",
"scoreboard": "", "scoreboard": "",
"shop": "Mon magasin | $t(titles.app)", "shop": "Mon magasin | $t(titles.app)",