Files
bodyshop/client/src/components/user-request-pw-reset/user-request-reset-pw.component.jsx
2020-07-20 13:52:24 -07:00

71 lines
2.1 KiB
JavaScript

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