fix: OIDC finalization and refactoring

client/src/components/Header/Header.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import { Button, Icon, Menu } from 'semantic-ui-react';
-import { useAuth } from 'react-oidc-context';
 import { usePopup } from '../../lib/popup';
 
 import Paths from '../../constants/Paths';
@@ -30,7 +29,6 @@ const Header = React.memo(
     onUserSettingsClick,
     onLogout,
   }) => {
-    const auth = useAuth();
     const handleProjectSettingsClick = useCallback(() => {
       if (canEditProject) {
         onProjectSettingsClick();
@@ -40,11 +38,6 @@ const Header = React.memo(
     const NotificationsPopup = usePopup(NotificationsStep, POPUP_PROPS);
     const UserPopup = usePopup(UserStep, POPUP_PROPS);
 
-    const onFullLogout = () => {
-      auth.signoutSilent();
-      onLogout();
-    };
-
     return (
       <div className={styles.wrapper}>
         {!project && (
@@ -95,7 +88,7 @@ const Header = React.memo(
             <UserPopup
               isLogouting={isLogouting}
               onSettingsClick={onUserSettingsClick}
-              onLogout={onFullLogout}
+              onLogout={onLogout}
             >
               <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
                 {user.name}

client/src/components/Login/Login.jsx

@@ -1,10 +1,9 @@
 import isEmail from 'validator/lib/isEmail';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useAuth } from 'react-oidc-context';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Form, Grid, Header, Message } from 'semantic-ui-react';
+import { Button, Form, Grid, Header, Message } from 'semantic-ui-react';
 import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
 import { Input } from '../../lib/custom-ui';
 
@@ -29,6 +28,21 @@ const createMessage = (error) => {
         type: 'error',
         content: 'common.invalidPassword',
       };
+    case 'Use single sign-on':
+      return {
+        type: 'error',
+        content: 'common.useSingleSignOn',
+      };
+    case 'Email already in use':
+      return {
+        type: 'error',
+        content: 'common.emailAlreadyInUse',
+      };
+    case 'Username already in use':
+      return {
+        type: 'error',
+        content: 'common.usernameAlreadyInUse',
+      };
     case 'Failed to fetch':
       return {
         type: 'warning',
@@ -48,8 +62,16 @@ const createMessage = (error) => {
 };
 
 const Login = React.memo(
-  ({ defaultData, isSubmitting, error, onAuthenticate, onMessageDismiss }) => {
-    const auth = useAuth();
+  ({
+    defaultData,
+    isSubmitting,
+    isSubmittingWithOidc,
+    error,
+    withOidc,
+    onAuthenticate,
+    onAuthenticateWithOidc,
+    onMessageDismiss,
+  }) => {
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
 
@@ -170,12 +192,19 @@ const Login = React.memo(
                         content={t('action.logIn')}
                         floated="right"
                         loading={isSubmitting}
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || isSubmittingWithOidc}
                       />
                     </Form>
-                    <Form.Button type="button" onClick={() => auth.signinRedirect()}>
-                      Log in with SSO
-                    </Form.Button>
+                    {withOidc && (
+                      <Button
+                        type="button"
+                        loading={isSubmittingWithOidc}
+                        disabled={isSubmitting || isSubmittingWithOidc}
+                        onClick={onAuthenticateWithOidc}
+                      >
+                        {t('action.logInWithSSO')}
+                      </Button>
+                    )}
                   </div>
                 </div>
               </Grid.Column>
@@ -206,10 +235,15 @@ const Login = React.memo(
 );
 
 Login.propTypes = {
-  defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  /* eslint-disable react/forbid-prop-types */
+  defaultData: PropTypes.object.isRequired,
+  /* eslint-enable react/forbid-prop-types */
   isSubmitting: PropTypes.bool.isRequired,
+  isSubmittingWithOidc: PropTypes.bool.isRequired,
   error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  withOidc: PropTypes.bool.isRequired,
   onAuthenticate: PropTypes.func.isRequired,
+  onAuthenticateWithOidc: PropTypes.func.isRequired,
   onMessageDismiss: PropTypes.func.isRequired,
 };
 

client/src/components/LoginWrapper.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Loader } from 'semantic-ui-react';
+
+import LoginContainer from '../containers/LoginContainer';
+
+const LoginWrapper = React.memo(({ isInitializing }) => {
+  if (isInitializing) {
+    return <Loader active size="massive" />;
+  }
+
+  return <LoginContainer />;
+});
+
+LoginWrapper.propTypes = {
+  isInitializing: PropTypes.bool.isRequired,
+};
+
+export default LoginWrapper;

client/src/components/OIDC/OidcLogin.jsx

@@ -1,19 +0,0 @@
-import { useAuth } from 'react-oidc-context';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-let isLoggingIn = true;
-const OidcLogin = React.memo(({ onAuthenticate }) => {
-  const auth = useAuth();
-  if (isLoggingIn && auth.user) {
-    isLoggingIn = false;
-    const { user } = auth;
-    onAuthenticate(user);
-  }
-});
-
-OidcLogin.propTypes = {
-  onAuthenticate: PropTypes.func.isRequired,
-};
-
-export default OidcLogin;

client/src/components/OIDC/index.js

@@ -1,3 +0,0 @@
-import OidcLogin from './OidcLogin';
-
-export default OidcLogin;

client/src/components/Root.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AuthProvider } from 'react-oidc-context';
 import { Provider } from 'react-redux';
 import { Route, Routes } from 'react-router-dom';
 import { ReduxRouter } from '../lib/redux-router';
 
 import Paths from '../constants/Paths';
-import LoginContainer from '../containers/LoginContainer';
+import LoginWrapperContainer from '../containers/LoginWrapperContainer';
 import CoreContainer from '../containers/CoreContainer';
 import NotFound from './NotFound';
 
@@ -15,40 +14,29 @@ import 'photoswipe/dist/photoswipe.css';
 import 'easymde/dist/easymde.min.css';
 import '../lib/custom-ui/styles.css';
 import '../styles.module.scss';
-import OidcLoginContainer from '../containers/OidcLoginContainer';
 
-function Root({ store, history, config }) {
+function Root({ store, history }) {
   return (
-    <AuthProvider
-      authority={config.authority}
-      client_id={config.clientId}
-      redirect_uri={config.redirectUri}
-      scope={config.scopes}
-      onSigninCallback={() => {
-        window.history.replaceState({}, document.title, window.location.pathname);
-      }}
-    >
-      <Provider store={store}>
-        <ReduxRouter history={history}>
-          <Routes>
-            <Route path={Paths.LOGIN} element={<LoginContainer />} />
-            <Route path={Paths.OIDC_LOGIN} element={<OidcLoginContainer />} />
-            <Route path={Paths.ROOT} element={<CoreContainer />} />
-            <Route path={Paths.PROJECTS} element={<CoreContainer />} />
-            <Route path={Paths.BOARDS} element={<CoreContainer />} />
-            <Route path={Paths.CARDS} element={<CoreContainer />} />
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </ReduxRouter>
-      </Provider>
-    </AuthProvider>
+    <Provider store={store}>
+      <ReduxRouter history={history}>
+        <Routes>
+          <Route path={Paths.LOGIN} element={<LoginWrapperContainer />} />
+          <Route path={Paths.OIDC_CALLBACK} element={<LoginWrapperContainer />} />
+          <Route path={Paths.ROOT} element={<CoreContainer />} />
+          <Route path={Paths.PROJECTS} element={<CoreContainer />} />
+          <Route path={Paths.BOARDS} element={<CoreContainer />} />
+          <Route path={Paths.CARDS} element={<CoreContainer />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </ReduxRouter>
+    </Provider>
   );
 }
+
 Root.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   store: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
-  config: PropTypes.object.isRequired,
   /* eslint-enable react/forbid-prop-types */
 };
 

client/src/components/UserSettingsModal/UserSettingsModal.jsx

@@ -16,8 +16,8 @@ const UserSettingsModal = React.memo(
     phone,
     organization,
     language,
-    isLocked,
     subscribeToOwnCards,
+    isLocked,
     isAvatarUpdating,
     usernameUpdateForm,
     emailUpdateForm,
@@ -106,8 +106,8 @@ UserSettingsModal.propTypes = {
   phone: PropTypes.string,
   organization: PropTypes.string,
   language: PropTypes.string,
-  isLocked: PropTypes.bool.isRequired,
   subscribeToOwnCards: PropTypes.bool.isRequired,
+  isLocked: PropTypes.bool.isRequired,
   isAvatarUpdating: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   usernameUpdateForm: PropTypes.object.isRequired,

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

@@ -153,13 +153,15 @@ const ActionsStep = React.memo(
                     context: 'title',
                   })}
                 </Menu.Item>
-                <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
-                  {t('action.deleteUser', {
-                    context: 'title',
-                  })}
-                </Menu.Item>
               </>
             )}
+            {!user.isLockedAdmin && (
+              <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+                {t('action.deleteUser', {
+                  context: 'title',
+                })}
+              </Menu.Item>
+            )}
           </Menu>
         </Popup.Content>
       </>

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

@@ -18,6 +18,7 @@ const Item = React.memo(
     phone,
     isAdmin,
     isLocked,
+    isLockedAdmin,
     emailUpdateForm,
     passwordUpdateForm,
     usernameUpdateForm,
@@ -47,7 +48,7 @@ const Item = React.memo(
         <Table.Cell>{username || '-'}</Table.Cell>
         <Table.Cell>{email}</Table.Cell>
         <Table.Cell>
-          <Radio toggle checked={isAdmin} disabled={isLocked} onChange={handleIsAdminChange} />
+          <Radio toggle checked={isAdmin} disabled={isLockedAdmin} onChange={handleIsAdminChange} />
         </Table.Cell>
         <Table.Cell textAlign="right">
           <ActionsPopup
@@ -59,6 +60,7 @@ const Item = React.memo(
               phone,
               isAdmin,
               isLocked,
+              isLockedAdmin,
               emailUpdateForm,
               passwordUpdateForm,
               usernameUpdateForm,
@@ -91,6 +93,7 @@ Item.propTypes = {
   phone: PropTypes.string,
   isAdmin: PropTypes.bool.isRequired,
   isLocked: PropTypes.bool.isRequired,
+  isLockedAdmin: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   emailUpdateForm: PropTypes.object.isRequired,
   passwordUpdateForm: PropTypes.object.isRequired,

client/src/components/UsersModal/UsersModal.jsx

@@ -111,6 +111,7 @@ const UsersModal = React.memo(
                   phone={item.phone}
                   isAdmin={item.isAdmin}
                   isLocked={item.isLocked}
+                  isLockedAdmin={item.isLockedAdmin}
                   emailUpdateForm={item.emailUpdateForm}
                   passwordUpdateForm={item.passwordUpdateForm}
                   usernameUpdateForm={item.usernameUpdateForm}