Feature/improve error page of fingerprint sign in (#167)

* Improve error page

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the error page of the sign in with fingerprint
 - Disable the sign in with fingerprint selector for the demo user
 - Upgraded `chart.js` from version `3.2.1` to `3.3.2`
 - Upgraded `date-fns` from version `2.19.0` to `2.22.1`

apps/client/src/app/pages/webauthn/webauthn-page.html

@@ -1,5 +1,11 @@
 <div class="container">
   <div class="row">
+    <div
+      class="align-items-center d-flex flex-column justify-content-center mb-4 w-100"
+    >
+      <gf-logo size="medium"></gf-logo>
+    </div>
+
     <div *ngIf="!hasError" class="col d-flex justify-content-center">
       <mat-spinner [diameter]="20"></mat-spinner>
     </div>
@@ -7,11 +13,11 @@
       *ngIf="hasError"
       class="align-items-center col d-flex flex-column justify-content-center"
     >
-      <h3 class="d-flex justify-content-center" i18n>
-        Oops, authentication failed
-      </h3>
+      <h1 class="d-flex h5 justify-content-center mb-0 text-center" i18n>
+        Oops, authentication has failed.
+      </h1>
       <button
-        class="my-4"
+        class="mb-3 mt-4"
         color="primary"
         i18n
         mat-flat-button
@@ -19,7 +25,8 @@
       >
         Try again
       </button>
-      <button (click)="deregisterDevice()" i18n mat-flat-button>
+      <div class="text-muted" i18n>or</div>
+      <button class="mt-1" i18n mat-flat-button (click)="deregisterDevice()">
         Go back to Home Page
       </button>
     </div>

apps/client/src/app/pages/webauthn/webauthn-page.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
 import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component';
 
 import { WebauthnPageRoutingModule } from './webauthn-page-routing.module';
@@ -11,6 +12,7 @@ import { WebauthnPageRoutingModule } from './webauthn-page-routing.module';
   exports: [],
   imports: [
     CommonModule,
+    GfLogoModule,
     MatButtonModule,
     MatProgressSpinnerModule,
     WebauthnPageRoutingModule