element-web/src/components/structures/UserSettings.js

293 lines
11 KiB
JavaScript
Raw Normal View History

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');
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
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,
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);
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) {
self.setState({
2015-12-23 16:52:59 +00:00
avatarUrl: resps[0].avatar_url,
threepids: resps[1].threepids,
phase: "UserSettings.DISPLAY",
2015-12-18 00:37: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",
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") {
this.forceUpdate();
2015-12-18 00:37:56 +00:00
}
2015-11-30 15:52:41 +00:00
},
onAvatarPickerClick: function(ev) {
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;
}
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-11-30 15:52:41 +00:00
},
onLogoutClicked: function(ev) {
var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
this.logoutModal = Modal.createDialog(
LogoutPrompt, {onCancel: this.onLogoutPromptCancel}
);
2015-11-30 15:52:41 +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({
action: "start_upgrade_registration"
});
},
2015-11-30 15:52:41 +00:00
onLogoutPromptCancel: function() {
this.logoutModal.closeDialog();
},
2015-12-18 00:37:56 +00:00
onEnableNotificationsChange: function(event) {
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) {
case "UserSettings.LOADING":
var Loader = sdk.getComponent("elements.Spinner");
return (
<Loader />
);
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');
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
);
2016-01-07 17:23:32 +00:00
var accountJsx;
if (MatrixClientPeg.get().isGuest()) {
accountJsx = (
<div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}>
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"
buttonClassName="mx_UserSettings_button"
onError={this.onPasswordChangeError}
onFinished={this.onPasswordChanged} />
);
}
return (
<div className="mx_UserSettings">
<RoomHeader simpleHeader="Settings" />
<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">
<ChangeDisplayName />
</div>
</div>
2015-12-18 00:37: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">
<label htmlFor={id}>Email</label>
2015-12-18 00:37:56 +00:00
</div>
<div className="mx_UserSettings_profileInputCell">
<input key={val.address} id={id} value={val.address} disabled />
2015-12-18 00:37:56 +00:00
</div>
</div>
);
})}
</div>
2015-11-30 15:52:41 +00:00
<div className="mx_UserSettings_avatarPicker" onClick={ this.onAvatarPickerClick } >
2015-12-23 16:52:59 +00:00
<ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/>
2015-12-23 16:52:59 +00:00
<div className="mx_UserSettings_avatarPicker_edit">
<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"
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>
</div>
</div>
2015-12-18 00:37:56 +00:00
<h2>Account</h2>
<div className="mx_UserSettings_section">
<div className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
Log out
</div>
{accountJsx}
</div>
2015-12-18 00:37: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"
checked={ UserSettingsStore.getEnableNotifications() }
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>
</div>
</div>
2015-12-18 00:37:56 +00:00
<h2>Advanced</h2>
<div className="mx_UserSettings_section">
<div className="mx_UserSettings_advanced">
Logged in as {this._me}
2015-11-30 15:52:41 +00:00
</div>
<div className="mx_UserSettings_advanced">
Version {this.state.clientVersion}
</div>
</div>
</div>
);
2015-11-30 15:52:41 +00:00
}
});