2015-11-26 20:10:36 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2019-01-22 23:28:33 +03:00
|
|
|
Copyright 2018-2019 New Vector Ltd
|
2015-11-26 20:10:36 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2019-01-22 23:09:40 +03:00
|
|
|
import Field from "../elements/Field";
|
2019-09-06 20:37:43 +03:00
|
|
|
import React from 'react';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2019-12-21 00:13:46 +03:00
|
|
|
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
2017-01-25 01:41:52 +03:00
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2020-10-07 14:49:29 +03:00
|
|
|
import Spinner from '../elements/Spinner';
|
2020-11-21 22:10:38 +03:00
|
|
|
import withValidation from '../elements/Validation';
|
2017-05-25 13:39:08 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2019-12-21 00:41:07 +03:00
|
|
|
import * as sdk from "../../../index";
|
|
|
|
import Modal from "../../../Modal";
|
2020-11-21 22:10:38 +03:00
|
|
|
import PassphraseField from "../auth/PassphraseField";
|
2020-11-22 10:49:20 +03:00
|
|
|
import CountlyAnalytics from "../../../CountlyAnalytics";
|
2021-03-09 06:20:07 +03:00
|
|
|
import {replaceableComponent} from "../../../utils/replaceableComponent";
|
2021-04-01 12:30:49 +03:00
|
|
|
import { PASSWORD_MIN_SCORE } from '../auth/RegistrationForm';
|
2020-11-21 22:10:38 +03:00
|
|
|
|
2020-11-22 11:26:51 +03:00
|
|
|
const FIELD_OLD_PASSWORD = 'field_old_password';
|
2020-11-21 22:10:38 +03:00
|
|
|
const FIELD_NEW_PASSWORD = 'field_new_password';
|
|
|
|
const FIELD_NEW_PASSWORD_CONFIRM = 'field_new_password_confirm';
|
|
|
|
|
2021-03-09 06:20:07 +03:00
|
|
|
@replaceableComponent("views.settings.ChangePassword")
|
2020-08-29 14:14:16 +03:00
|
|
|
export default class ChangePassword extends React.Component {
|
|
|
|
static propTypes = {
|
2017-12-26 04:03:18 +03:00
|
|
|
onFinished: PropTypes.func,
|
|
|
|
onError: PropTypes.func,
|
|
|
|
onCheckPassword: PropTypes.func,
|
|
|
|
rowClassName: PropTypes.string,
|
|
|
|
buttonClassName: PropTypes.string,
|
2019-01-22 23:09:40 +03:00
|
|
|
buttonKind: PropTypes.string,
|
2020-09-29 16:24:01 +03:00
|
|
|
buttonLabel: PropTypes.string,
|
2017-12-26 04:03:18 +03:00
|
|
|
confirm: PropTypes.bool,
|
2017-05-22 16:46:49 +03:00
|
|
|
// Whether to autoFocus the new password input
|
2017-12-26 04:03:18 +03:00
|
|
|
autoFocusNewPasswordInput: PropTypes.bool,
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
static Phases = {
|
2015-11-26 20:10:36 +03:00
|
|
|
Edit: "edit",
|
|
|
|
Uploading: "uploading",
|
2017-10-11 19:56:17 +03:00
|
|
|
Error: "error",
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
static defaultProps = {
|
|
|
|
onFinished() {},
|
|
|
|
onError() {},
|
|
|
|
onCheckPassword(oldPass, newPass, confirmPass) {
|
|
|
|
if (newPass !== confirmPass) {
|
|
|
|
return {
|
|
|
|
error: _t("New passwords don't match"),
|
|
|
|
};
|
|
|
|
} else if (!newPass || newPass.length === 0) {
|
|
|
|
return {
|
|
|
|
error: _t("Passwords can't be empty"),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
confirm: true,
|
|
|
|
}
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
state = {
|
2020-11-21 22:10:38 +03:00
|
|
|
fieldValid: {},
|
2020-08-29 14:14:16 +03:00
|
|
|
phase: ChangePassword.Phases.Edit,
|
|
|
|
oldPassword: "",
|
|
|
|
newPassword: "",
|
|
|
|
newPasswordConfirm: "",
|
|
|
|
};
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
changePassword(oldPassword, newPassword) {
|
2017-05-16 13:45:01 +03:00
|
|
|
const cli = MatrixClientPeg.get();
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2017-05-16 14:45:14 +03:00
|
|
|
if (!this.props.confirm) {
|
2017-05-16 13:45:01 +03:00
|
|
|
this._changePassword(cli, oldPassword, newPassword);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
2017-07-27 19:19:18 +03:00
|
|
|
Modal.createTrackedDialog('Change Password', '', QuestionDialog, {
|
2017-05-25 20:20:48 +03:00
|
|
|
title: _t("Warning!"),
|
2017-01-25 00:36:55 +03:00
|
|
|
description:
|
|
|
|
<div>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t(
|
2020-01-29 18:48:25 +03:00
|
|
|
'Changing password will currently reset any end-to-end encryption keys on all sessions, ' +
|
2017-05-23 17:16:31 +03:00
|
|
|
'making encrypted chat history unreadable, unless you first export your room keys ' +
|
|
|
|
'and re-import them afterwards. ' +
|
2017-10-11 19:56:17 +03:00
|
|
|
'In future this will be improved.',
|
2019-01-24 19:19:18 +03:00
|
|
|
) }
|
|
|
|
{' '}
|
2020-08-03 18:02:26 +03:00
|
|
|
<a href="https://github.com/vector-im/element-web/issues/2671" target="_blank" rel="noreferrer noopener">
|
|
|
|
https://github.com/vector-im/element-web/issues/2671
|
2019-01-24 19:19:18 +03:00
|
|
|
</a>
|
2017-01-25 00:36:55 +03:00
|
|
|
</div>,
|
2017-05-23 17:16:31 +03:00
|
|
|
button: _t("Continue"),
|
2017-04-08 01:34:11 +03:00
|
|
|
extraButtons: [
|
2020-10-07 14:49:29 +03:00
|
|
|
<button
|
|
|
|
key="exportRoomKeys"
|
|
|
|
className="mx_Dialog_primary"
|
|
|
|
onClick={this._onExportE2eKeysClicked}
|
|
|
|
>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t('Export E2E room keys') }
|
2017-10-11 19:56:17 +03:00
|
|
|
</button>,
|
2017-04-08 01:34:11 +03:00
|
|
|
],
|
2017-01-25 00:36:55 +03:00
|
|
|
onFinished: (confirmed) => {
|
|
|
|
if (confirmed) {
|
2017-05-16 13:45:01 +03:00
|
|
|
this._changePassword(cli, oldPassword, newPassword);
|
2017-01-25 00:36:55 +03:00
|
|
|
}
|
|
|
|
},
|
2015-12-23 18:38:28 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
_changePassword(cli, oldPassword, newPassword) {
|
2017-05-16 13:45:01 +03:00
|
|
|
const authDict = {
|
|
|
|
type: 'm.login.password',
|
2020-05-29 17:23:59 +03:00
|
|
|
identifier: {
|
|
|
|
type: 'm.id.user',
|
|
|
|
user: cli.credentials.userId,
|
|
|
|
},
|
|
|
|
// TODO: Remove `user` once servers support proper UIA
|
|
|
|
// See https://github.com/matrix-org/synapse/issues/5665
|
2017-05-16 13:45:01 +03:00
|
|
|
user: cli.credentials.userId,
|
|
|
|
password: oldPassword,
|
|
|
|
};
|
|
|
|
|
|
|
|
this.setState({
|
2020-08-29 14:14:16 +03:00
|
|
|
phase: ChangePassword.Phases.Uploading,
|
2017-05-16 13:45:01 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
cli.setPassword(authDict, newPassword).then(() => {
|
2017-06-14 11:31:16 +03:00
|
|
|
if (this.props.shouldAskForEmail) {
|
|
|
|
return this._optionallySetEmail().then((confirmed) => {
|
|
|
|
this.props.onFinished({
|
|
|
|
didSetEmail: confirmed,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.props.onFinished();
|
|
|
|
}
|
2017-05-16 13:45:01 +03:00
|
|
|
}, (err) => {
|
|
|
|
this.props.onError(err);
|
|
|
|
}).finally(() => {
|
|
|
|
this.setState({
|
2020-08-29 14:14:16 +03:00
|
|
|
phase: ChangePassword.Phases.Edit,
|
2019-03-12 19:17:21 +03:00
|
|
|
oldPassword: "",
|
|
|
|
newPassword: "",
|
|
|
|
newPasswordConfirm: "",
|
2017-05-16 13:45:01 +03:00
|
|
|
});
|
2019-11-18 13:03:05 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-05-16 13:45:01 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
_optionallySetEmail() {
|
2017-06-14 11:31:16 +03:00
|
|
|
// Ask for an email otherwise the user has no way to reset their password
|
|
|
|
const SetEmailDialog = sdk.getComponent("dialogs.SetEmailDialog");
|
2019-11-12 14:40:38 +03:00
|
|
|
const modal = Modal.createTrackedDialog('Do you want to set an email address?', '', SetEmailDialog, {
|
2017-06-14 11:31:16 +03:00
|
|
|
title: _t('Do you want to set an email address?'),
|
|
|
|
});
|
2019-11-12 14:40:38 +03:00
|
|
|
return modal.finished.then(([confirmed]) => confirmed);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-06-14 11:31:16 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
_onExportE2eKeysClicked = () => {
|
2018-11-21 19:56:44 +03:00
|
|
|
Modal.createTrackedDialogAsync('Export E2E Keys', 'Change Password',
|
2020-09-10 15:56:07 +03:00
|
|
|
import('../../../async-components/views/dialogs/security/ExportE2eKeysDialog'),
|
2018-11-21 19:56:44 +03:00
|
|
|
{
|
|
|
|
matrixClient: MatrixClientPeg.get(),
|
|
|
|
},
|
|
|
|
);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2017-04-08 01:34:11 +03:00
|
|
|
|
2020-11-21 22:10:38 +03:00
|
|
|
markFieldValid(fieldID, valid) {
|
|
|
|
const { fieldValid } = this.state;
|
|
|
|
fieldValid[fieldID] = valid;
|
|
|
|
this.setState({
|
|
|
|
fieldValid,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
onChangeOldPassword = (ev) => {
|
2019-03-12 19:17:21 +03:00
|
|
|
this.setState({
|
|
|
|
oldPassword: ev.target.value,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-03-12 19:17:21 +03:00
|
|
|
|
2020-11-22 11:26:51 +03:00
|
|
|
onOldPasswordValidate = async fieldState => {
|
|
|
|
const result = await this.validateOldPasswordRules(fieldState);
|
|
|
|
this.markFieldValid(FIELD_OLD_PASSWORD, result.valid);
|
|
|
|
return result;
|
|
|
|
};
|
|
|
|
|
|
|
|
validateOldPasswordRules = withValidation({
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
key: "required",
|
|
|
|
test: ({ value, allowEmpty }) => allowEmpty || !!value,
|
|
|
|
invalid: () => _t("Passwords can't be empty"),
|
2020-11-22 11:57:22 +03:00
|
|
|
},
|
2020-11-22 11:26:51 +03:00
|
|
|
],
|
|
|
|
});
|
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
onChangeNewPassword = (ev) => {
|
2019-03-12 19:17:21 +03:00
|
|
|
this.setState({
|
|
|
|
newPassword: ev.target.value,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-03-12 19:17:21 +03:00
|
|
|
|
2020-11-21 22:10:38 +03:00
|
|
|
onNewPasswordValidate = result => {
|
|
|
|
this.markFieldValid(FIELD_NEW_PASSWORD, result.valid);
|
|
|
|
};
|
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
onChangeNewPasswordConfirm = (ev) => {
|
2019-03-12 19:17:21 +03:00
|
|
|
this.setState({
|
|
|
|
newPasswordConfirm: ev.target.value,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-03-12 19:17:21 +03:00
|
|
|
|
2020-11-21 22:10:38 +03:00
|
|
|
onNewPasswordConfirmValidate = async fieldState => {
|
|
|
|
const result = await this.validatePasswordConfirmRules(fieldState);
|
|
|
|
this.markFieldValid(FIELD_NEW_PASSWORD_CONFIRM, result.valid);
|
|
|
|
return result;
|
|
|
|
};
|
|
|
|
|
|
|
|
validatePasswordConfirmRules = withValidation({
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
key: "required",
|
|
|
|
test: ({ value, allowEmpty }) => allowEmpty || !!value,
|
|
|
|
invalid: () => _t("Confirm password"),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: "match",
|
|
|
|
test({ value }) {
|
|
|
|
return !value || value === this.state.newPassword;
|
|
|
|
},
|
|
|
|
invalid: () => _t("Passwords don't match"),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
});
|
|
|
|
|
2020-11-22 10:49:20 +03:00
|
|
|
onClickChange = async (ev) => {
|
2017-10-30 19:28:27 +03:00
|
|
|
ev.preventDefault();
|
2020-11-22 10:49:20 +03:00
|
|
|
|
|
|
|
const allFieldsValid = await this.verifyFieldsBeforeSubmit();
|
|
|
|
if (!allFieldsValid) {
|
|
|
|
CountlyAnalytics.instance.track("onboarding_registration_submit_failed");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-10-07 14:49:29 +03:00
|
|
|
const oldPassword = this.state.oldPassword;
|
2019-03-12 19:17:21 +03:00
|
|
|
const newPassword = this.state.newPassword;
|
|
|
|
const confirmPassword = this.state.newPasswordConfirm;
|
2017-05-16 13:45:01 +03:00
|
|
|
const err = this.props.onCheckPassword(
|
|
|
|
oldPassword, newPassword, confirmPassword,
|
2015-12-23 18:38:28 +03:00
|
|
|
);
|
|
|
|
if (err) {
|
|
|
|
this.props.onError(err);
|
2017-05-16 13:45:01 +03:00
|
|
|
} else {
|
|
|
|
this.changePassword(oldPassword, newPassword);
|
2015-11-26 20:10:36 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2020-11-22 10:49:20 +03:00
|
|
|
async verifyFieldsBeforeSubmit() {
|
|
|
|
// Blur the active element if any, so we first run its blur validation,
|
|
|
|
// which is less strict than the pass we're about to do below for all fields.
|
|
|
|
const activeElement = document.activeElement;
|
|
|
|
if (activeElement) {
|
|
|
|
activeElement.blur();
|
|
|
|
}
|
|
|
|
|
|
|
|
const fieldIDsInDisplayOrder = [
|
2020-11-22 11:26:51 +03:00
|
|
|
FIELD_OLD_PASSWORD,
|
2020-11-22 10:49:20 +03:00
|
|
|
FIELD_NEW_PASSWORD,
|
2020-11-22 11:26:51 +03:00
|
|
|
FIELD_NEW_PASSWORD_CONFIRM,
|
2020-11-22 10:49:20 +03:00
|
|
|
];
|
|
|
|
|
|
|
|
// Run all fields with stricter validation that no longer allows empty
|
|
|
|
// values for required fields.
|
|
|
|
for (const fieldID of fieldIDsInDisplayOrder) {
|
|
|
|
const field = this[fieldID];
|
|
|
|
if (!field) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
// We must wait for these validations to finish before queueing
|
|
|
|
// up the setState below so our setState goes in the queue after
|
|
|
|
// all the setStates from these validate calls (that's how we
|
|
|
|
// know they've finished).
|
|
|
|
await field.validate({ allowEmpty: false });
|
|
|
|
}
|
|
|
|
|
|
|
|
// Validation and state updates are async, so we need to wait for them to complete
|
|
|
|
// first. Queue a `setState` callback and wait for it to resolve.
|
|
|
|
await new Promise(resolve => this.setState({}, resolve));
|
|
|
|
|
|
|
|
if (this.allFieldsValid()) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
const invalidField = this.findFirstInvalidField(fieldIDsInDisplayOrder);
|
|
|
|
|
|
|
|
if (!invalidField) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Focus the first invalid field and show feedback in the stricter mode
|
|
|
|
// that no longer allows empty values for required fields.
|
|
|
|
invalidField.focus();
|
|
|
|
invalidField.validate({ allowEmpty: false, focused: true });
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
allFieldsValid() {
|
|
|
|
const keys = Object.keys(this.state.fieldValid);
|
|
|
|
for (let i = 0; i < keys.length; ++i) {
|
|
|
|
if (!this.state.fieldValid[keys[i]]) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
findFirstInvalidField(fieldIDs) {
|
|
|
|
for (const fieldID of fieldIDs) {
|
|
|
|
if (!this.state.fieldValid[fieldID] && this[fieldID]) {
|
|
|
|
return this[fieldID];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
render() {
|
2017-05-11 19:47:45 +03:00
|
|
|
const rowClassName = this.props.rowClassName;
|
|
|
|
const buttonClassName = this.props.buttonClassName;
|
|
|
|
|
2015-11-26 20:10:36 +03:00
|
|
|
switch (this.state.phase) {
|
2020-08-29 14:14:16 +03:00
|
|
|
case ChangePassword.Phases.Edit:
|
2015-11-26 20:10:36 +03:00
|
|
|
return (
|
2017-06-14 16:50:48 +03:00
|
|
|
<form className={this.props.className} onSubmit={this.onClickChange}>
|
2015-12-23 18:38:28 +03:00
|
|
|
<div className={rowClassName}>
|
2020-01-29 16:38:50 +03:00
|
|
|
<Field
|
2020-11-22 11:26:51 +03:00
|
|
|
ref={field => this[FIELD_OLD_PASSWORD] = field}
|
2019-03-12 19:17:21 +03:00
|
|
|
type="password"
|
2020-10-07 14:49:29 +03:00
|
|
|
label={_t('Current password')}
|
|
|
|
value={this.state.oldPassword}
|
|
|
|
onChange={this.onChangeOldPassword}
|
2020-11-22 11:26:51 +03:00
|
|
|
onValidate={this.onOldPasswordValidate}
|
2020-10-07 14:49:29 +03:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className={rowClassName}>
|
2020-11-21 22:10:38 +03:00
|
|
|
<PassphraseField
|
|
|
|
fieldRef={field => this[FIELD_NEW_PASSWORD] = field}
|
2020-10-07 14:49:29 +03:00
|
|
|
type="password"
|
2020-11-21 22:10:38 +03:00
|
|
|
label='New Password'
|
|
|
|
minScore={PASSWORD_MIN_SCORE}
|
2019-03-12 19:17:21 +03:00
|
|
|
value={this.state.newPassword}
|
|
|
|
autoFocus={this.props.autoFocusNewPasswordInput}
|
|
|
|
onChange={this.onChangeNewPassword}
|
2020-11-21 22:10:38 +03:00
|
|
|
onValidate={this.onNewPasswordValidate}
|
2020-01-29 16:38:50 +03:00
|
|
|
autoComplete="new-password"
|
2019-03-12 19:17:21 +03:00
|
|
|
/>
|
2015-11-26 20:10:36 +03:00
|
|
|
</div>
|
2015-12-23 18:38:28 +03:00
|
|
|
<div className={rowClassName}>
|
2020-01-29 16:38:50 +03:00
|
|
|
<Field
|
2020-11-21 22:10:38 +03:00
|
|
|
ref={field => this[FIELD_NEW_PASSWORD_CONFIRM] = field}
|
2019-03-12 19:17:21 +03:00
|
|
|
type="password"
|
|
|
|
label={_t("Confirm password")}
|
|
|
|
value={this.state.newPasswordConfirm}
|
|
|
|
onChange={this.onChangeNewPasswordConfirm}
|
2020-11-21 22:10:38 +03:00
|
|
|
onValidate={this.onNewPasswordConfirmValidate}
|
2020-01-29 16:38:50 +03:00
|
|
|
autoComplete="new-password"
|
2019-03-12 19:17:21 +03:00
|
|
|
/>
|
2015-12-23 18:38:28 +03:00
|
|
|
</div>
|
2019-01-22 23:09:40 +03:00
|
|
|
<AccessibleButton className={buttonClassName} kind={this.props.buttonKind} onClick={this.onClickChange}>
|
2020-09-29 16:24:01 +03:00
|
|
|
{ this.props.buttonLabel || _t('Change Password') }
|
2017-01-13 19:25:26 +03:00
|
|
|
</AccessibleButton>
|
2017-06-14 16:50:48 +03:00
|
|
|
</form>
|
2015-11-26 20:10:36 +03:00
|
|
|
);
|
2020-08-29 14:14:16 +03:00
|
|
|
case ChangePassword.Phases.Uploading:
|
2015-11-26 20:10:36 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_Dialog_content">
|
2020-10-07 14:49:29 +03:00
|
|
|
<Spinner />
|
2015-11-26 20:10:36 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
|
|
|
}
|