summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/setting_picture.jsx30
-rw-r--r--web/react/components/user_settings.jsx107
2 files changed, 81 insertions, 56 deletions
diff --git a/web/react/components/setting_picture.jsx b/web/react/components/setting_picture.jsx
index fa4c8bb62..e97b67706 100644
--- a/web/react/components/setting_picture.jsx
+++ b/web/react/components/setting_picture.jsx
@@ -20,8 +20,14 @@ module.exports = React.createClass({
}
},
render: function() {
- var client_error = this.props.client_error ? <div className='form-group has-error'><label className='control-label'>{ this.props.client_error }</label></div> : null;
- var server_error = this.props.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.props.server_error }</label></div> : null;
+ var clientError = null;
+ if (this.props.client_error) {
+ clientError = <div className='form-group has-error'><label className='control-label'>{this.props.client_error}</label></div>;
+ }
+ var serverError = null;
+ if (this.props.server_error) {
+ serverError = <div className='form-group has-error'><label className='control-label'>{this.props.server_error}</label></div>;
+ }
var img = null;
if (this.props.picture) {
@@ -30,8 +36,20 @@ module.exports = React.createClass({
img = (<img ref='image' className='profile-img' src={this.props.src}/>);
}
- var self = this;
+ var confirmButton;
+ if (this.props.loadingPicture) {
+ confirmButton = <img className='spinner' src='/static/images/load.gif'/>;
+ } else {
+ var confirmButtonClass = 'btn btn-sm';
+ if (this.props.submitActive) {
+ confirmButtonClass += ' btn-primary';
+ } else {
+ confirmButtonClass += ' btn-inactive disabled';
+ }
+ confirmButton = <a className={confirmButtonClass} onClick={this.props.submit}>Save</a>;
+ }
+ var self = this;
return (
<ul className='section-max'>
<li className='col-xs-12 section-title'>{this.props.title}</li>
@@ -41,10 +59,10 @@ module.exports = React.createClass({
{img}
</li>
<li className='setting-list-item'>
- {server_error}
- {client_error}
+ {serverError}
+ {clientError}
<span className='btn btn-sm btn-primary btn-file sel-btn'>Select<input ref='input' accept='.jpg,.png,.bmp' type='file' onChange={this.props.pictureChange}/></span>
- <a className={this.props.submitActive ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-inactive disabled'} onClick={this.props.submit}>Save</a>
+ {confirmButton}
<a className='btn btn-sm theme' href='#' onClick={self.props.updateSection}>Cancel</a>
</li>
</ul>
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index c574d2365..e224f2a87 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -5,8 +5,6 @@ var UserStore = require('../stores/user_store.jsx');
var SettingItemMin = require('./setting_item_min.jsx');
var SettingItemMax = require('./setting_item_max.jsx');
var SettingPicture = require('./setting_picture.jsx');
-var AccessHistoryModal = require('./access_history_modal.jsx');
-var ActivityLogModal = require('./activity_log_modal.jsx');
var client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var utils = require('../utils/utils.jsx');
@@ -642,17 +640,17 @@ var GeneralTab = React.createClass({
var user = this.props.user;
var username = this.state.username.trim();
- var username_error = utils.isValidUsername(username);
- if (username_error === 'Cannot use a reserved word as a username.') {
- this.setState({client_error: 'This username is reserved, please choose a new one.' });
+ var usernameError = utils.isValidUsername(username);
+ if (usernameError === 'Cannot use a reserved word as a username.') {
+ this.setState({clientError: 'This username is reserved, please choose a new one.'});
return;
- } else if (username_error) {
- this.setState({client_error: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'." });
+ } else if (usernameError) {
+ this.setState({clientError: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'."});
return;
}
if (user.username === username) {
- this.setState({client_error: 'You must submit a new username'});
+ this.setState({clientError: 'You must submit a new username'});
return;
}
@@ -667,7 +665,7 @@ var GeneralTab = React.createClass({
var nickname = this.state.nickname.trim();
if (user.nickname === nickname) {
- this.setState({client_error: 'You must submit a new nickname'})
+ this.setState({clientError: 'You must submit a new nickname'});
return;
}
@@ -679,11 +677,11 @@ var GeneralTab = React.createClass({
e.preventDefault();
var user = UserStore.getCurrentUser();
- var firstName = this.state.first_name.trim();
- var lastName = this.state.last_name.trim();
+ var firstName = this.state.firstName.trim();
+ var lastName = this.state.lastName.trim();
if (user.first_name === firstName && user.last_name === lastName) {
- this.setState({client_error: 'You must submit a new first or last name'})
+ this.setState({clientError: 'You must submit a new first or last name'});
return;
}
@@ -703,7 +701,7 @@ var GeneralTab = React.createClass({
}
if (email === '' || !utils.isEmail(email)) {
- this.setState({ email_error: 'Please enter a valid email address' });
+ this.setState({emailError: 'Please enter a valid email address'});
return;
}
@@ -718,11 +716,11 @@ var GeneralTab = React.createClass({
AsyncClient.getMe();
}.bind(this),
function(err) {
- state = this.getInitialState();
+ var state = this.getInitialState();
if (err.message) {
- state.server_error = err.message;
+ state.serverError = err.message;
} else {
- state.server_error = err;
+ state.serverError = err;
}
this.setState(state);
}.bind(this)
@@ -742,12 +740,13 @@ var GeneralTab = React.createClass({
var picture = this.state.picture;
if (picture.type !== 'image/jpeg' && picture.type !== 'image/png') {
- this.setState({client_error: 'Only JPG or PNG images may be used for profile pictures'});
+ this.setState({clientError: 'Only JPG or PNG images may be used for profile pictures'});
return;
}
var formData = new FormData();
formData.append('image', picture, picture.name);
+ this.setState({loadingPicture: true});
client.uploadProfileImage(formData,
function() {
@@ -756,8 +755,8 @@ var GeneralTab = React.createClass({
window.location.reload();
}.bind(this),
function(err) {
- state = this.getInitialState();
- state.server_error = err;
+ var state = this.getInitialState();
+ state.serverError = err;
this.setState(state);
}.bind(this)
);
@@ -766,10 +765,10 @@ var GeneralTab = React.createClass({
this.setState({username: e.target.value});
},
updateFirstName: function(e) {
- this.setState({first_name: e.target.value});
+ this.setState({firstName: e.target.value});
},
updateLastName: function(e) {
- this.setState({last_name: e.target.value});
+ this.setState({lastName: e.target.value});
},
updateNickname: function(e) {
this.setState({nickname: e.target.value});
@@ -779,17 +778,16 @@ var GeneralTab = React.createClass({
},
updatePicture: function(e) {
if (e.target.files && e.target.files[0]) {
- this.setState({ picture: e.target.files[0] });
+ this.setState({picture: e.target.files[0]});
this.submitActive = true;
- this.setState({client_error: null});
-
+ this.setState({clientError: null});
} else {
this.setState({picture: null});
}
},
updateSection: function(section) {
- this.setState({client_error:''});
+ this.setState({clientError: ''});
this.submitActive = false;
this.props.updateSection(section);
},
@@ -798,7 +796,7 @@ var GeneralTab = React.createClass({
this.value = '';
});
- this.setState(assign({}, this.getInitialState(), {client_error: null, server_error: null, email_error: null}));
+ this.setState(assign({}, this.getInitialState(), {clientError: null, serverError: null, emailError: null}));
this.props.updateSection('');
},
componentDidMount: function() {
@@ -810,15 +808,24 @@ var GeneralTab = React.createClass({
getInitialState: function() {
var user = this.props.user;
- return { username: user.username, first_name: user.first_name, last_name: user.last_name, nickname: user.nickname,
- email: user.email, picture: null };
+ return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname,
+ email: user.email, picture: null, loadingPicture: false};
},
render: function() {
var user = this.props.user;
- var client_error = this.state.client_error ? this.state.client_error : null;
- var server_error = this.state.server_error ? this.state.server_error : null;
- var email_error = this.state.email_error ? this.state.email_error : null;
+ var clientError = null;
+ if (this.state.clientError) {
+ clientError = this.state.clientError;
+ }
+ var serverError = null;
+ if (this.state.serverError) {
+ serverError = this.state.serverError;
+ }
+ var emailError = null;
+ if (this.state.emailError) {
+ emailError = this.state.emailError;
+ }
var nameSection;
var self = this;
@@ -829,7 +836,7 @@ var GeneralTab = React.createClass({
<div className='form-group'>
<label className='col-sm-5 control-label'>First Name</label>
<div className='col-sm-7'>
- <input className='form-control' type='text' onChange={this.updateFirstName} value={this.state.first_name}/>
+ <input className='form-control' type='text' onChange={this.updateFirstName} value={this.state.firstName}/>
</div>
</div>
);
@@ -838,7 +845,7 @@ var GeneralTab = React.createClass({
<div className='form-group'>
<label className='col-sm-5 control-label'>Last Name</label>
<div className='col-sm-7'>
- <input className='form-control' type='text' onChange={this.updateLastName} value={this.state.last_name}/>
+ <input className='form-control' type='text' onChange={this.updateLastName} value={this.state.lastName}/>
</div>
</div>
);
@@ -848,8 +855,8 @@ var GeneralTab = React.createClass({
title='Full Name'
inputs={inputs}
submit={this.submitName}
- server_error={server_error}
- client_error={client_error}
+ server_error={serverError}
+ client_error={clientError}
updateSection={function(e) {
self.updateSection('');
e.preventDefault();
@@ -857,20 +864,20 @@ var GeneralTab = React.createClass({
/>
);
} else {
- var full_name = '';
+ var fullName = '';
if (user.first_name && user.last_name) {
- full_name = user.first_name + ' ' + user.last_name;
+ fullName = user.first_name + ' ' + user.last_name;
} else if (user.first_name) {
- full_name = user.first_name;
+ fullName = user.first_name;
} else if (user.last_name) {
- full_name = user.last_name;
+ fullName = user.last_name;
}
nameSection = (
<SettingItemMin
title='Full Name'
- describe={full_name}
+ describe={fullName}
updateSection={function() {
self.updateSection('name');
}}
@@ -880,7 +887,6 @@ var GeneralTab = React.createClass({
var nicknameSection;
if (this.props.activeSection === 'nickname') {
-
inputs.push(
<div className='form-group'>
<label className='col-sm-5 control-label'>{utils.isMobile() ? '' : 'Nickname'}</label>
@@ -895,8 +901,8 @@ var GeneralTab = React.createClass({
title='Nickname'
inputs={inputs}
submit={this.submitNickname}
- server_error={server_error}
- client_error={client_error}
+ server_error={serverError}
+ client_error={clientError}
updateSection={function(e) {
self.updateSection('');
e.preventDefault();
@@ -919,7 +925,7 @@ var GeneralTab = React.createClass({
if (this.props.activeSection === 'username') {
inputs.push(
<div className='form-group'>
- <label className='col-sm-5 control-label'>{utils.isMobile() ? '': 'Username'}</label>
+ <label className='col-sm-5 control-label'>{utils.isMobile() ? '' : 'Username'}</label>
<div className='col-sm-7'>
<input className='form-control' type='text' onChange={this.updateUsername} value={this.state.username}/>
</div>
@@ -931,8 +937,8 @@ var GeneralTab = React.createClass({
title='Username'
inputs={inputs}
submit={this.submitUsername}
- server_error={server_error}
- client_error={client_error}
+ server_error={serverError}
+ client_error={clientError}
updateSection={function(e) {
self.updateSection('');
e.preventDefault();
@@ -966,8 +972,8 @@ var GeneralTab = React.createClass({
title='Email'
inputs={inputs}
submit={this.submitEmail}
- server_error={server_error}
- client_error={email_error}
+ server_error={serverError}
+ client_error={emailError}
updateSection={function(e) {
self.updateSection('');
e.preventDefault();
@@ -993,8 +999,8 @@ var GeneralTab = React.createClass({
title='Profile Picture'
submit={this.submitPicture}
src={'/api/v1/users/' + user.id + '/image?time=' + user.last_picture_update}
- server_error={server_error}
- client_error={client_error}
+ server_error={serverError}
+ client_error={clientError}
updateSection={function(e) {
self.updateSection('');
e.preventDefault();
@@ -1002,6 +1008,7 @@ var GeneralTab = React.createClass({
picture={this.state.picture}
pictureChange={this.updatePicture}
submitActive={this.submitActive}
+ loadingPicture={this.state.loadingPicture}
/>
);
} else {