Failed install now returns an error

src/Umbraco.Web.UI.Client/src/installer/installer-context.ts

@@ -29,7 +29,11 @@ export class UmbInstallerContext {
   }
 
   public requestInstall() {
-    return postInstall(this._data.getValue());
+    return new Promise((resolve, reject) => {
+      postInstall(this._data.getValue()).then(resolve, ({ data }) => {
+        reject(data);
+      });
+    });
   }
 
   private loadIntallerSettings() {

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

@@ -35,12 +35,19 @@ export class UmbInstallerDatabase extends UmbContextConsumerMixin(LitElement) {
         margin-left: auto;
         min-width: 120px;
       }
+
+      #error-message {
+        color: var(--uui-color-error, red);
+      }
     `,
   ];
 
   @query('#button-install')
   private _installButton!: UUIButtonElement;
 
+  @query('#error-message')
+  private _errorMessage!: HTMLElement;
+
   @property({ attribute: false })
   public databaseFormData!: UmbracoPerformInstallDatabaseConfiguration;
 
@@ -127,9 +134,9 @@ export class UmbInstallerDatabase extends UmbContextConsumerMixin(LitElement) {
   private _handleFulfilled() {
     this.dispatchEvent(new CustomEvent('next', { bubbles: true, composed: true }));
   }
-  private _handleRejected(error: Error) {
+  private _handleRejected(error: any) {
     this._installButton.state = 'failed';
-    console.log('ERROR hallo', error);
+    this._errorMessage.innerText = error.errorMessage;
   }
 
   private _onBack() {
@@ -266,6 +273,9 @@ export class UmbInstallerDatabase extends UmbContextConsumerMixin(LitElement) {
 
           ${this._renderSettings()}
 
+          <!-- Maybe move this error message to the installer.element -->
+          <p id="error-message"></p>
+
           <div id="buttons">
             <uui-button label="Back" @click=${this._onBack} look="secondary"></uui-button>
             <uui-button id="button-install" type="submit" label="Install" look="positive"></uui-button>