From 5db90f178709e0878912140eb9fc91e11221785a Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 15 Jun 2021 09:47:18 +0200
Subject: [PATCH] Feature/improve error page of fingerprint sign in (#167)

* Improve error page

* Update changelog
---
 CHANGELOG.md                                    |  1 +
 .../src/app/pages/webauthn/webauthn-page.html   | 17 ++++++++++++-----
 .../app/pages/webauthn/webauthn-page.module.ts  |  2 ++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d73ee4f15..57551b076 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.html b/apps/client/src/app/pages/webauthn/webauthn-page.html
index 8a561fa79..df2d971d5 100644
--- a/apps/client/src/app/pages/webauthn/webauthn-page.html
+++ b/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>
diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.module.ts b/apps/client/src/app/pages/webauthn/webauthn-page.module.ts
index 01a7dcd4b..c923b0dc5 100644
--- a/apps/client/src/app/pages/webauthn/webauthn-page.module.ts
+++ b/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