fix issue #4249

Author: yoution

src/config/constants.js

@@ -8,6 +8,7 @@ export const LOAD_USER_SUCCESS     = 'LOAD_USER_SUCCESS'
 export const LOAD_USER_FAILURE     = 'LOAD_USER_FAILURE'
 
 export const LOAD_USER_CREDENTIAL     = 'LOAD_USER_CREDENTIAL'
+export const LOAD_USER_CREDENTIAL_PENDING     = 'LOAD_USER_CREDENTIAL_PENDING'
 export const LOAD_USER_CREDENTIAL_SUCCESS     = 'LOAD_USER_CREDENTIAL_SUCCESS'
 export const LOAD_USER_CREDENTIAL_FAILURE     = 'LOAD_USER_CREDENTIAL_FAILURE'
 

src/reducers/loadUser.js

@@ -2,7 +2,9 @@ import _ from 'lodash'
 import {
   LOAD_USER_SUCCESS,
   LOAD_USER_FAILURE,
+  LOAD_USER_CREDENTIAL_PENDING,
   LOAD_USER_CREDENTIAL_SUCCESS,
+  LOAD_USER_CREDENTIAL_FAILURE,
   LOAD_ORG_CONFIG_SUCCESS,
   LOAD_ORG_CONFIG_FAILURE,
   SAVE_PROFILE_PHOTO_SUCCESS,
@@ -19,10 +21,19 @@ export const initialState = {
 export default function(state = initialState, action) {
   switch (action.type) {
 
+  case LOAD_USER_CREDENTIAL_PENDING:
+    return Object.assign({}, state, {
+      isLoadingCredential: true,
+    })
   case LOAD_USER_CREDENTIAL_SUCCESS:
     return Object.assign({}, state, {
+      isLoadingCredential: false,
       credential: action.payload.credential
     })
+  case LOAD_USER_CREDENTIAL_FAILURE:
+    return Object.assign({}, state, {
+      isLoadingCredential: false,
+    })
   case LOAD_USER_SUCCESS:
     return Object.assign({}, state, {
       isLoading : false,

src/routes/settings/routes/system/components/ChangeEmailForm.jsx

@@ -98,7 +98,7 @@ class ChangeEmailForm extends React.Component {
   }
 
   render() {
-    const {disabled, settings, checkingEmail, checkedEmail, isEmailAvailable, isEmailChanging, emailSubmitted} = this.props
+    const {usingSsoService, settings, checkingEmail, checkedEmail, isEmailAvailable, isEmailChanging, emailSubmitted} = this.props
     const { currentEmail, isValid, isFocused } = this.state
     const currentEmailAvailable = checkedEmail === currentEmail && isEmailAvailable
     const isCheckingCurrentEmail = checkingEmail === currentEmail
@@ -140,7 +140,7 @@ class ChangeEmailForm extends React.Component {
               validationErrors={{
                 isEmail: 'Provide a correct email'
               }}
-              disabled={disabled ||isEmailChanging || !hasPermission(PERMISSIONS.UPDATE_USER_EMAIL)}
+              disabled={usingSsoService || isEmailChanging || !hasPermission(PERMISSIONS.UPDATE_USER_EMAIL)}
               ref={(ref) => this.emailRef = ref}
             />
             { isFocused && isCheckingCurrentEmail && (
@@ -174,7 +174,7 @@ class ChangeEmailForm extends React.Component {
 
 ChangeEmailForm.propTypes = {
   email: PropTypes.string,
-  disabled: PropTypes.bool,
+  usingSsoService: PropTypes.bool,
   onSubmit: PropTypes.func.isRequired,
   checkingEmail: PropTypes.string,
   checkedEmail: PropTypes.string,

src/routes/settings/routes/system/components/SystemSettingsForm.jsx

@@ -40,28 +40,33 @@ class SystemSettingsForm extends Component {
             checkEmailAvailability={checkEmailAvailability}
             onSubmit={(email) => changeEmail(email)}
             {...systemSettings}
-            disabled={usingSsoService? true: systemSettings.disabled === true}
+            usingSsoService={usingSsoService}
           />
 
-          {usingSsoService ? <div styleName="error-message">
-            Since you joined Topcoder using your &lt;SSO Service&gt; account,
-            any email updates will need to be handled by logging in to
-            your &lt;SSO Service&gt; account.
-          </div>: null}
+          {usingSsoService && (
+            <div styleName="error-message">
+              Since you joined Topcoder using your &lt;SSO Service&gt; account,
+              any email updates will need to be handled by logging in to
+              your &lt;SSO Service&gt; account.
+            </div>
+          )}
         </div>
 
-        {!usingSsoService ?
+        {!usingSsoService&& (
           <div styleName="section-heading">
           Retrieve or change your password
-          </div>: null}
+          </div>
+        )}
 
-        {!usingSsoService ? <div className="form">
-          <ChangePasswordForm
-            onSubmit={(data) => changePassword(data)}
-            onReset={() => resetPassword()}
-            {...systemSettings}
-          />
-        </div>: null}
+        {!usingSsoService && (
+          <div className="form">
+            <ChangePasswordForm
+              onSubmit={(data) => changePassword(data)}
+              onReset={() => resetPassword()}
+              {...systemSettings}
+            />
+          </div>
+        )}
       </div>
     )
   }

src/routes/settings/routes/system/containers/SystemSettingsContainer.jsx

@@ -12,7 +12,7 @@ import { requiresAuthentication } from '../../../../../components/AuthenticatedC
 import SystemSettingsForm from '../components/SystemSettingsForm'
 import './SystemSettingsContainer.scss'
 
-const enhance = spinnerWhileLoading(props => !props.systemSettings.isLoading)
+const enhance = spinnerWhileLoading(props => !props.systemSettings.isLoading && !props.isLoadingCredential)
 const FormEnhanced = enhance(SystemSettingsForm)
 
 class SystemSettingsContainer extends Component {
@@ -49,6 +49,7 @@ const SystemSettingsContainerWithAuth = requiresAuthentication(SystemSettingsCon
 const mapStateToProps = ({ settings, loadUser }) => ({
   systemSettings: settings.system,
   user: loadUser.user,
+  isLoadingCredential: loadUser.isLoadingCredential,
   usingSsoService: _.get(loadUser, 'credential.hasPassword', false) === false,
 })