IS-11346: render page symbols for HAAPI steps

src/common/css/lib/src/base/base-forms.css

@@ -217,7 +217,6 @@ input[data-autocompleted] {
 details {
   border: 1px solid var(--color-grey-light);
   border-radius: var(--form-field-border-radius);
-  margin-bottom: var(--space-2);
   padding: var(--space-2) var(--space-2) 0;
 }
 

src/identity-server/styles/css/login-base.css

@@ -28,17 +28,8 @@
 	}
 }
 
-[type='submit']:where(:not(.button-tiny, .button-small, .button-large)) {
-  font-size: calc(var(--button-font-size) * var(--y-medium));
-  min-height: 44px;
-  padding-block-start: calc(var(--button-padding-y) * var(--y-medium));
-  padding-block-end: calc(var(--button-padding-y) * var(--y-medium));
-  padding-inline-start: calc(var(--button-padding-x) * var(--x-medium));
-  padding-inline-end: calc(var(--button-padding-x) * var(--x-medium));
-
-  &:where(:not([class*='-outline'])) {
-    color: white;
-  }
+.login-well [type="submit"] {
+	margin-block-start: var(--space-2);
 }
 
 /* Forgot password links */

src/identity-server/templates/core/fragments/api-driven-ui/theme.vm

@@ -0,0 +1,53 @@
+#*
+ * Copyright (C) 2026 Curity AB. All rights reserved.
+ *
+ * The contents of this file are the property of Curity AB.
+ * You may not copy or use this file, in either source code
+ * or executable form, except in compliance with terms
+ * set by Curity AB.
+ *
+ * For further information, please contact Curity AB.
+ *#
+
+{
+    logo: {
+        path: '$!logo_path',
+        isInsideWell: #if ($logo_inside) true #else false #end,
+    },
+#if ($show_symbol)
+    #macro(symbolPath $jsonKey $pathVariable)
+        #if($pathVariable)'$jsonKey': '$!pathVariable',#end
+    #end
+
+    pageSymbols: {
+        ## Map of plugin implementation type to symbol path.
+        ## Used as a fallback if an exact match for the page symbol is not found in 'views'.
+        plugins: {
+            #* Authenticators *#
+            #symbolPath("bankid" $page_symbol_authenticate_bankid)
+            #symbolPath("duo" $page_symbol_authenticate_pair_device)
+            #symbolPath("email" $page_symbol_authenticate_email)
+            #symbolPath("html-form" $page_symbol_authenticate_htmlform)
+            #symbolPath("openid-wallet" $page_symbol_openid_wallet)
+            #symbolPath("passkeys" $page_symbol_authenticate_passkeys)
+            #symbolPath("sms" $page_symbol_authenticate_sms)
+            #symbolPath("totp" $page_symbol_authenticate_totp)
+            #symbolPath("webauthn" $page_symbol_authenticate_webauthn)
+
+            #* Authentication ACtions *#
+            #symbolPath("opt-in-mfa" $page_symbol_authenticate_opt_in_mfa)
+            #symbolPath("require-active-account" $page_symbol_authenticate_htmlform)
+            #symbolPath("reset-password" $page_symbol_authenticate_htmlform)
+            #symbolPath("signup" $page_symbol_authenticate_htmlform)
+
+            #* Consentors *#
+            #symbolPath("bankid-signing-consentor" $page_symbol_authenticate_bankid)
+        },
+        ## Map of view/template name to symbol path.
+        views: {
+            ## Nothing to add for now
+        },
+        default: '$!page_symbol',
+    }
+#end
+}

src/identity-server/templates/core/views/api-driven-ui/index.vm

@@ -41,38 +41,7 @@
             clientId: '$_apiDrivenClientInfo.clientId',
             tokenEndpoint: '$_apiDrivenClientInfo.tokenEndpoint',
         },
-        theme: {
-            logo: {
-                path: '$!logo_path',
-                isInsideWell: #if ($logo_inside) true #else false #end,
-            },
-        #if ($show_symbol)
-            pageSymbols: {
-                ## Free form mapping of page symbols names to full paths.
-                #macro(pageSymbolPath $jsonKey $variable)
-                    #if($variable)$jsonKey: '$!variable',#end
-                #end
-                paths: {
-                    #pageSymbolPath("authenticate_desktop" $page_symbol_authenticate_desktop)
-                    #pageSymbolPath("authenticate_mobile" $page_symbol_authenticate_mobile)
-                    #pageSymbolPath("authenticate_email" $page_symbol_authenticate_email)
-                    #pageSymbolPath("authenticate_card" $page_symbol_authenticate_card)
-                    #pageSymbolPath("authenticate_sms" $page_symbol_authenticate_sms)
-                    #pageSymbolPath("authenticate_pair_device" $page_symbol_authenticate_pair_device)
-                    #pageSymbolPath("authenticate_htmlform" $page_symbol_authenticate_htmlform)
-                    #pageSymbolPath("authenticate_totp" $page_symbol_authenticate_totp)
-                    #pageSymbolPath("authenticate_bankid" $page_symbol_authenticate_bankid)
-                    #pageSymbolPath("authenticate_webauthn" $page_symbol_authenticate_webauthn)
-                    #pageSymbolPath("authenticate_opt_in_mfa" $page_symbol_authenticate_opt_in_mfa)
-                    #pageSymbolPath("authenticate_passkeys" $page_symbol_authenticate_passkeys)
-                    #pageSymbolPath("authenticate_openid_wallet" $page_symbol_openid_wallet)
-                    #pageSymbolPath("error_generic" $page_symbol_error_generic)
-                },
-                ## Added in case the UI needs to build paths for other page symbols.
-                basePath: '$!page_symbol_path',
-            },
-        #end
-        },
+        theme: #parse("fragments/api-driven-ui/theme")
     };
 </script>
 <div id="root"></div>

src/login-web-app/configure-idsvr-dev.sh

@@ -57,4 +57,4 @@ API_DRIVEN_UI_DIR=$OVERRIDES_DIR/views/api-driven-ui
 
 mkdir -p $API_DRIVEN_UI_DIR
 
-cp ./loader-dev.vm.html $API_DRIVEN_UI_DIR/index.vm
+cp ./loader-dev.vm $API_DRIVEN_UI_DIR/index.vm

src/login-web-app/index.html

@@ -28,13 +28,7 @@
       }
 
       // Set the configuration object expected by the application
-      window.__CONFIG__ = {
-        initialUrl: arg('initialUrl'),
-        haapi: {
-          clientId: arg('haapi_clientId'),
-          tokenEndpoint: arg('haapi_tokenEndpoint'),
-        },
-      };
+      window.__CONFIG__ = JSON.parse(arg('configuration'));
 
       // Change the current URL to match the original request to Identity Server, so that it looks like the
       // application was loaded directly by the server's template

src/login-web-app/loader-dev.vm.html → src/login-web-app/loader-dev.vm

@@ -18,11 +18,27 @@
   </head>
   <body>
     <script>
+      const configuration = {
+        initialUrl: '$_apiDrivenInitialUrl',
+        haapi: {
+          clientId: '$_apiDrivenClientInfo.clientId',
+          tokenEndpoint: '$_apiDrivenClientInfo.tokenEndpoint',
+        },
+        theme: {
+          logo: {
+            path: '$!logo_path',
+            isInsideWell: #if ($logo_inside) true #else false #end,
+          },
+          #if ($show_symbol)
+          pageSymbols: {
+              default: '$!page_symbol',
+          }
+          #end
+        },
+      };
       const query = new URLSearchParams({
         originalUrl: window.location.href,
-        initialUrl: '$_apiDrivenInitialUrl',
-        haapi_clientId: '$_apiDrivenClientInfo.clientId',
-        haapi_tokenEndpoint: '$_apiDrivenClientInfo.tokenEndpoint',
+        configuration: JSON.stringify(configuration),
       });
 
       const redirect = new URL('/', window.location.href);

src/login-web-app/previewer/Previewer.tsx

@@ -19,6 +19,16 @@ import { formatNextStepData } from '../src/haapi-stepper/feature/stepper/data-fo
 import { HaapiStepperContext } from '../src/haapi-stepper/feature/stepper/HaapiStepperContext';
 import { type HaapiStepperAPI } from '../src/haapi-stepper/feature/stepper/haapi-stepper.types';
 import { HaapiErrorStep } from '../src/haapi-stepper/data-access';
+import { AppConfigContext } from '../src/shared/feature/app-config/AppConfigContext';
+import type { BootstrapConfiguration } from '../src/haapi-stepper/data-access/bootstrap-configuration';
+
+const mockAppConfig: BootstrapConfiguration = {
+  initialUrl: '',
+  haapi: { clientId: '', tokenEndpoint: '' },
+  theme: {
+    logo: { path: '', isInsideWell: false },
+  },
+};
 
 enum Page {
   START = 'start',
@@ -56,10 +66,12 @@ export function Previewer() {
   };
 
   return (
-    <HaapiStepperContext value={mockHaapiStepperValue}>
-      <Layout onNavigate={page => setCurrentPage(page as Page)} currentPage={currentPage}>
-        {renderPreview()}
-      </Layout>
-    </HaapiStepperContext>
+    <AppConfigContext value={mockAppConfig}>
+      <HaapiStepperContext value={mockHaapiStepperValue}>
+        <Layout onNavigate={page => setCurrentPage(page as Page)} currentPage={currentPage}>
+          {renderPreview()}
+        </Layout>
+      </HaapiStepperContext>
+    </AppConfigContext>
   );
 }

src/login-web-app/src/App.tsx

@@ -14,14 +14,17 @@ import { AppConfig } from './shared/feature/app-config/AppConfig';
 import { ErrorBoundary } from './shared/feature/error-handling/ErrorBoundary';
 import { HaapiStepperStepUI } from './haapi-stepper/feature/steps/HaapiStepperStepUI';
 import { HaapiStepper } from './haapi-stepper/feature/stepper/HaapiStepper';
+import { HaapiStepperErrorNotifier } from './haapi-stepper/feature/stepper/HaapiStepperErrorNotifier';
 
 export function App() {
   return (
     <AppConfig>
       <ErrorBoundary>
         <HaapiStepper>
           <Layout>
-            <HaapiStepperStepUI />
+            <HaapiStepperErrorNotifier>
+              <HaapiStepperStepUI />
+            </HaapiStepperErrorNotifier>
           </Layout>
         </HaapiStepper>
       </ErrorBoundary>

src/login-web-app/src/haapi-stepper/data-access/bootstrap-configuration.ts

@@ -19,9 +19,23 @@ export interface BootstrapConfiguration {
       path: string;
       isInsideWell: boolean;
     };
+    /**
+     * Optional per-page icon configuration. Only present when symbols are enabled in the server theme.
+     * Resolved against the current step's `metadata.viewName` (see `resolvePageSymbol`).
+     */
+    pageSymbols?: PageSymbols;
   };
 }
 
+export interface PageSymbols {
+  /** Map of full HAAPI viewName -> symbol path. Highest precedence. */
+  views?: Record<string, string>;
+  /** Map of plugin implementation type (e.g. `html-form`, `bankid`) -> symbol path. */
+  plugins?: Record<string, string>;
+  /** Fallback symbol path used when no per-view / per-plugin entry matches. */
+  default?: string;
+}
+
 // @ts-expect-error window.__CONFIG__ is not declared on the Window type
 const _configuration = window.__CONFIG__ as BootstrapConfiguration | undefined;
 if (!_configuration) {

src/login-web-app/src/haapi-stepper/data-access/types/haapi-action.types.ts

@@ -184,30 +184,27 @@ export interface HaapiExternalBrowserArguments {
   href: string;
 }
 
-/**
- * Client operation WebAuthn registration action
- */
-export interface HaapiWebAuthnRegistrationClientOperationAction extends HaapiClientOperationAction {
-  model: HaapiWebAuthnRegistrationClientOperationModel;
-}
+export type HaapiWebAuthnRegistrationClientOperationAction =
+  | HaapiWebAuthnPasskeysRegistrationAction
+  | HaapiWebAuthnAnyDeviceRegistrationAction;
 
 export interface HaapiWebAuthnRegistrationClientOperationModel extends HaapiBaseClientOperationModel {
   name: HAAPI_ACTION_CLIENT_OPERATIONS.WEBAUTHN_REGISTRATION;
   arguments: HaapiWebAuthnRegistrationArgs;
   continueActions: [HaapiFormAction];
 }
 
-export type HaapiWebAuthnPasskeysRegistrationAction = Omit<HaapiWebAuthnRegistrationClientOperationAction, 'model'> & {
+export interface HaapiWebAuthnPasskeysRegistrationAction extends HaapiClientOperationAction {
   model: Omit<HaapiWebAuthnRegistrationClientOperationModel, 'arguments'> & {
     arguments: HaapiWebAuthnPasskeysArgs;
   };
-};
+}
 
-export type HaapiWebAuthnAnyDeviceRegistrationAction = Omit<HaapiWebAuthnRegistrationClientOperationAction, 'model'> & {
+export interface HaapiWebAuthnAnyDeviceRegistrationAction extends HaapiClientOperationAction {
   model: Omit<HaapiWebAuthnRegistrationClientOperationModel, 'arguments'> & {
     arguments: HaapiWebAuthnAnyDeviceArgs;
   };
-};
+}
 
 /**
  * Discriminated union of `webauthn-registration` action arguments.
@@ -223,10 +220,15 @@ export interface HaapiWebAuthnPasskeysArgs {
   credentialCreationOptions: HaapiPublicKeyCredentialCreationOptions;
 }
 
-export interface HaapiWebAuthnAnyDeviceArgs {
-  platformCredentialCreationOptions?: HaapiPublicKeyCredentialCreationOptions;
-  crossPlatformCredentialCreationOptions?: HaapiPublicKeyCredentialCreationOptions;
-}
+export type HaapiWebAuthnAnyDeviceArgs =
+  | {
+      platformCredentialCreationOptions: HaapiPublicKeyCredentialCreationOptions;
+      crossPlatformCredentialCreationOptions?: HaapiPublicKeyCredentialCreationOptions;
+    }
+  | {
+      platformCredentialCreationOptions?: undefined;
+      crossPlatformCredentialCreationOptions: HaapiPublicKeyCredentialCreationOptions;
+    };
 
 /**
  * Continue-action payload key for the `webauthn-registration` operation. The value matches the

src/login-web-app/src/haapi-stepper/feature/actions/client-operation/operations/client-operations.ts

@@ -14,10 +14,9 @@ import {
   HAAPI_ACTION_TYPES,
   HaapiAction,
 } from '../../../../data-access/types/haapi-action.types';
-import { HaapiLink } from '../../../../data-access/types/haapi-step.types';
+import { HaapiLink, HaapiStep } from '../../../../data-access/types/haapi-step.types';
 import { RefObject } from 'react';
 import { HaapiStepperAction, HaapiStepperLink } from '../../../stepper/haapi-stepper.types';
-import { HaapiFetchFormAction } from '../../../../data-access/types/haapi-fetch.types';
 import { isBankIdClientOperation, runBankIdAuthentication } from './bankid';
 import { isExternalBrowserFlowClientOperation, runExternalBrowserFlow } from './external-browser-flow';
 import {
@@ -26,51 +25,37 @@ import {
   runWebAuthnAuthentication,
   runWebAuthnRegistration,
 } from './webauthn';
+import { ClientOperationResult } from './typings';
 
 export function isClientOperation(
   action: HaapiAction | HaapiStepperAction | HaapiLink | HaapiStepperLink
 ): action is HaapiClientOperationAction {
   return 'template' in action && action.template === HAAPI_ACTION_TYPES.CLIENT_OPERATION;
 }
 
-/**
- * Performs a client operation, returning a continuation action and values if further action is required, or null if
- * no further action is required or if the operation was aborted.
- */
 export async function performClientOperation(
   action: HaapiClientOperationAction,
-  pendingOperation: RefObject<AbortController | NodeJS.Timeout | null>
-): Promise<HaapiFetchFormAction | null> {
+  pendingOperation: RefObject<AbortController | NodeJS.Timeout | null>,
+  currentStep: HaapiStep | null
+): Promise<ClientOperationResult> {
   const abortController = new AbortController();
   pendingOperation.current = abortController;
+  const signal = abortController.signal;
 
-  try {
-    if (isExternalBrowserFlowClientOperation(action)) {
-      return await runExternalBrowserFlow(action, 2500, abortController.signal);
-    }
-
-    if (isWebAuthnRegistrationClientOperation(action)) {
-      return await runWebAuthnRegistration(action, abortController.signal);
-    }
+  if (isWebAuthnRegistrationClientOperation(action)) {
+    return runWebAuthnRegistration(action, signal, currentStep);
+  }
 
-    if (isWebAuthnAuthenticationClientOperation(action)) {
-      return await runWebAuthnAuthentication(action, abortController.signal);
-    }
+  if (isWebAuthnAuthenticationClientOperation(action)) {
+    return runWebAuthnAuthentication(action, signal, currentStep);
+  }
 
-    if (isBankIdClientOperation(action)) {
-      return await runBankIdAuthentication(action);
-    }
-  } catch (err) {
-    /**
-     * If the operation was aborted by the caller, convert to null - i.e. no further action - instead of error
-     * Note that the cancellation is triggered by code on this file and a 'reason' is not provided, so we can rely on
-     * the error being the default AbortError.
-     */
-    if (abortController.signal.aborted && err instanceof DOMException && err.name === 'AbortError') {
-      return null;
-    }
+  if (isExternalBrowserFlowClientOperation(action)) {
+    return runExternalBrowserFlow(action, 2500, signal).then(clientOperationData => ({ clientOperationData }));
+  }
 
-    throw err;
+  if (isBankIdClientOperation(action)) {
+    return runBankIdAuthentication(action).then(clientOperationData => ({ clientOperationData }));
   }
 
   throw new Error(`Unsupported client operation: ${action.model.name}`);