76 lines
2.2 KiB
TypeScript
Raw Normal View History

2020-12-07 23:34:01 -08:00
import React, { useState, useEffect } from 'react'
import { FormattedMessage, useIntl } from 'react-intl'
import { useHistory } from "react-router-dom"
2020-12-15 18:04:12 -08:00
import { Service, ErrorInfo } from '../../services/Service'
2020-12-09 22:29:28 -08:00
2020-12-07 23:34:01 -08:00
import Header from '../header'
import Footer from '../footer'
2020-12-15 18:04:12 -08:00
import { PageContent } from '../../theme/global-style'
2020-12-11 20:06:42 -08:00
import FormErrorDialog from '../form-error-dialog'
import SubmitButton from '../submit-button'
2020-12-07 23:34:01 -08:00
type ForgotPasswordProps = {
email: string;
}
2020-12-11 20:06:42 -08:00
const ForgotPassword = (props: ServiceProps) => {
2020-12-15 18:04:12 -08:00
const [email, setEmail] = useState('');
const [errorMsg, setErrorMsg] = useState('');
2020-12-07 23:34:01 -08:00
const [disableButton, setDisableButton] = useState(false);
const history = useHistory();
const intl = useIntl();
2020-12-15 18:04:12 -08:00
const handleOnSubmit = (event: React.FormEvent<any>) => {
2020-12-07 23:34:01 -08:00
event.preventDefault();
setDisableButton(true);
// Call Service ...
2020-12-15 18:04:12 -08:00
const service = props.service;
service.resetPassword(email)
.then(() => {
history.push("/c/forgot-password-success");
}).catch((error: ErrorInfo) => {
setErrorMsg(error.msg ? error.msg : '');
2020-12-11 20:33:02 -08:00
setDisableButton(false);
2020-12-15 18:04:12 -08:00
});
2020-12-07 23:34:01 -08:00
}
return (
2020-12-09 22:29:28 -08:00
<PageContent>
2020-12-15 18:04:12 -08:00
<h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password"/></h1>
<p><FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password"/></p>
2020-12-07 23:34:01 -08:00
2020-12-15 18:04:12 -08:00
<form onSubmit={handleOnSubmit}>
2020-12-09 22:29:28 -08:00
<input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
2020-12-07 23:34:01 -08:00
2020-12-11 20:06:42 -08:00
<FormErrorDialog message={errorMsg} />
2020-12-07 23:34:01 -08:00
2020-12-09 22:29:28 -08:00
<SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
</form>
</PageContent>
2020-12-07 23:34:01 -08:00
);
}
type ServiceProps = {
service: Service
}
const ForgotPasswordPage = (props: ServiceProps) => {
useEffect(() => {
2020-12-11 20:06:42 -08:00
document.title = 'Reset Password | WiseMapping';
2020-12-07 23:34:01 -08:00
});
return (
<div>
<Header type='only-signin' />
2020-12-11 20:06:42 -08:00
<ForgotPassword service={props.service} />
2020-12-07 23:34:01 -08:00
<Footer />
</div>
);
}
export { ForgotPasswordPage }