Merge pull request openshift#15523 from Leo6Leo/leo/ocpbugs/62083/4-19/auth-error-page

[release-4.19] OCPBUGS-62083: `/auth/error?error=missing_state&error_type=auth` is showing blank page

Author: Leo6Leo

frontend/public/components/app.jsx

@@ -296,7 +296,7 @@ const AppRouter = () => {
     <Router history={history} basename={window.SERVER_FLAGS.basePath}>
       <CompatRouter>
         <Routes>
-          <Route path={LOGIN_ERROR_PATH} component={AuthenticationErrorPage} />
+          <Route path={LOGIN_ERROR_PATH} element={<AuthenticationErrorPage />} />
           {standaloneRouteExtensions.map((e) => (
             <Route
               key={e.uid}

frontend/public/components/error.tsx

@@ -11,7 +11,9 @@ import {
   StackItem,
   EmptyStateHeader,
   EmptyStateActions,
+  EmptyStateFooter,
   Icon,
+  Button,
   Title,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
@@ -99,20 +101,28 @@ const LoginErrorMessage: React.FC = () => {
     case 'login_state_error':
       return t('public~There was an error generating login state.');
     case 'cookie_error':
-      return t('public~There was an error setting login state cookie');
-    case 'missing_code':
-      return t('public~Auth code is missing in query param.');
-    case 'missing_state':
-      return t('public~There was an error parsing your state cookie');
-    case 'invalid_code':
-      return t('public~There was an error logging you in. Please log out and try again.');
-    case 'invalid_state':
-      return t('public~There was an error verifying your session. Please log out and try again.');
+      return t('public~There was an error setting login state cookie.');
     case 'logout_error':
       return t('public~There was an error logging you out. Please try again.');
+    case 'auth':
+      // When the error type is set as auth
+      switch (error) {
+        case 'missing_state':
+          return t('public~There was an error parsing your state cookie.');
+        case 'invalid_state':
+          return t(
+            'public~There was an error verifying your session. Please log out and try again.',
+          );
+        case 'missing_code':
+          return t('public~Auth code is missing in query param.');
+        case 'invalid_code':
+          return t('public~There was an error logging you in. Please log out and try again.');
+        default:
+          return t('public~There was an authentication error. Please log out and try again.');
+      }
     default:
       return (
-        <Trans>
+        <Trans ns="public">
           There was an authentication error with the system:
           <CodeBlock>
             <CodeBlockCode>{error}</CodeBlockCode>
@@ -125,6 +135,7 @@ const LoginErrorMessage: React.FC = () => {
 export const AuthenticationErrorPage: React.FC = () => {
   const { t } = useTranslation();
   const title = t('public~Authentication error');
+
   return (
     <>
       <Helmet>
@@ -143,9 +154,13 @@ export const AuthenticationErrorPage: React.FC = () => {
             </StackItem>
           </Stack>
         </EmptyStateBody>
-        <EmptyStateActions>
-          <a href="/logout">{t('public~Try again')}</a>
-        </EmptyStateActions>
+        <EmptyStateFooter>
+          <EmptyStateActions>
+            <Button component="a" variant="primary" href="/">
+              {t('public~Try again')}
+            </Button>
+          </EmptyStateActions>
+        </EmptyStateFooter>
       </EmptyState>
     </>
   );

frontend/public/locales/en/public.json

@@ -514,12 +514,13 @@
   "There was a problem processing the request. Please try again.": "There was a problem processing the request. Please try again.",
   "There was an error generating OAuth client from OIDC client.": "There was an error generating OAuth client from OIDC client.",
   "There was an error generating login state.": "There was an error generating login state.",
-  "There was an error setting login state cookie": "There was an error setting login state cookie",
+  "There was an error setting login state cookie.": "There was an error setting login state cookie.",
+  "There was an error logging you out. Please try again.": "There was an error logging you out. Please try again.",
+  "There was an error parsing your state cookie.": "There was an error parsing your state cookie.",
+  "There was an error verifying your session. Please log out and try again.": "There was an error verifying your session. Please log out and try again.",
   "Auth code is missing in query param.": "Auth code is missing in query param.",
-  "There was an error parsing your state cookie": "There was an error parsing your state cookie",
   "There was an error logging you in. Please log out and try again.": "There was an error logging you in. Please log out and try again.",
-  "There was an error verifying your session. Please log out and try again.": "There was an error verifying your session. Please log out and try again.",
-  "There was an error logging you out. Please try again.": "There was an error logging you out. Please try again.",
+  "There was an authentication error. Please log out and try again.": "There was an authentication error. Please log out and try again.",
   "There was an authentication error with the system:<1><0>{error}</0></1>": "There was an authentication error with the system:<1><0>{error}</0></1>",
   "Authentication error": "Authentication error",
   "Try again": "Try again",