109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { Button, Form, Alert } from 'antd';
|
|
import qs from 'query-string';
|
|
import { withRouter, RouteComponentProps, Link } from 'react-router-dom';
|
|
import Result from 'ant-design-pro/lib/Result';
|
|
import { resetPassword } from 'api/api';
|
|
import { FormComponentProps } from 'antd/lib/form';
|
|
import PasswordFormItems from 'components/PasswordFormItems';
|
|
import './index.less';
|
|
|
|
type Props = RouteComponentProps & FormComponentProps;
|
|
|
|
interface State {
|
|
passwordConfirmDirty: boolean;
|
|
isResetting: boolean;
|
|
resetSuccess: boolean;
|
|
error: string;
|
|
}
|
|
|
|
class PasswordReset extends React.Component<Props, State> {
|
|
state: State = {
|
|
passwordConfirmDirty: false,
|
|
isResetting: false,
|
|
resetSuccess: false,
|
|
error: '',
|
|
};
|
|
|
|
render() {
|
|
const { isResetting, resetSuccess, error } = this.state;
|
|
|
|
const resetForm = (
|
|
<Form className="PasswordReset-form" onSubmit={this.handleSubmit}>
|
|
<PasswordFormItems form={this.props.form} />
|
|
<div className="PasswordReset-form-controls">
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
size="large"
|
|
block
|
|
loading={isResetting}
|
|
>
|
|
Change password
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
);
|
|
|
|
const success = (
|
|
<Result
|
|
type="success"
|
|
title="Password has been reset"
|
|
actions={
|
|
<div>
|
|
<Link to="/auth">
|
|
<Button size="large" type="primary">
|
|
Sign in
|
|
</Button>
|
|
</Link>
|
|
<Link to="/">
|
|
<Button size="large" type="default">
|
|
Return Home
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div className="PasswordReset">
|
|
<h1>Reset Password</h1>
|
|
{resetSuccess ? success : resetForm}
|
|
{error && <Alert type="error" message={error} showIcon closable />}
|
|
{error && (
|
|
<div className="PasswordReset-bottom">
|
|
Having problems?{' '}
|
|
<Link to="/auth/recover">Request a new password recovery code</Link>.
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
|
|
ev.preventDefault();
|
|
this.props.form.validateFieldsAndScroll((err: any, values: any) => {
|
|
if (!err) {
|
|
const args = qs.parse(this.props.location.search);
|
|
this.setState({ isResetting: true, error: '' });
|
|
resetPassword(args.code, values.password)
|
|
.then(() => {
|
|
this.setState({
|
|
isResetting: false,
|
|
resetSuccess: true,
|
|
});
|
|
})
|
|
.catch(e => {
|
|
this.setState({
|
|
error: e.message || e.toString(),
|
|
isResetting: false,
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
}
|
|
|
|
export default Form.create()(withRouter(PasswordReset));
|