2015-11-26 20:10:36 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket 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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
var React = require('react');
|
|
|
|
var MatrixClientPeg = require("../../../MatrixClientPeg");
|
2017-01-25 00:36:55 +03:00
|
|
|
var Modal = require("../../../Modal");
|
2015-12-23 18:38:28 +03:00
|
|
|
var sdk = require("../../../index");
|
2017-01-25 01:41:52 +03:00
|
|
|
import AccessibleButton from '../elements/AccessibleButton';
|
2017-05-25 13:39:08 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2017-05-12 17:58:44 +03:00
|
|
|
import sessionStore from '../../../stores/SessionStore';
|
2017-05-12 14:02:45 +03:00
|
|
|
|
2015-11-26 20:10:36 +03:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'ChangePassword',
|
|
|
|
propTypes: {
|
|
|
|
onFinished: React.PropTypes.func,
|
2015-12-23 18:38:28 +03:00
|
|
|
onError: React.PropTypes.func,
|
|
|
|
onCheckPassword: React.PropTypes.func,
|
|
|
|
rowClassName: React.PropTypes.string,
|
|
|
|
rowLabelClassName: React.PropTypes.string,
|
|
|
|
rowInputClassName: React.PropTypes.string,
|
2017-05-16 13:51:09 +03:00
|
|
|
buttonClassName: React.PropTypes.string,
|
2017-05-16 14:45:14 +03:00
|
|
|
confirm: React.PropTypes.bool,
|
2017-05-22 16:46:49 +03:00
|
|
|
// Whether to autoFocus the new password input
|
|
|
|
autoFocusNewPasswordInput: React.PropTypes.bool,
|
2015-11-26 20:10:36 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
Phases: {
|
|
|
|
Edit: "edit",
|
|
|
|
Uploading: "uploading",
|
2015-12-23 18:38:28 +03:00
|
|
|
Error: "error"
|
2015-11-26 20:10:36 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
onFinished: function() {},
|
2015-12-23 18:38:28 +03:00
|
|
|
onError: function() {},
|
|
|
|
onCheckPassword: function(oldPass, newPass, confirmPass) {
|
|
|
|
if (newPass !== confirmPass) {
|
|
|
|
return {
|
2017-06-08 14:33:29 +03:00
|
|
|
error: _t("New passwords don't match")
|
2015-12-23 18:38:28 +03:00
|
|
|
};
|
|
|
|
} else if (!newPass || newPass.length === 0) {
|
|
|
|
return {
|
2017-05-23 17:16:31 +03:00
|
|
|
error: _t("Passwords can't be empty")
|
2015-12-23 18:38:28 +03:00
|
|
|
};
|
|
|
|
}
|
2017-05-16 14:45:14 +03:00
|
|
|
},
|
|
|
|
confirm: true,
|
2015-11-26 20:10:36 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2017-05-12 14:02:45 +03:00
|
|
|
phase: this.Phases.Edit,
|
|
|
|
cachedPassword: null,
|
2017-01-20 17:22:27 +03:00
|
|
|
};
|
2015-11-26 20:10:36 +03:00
|
|
|
},
|
|
|
|
|
2017-05-12 14:02:45 +03:00
|
|
|
componentWillMount: function() {
|
2017-05-15 16:52:19 +03:00
|
|
|
this._sessionStore = sessionStore;
|
2017-05-16 13:52:51 +03:00
|
|
|
this._sessionStoreToken = this._sessionStore.addListener(
|
2017-05-15 19:17:32 +03:00
|
|
|
this._setStateFromSessionStore,
|
2017-05-16 13:52:51 +03:00
|
|
|
);
|
2017-05-12 14:02:45 +03:00
|
|
|
|
2017-05-15 16:52:19 +03:00
|
|
|
this._setStateFromSessionStore();
|
2017-05-12 14:02:45 +03:00
|
|
|
},
|
|
|
|
|
2017-05-15 19:17:32 +03:00
|
|
|
componentWillUnmount: function() {
|
2017-05-16 13:52:51 +03:00
|
|
|
if (this._sessionStoreToken) {
|
|
|
|
this._sessionStoreToken.remove();
|
2017-05-15 19:17:32 +03:00
|
|
|
}
|
|
|
|
},
|
2015-11-26 20:10:36 +03:00
|
|
|
|
2017-05-15 16:52:19 +03:00
|
|
|
_setStateFromSessionStore: function() {
|
2017-05-12 14:02:45 +03:00
|
|
|
this.setState({
|
2017-05-15 16:52:19 +03:00
|
|
|
cachedPassword: this._sessionStore.getCachedPassword(),
|
2017-05-12 14:02:45 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2017-05-16 16:13:22 +03:00
|
|
|
changePassword: function(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-01-25 00:36:55 +03:00
|
|
|
Modal.createDialog(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(
|
|
|
|
'Changing password will currently reset any end-to-end encryption keys on all devices, ' +
|
|
|
|
'making encrypted chat history unreadable, unless you first export your room keys ' +
|
|
|
|
'and re-import them afterwards. ' +
|
2017-05-27 20:20:35 +03:00
|
|
|
'In future this will be improved.'
|
2017-05-23 17:16:31 +03:00
|
|
|
) } (<a href="https://github.com/vector-im/riot-web/issues/2671">https://github.com/vector-im/riot-web/issues/2671</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: [
|
|
|
|
<button className="mx_Dialog_primary"
|
|
|
|
onClick={this._onExportE2eKeysClicked}>
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t('Export E2E room keys') }
|
2017-04-08 01:34:11 +03:00
|
|
|
</button>
|
|
|
|
],
|
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
|
|
|
});
|
2015-11-26 20:10:36 +03:00
|
|
|
},
|
|
|
|
|
2017-05-16 13:45:01 +03:00
|
|
|
_changePassword: function(cli, oldPassword, newPassword) {
|
|
|
|
const authDict = {
|
|
|
|
type: 'm.login.password',
|
|
|
|
user: cli.credentials.userId,
|
|
|
|
password: oldPassword,
|
|
|
|
};
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
phase: this.Phases.Uploading,
|
|
|
|
});
|
|
|
|
|
|
|
|
cli.setPassword(authDict, newPassword).then(() => {
|
|
|
|
this.props.onFinished();
|
|
|
|
}, (err) => {
|
|
|
|
this.props.onError(err);
|
|
|
|
}).finally(() => {
|
|
|
|
this.setState({
|
|
|
|
phase: this.Phases.Edit,
|
|
|
|
});
|
|
|
|
}).done();
|
|
|
|
},
|
|
|
|
|
2017-04-08 01:34:11 +03:00
|
|
|
_onExportE2eKeysClicked: function() {
|
|
|
|
Modal.createDialogAsync(
|
|
|
|
(cb) => {
|
|
|
|
require.ensure(['../../../async-components/views/dialogs/ExportE2eKeysDialog'], () => {
|
|
|
|
cb(require('../../../async-components/views/dialogs/ExportE2eKeysDialog'));
|
|
|
|
}, "e2e-export");
|
|
|
|
}, {
|
|
|
|
matrixClient: MatrixClientPeg.get(),
|
|
|
|
}
|
|
|
|
);
|
2017-05-16 13:45:01 +03:00
|
|
|
},
|
2017-04-08 01:34:11 +03:00
|
|
|
|
2015-11-26 20:10:36 +03:00
|
|
|
onClickChange: function() {
|
2017-05-16 16:13:22 +03:00
|
|
|
const oldPassword = this.state.cachedPassword || this.refs.old_input.value;
|
2017-05-16 13:45:01 +03:00
|
|
|
const newPassword = this.refs.new_input.value;
|
|
|
|
const confirmPassword = this.refs.confirm_input.value;
|
|
|
|
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
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2017-05-11 19:47:45 +03:00
|
|
|
const rowClassName = this.props.rowClassName;
|
|
|
|
const rowLabelClassName = this.props.rowLabelClassName;
|
|
|
|
const rowInputClassName = this.props.rowInputClassName;
|
|
|
|
const buttonClassName = this.props.buttonClassName;
|
|
|
|
|
|
|
|
let currentPassword = null;
|
2017-05-12 14:02:45 +03:00
|
|
|
if (!this.state.cachedPassword) {
|
2017-05-11 19:47:45 +03:00
|
|
|
currentPassword = <div className={rowClassName}>
|
|
|
|
<div className={rowLabelClassName}>
|
|
|
|
<label htmlFor="passwordold">Current password</label>
|
|
|
|
</div>
|
|
|
|
<div className={rowInputClassName}>
|
|
|
|
<input id="passwordold" type="password" ref="old_input" />
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
}
|
2015-12-23 18:38:28 +03:00
|
|
|
|
2015-11-26 20:10:36 +03:00
|
|
|
switch (this.state.phase) {
|
|
|
|
case this.Phases.Edit:
|
2017-05-25 17:27:54 +03:00
|
|
|
const passwordLabel = this.state.cachedPassword ?
|
2017-05-29 00:58:18 +03:00
|
|
|
_t('Password') : _t('New Password');
|
2015-11-26 20:10:36 +03:00
|
|
|
return (
|
2015-12-23 18:38:28 +03:00
|
|
|
<div className={this.props.className}>
|
2017-05-11 19:47:45 +03:00
|
|
|
{ currentPassword }
|
2015-12-23 18:38:28 +03:00
|
|
|
<div className={rowClassName}>
|
|
|
|
<div className={rowLabelClassName}>
|
2017-05-25 17:27:54 +03:00
|
|
|
<label htmlFor="password1">{ passwordLabel }</label>
|
2015-12-23 18:38:28 +03:00
|
|
|
</div>
|
|
|
|
<div className={rowInputClassName}>
|
2017-05-22 16:46:49 +03:00
|
|
|
<input id="password1" type="password" ref="new_input" autoFocus={this.props.autoFocusNewPasswordInput} />
|
2015-12-23 18:38:28 +03:00
|
|
|
</div>
|
2015-11-26 20:10:36 +03:00
|
|
|
</div>
|
2015-12-23 18:38:28 +03:00
|
|
|
<div className={rowClassName}>
|
|
|
|
<div className={rowLabelClassName}>
|
2017-05-23 17:16:31 +03:00
|
|
|
<label htmlFor="password2">{ _t('Confirm password') }</label>
|
2015-12-23 18:38:28 +03:00
|
|
|
</div>
|
|
|
|
<div className={rowInputClassName}>
|
|
|
|
<input id="password2" type="password" ref="confirm_input" />
|
|
|
|
</div>
|
|
|
|
</div>
|
2017-01-25 01:41:52 +03:00
|
|
|
<AccessibleButton className={buttonClassName}
|
2017-05-16 13:45:01 +03:00
|
|
|
onClick={this.onClickChange}
|
|
|
|
element="button">
|
2017-05-23 17:16:31 +03:00
|
|
|
{ _t('Change Password') }
|
2017-01-13 19:25:26 +03:00
|
|
|
</AccessibleButton>
|
2015-11-26 20:10:36 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
case this.Phases.Uploading:
|
|
|
|
var Loader = sdk.getComponent("elements.Spinner");
|
|
|
|
return (
|
|
|
|
<div className="mx_Dialog_content">
|
|
|
|
<Loader />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|