feat: Add ability to map OIDC attributes and ignore username

Closes #554

client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -24,6 +24,7 @@ const AccountPane = React.memo(
     organization,
     language,
     isLocked,
+    isUsernameLocked,
     isAvatarUpdating,
     usernameUpdateForm,
     emailUpdateForm,
@@ -104,7 +105,7 @@ const AccountPane = React.memo(
           value={language || 'auto'}
           onChange={handleLanguageChange}
         />
-        {!isLocked && (
+        {(!isLocked || !isUsernameLocked) && (
           <>
             <Divider horizontal section>
               <Header as="h4">
@@ -113,56 +114,62 @@ const AccountPane = React.memo(
                 })}
               </Header>
             </Divider>
-            <div className={styles.action}>
-              <UserUsernameEditPopup
-                usePasswordConfirmation
-                defaultData={usernameUpdateForm.data}
-                username={username}
-                isSubmitting={usernameUpdateForm.isSubmitting}
-                error={usernameUpdateForm.error}
-                onUpdate={onUsernameUpdate}
-                onMessageDismiss={onUsernameUpdateMessageDismiss}
-              >
-                <Button className={styles.actionButton}>
-                  {t('action.editUsername', {
-                    context: 'title',
-                  })}
-                </Button>
-              </UserUsernameEditPopup>
-            </div>
-            <div className={styles.action}>
-              <UserEmailEditPopup
-                usePasswordConfirmation
-                defaultData={emailUpdateForm.data}
-                email={email}
-                isSubmitting={emailUpdateForm.isSubmitting}
-                error={emailUpdateForm.error}
-                onUpdate={onEmailUpdate}
-                onMessageDismiss={onEmailUpdateMessageDismiss}
-              >
-                <Button className={styles.actionButton}>
-                  {t('action.editEmail', {
-                    context: 'title',
-                  })}
-                </Button>
-              </UserEmailEditPopup>
-            </div>
-            <div className={styles.action}>
-              <UserPasswordEditPopup
-                usePasswordConfirmation
-                defaultData={passwordUpdateForm.data}
-                isSubmitting={passwordUpdateForm.isSubmitting}
-                error={passwordUpdateForm.error}
-                onUpdate={onPasswordUpdate}
-                onMessageDismiss={onPasswordUpdateMessageDismiss}
-              >
-                <Button className={styles.actionButton}>
-                  {t('action.editPassword', {
-                    context: 'title',
-                  })}
-                </Button>
-              </UserPasswordEditPopup>
-            </div>
+            {!isUsernameLocked && (
+              <div className={styles.action}>
+                <UserUsernameEditPopup
+                  defaultData={usernameUpdateForm.data}
+                  username={username}
+                  isSubmitting={usernameUpdateForm.isSubmitting}
+                  error={usernameUpdateForm.error}
+                  usePasswordConfirmation={!isLocked} // FIXME: hack
+                  onUpdate={onUsernameUpdate}
+                  onMessageDismiss={onUsernameUpdateMessageDismiss}
+                >
+                  <Button className={styles.actionButton}>
+                    {t('action.editUsername', {
+                      context: 'title',
+                    })}
+                  </Button>
+                </UserUsernameEditPopup>
+              </div>
+            )}
+            {!isLocked && (
+              <>
+                <div className={styles.action}>
+                  <UserEmailEditPopup
+                    usePasswordConfirmation
+                    defaultData={emailUpdateForm.data}
+                    email={email}
+                    isSubmitting={emailUpdateForm.isSubmitting}
+                    error={emailUpdateForm.error}
+                    onUpdate={onEmailUpdate}
+                    onMessageDismiss={onEmailUpdateMessageDismiss}
+                  >
+                    <Button className={styles.actionButton}>
+                      {t('action.editEmail', {
+                        context: 'title',
+                      })}
+                    </Button>
+                  </UserEmailEditPopup>
+                </div>
+                <div className={styles.action}>
+                  <UserPasswordEditPopup
+                    usePasswordConfirmation
+                    defaultData={passwordUpdateForm.data}
+                    isSubmitting={passwordUpdateForm.isSubmitting}
+                    error={passwordUpdateForm.error}
+                    onUpdate={onPasswordUpdate}
+                    onMessageDismiss={onPasswordUpdateMessageDismiss}
+                  >
+                    <Button className={styles.actionButton}>
+                      {t('action.editPassword', {
+                        context: 'title',
+                      })}
+                    </Button>
+                  </UserPasswordEditPopup>
+                </div>
+              </>
+            )}
           </>
         )}
       </Tab.Pane>
@@ -179,6 +186,7 @@ AccountPane.propTypes = {
   organization: PropTypes.string,
   language: PropTypes.string,
   isLocked: PropTypes.bool.isRequired,
+  isUsernameLocked: PropTypes.bool.isRequired,
   isAvatarUpdating: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   usernameUpdateForm: PropTypes.object.isRequired,

client/src/components/UserSettingsModal/UserSettingsModal.jsx

@@ -18,6 +18,7 @@ const UserSettingsModal = React.memo(
     language,
     subscribeToOwnCards,
     isLocked,
+    isUsernameLocked,
     isAvatarUpdating,
     usernameUpdateForm,
     emailUpdateForm,
@@ -50,6 +51,7 @@ const UserSettingsModal = React.memo(
             organization={organization}
             language={language}
             isLocked={isLocked}
+            isUsernameLocked={isUsernameLocked}
             isAvatarUpdating={isAvatarUpdating}
             usernameUpdateForm={usernameUpdateForm}
             emailUpdateForm={emailUpdateForm}
@@ -108,6 +110,7 @@ UserSettingsModal.propTypes = {
   language: PropTypes.string,
   subscribeToOwnCards: PropTypes.bool.isRequired,
   isLocked: PropTypes.bool.isRequired,
+  isUsernameLocked: PropTypes.bool.isRequired,
   isAvatarUpdating: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   usernameUpdateForm: PropTypes.object.isRequired,

client/src/components/UsersModal/Item/ActionsStep.jsx

@@ -136,13 +136,15 @@ const ActionsStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
+            {!user.isUsernameLocked && (
+              <Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
+                {t('action.editUsername', {
+                  context: 'title',
+                })}
+              </Menu.Item>
+            )}
             {!user.isLocked && (
               <>
-                <Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
-                  {t('action.editUsername', {
-                    context: 'title',
-                  })}
-                </Menu.Item>
                 <Menu.Item className={styles.menuItem} onClick={handleEditEmailClick}>
                   {t('action.editEmail', {
                     context: 'title',

client/src/components/UsersModal/Item/Item.jsx

@@ -19,6 +19,7 @@ const Item = React.memo(
     isAdmin,
     isLocked,
     isRoleLocked,
+    isUsernameLocked,
     isDeletionLocked,
     emailUpdateForm,
     passwordUpdateForm,
@@ -61,6 +62,7 @@ const Item = React.memo(
               phone,
               isAdmin,
               isLocked,
+              isUsernameLocked,
               isDeletionLocked,
               emailUpdateForm,
               passwordUpdateForm,
@@ -95,6 +97,7 @@ Item.propTypes = {
   isAdmin: PropTypes.bool.isRequired,
   isLocked: PropTypes.bool.isRequired,
   isRoleLocked: PropTypes.bool.isRequired,
+  isUsernameLocked: PropTypes.bool.isRequired,
   isDeletionLocked: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   emailUpdateForm: PropTypes.object.isRequired,

client/src/components/UsersModal/UsersModal.jsx

@@ -112,6 +112,7 @@ const UsersModal = React.memo(
                   isAdmin={item.isAdmin}
                   isLocked={item.isLocked}
                   isRoleLocked={item.isRoleLocked}
+                  isUsernameLocked={item.isUsernameLocked}
                   isDeletionLocked={item.isDeletionLocked}
                   emailUpdateForm={item.emailUpdateForm}
                   passwordUpdateForm={item.passwordUpdateForm}

client/src/containers/UserSettingsModalContainer.js

@@ -16,6 +16,7 @@ const mapStateToProps = (state) => {
     language,
     subscribeToOwnCards,
     isLocked,
+    isUsernameLocked,
     isAvatarUpdating,
     emailUpdateForm,
     passwordUpdateForm,
@@ -32,6 +33,7 @@ const mapStateToProps = (state) => {
     language,
     subscribeToOwnCards,
     isLocked,
+    isUsernameLocked,
     isAvatarUpdating,
     emailUpdateForm,
     passwordUpdateForm,

client/src/models/User.js

@@ -46,6 +46,7 @@ export default class extends BaseModel {
     isAdmin: attr(),
     isLocked: attr(),
     isRoleLocked: attr(),
+    isUsernameLocked: attr(),
     isDeletionLocked: attr(),
     deletedAt: attr(),
     createdAt: attr({