Merge pull request #2577 from mattermost/plt-2349

PLT-2349 Update email/password settings text depending on sign-in method

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}
             />