105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Form, Input, Loader, Button, Link, Icon, Message } from 'UI';
|
|
import ReCAPTCHA from 'react-google-recaptcha';
|
|
import { connect } from 'react-redux';
|
|
import { requestResetPassword, resetPassword, resetErrors } from 'Duck/user';
|
|
|
|
interface Props {
|
|
requestResetPassword: Function;
|
|
}
|
|
function ResetPasswordRequest(props: Props) {
|
|
const recaptchaRef = React.createRef();
|
|
const [requested, setRequested] = React.useState(false);
|
|
const [email, setEmail] = React.useState('');
|
|
const [error, setError] = React.useState(null);
|
|
const CAPTCHA_ENABLED = window.env.CAPTCHA_ENABLED === 'true';
|
|
const CAPTCHA_SITE_KEY = window.env.CAPTCHA_SITE_KEY;
|
|
|
|
const write = (e: any) => {
|
|
const { name, value } = e.target;
|
|
if (name === 'email') setEmail(value);
|
|
};
|
|
|
|
const onSubmit = (e: any) => {
|
|
e.preventDefault();
|
|
if (CAPTCHA_ENABLED && recaptchaRef.current) {
|
|
recaptchaRef.current.execute();
|
|
} else if (!CAPTCHA_ENABLED) {
|
|
handleSubmit();
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (token?: any) => {
|
|
setError(null);
|
|
props
|
|
.requestResetPassword({ email: email.trim(), 'g-recaptcha-response': token })
|
|
.then((response: any) => {
|
|
setRequested(true);
|
|
if (response && response.errors && response.errors.length > 0) {
|
|
setError(response.errors[0]);
|
|
} else {
|
|
}
|
|
});
|
|
};
|
|
return (
|
|
<Form onSubmit={onSubmit} style={{ minWidth: '50%' }} className="flex flex-col">
|
|
<Loader loading={false}>
|
|
{CAPTCHA_ENABLED && (
|
|
<div className="flex justify-center">
|
|
<ReCAPTCHA
|
|
ref={recaptchaRef}
|
|
size="invisible"
|
|
data-hidden={requested}
|
|
sitekey={CAPTCHA_SITE_KEY}
|
|
onChange={(token: any) => handleSubmit(token)}
|
|
/>
|
|
</div>
|
|
)}
|
|
{!requested && (
|
|
<>
|
|
<Form.Field>
|
|
<label>{'Email Address'}</label>
|
|
<Input
|
|
autoFocus={true}
|
|
autoComplete="email"
|
|
type="email"
|
|
placeholder="Email"
|
|
name="email"
|
|
onChange={write}
|
|
className="w-full"
|
|
icon="envelope"
|
|
required
|
|
/>
|
|
</Form.Field>
|
|
<Button type="submit" variant="primary" className="mt-4">
|
|
Email password reset link
|
|
</Button>
|
|
</>
|
|
)}
|
|
|
|
{requested && !error && (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div className="w-16 h-16 rounded-full bg-tealx-light flex items-center justify-center mb-2">
|
|
<Icon name="envelope-check" size={30} color="tealx" />
|
|
</div>
|
|
<div>
|
|
Alright! a reset link was emailed to <span className="font-medium">{email}</span>.
|
|
Click on it to reset your account password.
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="flex items-center flex-col text-center">
|
|
<div className="w-16 h-16 rounded-full bg-red-lightest flex items-center justify-center mb-2">
|
|
<Icon name="envelope-x" size="30" color="red" />
|
|
</div>
|
|
{error}
|
|
</div>
|
|
)}
|
|
</Loader>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
export default connect((state: any) => ({}), { requestResetPassword })(ResetPasswordRequest);
|