Added ability to change user password (#1954)
* added ability to change user password * Update CHANGELOG.md * fixed comments * fixed linter warnings * updated version of cvat-ui and cvat-coremain
Andrey Zhavoronkov
6 years ago
committed by
GitHub
parent
5da7d5ddfc
commit
4cb75a6a7f
@ -0,0 +1,166 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import Form, { FormComponentProps } from 'antd/lib/form/Form';
|
||||||
|
import Button from 'antd/lib/button';
|
||||||
|
import Icon from 'antd/lib/icon';
|
||||||
|
import Input from 'antd/lib/input';
|
||||||
|
|
||||||
|
import patterns from 'utils/validation-patterns';
|
||||||
|
|
||||||
|
export interface ChangePasswordData {
|
||||||
|
oldPassword: string;
|
||||||
|
newPassword1: string;
|
||||||
|
newPassword2: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type ChangePasswordFormProps = {
|
||||||
|
fetching: boolean;
|
||||||
|
onSubmit(loginData: ChangePasswordData): void;
|
||||||
|
} & FormComponentProps;
|
||||||
|
|
||||||
|
class ChangePasswordFormComponent extends React.PureComponent<ChangePasswordFormProps> {
|
||||||
|
private validateConfirmation = (_: any, value: string, callback: Function): void => {
|
||||||
|
const { form } = this.props;
|
||||||
|
if (value && value !== form.getFieldValue('newPassword1')) {
|
||||||
|
callback('Two passwords that you enter is inconsistent!');
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
private validatePassword = (_: any, value: string, callback: Function): void => {
|
||||||
|
const { form } = this.props;
|
||||||
|
if (!patterns.validatePasswordLength.pattern.test(value)) {
|
||||||
|
callback(patterns.validatePasswordLength.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!patterns.passwordContainsNumericCharacters.pattern.test(value)) {
|
||||||
|
callback(patterns.passwordContainsNumericCharacters.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!patterns.passwordContainsUpperCaseCharacter.pattern.test(value)) {
|
||||||
|
callback(patterns.passwordContainsUpperCaseCharacter.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!patterns.passwordContainsLowerCaseCharacter.pattern.test(value)) {
|
||||||
|
callback(patterns.passwordContainsLowerCaseCharacter.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
form.validateFields(['newPassword2'], { force: true });
|
||||||
|
}
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleSubmit = (e: React.FormEvent): void => {
|
||||||
|
e.preventDefault();
|
||||||
|
const {
|
||||||
|
form,
|
||||||
|
onSubmit,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
form.validateFields((error, values): void => {
|
||||||
|
if (!error) {
|
||||||
|
const validatedFields = {
|
||||||
|
...values,
|
||||||
|
confirmations: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
onSubmit(validatedFields);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
private renderOldPasswordField(): JSX.Element {
|
||||||
|
const { form } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form.Item hasFeedback>
|
||||||
|
{form.getFieldDecorator('oldPassword', {
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
message: 'Please input your current password!',
|
||||||
|
}],
|
||||||
|
})(<Input.Password
|
||||||
|
autoComplete='new-password'
|
||||||
|
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
||||||
|
placeholder='Current password'
|
||||||
|
/>)}
|
||||||
|
</Form.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderNewPasswordField(): JSX.Element {
|
||||||
|
const { form } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form.Item hasFeedback>
|
||||||
|
{form.getFieldDecorator('newPassword1', {
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
message: 'Please input new password!',
|
||||||
|
}, {
|
||||||
|
validator: this.validatePassword,
|
||||||
|
}],
|
||||||
|
})(<Input.Password
|
||||||
|
autoComplete='new-password'
|
||||||
|
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
||||||
|
placeholder='New password'
|
||||||
|
/>)}
|
||||||
|
</Form.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderNewPasswordConfirmationField(): JSX.Element {
|
||||||
|
const { form } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form.Item hasFeedback>
|
||||||
|
{form.getFieldDecorator('newPassword2', {
|
||||||
|
rules: [{
|
||||||
|
required: true,
|
||||||
|
message: 'Please confirm your new password!',
|
||||||
|
}, {
|
||||||
|
validator: this.validateConfirmation,
|
||||||
|
}],
|
||||||
|
})(<Input.Password
|
||||||
|
autoComplete='new-password'
|
||||||
|
prefix={<Icon type='lock' style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
||||||
|
placeholder='Confirm new password'
|
||||||
|
/>)}
|
||||||
|
</Form.Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): JSX.Element {
|
||||||
|
const { fetching } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form
|
||||||
|
onSubmit={this.handleSubmit}
|
||||||
|
className='change-password-form'
|
||||||
|
>
|
||||||
|
{this.renderOldPasswordField()}
|
||||||
|
{this.renderNewPasswordField()}
|
||||||
|
{this.renderNewPasswordConfirmationField()}
|
||||||
|
|
||||||
|
<Form.Item>
|
||||||
|
<Button
|
||||||
|
type='primary'
|
||||||
|
htmlType='submit'
|
||||||
|
className='change-password-form-button'
|
||||||
|
loading={fetching}
|
||||||
|
disabled={fetching}
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Form.create<ChangePasswordFormProps>()(ChangePasswordFormComponent);
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import Modal from 'antd/lib/modal';
|
||||||
|
import Title from 'antd/lib/typography/Title';
|
||||||
|
|
||||||
|
import { changePasswordAsync } from 'actions/auth-actions';
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
import ChangePasswordForm, { ChangePasswordData } from './change-password-form';
|
||||||
|
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
fetching: boolean;
|
||||||
|
visible: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
onChangePassword(
|
||||||
|
oldPassword: string,
|
||||||
|
newPassword1: string,
|
||||||
|
newPassword2: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ChangePasswordPageComponentProps {
|
||||||
|
fetching: boolean;
|
||||||
|
visible: boolean;
|
||||||
|
onChangePassword: (oldPassword: string, newPassword1: string, newPassword2: string) => void;
|
||||||
|
onClose(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
return {
|
||||||
|
fetching: state.auth.fetching,
|
||||||
|
visible: state.auth.showChangePasswordDialog,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return ({
|
||||||
|
onChangePassword(oldPassword: string, newPassword1: string, newPassword2: string): void {
|
||||||
|
dispatch(changePasswordAsync(oldPassword, newPassword1, newPassword2));
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChangePasswordComponent(props: ChangePasswordPageComponentProps): JSX.Element {
|
||||||
|
const {
|
||||||
|
fetching,
|
||||||
|
onChangePassword,
|
||||||
|
visible,
|
||||||
|
onClose,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
title={<Title level={3}>Change password</Title>}
|
||||||
|
okType='primary'
|
||||||
|
okText='Submit'
|
||||||
|
footer={null}
|
||||||
|
visible={visible}
|
||||||
|
destroyOnClose
|
||||||
|
onCancel={onClose}
|
||||||
|
>
|
||||||
|
<ChangePasswordForm
|
||||||
|
onSubmit={(changePasswordData: ChangePasswordData): void => {
|
||||||
|
onChangePassword(
|
||||||
|
changePasswordData.oldPassword,
|
||||||
|
changePasswordData.newPassword1,
|
||||||
|
changePasswordData.newPassword2,
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
fetching={fetching}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(ChangePasswordComponent);
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import getCore from 'cvat-core-wrapper';
|
||||||
|
|
||||||
|
const core = getCore();
|
||||||
|
|
||||||
|
export default async (url: string, method: string): Promise<boolean> => {
|
||||||
|
try {
|
||||||
|
await core.server.request(url, {
|
||||||
|
method,
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
return ![0, 404].includes(error.code);
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue