added description to denied consent and show on ErrorPage

fixes: #28328
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/account-ui/src/index.ts

@@ -1,5 +1,4 @@
 export { PersonalInfo } from "./personal-info/PersonalInfo";
-export { ErrorPage } from "./root/ErrorPage";
 export { Header } from "./root/Header";
 export { PageNav } from "./root/PageNav";
 export { DeviceActivity } from "./account-security/DeviceActivity";

js/apps/account-ui/src/root/ErrorPage.tsx

@@ -1,65 +0,0 @@
-import {
-  Button,
-  Modal,
-  ModalVariant,
-  Page,
-  Text,
-  TextContent,
-  TextVariants,
-} from "@patternfly/react-core";
-import { useTranslation } from "react-i18next";
-import { isRouteErrorResponse, useRouteError } from "react-router-dom";
-
-type ErrorPageProps = {
-  error?: unknown;
-};
-
-export const ErrorPage = (props: ErrorPageProps) => {
-  const { t } = useTranslation();
-  const error = useRouteError() ?? props.error;
-  const errorMessage = getErrorMessage(error);
-
-  function onRetry() {
-    location.href = location.origin + location.pathname;
-  }
-
-  return (
-    <Page>
-      <Modal
-        variant={ModalVariant.small}
-        title={t("somethingWentWrong")}
-        titleIconVariant="danger"
-        showClose={false}
-        isOpen
-        actions={[
-          <Button key="tryAgain" variant="primary" onClick={onRetry}>
-            {t("tryAgain")}
-          </Button>,
-        ]}
-      >
-        <TextContent>
-          <Text>{t("somethingWentWrongDescription")}</Text>
-          {errorMessage && (
-            <Text component={TextVariants.small}>{errorMessage}</Text>
-          )}
-        </TextContent>
-      </Modal>
-    </Page>
-  );
-};
-
-function getErrorMessage(error: unknown): string | null {
-  if (typeof error === "string") {
-    return error;
-  }
-
-  if (isRouteErrorResponse(error)) {
-    return error.statusText;
-  }
-
-  if (error instanceof Error) {
-    return error.message;
-  }
-
-  return null;
-}

js/apps/account-ui/src/routes.tsx

@@ -1,10 +1,9 @@
 import { lazy } from "react";
 import type { IndexRouteObject, RouteObject } from "react-router-dom";
-
 import { environment } from "./environment";
 import { Organizations } from "./organizations/Organizations";
-import { ErrorPage } from "./root/ErrorPage";
 import { Root } from "./root/Root";
+import { ErrorPage } from "@keycloak/keycloak-ui-shared";
 
 const DeviceActivity = lazy(() => import("./account-security/DeviceActivity"));
 const LinkedAccounts = lazy(() => import("./account-security/LinkedAccounts"));

js/libs/ui-shared/src/context/ErrorPage.tsx

@@ -8,6 +8,7 @@ import {
   TextVariants,
 } from "@patternfly/react-core";
 import { useTranslation } from "react-i18next";
+import { getNetworkErrorDescription } from "../utils/errors";
 
 type ErrorPageProps = {
   error?: unknown;
@@ -16,7 +17,10 @@ type ErrorPageProps = {
 export const ErrorPage = (props: ErrorPageProps) => {
   const { t } = useTranslation();
   const error = props.error;
-  const errorMessage = getErrorMessage(error);
+  const errorMessage =
+    getErrorMessage(error) ||
+    getNetworkErrorDescription(error)?.replace(/\+/g, " ");
+  console.error(error);
 
   function onRetry() {
     location.href = location.origin + location.pathname;

services/src/main/java/org/keycloak/protocol/oidc/OIDCLoginProtocol.java

@@ -420,10 +420,10 @@ public class OIDCLoginProtocol implements LoginProtocol {
             case CANCELLED_AIA_SILENT:
                 return new OAuth2ErrorRepresentation(null, null);
             case CANCELLED_AIA:
-                return new OAuth2ErrorRepresentation(OAuthErrorException.ACCESS_DENIED, "User cancelled aplication-initiated action.");
+                return new OAuth2ErrorRepresentation(OAuthErrorException.ACCESS_DENIED, "User cancelled application-initiated action.");
             case CANCELLED_BY_USER:
             case CONSENT_DENIED:
-                return new OAuth2ErrorRepresentation(OAuthErrorException.ACCESS_DENIED, null);
+                return new OAuth2ErrorRepresentation(OAuthErrorException.ACCESS_DENIED, "User denied consent");
             case PASSIVE_INTERACTION_REQUIRED:
                 return new OAuth2ErrorRepresentation(OAuthErrorException.INTERACTION_REQUIRED, null);
             case PASSIVE_LOGIN_REQUIRED: