mirror of https://github.com/vector-im/riot-web
Flesh out the user_settings page
Erik Johnston
parent
1b4358624f
commit
bc93aeb50e
|
|
@ -0,0 +1,47 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
var ChangeAvatarController = require("../../../../src/controllers/molecules/ChangeAvatar");
|
||||
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'ChangeAvatar',
|
||||
mixins: [ChangeAvatarController],
|
||||
|
||||
render: function() {
|
||||
switch (this.state.phase) {
|
||||
case this.Phases.Display:
|
||||
case this.Phases.Error:
|
||||
return (
|
||||
<div>
|
||||
<img src={this.state.avatarUrl} />
|
||||
<div>
|
||||
<button>Upload new</button>
|
||||
<button onClick={this.props.onFinished}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case this.Phases.Uploading:
|
||||
return (
|
||||
<Loader />
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
|
||||
var ChangePasswordController = require("../../../../src/controllers/molecules/ChangePassword");
|
||||
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'ChangePassword',
|
||||
mixins: [ChangePasswordController],
|
||||
|
||||
render: function() {
|
||||
switch (this.state.phase) {
|
||||
case this.Phases.Edit:
|
||||
case this.Phases.Error:
|
||||
return (
|
||||
<div>
|
||||
<label>Old password <input type="password" /></label>
|
||||
<label>New password <input type="password" /></label>
|
||||
<label>Confirm password <input type="password" /></label>
|
||||
<div>
|
||||
<button>Change Password</button>
|
||||
<button onClick={this.props.onFinished}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case this.Phases.Uploading:
|
||||
return (
|
||||
<Loader />
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var ComponentBroker = require('../../../../src/ComponentBroker');
|
||||
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
|
||||
|
||||
var UserSettingsController = require("../../../../src/controllers/organisms/UserSettings");
|
||||
|
||||
var EditableText = ComponentBroker.get('atoms/EditableText');
|
||||
var ChangeAvatar = ComponentBroker.get('molecules/ChangeAvatar');
|
||||
var ChangePassword = ComponentBroker.get('molecules/ChangePassword');
|
||||
var Loader = require("react-loader");
|
||||
|
||||
var Modal = require("../../../../src/Modal")
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'UserSettings',
|
||||
mixins: [UserSettingsController],
|
||||
|
||||
editAvatar: function() {
|
||||
var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
|
||||
Modal.createDialog(ChangeAvatar, {initialAvatarUrl: url});
|
||||
},
|
||||
|
||||
addEmail: function() {
|
||||
|
||||
},
|
||||
|
||||
editDisplayName: function() {
|
||||
this.refs.displayname.edit();
|
||||
},
|
||||
|
||||
changePassword: function() {
|
||||
Modal.createDialog(ChangePassword);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
switch (this.state.phase) {
|
||||
case this.Phases.Loading:
|
||||
return <Loader />
|
||||
case this.Phases.Display:
|
||||
return (
|
||||
<div className="mx_UserSettings" style={{maxWidth: "720px", margin: "auto"}}>
|
||||
<div className="mx_UserSettings_User">
|
||||
<h1>User Settings</h1>
|
||||
<hr/>
|
||||
<div className="mx_UserSettings_User_Inner">
|
||||
<div className="mx_UserSettings_Avatar">
|
||||
<div className="mx_UserSettings_Avatar_Text">Profile Photo</div>
|
||||
<div className="mx_UserSettings_Avatar_Edit" onClick={this.editAvatar}>Edit</div>
|
||||
</div>
|
||||
|
||||
<div className="mx_UserSettings_DisplayName">
|
||||
<EditableText ref="displayname" initalValue={this.state.displayName} placeHolder="Click to set display name." onValueChanged={this.changeDisplayname}/>
|
||||
<div className="mx_UserSettings_DisplayName_Edit" onClick={this.editDisplayName}>Edit</div>
|
||||
</div>
|
||||
|
||||
<div className="mx_UserSettings_3pids">
|
||||
{this.state.threepids.map(function(val) {
|
||||
return <div>{val.address}</div>;
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="mx_UserSettings_Add3pid" onClick={this.addEmail}>Add email</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx_UserSettings_Global">
|
||||
<h1>Global Settings</h1>
|
||||
<hr/>
|
||||
<div className="mx_UserSettings_Global_Inner">
|
||||
<div className="mx_UserSettings_ChangePassword" onClick={this.changePassword}>
|
||||
Change Password
|
||||
</div>
|
||||
<div className="mx_UserSettings_ClientVersion">
|
||||
Version {this.state.clientVersion}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -89,6 +89,8 @@ require('../skins/base/views/organisms/Notifier');
|
|||
require('../skins/base/views/organisms/CreateRoom');
|
||||
require('../skins/base/views/molecules/UserSelector');
|
||||
require('../skins/base/views/organisms/UserSettings');
|
||||
require('../skins/base/views/molecules/ChangeAvatar');
|
||||
require('../skins/base/views/molecules/ChangePassword');
|
||||
// new for vector
|
||||
require('../skins/base/views/organisms/LeftPanel');
|
||||
require('../skins/base/views/organisms/RightPanel');
|
||||
|
|
|
|||
|
|
@ -53,9 +53,13 @@ module.exports = {
|
|||
this.setState({
|
||||
value: val,
|
||||
phase: this.Phases.Display,
|
||||
});
|
||||
}, this.onValueChanged);
|
||||
},
|
||||
|
||||
this.onValueChanged();
|
||||
edit: function() {
|
||||
this.setState({
|
||||
phase: this.Phases.Edit,
|
||||
});
|
||||
},
|
||||
|
||||
cancelEdit: function() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var MatrixClientPeg = require("../../MatrixClientPeg");
|
||||
|
||||
var dis = require("../../dispatcher");
|
||||
|
||||
module.exports = {
|
||||
propTypes: {
|
||||
onFinished: React.PropTypes.func,
|
||||
initialAvatarUrl: React.PropTypes.string.isRequired,
|
||||
},
|
||||
|
||||
Phases: {
|
||||
Display: "display",
|
||||
Uploading: "uploading",
|
||||
Error: "error",
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
onFinished: function() {},
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
avatarUrl: this.props.initialAvatarUrl,
|
||||
phase: this.Phases.Display,
|
||||
}
|
||||
},
|
||||
|
||||
uploadNewAvatar: function() {
|
||||
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('react');
|
||||
var MatrixClientPeg = require("../../MatrixClientPeg");
|
||||
|
||||
var dis = require("../../dispatcher");
|
||||
|
||||
module.exports = {
|
||||
propTypes: {
|
||||
onFinished: React.PropTypes.func,
|
||||
},
|
||||
|
||||
Phases: {
|
||||
Edit: "edit",
|
||||
Uploading: "uploading",
|
||||
Error: "error",
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
onFinished: function() {},
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
phase: this.Phases.Edit,
|
||||
}
|
||||
},
|
||||
|
||||
changePassword: function(old_password, new_password) {
|
||||
// DO SOMETHING.
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var MatrixClientPeg = require("../../MatrixClientPeg");
|
||||
var React = require("react");
|
||||
var q = require('q');
|
||||
var dis = require("../../dispatcher");
|
||||
|
||||
var ComponentBroker = require('../../ComponentBroker');
|
||||
|
||||
module.exports = {
|
||||
Phases: {
|
||||
Loading: "loading",
|
||||
Display: "display",
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
displayName: null,
|
||||
avatarUrl: null,
|
||||
threePids: [],
|
||||
clientVersion: "v0.X.Y",
|
||||
phase: this.Phases.Loading,
|
||||
};
|
||||
},
|
||||
|
||||
changeDisplayname: function(new_displayname) {
|
||||
if (this.state.displayName == new_displayname) return;
|
||||
|
||||
var self = this;
|
||||
return MatrixClientPeg.get().setDisplayName(new_displayname).then(
|
||||
function() { self.setState({displayName: new_displayname}); },
|
||||
function(err) { console.err(err); }
|
||||
);
|
||||
},
|
||||
|
||||
changeAvatarUrl: function(new_avatar_url) {
|
||||
if (this.state.avatarUrl == new_avatar_url) return;
|
||||
|
||||
var self = this;
|
||||
return MatrixClientPeg.get().setAvatarUrl(new_avatar_url).then(
|
||||
function() { self.setState({displayName: new_displayname}); },
|
||||
function(err) { console.err(err); }
|
||||
);
|
||||
},
|
||||
|
||||
componentWillMount: function() {
|
||||
var self = this;
|
||||
var cli = MatrixClientPeg.get();
|
||||
|
||||
var profile_d = cli.getProfileInfo(cli.credentials.userId);
|
||||
var threepid_d = cli.getThreePids();
|
||||
|
||||
q.all([profile_d, threepid_d]).then(
|
||||
function(resps) {
|
||||
self.setState({
|
||||
displayName: resps[0].displayname,
|
||||
avatarUrl: resps[0].avatar_url,
|
||||
threepids: resps[1].threepids,
|
||||
phase: self.Phases.Display,
|
||||
});
|
||||
},
|
||||
function(err) { console.err(err); }
|
||||
);
|
||||
},
|
||||
}
|
||||
Loading…
Reference in New Issue