Added ability to change user password

CHANGELOG.md

@@ -9,7 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Source type support for tags, shapes and tracks (<https://github.com/opencv/cvat/pull/1192>)
 - Source type support for CVAT Dumper/Loader (<https://github.com/opencv/cvat/pull/1192>)
 - Intelligent polygon editing (<https://github.com/opencv/cvat/pull/1921>)
-- python cli over https (<https://github.com/opencv/cvat/pull/1942>)
+- Python cli over https (<https://github.com/opencv/cvat/pull/1942>)
+- Ability to change user password (<https://github.com/opencv/cvat/pull/1954>)
+
 
 ### Changed
 - Smaller object details (<https://github.com/opencv/cvat/pull/1877>)

cvat-core/src/api-implementation.js

@@ -88,6 +88,10 @@
             await serverProxy.server.logout();
         };
 
+        cvat.server.changePassword.implementation = async (oldPassword, newPassword1, newPassword2) => {
+            await serverProxy.server.changePassword(oldPassword, newPassword1, newPassword2);
+        };
+
         cvat.server.authorized.implementation = async () => {
             const result = await serverProxy.server.authorized();
             return result;

cvat-core/src/api.js

@@ -183,6 +183,19 @@ function build() {
                     .apiWrapper(cvat.server.logout);
                 return result;
             },
+            /**
+                * Method allows to change user password
+                * @method changePassword
+                * @async
+                * @memberof module:API.cvat.server
+                * @throws {module:API.cvat.exceptions.PluginError}
+                * @throws {module:API.cvat.exceptions.ServerError}
+            */
+            async changePassword(oldPassword, newPassword1, newPassword2) {
+                const result = await PluginRegistry
+                    .apiWrapper(cvat.server.changePassword, oldPassword, newPassword1, newPassword2);
+                return result;
+            },
             /**
                 * Method allows to know whether you are authorized on the server
                 * @method authorized

cvat-core/src/server-proxy.js

@@ -239,6 +239,24 @@
                 Axios.defaults.headers.common.Authorization = '';
             }
 
+            async function changePassword(oldPassword, newPassword1, newPassword2) {
+                try {
+                    const data = JSON.stringify({
+                        old_password: oldPassword,
+                        new_password1: newPassword1,
+                        new_password2:newPassword2,
+                    });
+                    await Axios.post(`${config.backendAPI}/auth/password/change`, data, {
+                        proxy: config.proxy,
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                    });
+                } catch (errorData) {
+                    throw generateError(errorData);
+                }
+            }
+
             async function authorized() {
                 try {
                     await module.exports.users.getSelf();
@@ -671,6 +689,7 @@
                         exception,
                         login,
                         logout,
+                        changePassword,
                         authorized,
                         register,
                         request: serverRequest,

cvat-ui/src/actions/auth-actions.ts

@@ -5,6 +5,7 @@
 import { ActionUnion, createAction, ThunkAction } from 'utils/redux';
 import { UserConfirmation } from 'components/register-page/register-form';
 import getCore from 'cvat-core-wrapper';
+import { isReachable } from 'utils/url-checker';
 
 const cvat = getCore();
 
@@ -20,9 +21,16 @@ export enum AuthActionTypes {
     LOGOUT = 'LOGOUT',
     LOGOUT_SUCCESS = 'LOGOUT_SUCCESS',
     LOGOUT_FAILED = 'LOGOUT_FAILED',
+    CHANGE_PASSWORD = 'CHANGE_PASSWORD',
+    CHANGE_PASSWORD_SUCCESS = 'CHANGE_PASSWORD_SUCCESS',
+    CHANGE_PASSWORD_FAILED = 'CHANGE_PASSWORD_FAILED',
+    SWITCH_CHANGE_PASSWORD_DIALOG = 'SWITCH_CHANGE_PASSWORD_DIALOG',
+    LOAD_AUTH_ACTIONS = 'LOAD_AUTH_ACTIONS',
+    LOAD_AUTH_ACTIONS_SUCCESS = 'LOAD_AUTH_ACTIONS_SUCCESS',
+    LOAD_AUTH_ACTIONS_FAILED = 'LOAD_AUTH_ACTIONS_FAILED',
 }
 
-const authActions = {
+export const authActions = {
     authorizeSuccess: (user: any) => createAction(AuthActionTypes.AUTHORIZED_SUCCESS, { user }),
     authorizeFailed: (error: any) => createAction(AuthActionTypes.AUTHORIZED_FAILED, { error }),
     login: () => createAction(AuthActionTypes.LOGIN),
@@ -34,6 +42,15 @@ const authActions = {
     logout: () => createAction(AuthActionTypes.LOGOUT),
     logoutSuccess: () => createAction(AuthActionTypes.LOGOUT_SUCCESS),
     logoutFailed: (error: any) => createAction(AuthActionTypes.LOGOUT_FAILED, { error }),
+    changePassword: () => createAction(AuthActionTypes.CHANGE_PASSWORD),
+    changePasswordSuccess: () => createAction(AuthActionTypes.CHANGE_PASSWORD_SUCCESS),
+    changePasswordFailed: (error: any) => createAction(AuthActionTypes.CHANGE_PASSWORD_FAILED, { error }),
+    switchChangePasswordDialog: (showChangePasswordDialog: boolean) =>
+        createAction(AuthActionTypes.SWITCH_CHANGE_PASSWORD_DIALOG, { showChangePasswordDialog }),
+    loadServerAuthActions: () => createAction(AuthActionTypes.LOAD_AUTH_ACTIONS),
+    loadServerAuthActionsSuccess: (allowChangePassword: boolean) =>
+        createAction(AuthActionTypes.LOAD_AUTH_ACTIONS_SUCCESS, { allowChangePassword }),
+    loadServerAuthActionsFailed: (error: any) => createAction(AuthActionTypes.LOAD_AUTH_ACTIONS_FAILED, { error }),
 };
 
 export type AuthActions = ActionUnion<typeof authActions>;
@@ -100,3 +117,30 @@ export const authorizedAsync = (): ThunkAction => async (dispatch) => {
         dispatch(authActions.authorizeFailed(error));
     }
 };
+
+export const changePasswordAsync = (oldPassword: string, newPassword1: string, newPassword2: string): ThunkAction => async (dispatch) => {
+    dispatch(authActions.changePassword());
+
+    try {
+        await cvat.server.changePassword(oldPassword, newPassword1, newPassword2);
+        dispatch(authActions.changePasswordSuccess());
+    } catch (error) {
+        dispatch(authActions.changePasswordFailed(error));
+    }
+};
+
+export const loadAuthActionsAsync = (): ThunkAction => async (dispatch) => {
+    dispatch(authActions.loadServerAuthActions());
+
+    try {
+        const promises: Promise<boolean>[] = [
+            isReachable(`${cvat.config.backendAPI}/auth/password/change`, 'OPTIONS'),
+        ];
+        const [allowChangePassword] = await Promise.all(promises);
+
+        dispatch(authActions.loadServerAuthActionsSuccess(allowChangePassword));
+
+    } catch (error) {
+        dispatch(authActions.loadServerAuthActionsFailed(error));
+    }
+}

cvat-ui/src/components/change-password-modal/change-password-form.tsx

@@ -0,0 +1,165 @@
+// 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 = (rule: any, value: any, callback: any): 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: any, callback: any): 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,.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,.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,.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);

cvat-ui/src/components/change-password-modal/change-password-modal.tsx

@@ -0,0 +1,52 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import { RouteComponentProps } from 'react-router';
+import { withRouter } from 'react-router-dom';
+import Modal from 'antd/lib/modal';
+import Title from 'antd/lib/typography/Title';
+
+import ChangePasswordForm, { ChangePasswordData } from './change-password-form';
+
+interface ChangePasswordPageComponentProps {
+    fetching: boolean;
+    visible: boolean;
+    onChangePassword: (oldPassword: string, newPassword1: string, newPassword2: string) => void;
+    onClose(): void;
+}
+
+function ChangePasswordComponent(props: ChangePasswordPageComponentProps & RouteComponentProps): 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={true}
+                onCancel={onClose}
+            >
+                <ChangePasswordForm
+                        onSubmit={(changePasswordData: ChangePasswordData): void => {
+                            onChangePassword(
+                                changePasswordData.oldPassword,
+                                changePasswordData.newPassword1,
+                                changePasswordData.newPassword2,
+                            );
+                        }}
+                        fetching={fetching}
+                    />
+            </Modal>
+        );
+}
+
+export default withRouter(ChangePasswordComponent);