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>
</translations>
</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>
<name>sendby</name>
<definition_loaded>false</definition_loaded>
@@ -19893,6 +19914,48 @@
</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>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>
<name>schedule</name>
<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 {
PaymentRequestButtonElement,
useStripe,
Elements,
useElements,
useStripe
} 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({
bodyshop: selectBodyshop,
@@ -47,9 +44,9 @@ function Test({ bodyshop, setEmailOptions }) {
if (result) {
setPaymentRequest(pr);
} else {
var details = {
total: { label: "", amount: { currency: "CAD", value: "0.00" } },
};
// var details = {
// total: { label: "", amount: { currency: "CAD", value: "0.00" } },
// };
// new PaymentRequest(
// [{ 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 { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ImEXOnlineLogo from "../../assets/logo240.png";
import { sendPasswordReset } from "../../redux/user/user.actions";
import { selectPasswordReset } from "../../redux/user/user.selectors";
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({
passwordReset: selectPasswordReset,
@@ -28,11 +29,14 @@ export function UserRequestResetPw({ passwordReset, sendPasswordReset }) {
if (passwordReset.success)
return (
<Result
status='success'
status="success"
title={t("general.labels.passwordresetsuccess")}
subTitle={t("general.labels.passwordresetsuccess_sub")}
extra={[
<Button onClick={() => sendPasswordReset(passwordReset.email)}>
<Button
key="send-again"
onClick={() => sendPasswordReset(passwordReset.email)}
>
{t("general.labels.sendagain")}
</Button>,
]}
@@ -40,24 +44,33 @@ export function UserRequestResetPw({ passwordReset, sendPasswordReset }) {
);
return (
<div>
<Form onFinish={handleFinish}>
<div className="login-container">
<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
label={t("general.labels.email")}
name='email'
name="email"
rules={[
{
type: "email",
required: true,
message: t("general.validation.required"),
},
]}>
<EmailFormItemComponent />
]}
>
<Input />
</Form.Item>
{passwordReset.error ? (
<AlertComponent message={passwordReset.error} type='warning' />
<AlertComponent message={passwordReset.error} type="warning" />
) : null}
<Button htmlType='submit'>{t("general.actions.submit")}</Button>
<Button className="login-btn" type="primary" htmlType="submit">
{t("general.actions.submit")}
</Button>
</Form>
</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 { Button, Form, Input } from "antd";
import { Button, Form, Input, Result, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import ImEXOnlineLogo from "../../assets/logo240.png";
import { validatePasswordResetStart } from "../../redux/user/user.actions";
import { selectPasswordReset } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import "./user-validate-pw-reset.styles.scss";
const mapStateToProps = createStructuredSelector({
passwordReset: selectPasswordReset,
@@ -21,34 +24,56 @@ export function UserValidatePwReset({
validatePasswordReset,
oobCode,
}) {
console.log("UserValidatePwReset -> oobCode", oobCode);
const { t } = useTranslation();
const handleFinish = (values) => {
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 (
<div>
<Form onFinish={handleFinish}>
<div className="reset-container">
<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
label={t("general.labels.password")}
name='password'
name="password"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input
prefix={<LockOutlined />}
type='password'
type="password"
placeholder={t("general.labels.password")}
/>
</Form.Item>
<Form.Item
label={t("general.labels.confirmpassword")}
name='password-confirm'
name="password-confirm"
dependencies={["password"]}
rules={[
{
@@ -63,17 +88,20 @@ export function UserValidatePwReset({
return Promise.reject(t("general.labels.passwordsdonotmatch"));
},
}),
]}>
]}
>
<Input
prefix={<LockOutlined />}
type='password'
type="password"
placeholder={t("general.labels.password")}
/>
</Form.Item>
{passwordReset.error ? (
<AlertComponent message={passwordReset.error} type='warning' />
<AlertComponent message={passwordReset.error} type="warning" />
) : null}
<Button htmlType='submit'>{t("general.actions.submit")}</Button>
<Button type="primary" className="reset-btn" htmlType="submit">
{t("general.actions.submit")}
</Button>
</Form>
</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;
console.log("ResetPassword -> mode, oobCode", mode, oobCode);
if (mode === "passwordReset")
if (mode === "resetPassword")
return <UserValidatePwReset oobCode={oobCode} />;
return <UserRequestResetPw />;
}

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

@@ -22,7 +22,7 @@ import {
sendPasswordResetFailure,
sendPasswordResetSuccess,
validatePasswordResetSuccess,
validatePasswordResetFailure
validatePasswordResetFailure,
} from "./user.actions";
import UserActionTypes from "./user.types";
@@ -192,7 +192,6 @@ export function* onValidatePasswordResetStart() {
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);
@@ -210,6 +209,6 @@ export function* userSagas() {
call(onCheckInstanceId),
call(onSignInSuccess),
call(onSendPasswordResetStart),
call(onValidatePasswordResetStart)
call(onValidatePasswordResetStart),
]);
}

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

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

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

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

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

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