Files
bodyshop/client/src/components/user-request-pw-reset/user-request-reset-pw.component.jsx
2025-08-19 16:23:29 -04:00

93 lines
3.0 KiB
JavaScript

import { Button, Form, Input, Result, Typography } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import ImEXOnlineLogo from "../../assets/logo192.png";
import { sendPasswordReset, sendPasswordResetAgain } from "../../redux/user/user.actions";
import { selectPasswordReset } from "../../redux/user/user.selectors";
import AlertComponent from "../alert/alert.component";
import "./user-request-pw-reset.styles.scss";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
const mapStateToProps = createStructuredSelector({
passwordReset: selectPasswordReset
});
const mapDispatchToProps = (dispatch) => ({
sendPasswordReset: (email) => dispatch(sendPasswordReset(email)),
sendPasswordResetAgain: (email) => dispatch(sendPasswordResetAgain(email))
});
export function UserRequestResetPw({ passwordReset, sendPasswordReset, sendPasswordResetAgain }) {
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
key="send-again"
onClick={() => sendPasswordResetAgain(passwordReset.email)}
loading={passwordReset.loading}
>
{t("general.labels.sendagain")}
</Button>
]}
/>
);
return (
<div className="login-container">
<div className="login-logo-container">
<img
src={InstanceRenderManager({ imex: ImEXOnlineLogo, rome: null })}
height="100"
width="100"
alt={InstanceRenderManager({
imex: t("titles.imexonline"),
rome: t("titles.romeonline")
})}
/>
<Typography.Title>
{InstanceRenderManager({
imex: t("titles.imexonline"),
rome: t("titles.romeonline")
})}
</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"
rules={[
{
type: "email",
required: true
//message: t("general.validation.required"),
}
]}
>
<Input />
</Form.Item>
{passwordReset.error ? <AlertComponent message={passwordReset.error} type="warning" /> : null}
<Button className="login-btn" type="primary" htmlType="submit" loading={passwordReset.loading}>
{t("general.actions.submit")}
</Button>
</Form>
</div>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(UserRequestResetPw);