@shopgate/engage
Version:
Shopgate's ENGAGE library.
112 lines (111 loc) • 3.87 kB
JavaScript
import React, { Fragment, useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { RippleButton, I18n, ArrowIcon } from '@shopgate/engage/components';
import TextField from '@shopgate/pwa-ui-shared/TextField';
import { i18n, EUSERNOTFOUND } from '@shopgate/engage/core';
import { container, headline, subline, form, input, button, buttonContainer, resetInstructions, resetInstructionsEmail, goBackButtonContainer, goBackButton, goBackButtonIcon } from "./ForgotPassword.style";
import connect from "./ForgotPassword.connector";
/**
* The ForgotPassword component.
* @param {Object} props The component props.
* @returns {JSX}
*/
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const ForgotPassword = ({
resetPassword,
goBack
}) => {
const [showSuccess, setShowSuccess] = useState(false);
const [email, setEmail] = useState('');
const [validationError, setValidationError] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = useCallback(async event => {
event.preventDefault();
setValidationError('');
if (email) {
setLoading(true);
try {
await resetPassword(email);
setShowSuccess(true);
} catch (error) {
const {
code
} = error;
if (code === EUSERNOTFOUND) {
setValidationError('login.reset_password.customer_not_found');
}
}
setLoading(false);
} else {
setValidationError('validation.email');
}
}, [email, resetPassword]);
const handleBackToLogin = useCallback(() => {
goBack();
}, [goBack]);
return /*#__PURE__*/_jsxs("div", {
className: container,
children: [/*#__PURE__*/_jsx("div", {
className: headline,
children: /*#__PURE__*/_jsx(I18n.Text, {
string: "login.forgot_password"
})
}), !showSuccess ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("div", {
className: subline,
children: /*#__PURE__*/_jsx(I18n.Text, {
string: "login.reset_password.subline"
})
}), /*#__PURE__*/_jsxs("form", {
onSubmit: handleSubmit,
className: form,
children: [/*#__PURE__*/_jsx(TextField, {
type: "email",
name: "email",
className: input,
label: "login.email",
value: email,
onChange: value => setEmail(value),
errorText: validationError
}), /*#__PURE__*/_jsx("div", {
className: buttonContainer,
children: /*#__PURE__*/_jsx(RippleButton, {
className: button,
type: "secondary",
disabled: loading,
children: /*#__PURE__*/_jsx(I18n.Text, {
string: "common.submit"
})
})
})]
})]
}) : /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("div", {
className: resetInstructions,
children: /*#__PURE__*/_jsx("span", {
/* eslint-disable react/no-danger */
dangerouslySetInnerHTML: {
__html: i18n.text('login.reset_password.reset_instructions', {
email: `<span class="${resetInstructionsEmail}">${email}</span>`
})
}
/* eslint-enable react/no-danger */
})
}), /*#__PURE__*/_jsx("div", {
className: goBackButtonContainer,
children: /*#__PURE__*/_jsxs(RippleButton, {
flat: true,
className: goBackButton,
type: "secondary",
onClick: handleBackToLogin,
children: [/*#__PURE__*/_jsx(ArrowIcon, {
className: goBackButtonIcon
}), /*#__PURE__*/_jsx(I18n.Text, {
string: "login.reset_password.back_to_login"
})]
})
})]
})]
});
};
export default connect(ForgotPassword);