Merge pull request #51 from kbss-cvut/fix-buttons

Conditional UI depending on Auth method
kbss-cvut · Dec 15, 2023 · ff3b7cb · ff3b7cb
2 parents 72c674e + 8025ff3
commit ff3b7cb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 37 deletions.
diff --git a/js/components/user/User.js b/js/components/user/User.js
@@ -91,31 +91,21 @@ class User extends React.Component {
 
     _passwordChangeButton() {
         const {user, currentUser, handlers} = this.props;
-        if (isUsingOidcAuth()) {
-            return null;
-        }
         if (user.isNew || (currentUser.username !== user.username && currentUser.role !== ROLE.ADMIN)) {
             return null;
         } else {
             return <Button style={{margin: '0 0.3em 0 0'}} variant='primary' size='sm' ref='submit'
-                           onClick={handlers.onPasswordChange}>
-                {this.i18n('user.password-change')}
-            </Button>;
+                           onClick={handlers.onPasswordChange}>{this.i18n('user.password-change')}</Button>;
         }
     }
 
-    _externalEditUserButton() {
+    _redirectToKeycloakButton() {
         const {user, currentUser, handlers} = this.props;
-        if (!isUsingOidcAuth()) {
-            return null;
-        }
-        if (user.isNew || (currentUser.username !== user.username && currentUser.role !== ROLE.ADMIN)) {
+        if (user.isNew || (currentUser.username !== user.username)) {
             return null;
         } else {
             return <Button style={{margin: '0 0.3em 0 0'}} variant='primary' size='sm' ref='submit'
-                           onClick={handlers.onKeycloakRedirect}>
-                {this.i18n('user.edit')}
-            </Button>;
+                           onClick={handlers.onKeycloakRedirect}>{this.i18n('user.edit')}</Button>;
         }
     }
 
@@ -212,28 +202,30 @@ class User extends React.Component {
                     <div className='row'>
                         <div className='col-12 col-sm-6'>
                             <HorizontalInput type='text' name='firstName' label={`${this.i18n('user.first-name')}*`}
-                                             disabled={isUsingOidcAuth()}
+                                             disabled={currentUser.role !== ROLE.ADMIN && currentUser.username !== user.username
+                                                 || isUsingOidcAuth()}
                                              value={user.firstName} labelWidth={3} inputWidth={8}
                                              onChange={this._onChange}/>
                         </div>
                         <div className='col-12 col-sm-6'>
                             <HorizontalInput type='text' name='lastName' label={`${this.i18n('user.last-name')}*`}
-                                             disabled={isUsingOidcAuth()}
+                                             disabled={currentUser.role !== ROLE.ADMIN && currentUser.username !== user.username
+                                                 || isUsingOidcAuth()}
                                              value={user.lastName} labelWidth={3} inputWidth={8}
                                              onChange={this._onChange}/>
                         </div>
                     </div>
                     <div className='row'>
                         <div className='col-12 col-sm-6'>
                             <HorizontalInput type='text' name='username' label={`${this.i18n('user.username')}*`}
-                                             disabled={!user.isNew || isUsingOidcAuth()}
-                                             labelWidth={3} inputWidth={8}
+                                             disabled={!user.isNew || isUsingOidcAuth()} labelWidth={3} inputWidth={8}
                                              value={user.username} onChange={this._onChange}
                                              iconRight={user.isNew ? generateButton : null}/>
                         </div>
                         <div className='col-12 col-sm-6'>
                             <HorizontalInput type='email' name='emailAddress' label={`${this.i18n('users.email')}*`}
-                                             disabled={isUsingOidcAuth()}
+                                             disabled={currentUser.role !== ROLE.ADMIN && currentUser.username !== user.username
+                                                 || isUsingOidcAuth()}
                                              value={user.emailAddress} labelWidth={3} inputWidth={8}
                                              onChange={this._onChange}/>
                         </div>
@@ -254,8 +246,8 @@ class User extends React.Component {
                         <div className='col-12 col-sm-6'>
                             <HorizontalInput type='select' name='role' label={`${this.i18n('user.role')}*`}
                                              onChange={this._onAdminStatusChange}
-                                             disabled={isUsingOidcAuth() || (currentUser.role !== ROLE.ADMIN)}
-                                             value={isUsingOidcAuth() ? true : user.types && getRole(user)}
+                                             disabled={currentUser.role !== ROLE.ADMIN || isUsingOidcAuth()}
+                                             value={user.types && getRole(user)}
                                              labelWidth={3} inputWidth={8}>
                                 {this._generateRolesOptions()}
                             </HorizontalInput>
@@ -272,20 +264,21 @@ class User extends React.Component {
                     }
                     <div className="buttons-line-height mt-3 text-center">
                         {this._impersonateButton()}
-                        {this._passwordChangeButton()}
-                        {this._externalEditUserButton()}
-                        {!isUsingOidcAuth() && this._saveAndSendEmailButton()}
-                        {(currentUser.role === ROLE.ADMIN || currentUser.username === user.username)  &&
-                            <Button variant='success' size='sm' ref='submit' className="d-inline-flex"
-                                    disabled={!UserValidator.isValid(user) || userSaved.status === ACTION_STATUS.PENDING}
-                                    onClick={() => this._onSave()}
-                                    title={this.i18n('required')}>
-                                {this.i18n('save')}
-                                {!UserValidator.isValid(user) &&
-                                    <HelpIcon className="align-self-center" text={this.i18n('required')}/>}
-                                {userSaved.status === ACTION_STATUS.PENDING &&
-                                    <LoaderSmall/>}
-                            </Button>
+                        {isUsingOidcAuth() ?
+                            this._redirectToKeycloakButton() :
+                            this._passwordChangeButton()}
+                        {this._saveAndSendEmailButton()}
+                        {(currentUser.role === ROLE.ADMIN || currentUser.username === user.username) &&
+                        <Button variant='success' size='sm' ref='submit' className="d-inline-flex"
+                                disabled={!UserValidator.isValid(user) || userSaved.status === ACTION_STATUS.PENDING}
+                                onClick={() => this._onSave()}
+                                title={this.i18n('required')}>
+                            {this.i18n('save')}
+                            {!UserValidator.isValid(user) &&
+                            <HelpIcon className="align-self-center" text={this.i18n('required')}/>}
+                            {userSaved.status === ACTION_STATUS.PENDING &&
+                            <LoaderSmall/>}
+                        </Button>
                         }
                         <Button variant='link' size='sm' onClick={handlers.onCancel}>
                             {this.i18n(this.props.backToInstitution ? 'users.back-to-institution' : 'cancel')}

diff --git a/js/components/user/UserController.js b/js/components/user/UserController.js
@@ -168,6 +168,7 @@ class UserController extends React.Component {
             onCancel: this._onCancel,
             onChange: this._onChange,
             onPasswordChange: this._onPasswordChange,
+            onKeycloakRedirect: this._onRedirect,
             generateUsername: this._generateUsername,
             sendInvitation: this._sendInvitation,
             impersonate: this._impersonate,

diff --git a/js/i18n/cs.js b/js/i18n/cs.js
@@ -115,7 +115,7 @@ export default {
         'user.delete-invitation-option-error': 'Nepodařilo se smazat možnost pozvání uživatele do studie. {error}',
         'user.impersonate': 'Impersonace',
         'user.impersonate-error': 'Impersonace se nepodařila. {error}',
-        'user.edit': 'Upravit profil uživatele',
+        'user.edit': 'Upravit profil',
 
         'institutions.panel-title': 'Instituce',
         'institutions.create-institution': 'Vytvořit instituci',

diff --git a/js/i18n/en.js b/js/i18n/en.js
@@ -115,7 +115,7 @@ export default {
         'user.delete-invitation-option-error': 'Unable to delete option to invite user to study. {error}',
         'user.impersonate': 'Impersonate',
         'user.impersonate-error': 'Unable to impersonate. {error}',
-        'user.edit': 'Edit user profile',
+        'user.edit': 'Edit profile',
 
         'institutions.panel-title': 'Institutions',
         'institutions.create-institution': 'Create institution',