113 lines
3.1 KiB
TypeScript
113 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Form, Input, Button, Alert } from 'antd';
|
|
import { FormComponentProps } from 'antd/lib/form';
|
|
import { updateUserPassword } from 'api/api';
|
|
import PasswordFormItems from 'components/PasswordFormItems';
|
|
import './ChangePassword.less';
|
|
|
|
type Props = FormComponentProps;
|
|
|
|
const STATE = {
|
|
passwordConfirmDirty: false,
|
|
passwordChangePending: false,
|
|
passwordChangeSuccess: false,
|
|
passwordChangeError: '',
|
|
};
|
|
|
|
type State = typeof STATE;
|
|
|
|
class ChangePassword extends React.Component<Props, State> {
|
|
state: State = { ...STATE };
|
|
|
|
render() {
|
|
const {
|
|
passwordChangeError,
|
|
passwordChangePending,
|
|
passwordChangeSuccess,
|
|
} = this.state;
|
|
const { getFieldDecorator } = this.props.form;
|
|
|
|
return (
|
|
<div className="ChangePassword">
|
|
<Form className="ChangePassword-form" onSubmit={this.handleSubmit}>
|
|
<Form.Item label="Current password">
|
|
{getFieldDecorator('currentPassword', {
|
|
rules: [{ required: true, message: 'Please enter your current password' }],
|
|
})(
|
|
<Input
|
|
autoComplete="current-password"
|
|
name="currentPassword"
|
|
type="password"
|
|
placeholder="current password"
|
|
/>,
|
|
)}
|
|
</Form.Item>
|
|
|
|
<PasswordFormItems form={this.props.form} />
|
|
|
|
<div>
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
size="large"
|
|
block
|
|
loading={passwordChangePending}
|
|
>
|
|
Change password
|
|
</Button>
|
|
</div>
|
|
|
|
{passwordChangeError && (
|
|
<Alert
|
|
type="error"
|
|
message={passwordChangeError}
|
|
showIcon
|
|
closable
|
|
className="ChangePassword-alert"
|
|
/>
|
|
)}
|
|
|
|
{passwordChangeSuccess && (
|
|
<Alert
|
|
type="success"
|
|
message="Password changed."
|
|
showIcon
|
|
closable
|
|
onClose={() => this.setState({ passwordChangeSuccess: false })}
|
|
className="ChangePassword-alert"
|
|
/>
|
|
)}
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
|
|
ev.preventDefault();
|
|
this.props.form.validateFieldsAndScroll((err: any, values: any) => {
|
|
if (!err) {
|
|
this.setState({
|
|
passwordChangePending: true,
|
|
passwordChangeError: '',
|
|
passwordChangeSuccess: false,
|
|
});
|
|
updateUserPassword(values.currentPassword, values.password)
|
|
.then(() => {
|
|
this.setState({ passwordChangePending: false, passwordChangeSuccess: true });
|
|
this.props.form.resetFields();
|
|
})
|
|
.catch(e => {
|
|
this.setState({
|
|
passwordChangePending: false,
|
|
passwordChangeError: e.message || e.toSring(),
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
}
|
|
|
|
const FormWrappedChangePassword = Form.create()(ChangePassword);
|
|
|
|
export default FormWrappedChangePassword;
|