try and handle errors from the server

src/Umbraco.Web.UI.Client/src/installer/installer-error.element.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 import { ProblemDetails } from '../core/models';
@@ -32,15 +32,29 @@ export class UmbInstallerError extends LitElement {
 		this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));
 	}
 
+	private _renderError(error: ProblemDetails) {
+		return html`
+			<p id="error-message" data-test="error-message">${error.detail ?? 'Unknown error'}</p>
+			<hr />
+			${error.errors ? this._renderErrors(error.errors) : nothing}
+		`;
+	}
+
+	private _renderErrors(errors: Record<string, unknown>) {
+		return html`
+			<ul>
+				${Object.keys(errors).map((key) => html` <li>${key}: ${(errors[key] as string[]).join(', ')}</li> `)}
+			</ul>
+		`;
+	}
+
 	render() {
 		return html` <div id="container" class="uui-text" data-test="installer-error">
 			<uui-form>
 				<form id="installer-form" @submit="${this._handleSubmit}">
 					<h1 class="uui-h3">Installing Umbraco</h1>
 					<h2>Something went wrong</h2>
-					${this.error
-						? html`<p id="error-message" data-test="error-message">${this.error.detail ?? 'Unknown error'}</p>`
-						: html``}
+					${this.error ? this._renderError(this.error) : nothing}
 					<div id="buttons">
 						<uui-button
 							id="button-reset"

src/Umbraco.Web.UI.Client/src/installer/installer.stories.ts

@@ -11,7 +11,7 @@ import { rest } from 'msw';
 
 import { UmbInstallerContext } from './installer-context';
 
-import type { UmbInstallerUser } from '.';
+import type { UmbInstallerError, UmbInstallerUser } from '.';
 import type { UmbracoInstaller } from '../core/models';
 export default {
 	title: 'Components/Installer/Steps',
@@ -93,8 +93,24 @@ Step3DatabasePreconfigured.parameters = {
 export const Step4Installing: Story = () => html`<umb-installer-installing></umb-installer-installing>`;
 Step4Installing.storyName = 'Step 4: Installing';
 
-export const Step5Error: Story = () => html`<umb-installer-error></umb-installer-error>`;
+export const Step5Error: Story<UmbInstallerError> = ({ error }) =>
+	html`<umb-installer-error .error=${error}></umb-installer-error>`;
 Step5Error.storyName = 'Step 5: Error';
+Step5Error.args = {
+	error: {
+		type: 'validation',
+		status: 400,
+		detail: 'The form did not pass validation',
+		title: 'Validation error',
+		errors: {
+			'user.password': [
+				'The password must be at least 6 characters long',
+				'The password must contain at least one number',
+			],
+			databaseName: ['The database name is required'],
+		},
+	},
+};
 Step5Error.parameters = {
 	actions: {
 		handles: ['reset'],