2015-11-30 15:52:41 +00:00
|
|
|
/*
|
|
|
|
Copyright 2015 OpenMarket Ltd
|
|
|
|
|
|
|
|
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');
|
|
|
|
var sdk = require('../../index');
|
|
|
|
var MatrixClientPeg = require("../../MatrixClientPeg");
|
|
|
|
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');
|
|
|
|
var version = require('../../../package.json').version;
|
2015-12-18 00:40:01 +00:00
|
|
|
var UserSettingsStore = require('../../UserSettingsStore');
|
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: {
|
|
|
|
onClose: React.PropTypes.func
|
|
|
|
},
|
|
|
|
|
|
|
|
getDefaultProps: function() {
|
|
|
|
return {
|
|
|
|
onClose: function() {}
|
|
|
|
};
|
2015-11-30 15:52:41 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
|
|
|
avatarUrl: null,
|
|
|
|
threePids: [],
|
|
|
|
clientVersion: version,
|
2015-12-23 16:02:18 +00:00
|
|
|
phase: "UserSettings.LOADING", // LOADING, DISPLAY
|
2015-11-30 15:52:41 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
|
|
|
var self = this;
|
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() {
|
|
|
|
dis.unregister(this.dispatcherRef);
|
|
|
|
},
|
|
|
|
|
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
|
|
|
},
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
changeAvatar.onFileSelected(ev).catch(function(err) {
|
|
|
|
var errMsg = err.error || "";
|
|
|
|
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
Modal.createDialog(ErrorDialog, {
|
|
|
|
title: "Error",
|
|
|
|
description: "Failed to set avatar. " + errMsg
|
|
|
|
});
|
|
|
|
}).finally(function() {
|
|
|
|
// dunno if the avatar changed, re-check it.
|
|
|
|
self._refreshFromServer();
|
|
|
|
}).done();
|
2015-11-30 15:52:41 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
onLogoutClicked: function(ev) {
|
|
|
|
var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
|
2015-12-23 11:47:56 +00:00
|
|
|
this.logoutModal = Modal.createDialog(
|
|
|
|
LogoutPrompt, {onCancel: this.onLogoutPromptCancel}
|
|
|
|
);
|
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.`
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-11-30 15:52:41 +00:00
|
|
|
onLogoutPromptCancel: function() {
|
|
|
|
this.logoutModal.closeDialog();
|
|
|
|
},
|
|
|
|
|
2015-12-18 00:37:56 +00:00
|
|
|
onEnableNotificationsChange: function(event) {
|
2015-12-23 17:06:30 +00:00
|
|
|
UserSettingsStore.setEnableNotifications(event.target.checked);
|
2015-11-30 15:52:41 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
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
|
|
|
var Loader = sdk.getComponent("elements.Spinner");
|
|
|
|
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
|
|
|
|
var RoomHeader = sdk.getComponent('rooms.RoomHeader');
|
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');
|
|
|
|
var avatarUrl = (
|
|
|
|
this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
|
|
|
|
);
|
2015-12-23 15:38:28 +00:00
|
|
|
|
2015-12-23 11:47:56 +00:00
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings">
|
2015-12-23 16:02:18 +00:00
|
|
|
<RoomHeader simpleHeader="Settings" />
|
2015-12-23 11:47:56 +00:00
|
|
|
|
|
|
|
<h2>Profile</h2>
|
|
|
|
|
|
|
|
<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>
|
2015-12-18 00:37:56 +00:00
|
|
|
|
2015-12-23 11:47:56 +00:00
|
|
|
{this.state.threepids.map(function(val, pidIndex) {
|
|
|
|
var id = "email-" + val.address;
|
|
|
|
return (
|
|
|
|
<div className="mx_UserSettings_profileTableRow" key={pidIndex}>
|
2015-12-18 00:37:56 +00:00
|
|
|
<div className="mx_UserSettings_profileLabelCell">
|
2015-12-23 11:47:56 +00:00
|
|
|
<label htmlFor={id}>Email</label>
|
2015-12-18 00:37:56 +00:00
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_profileInputCell">
|
2015-12-23 11:47:56 +00:00
|
|
|
<input key={val.address} id={id} value={val.address} disabled />
|
2015-12-18 00:37:56 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2015-12-23 11:47:56 +00:00
|
|
|
);
|
|
|
|
})}
|
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">
|
2015-12-23 16:52:59 +00:00
|
|
|
<ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
|
|
|
|
showUploadSection={false} />
|
|
|
|
<div className="mx_UserSettings_avatarPicker_edit">
|
|
|
|
<label htmlFor="avatarInput">
|
|
|
|
<img src="img/upload.svg"
|
|
|
|
alt="Upload avatar" title="Upload avatar"
|
|
|
|
width="19" height="24" />
|
|
|
|
</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
|
|
|
|
2015-12-23 15:38:28 +00:00
|
|
|
<h2>Account</h2>
|
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<ChangePassword
|
|
|
|
className="mx_UserSettings_profileTable"
|
|
|
|
rowClassName="mx_UserSettings_profileTableRow"
|
|
|
|
rowLabelClassName="mx_UserSettings_profileLabelCell"
|
|
|
|
rowInputClassName="mx_UserSettings_profileInputCell"
|
|
|
|
buttonClassName="mx_UserSettings_button"
|
|
|
|
onError={this.onPasswordChangeError}
|
|
|
|
onFinished={this.onPasswordChanged} />
|
|
|
|
</div>
|
|
|
|
|
2015-12-23 11:47:56 +00:00
|
|
|
<div className="mx_UserSettings_logout">
|
|
|
|
<div className="mx_UserSettings_button" onClick={this.onLogoutClicked}>
|
|
|
|
Log out
|
|
|
|
</div>
|
|
|
|
</div>
|
2015-12-18 00:37:56 +00:00
|
|
|
|
2015-12-23 11:47:56 +00:00
|
|
|
<h2>Notifications</h2>
|
|
|
|
|
|
|
|
<div className="mx_UserSettings_section">
|
|
|
|
<div className="mx_UserSettings_notifTable">
|
|
|
|
<div className="mx_UserSettings_notifTableRow">
|
|
|
|
<div className="mx_UserSettings_notifInputCell">
|
|
|
|
<input id="enableNotifications"
|
|
|
|
ref="enableNotifications"
|
|
|
|
type="checkbox"
|
2015-12-23 17:06:30 +00:00
|
|
|
checked={ UserSettingsStore.getEnableNotifications() }
|
2015-12-23 11:47:56 +00:00
|
|
|
onChange={ this.onEnableNotificationsChange } />
|
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_notifLabelCell">
|
|
|
|
<label htmlFor="enableNotifications">
|
|
|
|
Enable desktop notifications
|
|
|
|
</label>
|
2015-12-18 00:37:56 +00:00
|
|
|
</div>
|
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
|
|
|
|
2015-12-23 11:47:56 +00:00
|
|
|
<h2>Advanced</h2>
|
|
|
|
|
|
|
|
<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>
|
2015-12-23 16:02:18 +00:00
|
|
|
<div className="mx_UserSettings_advanced">
|
|
|
|
Version {this.state.clientVersion}
|
2015-12-23 11:47:56 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2015-11-30 15:52:41 +00:00
|
|
|
}
|
|
|
|
});
|