2015-11-30 15:52:41 +00:00
|
|
|
/*
|
2016-01-07 04:06:39 +00:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2015-11-30 15:52:41 +00: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.
|
|
|
|
*/
|
|
|
|
var React = require('react');
|
2016-01-19 16:36:54 +00:00
|
|
|
var ReactDOM = require('react-dom');
|
2015-11-30 15:52:41 +00:00
|
|
|
var sdk = require('../../index');
|
|
|
|
var MatrixClientPeg = require("../../MatrixClientPeg");
|
2016-11-08 10:45:19 +00:00
|
|
|
var PlatformPeg = require("../../PlatformPeg");
|
2015-11-30 15:52:41 +00:00
|
|
|
var Modal = require('../../Modal');
|
2015-12-18 00:40:01 +00:00
|
|
|
var dis = require("../../dispatcher");
|
2015-11-30 15:52:41 +00:00
|
|
|
var q = require('q');
|
2016-06-17 16:09:52 +00:00
|
|
|
var package_json = require('../../../package.json');
|
2015-12-18 00:40:01 +00:00
|
|
|
var UserSettingsStore = require('../../UserSettingsStore');
|
2016-01-15 13:11:14 +00:00
|
|
|
var GeminiScrollbar = require('react-gemini-scrollbar');
|
2016-01-19 16:36:54 +00:00
|
|
|
var Email = require('../../email');
|
|
|
|
var AddThreepid = require('../../AddThreepid');
|
2015-11-30 15:52:41 +00:00
|
|
|
|
2016-06-17 16:09:52 +00:00
|
|
|
// if this looks like a release, use the 'version' from package.json; else use
|
|
|
|
// the git sha.
|
|
|
|
const REACT_SDK_VERSION =
|
|
|
|
'dist' in package_json ? package_json.version : package_json.gitHead || "<local>";
|
|
|
|
|
2015-11-30 15:52:41 +00:00
|
|
|
module.exports = React.createClass({
|
|
|
|
displayName: 'UserSettings',
|
2015-12-18 00:37:56 +00:00
|
|
|
|
2015-12-23 11:47:56 +00:00
|
|
|
propTypes: {
|
2016-06-08 13:54:34 +00:00
|
|
|
onClose: React.PropTypes.func,
|
|
|
|
// The brand string given when creating email pushers
|
|
|
|
brand: React.PropTypes.string,
|
2016-08-05 15:13:06 +00:00
|
|
|
|
|
|
|
// True to show the 'labs' section of experimental features
|
2016-08-05 15:36:35 +00:00
|
|
|
enableLabs: React.PropTypes.bool,
|
2016-09-13 11:18:22 +00:00
|
|
|
|
|
|
|
// true if RightPanel is collapsed
|
|
|
|
collapsedRhs: React.PropTypes.bool,
|
2015-12-23 11:47:56 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
2016-08-05 15:13:06 +00:00
|
|
|
onClose: function() {},
|
|
|
|
enableLabs: true,
|
2015-12-23 11:47:56 +00:00
|
|
|
};
|
2015-11-30 15:52:41 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
avatarUrl: null,
|
|
|
|
threePids: [],
|
2015-12-23 16:02:18 +00:00
|
|
|
phase: "UserSettings.LOADING", // LOADING, DISPLAY
|
2016-01-19 16:36:54 +00:00
|
|
|
email_add_pending: false,
|
2016-11-08 10:45:19 +00:00
|
|
|
vectorVersion: null,
|
2016-12-14 16:00:50 +00:00
|
|
|
rejectingInvites: false,
|
2015-11-30 15:52:41 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
2016-11-08 11:43:24 +00:00
|
|
|
this._unmounted = false;
|
|
|
|
|
2016-11-08 10:45:19 +00:00
|
|
|
if (PlatformPeg.get()) {
|
2016-11-11 10:05:53 +00:00
|
|
|
q().then(() => {
|
|
|
|
return PlatformPeg.get().getAppVersion();
|
|
|
|
}).done((appVersion) => {
|
2016-11-08 11:43:24 +00:00
|
|
|
if (this._unmounted) return;
|
2016-11-08 10:45:19 +00:00
|
|
|
this.setState({
|
|
|
|
vectorVersion: appVersion,
|
|
|
|
});
|
|
|
|
}, (e) => {
|
|
|
|
console.log("Failed to fetch app version", e);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2016-12-14 16:00:50 +00:00
|
|
|
// Bulk rejecting invites:
|
|
|
|
// /sync won't have had time to return when UserSettings re-renders from state changes, so getRooms()
|
|
|
|
// will still return rooms with invites. To get around this, add a listener for
|
|
|
|
// membership updates and kick the UI.
|
|
|
|
MatrixClientPeg.get().on("RoomMember.membership", this._onInviteStateChange);
|
|
|
|
|
2016-04-15 17:30:13 +00:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'ui_opacity',
|
|
|
|
sideOpacity: 0.3,
|
|
|
|
middleOpacity: 0.3,
|
|
|
|
});
|
2015-12-23 16:52:59 +00:00
|
|
|
this._refreshFromServer();
|
2015-11-30 15:52:41 +00:00
|
|
|
},
|
|
|
|
|
2015-12-18 00:37:56 +00:00
|
|
|
componentDidMount: function() {
|
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
2015-12-23 16:02:18 +00:00
|
|
|
this._me = MatrixClientPeg.get().credentials.userId;
|
2015-12-18 00:37:56 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
2016-11-08 11:43:24 +00:00
|
|
|
this._unmounted = true;
|
2016-04-15 17:30:13 +00:00
|
|
|
dis.dispatch({
|
|
|
|
action: 'ui_opacity',
|
|
|
|
sideOpacity: 1.0,
|
|
|
|
middleOpacity: 1.0,
|
|
|
|
});
|
2015-12-18 00:37:56 +00:00
|
|
|
dis.unregister(this.dispatcherRef);
|
2016-12-15 16:13:09 +00:00
|
|
|
let cli = MatrixClientPeg.get();
|
|
|
|
if (cli) {
|
|
|
|
cli.removeListener("RoomMember.membership", this._onInviteStateChange);
|
|
|
|
}
|
2015-12-18 00:37:56 +00:00
|
|
|
},
|
|
|
|
|
2015-12-23 16:52:59 +00:00
|
|
|
_refreshFromServer: function() {
|
2015-12-18 00:37:56 +00:00
|
|
|
var self = this;
|
2015-12-23 16:52:59 +00:00
|
|
|
q.all([
|
|
|
|
UserSettingsStore.loadProfileInfo(), UserSettingsStore.loadThreePids()
|
|
|
|
]).done(function(resps) {
|
2015-12-23 11:47:56 +00:00
|
|
|
self.setState({
|
2015-12-23 16:52:59 +00:00
|
|
|
avatarUrl: resps[0].avatar_url,
|
|
|
|
threepids: resps[1].threepids,
|
2015-12-23 11:47:56 +00:00
|
|
|
phase: "UserSettings.DISPLAY",
|
2015-12-18 00:37:56 +00:00
|
|
|
});
|
2015-12-23 11:47:56 +00:00
|
|
|
}, function(error) {
|
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
2015-12-23 16:52:59 +00:00
|
|
|
title: "Can't load user settings",
|
2015-12-23 11:47:56 +00:00
|
|
|
description: error.toString()
|
|
|
|
});
|
2015-12-23 16:52:59 +00:00
|
|
|
});
|
|
|
|
},
|
2015-12-18 00:37:56 +00:00
|
|
|
|
|
|
|
onAction: function(payload) {
|
|
|
|
if (payload.action === "notifier_enabled") {
|
2015-12-23 17:06:30 +00:00
|
|
|
this.forceUpdate();
|
2015-12-18 00:37:56 +00:00
|
|
|
}
|
2015-11-30 15:52:41 +00:00
|
|
|
},
|
|
|
|
|
2016-01-15 12:35:30 +00:00
|
|
|
onAvatarPickerClick: function(ev) {
|
2016-03-15 23:55:59 +00:00
|
|
|
if (MatrixClientPeg.get().isGuest()) {
|
2016-03-22 13:50:27 +00:00
|
|
|
var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
|
|
|
|
Modal.createDialog(NeedToRegisterDialog, {
|
|
|
|
title: "Please Register",
|
2016-03-15 23:55:59 +00:00
|
|
|
description: "Guests can't set avatars. Please register.",
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-01-15 12:35:30 +00:00
|
|
|
if (this.refs.file_label) {
|
|
|
|
this.refs.file_label.click();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-12-23 16:52:59 +00:00
|
|
|
onAvatarSelected: function(ev) {
|
|
|
|
var self = this;
|
|
|
|
var changeAvatar = this.refs.changeAvatar;
|
|
|
|
if (!changeAvatar) {
|
|
|
|
console.error("No ChangeAvatar found to upload image to!");
|
|
|
|
return;
|
|
|
|
}
|
2015-12-23 17:30:25 +00:00
|
|
|
changeAvatar.onFileSelected(ev).done(function() {
|
|
|
|
// dunno if the avatar changed, re-check it.
|
|
|
|
self._refreshFromServer();
|
|
|
|
}, function(err) {
|
|
|
|
var errMsg = (typeof err === "string") ? err : (err.error || "");
|
2015-12-23 16:52:59 +00:00
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Error",
|
|
|
|
description: "Failed to set avatar. " + errMsg
|
|
|
|
});
|
2015-12-23 17:30:25 +00:00
|
|
|
});
|
2015-11-30 15:52:41 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
onLogoutClicked: function(ev) {
|
|
|
|
var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
|
2016-03-18 11:12:06 +00:00
|
|
|
this.logoutModal = Modal.createDialog(LogoutPrompt);
|
2015-11-30 15:52:41 +00:00
|
|
|
},
|
|
|
|
|
2015-12-23 15:38:28 +00:00
|
|
|
onPasswordChangeError: function(err) {
|
|
|
|
var errMsg = err.error || "";
|
|
|
|
if (err.httpStatus === 403) {
|
|
|
|
errMsg = "Failed to change password. Is your password correct?";
|
|
|
|
}
|
|
|
|
else if (err.httpStatus) {
|
|
|
|
errMsg += ` (HTTP status ${err.httpStatus})`;
|
|
|
|
}
|
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Error",
|
|
|
|
description: errMsg
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
onPasswordChanged: function() {
|
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Success",
|
|
|
|
description: `Your password was successfully changed. You will not
|
|
|
|
receive push notifications on other devices until you
|
|
|
|
log back in to them.`
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-01-07 17:23:32 +00:00
|
|
|
onUpgradeClicked: function() {
|
|
|
|
dis.dispatch({
|
2016-03-04 15:41:32 +00:00
|
|
|
action: "start_upgrade_registration"
|
2016-01-07 17:23:32 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-01-19 16:36:54 +00:00
|
|
|
onEnableNotificationsChange: function(event) {
|
|
|
|
UserSettingsStore.setEnableNotifications(event.target.checked);
|
|
|
|
},
|
|
|
|
|
|
|
|
onAddThreepidClicked: function(value, shouldSubmit) {
|
|
|
|
if (!shouldSubmit) return;
|
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
|
|
|
|
|
|
|
var email_address = this.refs.add_threepid_input.value;
|
|
|
|
if (!Email.looksValid(email_address)) {
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Invalid Email Address",
|
|
|
|
description: "This doesn't appear to be a valid email address",
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.add_threepid = new AddThreepid();
|
|
|
|
// we always bind emails when registering, so let's do the
|
|
|
|
// same here.
|
2016-01-19 17:20:23 +00:00
|
|
|
this.add_threepid.addEmailAddress(email_address, true).done(() => {
|
2016-01-19 16:36:54 +00:00
|
|
|
Modal.createDialog(QuestionDialog, {
|
|
|
|
title: "Verification Pending",
|
|
|
|
description: "Please check your email and click on the link it contains. Once this is done, click continue.",
|
|
|
|
button: 'Continue',
|
|
|
|
onFinished: this.onEmailDialogFinished,
|
|
|
|
});
|
|
|
|
}, (err) => {
|
2016-07-08 16:28:04 +00:00
|
|
|
this.setState({email_add_pending: false});
|
2016-01-19 16:36:54 +00:00
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Unable to add email address",
|
2016-07-08 16:28:04 +00:00
|
|
|
description: err.message
|
2016-01-19 16:36:54 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
ReactDOM.findDOMNode(this.refs.add_threepid_input).blur();
|
|
|
|
this.setState({email_add_pending: true});
|
|
|
|
},
|
|
|
|
|
2016-12-21 18:49:38 +00:00
|
|
|
onRemoveThreepidClicked: function(threepid) {
|
|
|
|
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
|
|
|
Modal.createDialog(QuestionDialog, {
|
|
|
|
title: "Remove Contact Information?",
|
|
|
|
description: "Remove " + threepid.address + "?",
|
|
|
|
button: 'Remove',
|
|
|
|
onFinished: (submit) => {
|
|
|
|
if (submit) {
|
|
|
|
this.setState({
|
|
|
|
phase: "UserSettings.LOADING",
|
|
|
|
});
|
|
|
|
MatrixClientPeg.get().deleteThreePid(threepid.medium, threepid.address).then(() => {
|
|
|
|
return this._refreshFromServer();
|
|
|
|
}).catch((e) => {
|
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Unable to remove contact information",
|
|
|
|
description: err.toString(),
|
|
|
|
});
|
|
|
|
}).done();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-01-19 16:36:54 +00:00
|
|
|
onEmailDialogFinished: function(ok) {
|
|
|
|
if (ok) {
|
|
|
|
this.verifyEmailAddress();
|
|
|
|
} else {
|
|
|
|
this.setState({email_add_pending: false});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
verifyEmailAddress: function() {
|
|
|
|
this.add_threepid.checkEmailLinkClicked().done(() => {
|
|
|
|
this.add_threepid = undefined;
|
|
|
|
this.setState({
|
|
|
|
phase: "UserSettings.LOADING",
|
|
|
|
});
|
|
|
|
this._refreshFromServer();
|
|
|
|
this.setState({email_add_pending: false});
|
|
|
|
}, (err) => {
|
2016-03-24 15:03:44 +00:00
|
|
|
this.setState({email_add_pending: false});
|
2016-01-19 16:36:54 +00:00
|
|
|
if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
|
|
|
|
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
|
|
|
var message = "Unable to verify email address. "
|
|
|
|
message += "Please check your email and click on the link it contains. Once this is done, click continue."
|
|
|
|
Modal.createDialog(QuestionDialog, {
|
|
|
|
title: "Verification Pending",
|
|
|
|
description: message,
|
|
|
|
button: 'Continue',
|
|
|
|
onFinished: this.onEmailDialogFinished,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Unable to verify email address",
|
|
|
|
description: err.toString(),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-08-02 17:40:12 +00:00
|
|
|
_onDeactivateAccountClicked: function() {
|
|
|
|
const DeactivateAccountDialog = sdk.getComponent("dialogs.DeactivateAccountDialog");
|
|
|
|
Modal.createDialog(DeactivateAccountDialog, {});
|
|
|
|
},
|
|
|
|
|
2016-12-14 16:00:50 +00:00
|
|
|
_onInviteStateChange: function(event, member, oldMembership) {
|
|
|
|
if (member.userId === this._me && oldMembership === "invite") {
|
|
|
|
this.forceUpdate();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_onRejectAllInvitesClicked: function(rooms, ev) {
|
|
|
|
this.setState({
|
|
|
|
rejectingInvites: true
|
|
|
|
});
|
|
|
|
// reject the invites
|
|
|
|
let promises = rooms.map((room) => {
|
|
|
|
return MatrixClientPeg.get().leave(room.roomId);
|
|
|
|
});
|
|
|
|
// purposefully drop errors to the floor: we'll just have a non-zero number on the UI
|
|
|
|
// after trying to reject all the invites.
|
|
|
|
q.allSettled(promises).then(() => {
|
|
|
|
this.setState({
|
|
|
|
rejectingInvites: false
|
|
|
|
});
|
2016-12-15 14:17:29 +00:00
|
|
|
}).done();
|
2016-12-14 15:01:50 +00:00
|
|
|
},
|
|
|
|
|
2016-07-18 00:35:42 +00:00
|
|
|
_renderUserInterfaceSettings: function() {
|
|
|
|
var client = MatrixClientPeg.get();
|
|
|
|
|
|
|
|
var settingsLabels = [
|
|
|
|
/*
|
|
|
|
{
|
|
|
|
id: 'alwaysShowTimestamps',
|
|
|
|
label: 'Always show message timestamps',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'showTwelveHourTimestamps',
|
|
|
|
label: 'Show timestamps in 12 hour format (e.g. 2:30pm)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'useCompactLayout',
|
|
|
|
label: 'Use compact timeline layout',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'useFixedWidthFont',
|
|
|
|
label: 'Use fixed width font',
|
|
|
|
},
|
|
|
|
*/
|
|
|
|
];
|
|
|
|
|
|
|
|
var syncedSettings = UserSettingsStore.getSyncedSettings();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<h3>User Interface</h3>
|
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<div className="mx_UserSettings_toggle">
|
|
|
|
<input id="urlPreviewsDisabled"
|
|
|
|
type="checkbox"
|
|
|
|
defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() }
|
|
|
|
onChange={ e => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) }
|
|
|
|
/>
|
|
|
|
<label htmlFor="urlPreviewsDisabled">
|
|
|
|
Disable inline URL previews by default
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{ settingsLabels.forEach( setting => {
|
|
|
|
<div className="mx_UserSettings_toggle">
|
|
|
|
<input id={ setting.id }
|
|
|
|
type="checkbox"
|
|
|
|
defaultChecked={ syncedSettings[setting.id] }
|
|
|
|
onChange={ e => UserSettingsStore.setSyncedSetting(setting.id, e.target.checked) }
|
|
|
|
/>
|
|
|
|
<label htmlFor={ setting.id }>
|
|
|
|
{ settings.label }
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2016-08-01 12:42:29 +00:00
|
|
|
_renderCryptoInfo: function() {
|
2016-12-05 18:33:38 +00:00
|
|
|
const client = MatrixClientPeg.get();
|
2016-12-05 20:03:43 +00:00
|
|
|
const deviceId = client.deviceId;
|
|
|
|
const identityKey = client.getDeviceEd25519Key() || "<not supported>";
|
2016-09-15 00:55:51 +00:00
|
|
|
|
2016-06-08 12:09:07 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<h3>Cryptography</h3>
|
2016-09-15 00:55:51 +00:00
|
|
|
<div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
|
2016-06-08 12:09:07 +00:00
|
|
|
<ul>
|
2016-09-15 00:55:51 +00:00
|
|
|
<li><label>Device ID:</label> <span><code>{deviceId}</code></span></li>
|
|
|
|
<li><label>Device key:</label> <span><code><b>{identityKey}</b></code></span></li>
|
2016-06-08 12:09:07 +00:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2016-08-01 12:42:29 +00:00
|
|
|
_renderDevicesPanel: function() {
|
|
|
|
var DevicesPanel = sdk.getComponent('settings.DevicesPanel');
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<h3>Devices</h3>
|
2016-09-15 00:55:51 +00:00
|
|
|
<DevicesPanel className="mx_UserSettings_section"/>
|
2016-08-01 12:42:29 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderLabs: function () {
|
2016-08-05 16:18:45 +00:00
|
|
|
// default to enabled if undefined
|
2016-08-05 15:36:35 +00:00
|
|
|
if (this.props.enableLabs === false) return null;
|
2016-08-05 15:13:06 +00:00
|
|
|
|
2016-09-16 23:54:56 +00:00
|
|
|
let features = UserSettingsStore.LABS_FEATURES.map(feature => (
|
2016-08-01 12:42:29 +00:00
|
|
|
<div key={feature.id} className="mx_UserSettings_toggle">
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
id={feature.id}
|
|
|
|
name={feature.id}
|
2016-09-16 23:54:56 +00:00
|
|
|
defaultChecked={ UserSettingsStore.isFeatureEnabled(feature.id) }
|
2016-08-01 12:42:29 +00:00
|
|
|
onChange={e => {
|
2016-09-17 13:29:40 +00:00
|
|
|
if (MatrixClientPeg.get().isGuest()) {
|
|
|
|
e.target.checked = false;
|
|
|
|
var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
|
|
|
|
Modal.createDialog(NeedToRegisterDialog, {
|
|
|
|
title: "Please Register",
|
|
|
|
description: "Guests can't use labs features. Please register.",
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-08-01 12:42:29 +00:00
|
|
|
UserSettingsStore.setFeatureEnabled(feature.id, e.target.checked);
|
|
|
|
this.forceUpdate();
|
|
|
|
}}/>
|
|
|
|
<label htmlFor={feature.id}>{feature.name}</label>
|
|
|
|
</div>
|
|
|
|
));
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<h3>Labs</h3>
|
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<p>These are experimental features that may break in unexpected ways. Use with caution.</p>
|
|
|
|
{features}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
|
2016-08-02 17:40:12 +00:00
|
|
|
_renderDeactivateAccount: function() {
|
2016-08-03 10:34:31 +00:00
|
|
|
// We can't deactivate a guest account.
|
|
|
|
if (MatrixClientPeg.get().isGuest()) return null;
|
|
|
|
|
2016-08-02 17:40:12 +00:00
|
|
|
return <div>
|
2016-08-02 17:42:02 +00:00
|
|
|
<h3>Deactivate Account</h3>
|
2016-08-02 17:40:12 +00:00
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<button className="mx_UserSettings_button danger"
|
|
|
|
onClick={this._onDeactivateAccountClicked}>Deactivate my account
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2016-12-14 15:01:50 +00:00
|
|
|
_renderBulkOptions: function() {
|
|
|
|
let invitedRooms = MatrixClientPeg.get().getRooms().filter((r) => {
|
|
|
|
return r.hasMembershipState(this._me, "invite");
|
|
|
|
});
|
|
|
|
if (invitedRooms.length === 0) {
|
|
|
|
return null;
|
|
|
|
}
|
2016-12-14 16:00:50 +00:00
|
|
|
|
|
|
|
let Spinner = sdk.getComponent("elements.Spinner");
|
|
|
|
|
|
|
|
let reject = <Spinner />;
|
|
|
|
if (!this.state.rejectingInvites) {
|
2016-12-14 16:04:20 +00:00
|
|
|
// bind() the invited rooms so any new invites that may come in as this button is clicked
|
|
|
|
// don't inadvertently get rejected as well.
|
2016-12-14 16:00:50 +00:00
|
|
|
reject = (
|
|
|
|
<button className="mx_UserSettings_button danger"
|
|
|
|
onClick={this._onRejectAllInvitesClicked.bind(this, invitedRooms)}>
|
|
|
|
Reject all {invitedRooms.length} invites
|
|
|
|
</button>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-12-14 15:01:50 +00:00
|
|
|
return <div>
|
|
|
|
<h3>Bulk Options</h3>
|
|
|
|
<div className="mx_UserSettings_section">
|
2016-12-14 16:00:50 +00:00
|
|
|
{reject}
|
2016-12-14 15:01:50 +00:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2015-11-30 15:52:41 +00:00
|
|
|
render: function() {
|
2016-01-19 16:36:54 +00:00
|
|
|
var Loader = sdk.getComponent("elements.Spinner");
|
2015-12-18 00:37:56 +00:00
|
|
|
switch (this.state.phase) {
|
2015-12-23 11:47:56 +00:00
|
|
|
case "UserSettings.LOADING":
|
2015-12-23 16:02:18 +00:00
|
|
|
return (
|
|
|
|
<Loader />
|
|
|
|
);
|
2015-12-23 11:47:56 +00:00
|
|
|
case "UserSettings.DISPLAY":
|
|
|
|
break; // quit the switch to return the common state
|
|
|
|
default:
|
|
|
|
throw new Error("Unknown state.phase => " + this.state.phase);
|
|
|
|
}
|
|
|
|
// can only get here if phase is UserSettings.DISPLAY
|
2016-03-29 11:51:46 +00:00
|
|
|
var SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
|
2015-12-23 15:38:28 +00:00
|
|
|
var ChangeDisplayName = sdk.getComponent("views.settings.ChangeDisplayName");
|
|
|
|
var ChangePassword = sdk.getComponent("views.settings.ChangePassword");
|
2015-12-23 16:52:59 +00:00
|
|
|
var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
|
2016-01-11 16:05:27 +00:00
|
|
|
var Notifications = sdk.getComponent("settings.Notifications");
|
2016-01-19 16:36:54 +00:00
|
|
|
var EditableText = sdk.getComponent('elements.EditableText');
|
2016-08-01 12:42:29 +00:00
|
|
|
|
2015-12-23 16:52:59 +00:00
|
|
|
var avatarUrl = (
|
|
|
|
this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
|
|
|
|
);
|
2015-12-23 15:38:28 +00:00
|
|
|
|
2016-12-21 18:49:38 +00:00
|
|
|
var threepidsSection = this.state.threepids.map((val, pidIndex) => {
|
2016-01-19 16:36:54 +00:00
|
|
|
var id = "email-" + val.address;
|
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings_profileTableRow" key={pidIndex}>
|
|
|
|
<div className="mx_UserSettings_profileLabelCell">
|
|
|
|
<label htmlFor={id}>Email</label>
|
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_profileInputCell">
|
|
|
|
<input key={val.address} id={id} value={val.address} disabled />
|
|
|
|
</div>
|
2016-12-21 18:49:38 +00:00
|
|
|
<div className="mx_UserSettings_threepidButton">
|
|
|
|
<img src="img/icon_context_delete.svg" width="14" height="14" alt="Remove" onClick={this.onRemoveThreepidClicked.bind(this, val)} />
|
|
|
|
</div>
|
2016-01-19 16:36:54 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
var addThreepidSection;
|
|
|
|
if (this.state.email_add_pending) {
|
|
|
|
addThreepidSection = <Loader />;
|
2016-03-16 10:33:20 +00:00
|
|
|
} else if (!MatrixClientPeg.get().isGuest()) {
|
2016-01-19 16:36:54 +00:00
|
|
|
addThreepidSection = (
|
|
|
|
<div className="mx_UserSettings_profileTableRow" key="new">
|
|
|
|
<div className="mx_UserSettings_profileLabelCell">
|
|
|
|
</div>
|
2016-01-24 18:15:08 +00:00
|
|
|
<div className="mx_UserSettings_profileInputCell">
|
|
|
|
<EditableText
|
|
|
|
ref="add_threepid_input"
|
|
|
|
className="mx_UserSettings_editable"
|
|
|
|
placeholderClassName="mx_UserSettings_threepidPlaceholder"
|
|
|
|
placeholder={ "Add email address" }
|
|
|
|
blurToCancel={ false }
|
|
|
|
onValueChanged={ this.onAddThreepidClicked } />
|
|
|
|
</div>
|
2016-12-21 18:49:38 +00:00
|
|
|
<div className="mx_UserSettings_threepidButton">
|
2016-05-31 22:50:21 +00:00
|
|
|
<img src="img/plus.svg" width="14" height="14" alt="Add" onClick={ this.onAddThreepidClicked.bind(this, undefined, true) }/>
|
2016-01-19 16:36:54 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
threepidsSection.push(addThreepidSection);
|
|
|
|
|
2016-01-07 17:23:32 +00:00
|
|
|
var accountJsx;
|
|
|
|
|
|
|
|
if (MatrixClientPeg.get().isGuest()) {
|
|
|
|
accountJsx = (
|
|
|
|
<div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}>
|
2016-01-15 12:35:30 +00:00
|
|
|
Create an account
|
2016-01-07 17:23:32 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
accountJsx = (
|
|
|
|
<ChangePassword
|
|
|
|
className="mx_UserSettings_accountTable"
|
|
|
|
rowClassName="mx_UserSettings_profileTableRow"
|
|
|
|
rowLabelClassName="mx_UserSettings_profileLabelCell"
|
|
|
|
rowInputClassName="mx_UserSettings_profileInputCell"
|
2016-01-20 17:09:46 +00:00
|
|
|
buttonClassName="mx_UserSettings_button mx_UserSettings_changePasswordButton"
|
2016-01-07 17:23:32 +00:00
|
|
|
onError={this.onPasswordChangeError}
|
|
|
|
onFinished={this.onPasswordChanged} />
|
|
|
|
);
|
|
|
|
}
|
2016-02-10 11:48:35 +00:00
|
|
|
var notification_area;
|
2016-04-12 15:17:04 +00:00
|
|
|
if (!MatrixClientPeg.get().isGuest() && this.state.threepids !== undefined) {
|
2016-02-10 11:48:35 +00:00
|
|
|
notification_area = (<div>
|
2016-04-15 17:30:13 +00:00
|
|
|
<h3>Notifications</h3>
|
2016-02-10 11:48:35 +00:00
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
2016-06-08 13:54:34 +00:00
|
|
|
<Notifications threepids={this.state.threepids} brand={this.props.brand} />
|
2016-02-10 11:48:35 +00:00
|
|
|
</div>
|
|
|
|
</div>);
|
|
|
|
}
|
2016-01-07 17:23:32 +00:00
|
|
|
|
2016-09-15 10:31:54 +00:00
|
|
|
var olmVersion = MatrixClientPeg.get().olmVersion;
|
|
|
|
// If the olmVersion is not defined then either crypto is disabled, or
|
|
|
|
// we are using a version old version of olm. We assume the former.
|
|
|
|
var olmVersionString = "<not-enabled>";
|
|
|
|
if (olmVersion !== undefined) {
|
|
|
|
olmVersionString = olmVersion[0] + "." + olmVersion[1] + "." + olmVersion[2];
|
|
|
|
}
|
|
|
|
|
2015-12-23 11:47:56 +00:00
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings">
|
2016-09-13 11:18:22 +00:00
|
|
|
<SimpleRoomHeader
|
|
|
|
title="Settings"
|
|
|
|
collapsedRhs={ this.props.collapsedRhs }
|
|
|
|
onCancelClick={ this.props.onClose }
|
|
|
|
/>
|
2015-12-23 11:47:56 +00:00
|
|
|
|
2016-04-20 11:25:19 +00:00
|
|
|
<GeminiScrollbar className="mx_UserSettings_body"
|
|
|
|
autoshow={true}>
|
2016-01-15 13:11:14 +00:00
|
|
|
|
2016-04-15 17:30:13 +00:00
|
|
|
<h3>Profile</h3>
|
2015-12-23 11:47:56 +00:00
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<div className="mx_UserSettings_profileTable">
|
|
|
|
<div className="mx_UserSettings_profileTableRow">
|
|
|
|
<div className="mx_UserSettings_profileLabelCell">
|
|
|
|
<label htmlFor="displayName">Display name</label>
|
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_profileInputCell">
|
2015-12-23 14:14:25 +00:00
|
|
|
<ChangeDisplayName />
|
2015-12-23 11:47:56 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2016-01-19 16:36:54 +00:00
|
|
|
{threepidsSection}
|
2015-12-23 15:38:28 +00:00
|
|
|
</div>
|
2015-11-30 15:52:41 +00:00
|
|
|
|
2015-12-23 11:47:56 +00:00
|
|
|
<div className="mx_UserSettings_avatarPicker">
|
2016-01-15 16:33:34 +00:00
|
|
|
<div onClick={ this.onAvatarPickerClick }>
|
|
|
|
<ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
|
|
|
|
showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/>
|
|
|
|
</div>
|
2015-12-23 16:52:59 +00:00
|
|
|
<div className="mx_UserSettings_avatarPicker_edit">
|
2016-01-15 12:35:30 +00:00
|
|
|
<label htmlFor="avatarInput" ref="file_label">
|
|
|
|
<img src="img/camera.svg"
|
2015-12-23 16:52:59 +00:00
|
|
|
alt="Upload avatar" title="Upload avatar"
|
2016-01-15 12:35:30 +00:00
|
|
|
width="17" height="15" />
|
2015-12-23 16:52:59 +00:00
|
|
|
</label>
|
|
|
|
<input id="avatarInput" type="file" onChange={this.onAvatarSelected}/>
|
2015-11-30 15:52:41 +00:00
|
|
|
</div>
|
2015-12-23 11:47:56 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2015-12-18 00:37:56 +00:00
|
|
|
|
2016-04-15 17:30:13 +00:00
|
|
|
<h3>Account</h3>
|
2015-12-23 15:38:28 +00:00
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
2016-04-15 17:30:13 +00:00
|
|
|
|
2016-01-20 17:09:46 +00:00
|
|
|
<div className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
|
2016-09-29 16:38:52 +00:00
|
|
|
Sign out
|
2015-12-23 11:47:56 +00:00
|
|
|
</div>
|
2016-01-15 12:35:30 +00:00
|
|
|
|
|
|
|
{accountJsx}
|
2015-12-23 11:47:56 +00:00
|
|
|
</div>
|
2015-12-18 00:37:56 +00:00
|
|
|
|
2016-02-10 11:48:35 +00:00
|
|
|
{notification_area}
|
2015-12-18 00:37:56 +00:00
|
|
|
|
2016-07-18 00:35:42 +00:00
|
|
|
{this._renderUserInterfaceSettings()}
|
2016-06-13 16:34:12 +00:00
|
|
|
{this._renderLabs()}
|
2016-08-01 12:42:29 +00:00
|
|
|
{this._renderDevicesPanel()}
|
|
|
|
{this._renderCryptoInfo()}
|
2016-12-14 15:01:50 +00:00
|
|
|
{this._renderBulkOptions()}
|
2016-06-13 16:34:12 +00:00
|
|
|
|
2016-04-15 17:30:13 +00:00
|
|
|
<h3>Advanced</h3>
|
2015-12-23 11:47:56 +00:00
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<div className="mx_UserSettings_advanced">
|
2015-12-23 16:02:18 +00:00
|
|
|
Logged in as {this._me}
|
2015-11-30 15:52:41 +00:00
|
|
|
</div>
|
2016-05-18 10:42:51 +00:00
|
|
|
<div className="mx_UserSettings_advanced">
|
|
|
|
Homeserver is { MatrixClientPeg.get().getHomeserverUrl() }
|
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_advanced">
|
|
|
|
Identity Server is { MatrixClientPeg.get().getIdentityServerUrl() }
|
|
|
|
</div>
|
2015-12-23 16:02:18 +00:00
|
|
|
<div className="mx_UserSettings_advanced">
|
2016-06-17 16:09:52 +00:00
|
|
|
matrix-react-sdk version: {REACT_SDK_VERSION}<br/>
|
2016-11-08 10:45:19 +00:00
|
|
|
vector-web version: {this.state.vectorVersion !== null ? this.state.vectorVersion : 'unknown'}<br/>
|
2016-09-15 10:31:54 +00:00
|
|
|
olm version: {olmVersionString}<br/>
|
2015-12-23 11:47:56 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2016-01-15 13:11:14 +00:00
|
|
|
|
2016-08-02 17:40:12 +00:00
|
|
|
{this._renderDeactivateAccount()}
|
|
|
|
|
2016-01-15 13:11:14 +00:00
|
|
|
</GeminiScrollbar>
|
2015-12-23 11:47:56 +00:00
|
|
|
</div>
|
|
|
|
);
|
2015-11-30 15:52:41 +00:00
|
|
|
}
|
|
|
|
});
|