Refactor and test oidc callback component

assets/js/pages/Login/LoginSSO.jsx

@@ -2,14 +2,22 @@ import React from 'react';
 
 import Button from '@common/Button';
 
-export default function LoginSSO({ singleSignOnUrl }) {
+export default function LoginSSO({ singleSignOnUrl, error }) {
   return (
-    <Button
-      onClick={() => {
-        window.location.href = singleSignOnUrl;
-      }}
-    >
-      Login with Single Sign-on
-    </Button>
+    <>
+      {error && (
+        <span className="block text-sm font-medium mb-5">
+          An error occurred while trying to Login. Please retry login again.
+          Should the error persist, contact the administrator.
+        </span>
+      )}
+      <Button
+        onClick={() => {
+          window.location.href = singleSignOnUrl;
+        }}
+      >
+        Login with Single Sign-on
+      </Button>
+    </>
   );
 }

assets/js/pages/OidcCallback/OidcCallback.jsx

@@ -1,25 +1,25 @@
 import React, { useEffect, useState } from 'react';
+import TrentoLogo from '@static/trento-dark.svg';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { performOidcEnrollment } from '@state/user';
+import { getSingleSignOnLoginUrl } from '@lib/auth/config';
+import LoginSSO from '@pages/Login/LoginSSO';
+import { getUserProfile } from '@state/selectors/user';
 
 function OidCallback() {
   const { search } = useLocation();
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { authError, authInProgress, loggedIn } = useSelector(
-    (state) => state.user
-  );
+  const [error, setError] = useState(null);
+  const { authError, loggedIn } = useSelector(getUserProfile);
 
   useEffect(() => {
     const params = new URLSearchParams(search);
-
-    // handle different result
     const code = params.get('code');
     const state = params.get('state');
 
-    console.log('code', params.get('code'));
-    console.log('state', params.get('state'));
+    setError(!code || !state);
 
     dispatch(performOidcEnrollment({ state, code }));
   }, [search]);
@@ -30,7 +30,42 @@ function OidCallback() {
     }
   }, [loggedIn]);
 
-  return <div>oidc callback</div>;
+  if (authError || error) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+        <div className="sm:mx-auto sm:w-full sm:max-w-md">
+          <img
+            className="mx-auto h-12 w-auto rounded"
+            src={TrentoLogo}
+            alt="Trento"
+          />
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Login Failed
+          </h2>
+        </div>
+        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+            <LoginSSO singleSignOnUrl={getSingleSignOnLoginUrl()} error />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <img
+          className="mx-auto h-12 w-auto rounded"
+          src={TrentoLogo}
+          alt="Trento"
+        />
+        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          Loading...
+        </h2>
+      </div>
+    </div>
+  );
 }
 
 export default OidCallback;

assets/js/pages/OidcCallback/OidcCallback.test.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import 'intersection-observer';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { withState, renderWithRouterMatch } from '@lib/test-utils';
+import OidcCallback from './OidcCallback';
+
+describe('OidcCallback component', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('should display loading state when authentication is happening', async () => {
+    const [StatefulOidCallback, store] = withState(<OidcCallback />, {
+      user: {},
+    });
+
+    renderWithRouterMatch(StatefulOidCallback, {
+      path: 'auth/oidc_callback',
+      route: `/auth/oidc_callback?code=code&state=state`,
+    });
+
+    expect(screen.getByText('Loading...')).toBeVisible();
+
+    expect(store.getActions()).toContainEqual({
+      type: 'PERFORM_OIDC_ENROLLMENT',
+      payload: { code: 'code', state: 'state' },
+    });
+  });
+
+  it('should display an error message if some search param is missing', async () => {
+    const user = userEvent.setup();
+
+    const [StatefulOidCallback] = withState(<OidcCallback />, {
+      user: {},
+    });
+
+    renderWithRouterMatch(StatefulOidCallback, {
+      path: 'auth/oidc_callback',
+      route: `/auth/oidc_callback?code=code`,
+    });
+
+    expect(screen.getByText('Login Failed')).toBeVisible();
+
+    expect(
+      screen.getByText('An error occurred while trying to Login', {
+        exact: false,
+      })
+    ).toBeVisible();
+
+    const loginButton = screen.getByRole('button', {
+      name: 'Login with Single Sign-on',
+    });
+    user.click(loginButton);
+
+    expect(window.location.pathname).toBe('/auth/oidc_callback');
+  });
+
+  it('should display an error message if authentication fails', async () => {
+    const [StatefulOidCallback] = withState(<OidcCallback />, {
+      user: {
+        authError: true,
+      },
+    });
+
+    renderWithRouterMatch(StatefulOidCallback, {
+      path: 'auth/oidc_callback',
+      route: `/auth/oidc_callback?code=code&state=state`,
+    });
+
+    expect(screen.getByText('Login Failed')).toBeVisible();
+
+    expect(
+      screen.getByText('An error occurred while trying to Login', {
+        exact: false,
+      })
+    ).toBeVisible();
+  });
+
+  it('should navigate to home after user is logged in', () => {
+    const [StatefulOidCallback] = withState(<OidcCallback />, {
+      user: {
+        loggedIn: true,
+      },
+    });
+
+    renderWithRouterMatch(StatefulOidCallback, {
+      path: '',
+      route: '/',
+    });
+
+    expect(window.location.pathname).toBe('/');
+  });
+});