diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/user_settings/user_settings_general.jsx | 417 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings_security.jsx | 251 |
2 files changed, 394 insertions, 274 deletions
diff --git a/webapp/components/user_settings/user_settings_general.jsx b/webapp/components/user_settings/user_settings_general.jsx index 87cce9dc0..eddbc1efe 100644 --- a/webapp/components/user_settings/user_settings_general.jsx +++ b/webapp/components/user_settings/user_settings_general.jsx @@ -14,7 +14,7 @@ import Constants from 'utils/constants.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedDate} from 'react-intl'; +import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage, FormattedDate} from 'react-intl'; const holders = defineMessages({ usernameReserved: { @@ -37,18 +37,6 @@ const holders = defineMessages({ id: 'user.settings.general.checkEmail', defaultMessage: 'Check your email at {email} to verify the address.' }, - newAddress: { - id: 'user.settings.general.newAddress', - defaultMessage: 'New Address: {email}<br />Check your email to verify the above address.' - }, - checkEmailNoAddress: { - id: 'user.settings.general.checkEmailNoAddress', - defaultMessage: 'Check your email to verify your new address' - }, - loginGitlab: { - id: 'user.settings.general.loginGitlab', - defaultMessage: 'Log in done through GitLab' - }, validImage: { id: 'user.settings.general.validImage', defaultMessage: 'Only JPG or PNG images may be used for profile pictures' @@ -73,10 +61,6 @@ const holders = defineMessages({ id: 'user.settings.general.username', defaultMessage: 'Username' }, - email: { - id: 'user.settings.general.email', - defaultMessage: 'Email' - }, profilePicture: { id: 'user.settings.general.profilePicture', defaultMessage: 'Profile Picture' @@ -299,9 +283,224 @@ class UserSettingsGeneralTab extends React.Component { return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname, email: user.email, confirmEmail: '', picture: null, loadingPicture: false, emailChangeInProgress: false}; } + createEmailSection() { + let emailSection; + + if (this.props.activeSection === 'email') { + const emailEnabled = global.window.mm_config.SendEmailNotifications === 'true'; + const emailVerificationEnabled = global.window.mm_config.RequireEmailVerification === 'true'; + const inputs = []; + + let helpText = ( + <FormattedMessage + id='user.settings.general.emailHelp1' + defaultMessage='Email is used for sign-in, notifications, and password reset. Email requires verification if changed.' + /> + ); + + if (!emailEnabled) { + helpText = ( + <div className='setting-list__hint text-danger'> + <FormattedMessage + id='user.settings.general.emailHelp2' + defaultMessage='Email has been disabled by your system administrator. No notification emails will be sent until it is enabled.' + /> + </div> + ); + } else if (!emailVerificationEnabled) { + helpText = ( + <FormattedMessage + id='user.settings.general.emailHelp3' + defaultMessage='Email is used for sign-in, notifications, and password reset.' + /> + ); + } else if (this.state.emailChangeInProgress) { + const newEmail = UserStore.getCurrentUser().email; + if (newEmail) { + helpText = ( + <FormattedMessage + id='user.settings.general.emailHelp4' + defaultMessage='A verification email was sent to {email}.' + values={{ + email: newEmail + }} + /> + ); + } + } + + let submit = null; + + if (this.props.user.auth_service === '') { + inputs.push( + <div key='emailSetting'> + <div className='form-group'> + <label className='col-sm-5 control-label'> + <FormattedMessage + id='user.settings.general.primaryEmail' + defaultMessage='Primary Email' + /> + </label> + <div className='col-sm-7'> + <input + className='form-control' + type='text' + onChange={this.updateEmail} + value={this.state.email} + /> + </div> + </div> + </div> + ); + + inputs.push( + <div key='confirmEmailSetting'> + <div className='form-group'> + <label className='col-sm-5 control-label'> + <FormattedMessage + id='user.settings.general.confirmEmail' + defaultMessage='Confirm Email' + /> + </label> + <div className='col-sm-7'> + <input + className='form-control' + type='text' + onChange={this.updateConfirmEmail} + value={this.state.confirmEmail} + /> + </div> + </div> + {helpText} + </div> + ); + + submit = this.submitEmail; + } else if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { + inputs.push( + <div + key='oauthEmailInfo' + className='form-group' + > + <div className='setting-list__hint'> + <FormattedMessage + id='user.settings.general.emailGitlabCantUpdate' + defaultMessage='Login occurs through GitLab. Email cannot be updated. Email address used for notifications is {email}.' + values={{ + email: this.state.email + }} + /> + </div> + {helpText} + </div> + ); + } else if (this.props.user.auth_service === Constants.LDAP_SERVICE) { + inputs.push( + <div + key='oauthEmailInfo' + className='form-group' + > + <div className='setting-list__hint'> + <FormattedMessage + id='user.settings.general.emailLdapCantUpdate' + defaultMessage='Login occurs through LDAP. Email cannot be updated. Email address used for notifications is {email}.' + values={{ + email: this.state.email + }} + /> + </div> + {helpText} + </div> + ); + } + + emailSection = ( + <SettingItemMax + title={ + <FormattedMessage + id='user.settings.general.email' + defaultMessage='Email' + /> + } + inputs={inputs} + submit={submit} + server_error={this.state.serverError} + client_error={this.state.emailError} + updateSection={(e) => { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + let describe = ''; + if (this.props.user.auth_service === '') { + if (this.state.emailChangeInProgress) { + const newEmail = UserStore.getCurrentUser().email; + if (newEmail) { + describe = ( + <FormattedHTMLMessage + id='user.settings.general.newAddress' + defaultMessage='New Address: {email}<br />Check your email to verify the above address.' + values={{ + email: newEmail + }} + /> + ); + } else { + describe = ( + <FormattedMessage + id='user.settings.general.checkEmailNoAddress' + defaultMessage='Check your email to verify your new address' + /> + ); + } + } else { + describe = UserStore.getCurrentUser().email; + } + } else if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { + describe = ( + <FormattedMessage + id='user.settings.general.loginGitlab' + defaultMessage='Login done through GitLab ({email})' + values={{ + email: this.state.email + }} + /> + ); + } else if (this.props.user.auth_service === Constants.LDAP_SERVICE) { + describe = ( + <FormattedMessage + id='user.settings.general.loginLdap' + defaultMessage='Login done through LDAP ({email})' + values={{ + email: this.state.email + }} + /> + ); + } + + emailSection = ( + <SettingItemMin + title={ + <FormattedMessage + id='user.settings.general.email' + defaultMessage='Email' + /> + } + describe={describe} + updateSection={() => { + this.updateSection('email'); + }} + /> + ); + } + + return emailSection; + } render() { const user = this.props.user; - const {formatMessage, formatHTMLMessage} = this.props.intl; + const {formatMessage} = this.props.intl; let clientError = null; if (this.state.clientError) { @@ -311,10 +510,6 @@ class UserSettingsGeneralTab extends React.Component { if (this.state.serverError) { serverError = this.state.serverError; } - let emailError = null; - if (this.state.emailError) { - emailError = this.state.emailError; - } let nameSection; const inputs = []; @@ -409,20 +604,27 @@ class UserSettingsGeneralTab extends React.Component { /> ); } else { - let fullName = ''; + let describe = ''; if (user.first_name && user.last_name) { - fullName = user.first_name + ' ' + user.last_name; + describe = user.first_name + ' ' + user.last_name; } else if (user.first_name) { - fullName = user.first_name; + describe = user.first_name; } else if (user.last_name) { - fullName = user.last_name; + describe = user.last_name; + } else { + describe = ( + <FormattedMessage + id='user.settings.general.emptyName' + defaultMessage="Click 'Edit' to add your full name" + /> + ); } nameSection = ( <SettingItemMin title={formatMessage(holders.fullName)} - describe={fullName} + describe={describe} updateSection={() => { this.updateSection('name'); }} @@ -483,10 +685,22 @@ class UserSettingsGeneralTab extends React.Component { /> ); } else { + let describe = ''; + if (user.nickname) { + describe = user.nickname; + } else { + describe = ( + <FormattedMessage + id='user.settings.general.emptyNickname' + defaultMessage="Click 'Edit' to add a nickname" + /> + ); + } + nicknameSection = ( <SettingItemMin title={formatMessage(holders.nickname)} - describe={UserStore.getCurrentUser().nickname} + describe={describe} updateSection={() => { this.updateSection('nickname'); }} @@ -559,152 +773,7 @@ class UserSettingsGeneralTab extends React.Component { ); } - let emailSection; - if (this.props.activeSection === 'email') { - const emailEnabled = global.window.mm_config.SendEmailNotifications === 'true'; - const emailVerificationEnabled = global.window.mm_config.RequireEmailVerification === 'true'; - let helpText = ( - <FormattedMessage - id='user.settings.general.emailHelp1' - defaultMessage='Email is used for sign-in, notifications, and password reset. Email requires verification if changed.' - /> - ); - - if (!emailEnabled) { - helpText = ( - <div className='setting-list__hint text-danger'> - <FormattedMessage - id='user.settings.general.emailHelp2' - defaultMessage='Email has been disabled by your system administrator. No notification emails will be sent until it is enabled.' - /> - </div> - ); - } else if (!emailVerificationEnabled) { - helpText = ( - <FormattedMessage - id='user.settings.general.emailHelp3' - defaultMessage='Email is used for sign-in, notifications, and password reset.' - /> - ); - } else if (this.state.emailChangeInProgress) { - const newEmail = UserStore.getCurrentUser().email; - if (newEmail) { - helpText = ( - <FormattedMessage - id='user.settings.general.emailHelp4' - defaultMessage='A verification email was sent to {email}.' - values={{ - email: newEmail - }} - /> - ); - } - } - - let submit = null; - - if (this.props.user.auth_service === '') { - inputs.push( - <div key='emailSetting'> - <div className='form-group'> - <label className='col-sm-5 control-label'> - <FormattedMessage - id='user.settings.general.primaryEmail' - defaultMessage='Primary Email' - /> - </label> - <div className='col-sm-7'> - <input - className='form-control' - type='text' - onChange={this.updateEmail} - value={this.state.email} - /> - </div> - </div> - </div> - ); - - inputs.push( - <div key='confirmEmailSetting'> - <div className='form-group'> - <label className='col-sm-5 control-label'> - <FormattedMessage - id='user.settings.general.confirmEmail' - defaultMessage='Confirm Email' - /> - </label> - <div className='col-sm-7'> - <input - className='form-control' - type='text' - onChange={this.updateConfirmEmail} - value={this.state.confirmEmail} - /> - </div> - </div> - {helpText} - </div> - ); - - submit = this.submitEmail; - } else if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { - inputs.push( - <div - key='oauthEmailInfo' - className='form-group' - > - <div className='setting-list__hint'> - <FormattedMessage - id='user.settings.general.emailCantUpdate' - defaultMessage='Log in occurs through GitLab. Email cannot be updated.' - /> - </div> - {helpText} - </div> - ); - } - - emailSection = ( - <SettingItemMax - title='Email' - inputs={inputs} - submit={submit} - server_error={serverError} - client_error={emailError} - updateSection={(e) => { - this.updateSection(''); - e.preventDefault(); - }} - /> - ); - } else { - let describe = ''; - if (this.props.user.auth_service === '') { - if (this.state.emailChangeInProgress) { - const newEmail = UserStore.getCurrentUser().email; - if (newEmail) { - describe = formatHTMLMessage(holders.newAddress, {email: newEmail}); - } else { - describe = formatMessage(holders.checkEmailNoAddress); - } - } else { - describe = UserStore.getCurrentUser().email; - } - } else if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { - describe = formatMessage(holders.loginGitlab); - } - - emailSection = ( - <SettingItemMin - title={formatMessage(holders.email)} - describe={describe} - updateSection={() => { - this.updateSection('email'); - }} - /> - ); - } + const emailSection = this.createEmailSection(); let pictureSection; if (this.props.activeSection === 'picture') { diff --git a/webapp/components/user_settings/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security.jsx index b34fa8582..f24beb6b3 100644 --- a/webapp/components/user_settings/user_settings_security.jsx +++ b/webapp/components/user_settings/user_settings_security.jsx @@ -30,14 +30,6 @@ const holders = defineMessages({ id: 'user.settings.security.passwordMatchError', defaultMessage: 'The new passwords you entered do not match' }, - password: { - id: 'user.settings.security.password', - defaultMessage: 'Password' - }, - lastUpdated: { - id: 'user.settings.security.lastUpdated', - defaultMessage: 'Last updated {date} at {time}' - }, method: { id: 'user.settings.security.method', defaultMessage: 'Sign-in Method' @@ -131,74 +123,106 @@ class SecurityTab extends React.Component { } createPasswordSection() { let updateSectionStatus; - const {formatMessage} = this.props.intl; - if (this.props.activeSection === 'password' && this.props.user.auth_service === '') { + if (this.props.activeSection === 'password') { const inputs = []; + let submit; - inputs.push( - <div - key='currentPasswordUpdateForm' - className='form-group' - > - <label className='col-sm-5 control-label'> - <FormattedMessage - id='user.settings.security.currentPassword' - defaultMessage='Current Password' - /> - </label> - <div className='col-sm-7'> - <input - className='form-control' - type='password' - onChange={this.updateCurrentPassword} - value={this.state.currentPassword} - /> + if (this.props.user.auth_service === '') { + submit = this.submitPassword; + + inputs.push( + <div + key='currentPasswordUpdateForm' + className='form-group' + > + <label className='col-sm-5 control-label'> + <FormattedMessage + id='user.settings.security.currentPassword' + defaultMessage='Current Password' + /> + </label> + <div className='col-sm-7'> + <input + className='form-control' + type='password' + onChange={this.updateCurrentPassword} + value={this.state.currentPassword} + /> + </div> </div> - </div> - ); - inputs.push( - <div - key='newPasswordUpdateForm' - className='form-group' - > - <label className='col-sm-5 control-label'> - <FormattedMessage - id='user.settings.security.newPassword' - defaultMessage='New Password' - /> - </label> - <div className='col-sm-7'> - <input - className='form-control' - type='password' - onChange={this.updateNewPassword} - value={this.state.newPassword} - /> + ); + inputs.push( + <div + key='newPasswordUpdateForm' + className='form-group' + > + <label className='col-sm-5 control-label'> + <FormattedMessage + id='user.settings.security.newPassword' + defaultMessage='New Password' + /> + </label> + <div className='col-sm-7'> + <input + className='form-control' + type='password' + onChange={this.updateNewPassword} + value={this.state.newPassword} + /> + </div> </div> - </div> - ); - inputs.push( - <div - key='retypeNewPasswordUpdateForm' - className='form-group' - > - <label className='col-sm-5 control-label'> - <FormattedMessage - id='user.settings.security.retypePassword' - defaultMessage='Retype New Password' - /> - </label> - <div className='col-sm-7'> - <input - className='form-control' - type='password' - onChange={this.updateConfirmPassword} - value={this.state.confirmPassword} - /> + ); + inputs.push( + <div + key='retypeNewPasswordUpdateForm' + className='form-group' + > + <label className='col-sm-5 control-label'> + <FormattedMessage + id='user.settings.security.retypePassword' + defaultMessage='Retype New Password' + /> + </label> + <div className='col-sm-7'> + <input + className='form-control' + type='password' + onChange={this.updateConfirmPassword} + value={this.state.confirmPassword} + /> + </div> </div> - </div> - ); + ); + } else if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { + inputs.push( + <div + key='oauthEmailInfo' + className='form-group' + > + <div className='setting-list__hint'> + <FormattedMessage + id='user.settings.security.passwordGitlabCantUpdate' + defaultMessage='Login occurs through GitLab. Password cannot be updated.' + /> + </div> + </div> + ); + } else if (this.props.user.auth_service === Constants.LDAP_SERVICE) { + inputs.push( + <div + key='oauthEmailInfo' + className='form-group' + > + <div className='setting-list__hint'> + <FormattedMessage + id='user.settings.security.passwordLdapCantUpdate' + defaultMessage='Login occurs through LDAP. Password cannot be updated.' + /> + </div> + </div> + ); + } updateSectionStatus = function resetSection(e) { this.props.updateSection(''); @@ -209,9 +233,14 @@ class SecurityTab extends React.Component { return ( <SettingItemMax - title={formatMessage(holders.password)} + title={ + <FormattedMessage + id='user.settings.security.password' + defaultMessage='Password' + /> + } inputs={inputs} - submit={this.submitPassword} + submit={submit} server_error={this.state.serverError} client_error={this.state.passwordError} updateSection={updateSectionStatus} @@ -219,34 +248,51 @@ class SecurityTab extends React.Component { ); } - var describe; - var d = new Date(this.props.user.last_password_update); + let describe; - const hours12 = !Utils.isMilitaryTime(); - describe = ( - <FormattedMessage - id='user.settings.security.lastUpdated' - defaultMessage='Last updated {date} at {time}' - values={{ - date: ( - <FormattedDate - value={d} - day='2-digit' - month='short' - year='numeric' - /> - ), - time: ( - <FormattedTime - value={d} - hour12={hours12} - hour='2-digit' - minute='2-digit' - /> - ) - }} - /> - ); + if (this.props.user.auth_service === '') { + const d = new Date(this.props.user.last_password_update); + const hours12 = !Utils.isMilitaryTime(); + + describe = ( + <FormattedMessage + id='user.settings.security.lastUpdated' + defaultMessage='Last updated {date} at {time}' + values={{ + date: ( + <FormattedDate + value={d} + day='2-digit' + month='short' + year='numeric' + /> + ), + time: ( + <FormattedTime + value={d} + hour12={hours12} + hour='2-digit' + minute='2-digit' + /> + ) + }} + /> + ); + } else if (this.props.user.auth_service === Constants.GITLAB_SERVICE) { + describe = ( + <FormattedMessage + id='user.settings.security.loginGitlab' + defaultMessage='Login done through Gitlab' + /> + ); + } else if (this.props.user.auth_service === Constants.LDAP_SERVICE) { + describe = ( + <FormattedMessage + id='user.settings.security.loginLdap' + defaultMessage='Login done through LDAP' + /> + ); + } updateSectionStatus = function updateSection() { this.props.updateSection('password'); @@ -254,7 +300,12 @@ class SecurityTab extends React.Component { return ( <SettingItemMin - title={formatMessage(holders.password)} + title={ + <FormattedMessage + id='user.settings.security.password' + defaultMessage='Password' + /> + } describe={describe} updateSection={updateSectionStatus} /> |