85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { Button, Alert, Input } from 'antd';
|
|
import { requestUserRecoveryEmail } from 'api/api';
|
|
import './AccountRecovery.less';
|
|
import Result from 'ant-design-pro/lib/Result';
|
|
|
|
const STATE = {
|
|
email: '',
|
|
isRecoveryPending: false,
|
|
isRecoverySuccess: false,
|
|
recoveryError: '',
|
|
};
|
|
|
|
type State = typeof STATE;
|
|
|
|
class AccountRecovery extends React.Component<{}, State> {
|
|
state: State = { ...STATE };
|
|
render() {
|
|
const { recoveryError, isRecoveryPending, isRecoverySuccess, email } = this.state;
|
|
return (
|
|
<div className="AccountRecovery">
|
|
<div className="AccountRecovery-container">
|
|
{!isRecoverySuccess && (
|
|
<form onSubmit={this.handleRecover}>
|
|
<Input
|
|
value={email}
|
|
placeholder="email address"
|
|
onChange={e => this.setState({ email: e.currentTarget.value })}
|
|
size="large"
|
|
autoComplete="email"
|
|
type="email"
|
|
required={true}
|
|
/>
|
|
<Button
|
|
htmlType="submit"
|
|
type="primary"
|
|
size="large"
|
|
loading={isRecoveryPending}
|
|
block
|
|
>
|
|
Send Recovery Email
|
|
</Button>
|
|
</form>
|
|
)}
|
|
{isRecoverySuccess && (
|
|
<Result
|
|
type="success"
|
|
title="Please check your email for recovery instructions."
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{recoveryError && (
|
|
<Alert
|
|
className="AccountRecovery-error"
|
|
type="error"
|
|
message="Recovery failed"
|
|
description={recoveryError}
|
|
showIcon
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private handleRecover = (ev: React.FormEvent<HTMLFormElement>) => {
|
|
ev.preventDefault();
|
|
const { email } = this.state;
|
|
this.setState({
|
|
...STATE,
|
|
isRecoveryPending: true,
|
|
email,
|
|
});
|
|
requestUserRecoveryEmail(email)
|
|
.then(() => {
|
|
this.setState({ isRecoveryPending: false, isRecoverySuccess: true });
|
|
})
|
|
.catch(e => {
|
|
this.setState({ isRecoveryPending: false, recoveryError: e.message });
|
|
});
|
|
};
|
|
}
|
|
|
|
export default AccountRecovery;
|