diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/signup_team_complete.jsx | 46 | ||||
-rw-r--r-- | web/react/components/user_settings.jsx | 203 |
2 files changed, 134 insertions, 115 deletions
diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index 83daa3b1f..447a405bd 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -496,60 +496,58 @@ SendInivtesPage = React.createClass({ }); UsernamePage = React.createClass({ - submitBack: function (e) { + submitBack: function(e) { e.preventDefault(); - this.props.state.wizard = "send_invites"; + this.props.state.wizard = 'send_invites'; this.props.updateParent(this.props.state); }, - submitNext: function (e) { + submitNext: function(e) { e.preventDefault(); var name = this.refs.name.getDOMNode().value.trim(); var username_error = utils.isValidUsername(name); - if (username_error === "Cannot use a reserved word as a username.") { - this.setState({name_error: "This username is reserved, please choose a new one." }); + if (username_error === 'Cannot use a reserved word as a username.') { + this.setState({name_error: 'This username is reserved, please choose a new one.'}); return; } else if (username_error) { - this.setState({name_error: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'." }); + this.setState({name_error: "Username must begin with a letter, and contain 3 to 15 characters in total, which may be numbers, lowercase letters, or any of the symbols '.', '-', or '_'"}); return; } - - this.props.state.wizard = "password"; + this.props.state.wizard = 'password'; this.props.state.user.username = name; this.props.updateParent(this.props.state); }, getInitialState: function() { - return { }; + return {}; }, render: function() { - client.track('signup', 'signup_team_06_username'); - var name_error = this.state.name_error ? <label className="control-label">{ this.state.name_error }</label> : null; + var name_error = this.state.name_error ? <label className='control-label'>{this.state.name_error}</label> : null; return ( <div> <form> - <img className="signup-team-logo" src="/static/images/logo.png" /> - <h2 className="margin--less">Your username</h2> - <h5 className="color--light">{"Select a memorable username that makes it easy for " + strings.Team + "mates to identify you:"}</h5> - <div className="inner__content margin--extra"> - <div className={ name_error ? "form-group has-error" : "form-group" }> - <div className="row"> - <div className="col-sm-11"> + <img className='signup-team-logo' src='/static/images/logo.png' /> + <h2 className='margin--less'>Your username</h2> + <h5 className='color--light'>{'Select a memorable username that makes it easy for ' + strings.Team + 'mates to identify you:'}</h5> + <div className='inner__content margin--extra'> + <div className={name_error ? 'form-group has-error' : 'form-group'}> + <div className='row'> + <div className='col-sm-11'> <h5><strong>Choose your username</strong></h5> - <input autoFocus={true} type="text" ref="name" className="form-control" placeholder="" defaultValue={this.props.state.user.username} maxLength="128" /> - <div className="color--light form__hint">Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'</div> + <input autoFocus={true} type='text' ref='name' className='form-control' placeholder='' defaultValue={this.props.state.user.username} maxLength='128' /> + <div className='color--light form__hint'>Usernames must begin with a letter and contain 3 to 15 characters made up of lowercase letters, numbers, and the symbols '.', '-' and '_'</div> </div> </div> - { name_error } + {name_error} </div> </div> - <button type="submit" className="btn btn-primary margin--extra" onClick={this.submitNext}>Next<i className="glyphicon glyphicon-chevron-right"></i></button> - <div className="margin--extra"> - <a href="#" onClick={this.submitBack}>Back to previous step</a> + <button type='submit' className='btn btn-primary margin--extra' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button> + <div className='margin--extra'> + <a href='#' onClick={this.submitBack}>Back to previous step</a> </div> </form> </div> diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index 902989b7b..95d1178d1 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -638,8 +638,8 @@ var GeneralTab = React.createClass({ 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." }); + if (username_error === 'Cannot use a reserved word as a username.') { + this.setState({client_error: '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 '_'." }); @@ -647,7 +647,7 @@ var GeneralTab = React.createClass({ } if (user.username === username) { - this.setState({client_error: "You must submit a new username"}); + this.setState({client_error: 'You must submit a new username'}); return; } @@ -662,7 +662,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({client_error: 'You must submit a new nickname'}) return; } @@ -678,7 +678,7 @@ var GeneralTab = React.createClass({ var lastName = this.state.last_name.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({client_error: 'You must submit a new first or last name'}) return; } @@ -698,7 +698,7 @@ var GeneralTab = React.createClass({ } if (email === '' || !utils.isEmail(email)) { - this.setState({ email_error: "Please enter a valid email address" }); + this.setState({ email_error: 'Please enter a valid email address' }); return; } @@ -708,16 +708,16 @@ var GeneralTab = React.createClass({ }, submitUser: function(user) { client.updateUser(user, - function(data) { - this.updateSection(""); + function() { + this.updateSection(''); AsyncClient.getMe(); }.bind(this), function(err) { state = this.getInitialState(); - if(err.message) { + if (err.message) { state.server_error = err.message; } else { - state.server_error = err + state.server_error = err; } this.setState(state); }.bind(this) @@ -726,22 +726,26 @@ var GeneralTab = React.createClass({ submitPicture: function(e) { e.preventDefault(); - if (!this.state.picture) return; + if (!this.state.picture) { + return; + } - if(!this.submitActive) return; + if (!this.submitActive) { + return; + } 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"}); + if (picture.type !== 'image/jpeg' && picture.type !== 'image/png') { + this.setState({client_error: 'Only JPG or PNG images may be used for profile pictures'}); return; } - formData = new FormData(); + var formData = new FormData(); formData.append('image', picture, picture.name); client.uploadProfileImage(formData, - function(data) { + function() { this.submitActive = false; AsyncClient.getMe(); window.location.reload(); @@ -754,39 +758,39 @@ var GeneralTab = React.createClass({ ); }, updateUsername: function(e) { - this.setState({ username: e.target.value }); + this.setState({username: e.target.value}); }, updateFirstName: function(e) { - this.setState({ first_name: e.target.value }); + this.setState({first_name: e.target.value}); }, updateLastName: function(e) { - this.setState({ last_name: e.target.value}); + this.setState({last_name: e.target.value}); }, updateNickname: function(e) { this.setState({nickname: e.target.value}); }, updateEmail: function(e) { - this.setState({ email: e.target.value}); + this.setState({email: e.target.value}); }, updatePicture: function(e) { if (e.target.files && e.target.files[0]) { this.setState({ picture: e.target.files[0] }); this.submitActive = true; - this.setState({client_error:null}) + this.setState({client_error: null}); } else { - this.setState({ picture: null }); + this.setState({picture: null}); } }, updateSection: function(section) { - this.setState({client_error:""}) - this.submitActive = false + this.setState({client_error:''}); + this.submitActive = false; this.props.updateSection(section); }, handleClose: function() { - $(this.getDOMNode()).find(".form-control").each(function() { - this.value = ""; + $(this.getDOMNode()).find('.form-control').each(function() { + this.value = ''; }); this.setState(assign({}, this.getInitialState(), {client_error: null, server_error: null, email_error: null})); @@ -812,43 +816,45 @@ var GeneralTab = React.createClass({ var nameSection; var self = this; + var inputs = []; if (this.props.activeSection === 'name') { - var inputs = []; - inputs.push( - <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}/> + <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}/> </div> </div> ); inputs.push( - <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}/> + <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}/> </div> </div> ); nameSection = ( <SettingItemMax - title="Full Name" + title='Full Name' inputs={inputs} submit={this.submitName} server_error={server_error} client_error={client_error} - updateSection={function(e){self.updateSection("");e.preventDefault();}} + updateSection={function(e) { + self.updateSection(''); + e.preventDefault(); + }} /> ); } else { - var full_name = ""; + var full_name = ''; if (user.first_name && user.last_name) { - full_name = user.first_name + " " + user.last_name; + full_name = user.first_name + ' ' + user.last_name; } else if (user.first_name) { full_name = user.first_name; } else if (user.last_name) { @@ -857,107 +863,119 @@ var GeneralTab = React.createClass({ nameSection = ( <SettingItemMin - title="Full Name" + title='Full Name' describe={full_name} - updateSection={function(){self.updateSection("name");}} + updateSection={function() { + self.updateSection('name'); + }} /> ); } var nicknameSection; if (this.props.activeSection === 'nickname') { - var inputs = []; inputs.push( - <div className="form-group"> - <label className="col-sm-5 control-label">{utils.isMobile() ? "": "Nickname"}</label> - <div className="col-sm-7"> - <input className="form-control" type="text" onChange={this.updateNickname} value={this.state.nickname}/> + <div className='form-group'> + <label className='col-sm-5 control-label'>{utils.isMobile() ? '' : 'Nickname'}</label> + <div className='col-sm-7'> + <input className='form-control' type='text' onChange={this.updateNickname} value={this.state.nickname}/> </div> </div> ); nicknameSection = ( <SettingItemMax - title="Nickname" + title='Nickname' inputs={inputs} submit={this.submitNickname} server_error={server_error} client_error={client_error} - updateSection={function(e){self.updateSection("");e.preventDefault();}} + updateSection={function(e) { + self.updateSection(''); + e.preventDefault(); + }} /> ); } else { nicknameSection = ( <SettingItemMin - title="Nickname" + title='Nickname' describe={UserStore.getCurrentUser().nickname} - updateSection={function(){self.updateSection("nickname");}} + updateSection={function() { + self.updateSection('nickname'); + }} /> ); } var usernameSection; if (this.props.activeSection === 'username') { - var inputs = []; - inputs.push( - <div className="form-group"> - <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 className='form-group'> + <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> </div> ); usernameSection = ( <SettingItemMax - title="Username" + title='Username' inputs={inputs} submit={this.submitUsername} server_error={server_error} client_error={client_error} - updateSection={function(e){self.updateSection("");e.preventDefault();}} + updateSection={function(e) { + self.updateSection(''); + e.preventDefault(); + }} /> ); } else { usernameSection = ( <SettingItemMin - title="Username" + title='Username' describe={UserStore.getCurrentUser().username} - updateSection={function(){self.updateSection("username");}} + updateSection={function() { + self.updateSection('username'); + }} /> ); } var emailSection; if (this.props.activeSection === 'email') { - var inputs = []; - inputs.push( - <div className="form-group"> - <label className="col-sm-5 control-label">Primary Email</label> - <div className="col-sm-7"> - <input className="form-control" type="text" onChange={this.updateEmail} value={this.state.email}/> + <div className='form-group'> + <label className='col-sm-5 control-label'>Primary Email</label> + <div className='col-sm-7'> + <input className='form-control' type='text' onChange={this.updateEmail} value={this.state.email}/> </div> </div> ); emailSection = ( <SettingItemMax - title="Email" + title='Email' inputs={inputs} submit={this.submitEmail} server_error={server_error} client_error={email_error} - updateSection={function(e){self.updateSection("");e.preventDefault();}} + updateSection={function(e) { + self.updateSection(''); + e.preventDefault(); + }} /> ); } else { emailSection = ( <SettingItemMin - title="Email" + title='Email' describe={UserStore.getCurrentUser().email} - updateSection={function(){self.updateSection("email");}} + updateSection={function() { + self.updateSection('email'); + }} /> ); } @@ -966,57 +984,60 @@ var GeneralTab = React.createClass({ if (this.props.activeSection === 'picture') { pictureSection = ( <SettingPicture - title="Profile Picture" + title='Profile Picture' submit={this.submitPicture} - src={"/api/v1/users/" + user.id + "/image?time=" + user.last_picture_update} + src={'/api/v1/users/' + user.id + '/image?time=' + user.last_picture_update} server_error={server_error} client_error={client_error} - updateSection={function(e){self.updateSection("");e.preventDefault();}} + updateSection={function(e) { + self.updateSection(''); + e.preventDefault(); + }} picture={this.state.picture} pictureChange={this.updatePicture} submitActive={this.submitActive} /> ); - } else { - var minMessage = "Click Edit to upload an image."; + var minMessage = 'Click \'Edit\' to upload an image.'; if (user.last_picture_update) { - minMessage = "Image last updated " + utils.displayDate(user.last_picture_update) + minMessage = 'Image last updated ' + utils.displayDate(user.last_picture_update); } pictureSection = ( <SettingItemMin - title="Profile Picture" + title='Profile Picture' describe={minMessage} - updateSection={function(){self.updateSection("picture");}} + updateSection={function() { + self.updateSection('picture'); + }} /> ); } return ( <div> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" ref="title"><i className="modal-back"></i>General Settings</h4> + <div className='modal-header'> + <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> + <h4 className='modal-title' ref='title'><i className='modal-back'></i>General Settings</h4> </div> - <div className="user-settings"> - <h3 className="tab-header">General Settings</h3> - <div className="divider-dark first"/> + <div className='user-settings'> + <h3 className='tab-header'>General Settings</h3> + <div className='divider-dark first'/> {nameSection} - <div className="divider-light"/> + <div className='divider-light'/> {usernameSection} - <div className="divider-light"/> + <div className='divider-light'/> {nicknameSection} - <div className="divider-light"/> + <div className='divider-light'/> {emailSection} - <div className="divider-light"/> + <div className='divider-light'/> {pictureSection} - <div className="divider-dark"/> + <div className='divider-dark'/> </div> </div> ); } }); - var AppearanceTab = React.createClass({ submitTheme: function(e) { e.preventDefault(); |