From 3d7624d9974b3eec9777ce7223d9a927575682f2 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 16 Jun 2021 17:31:31 +0200
Subject: [PATCH] Feature/improve twa onboarding (#173)

* Improve TWA onboarding (Redirect to the account registration page)

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 apps/client/src/app/core/auth.guard.ts        |  5 +-
 .../src/app/pages/register/register-page.html |  2 +-
 .../src/app/pages/webauthn/webauthn-page.html | 56 ++++++++++---------
 4 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1229ca5a5..0eb375ad6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the pie chart: Investments by sector
+- Improved the onboarding for TWA by redirecting to the account registration page
 
 ## 1.17.0 - 15.06.2021
 
diff --git a/apps/client/src/app/core/auth.guard.ts b/apps/client/src/app/core/auth.guard.ts
index 318e6a82e..d196cb68d 100644
--- a/apps/client/src/app/core/auth.guard.ts
+++ b/apps/client/src/app/core/auth.guard.ts
@@ -40,7 +40,10 @@ export class AuthGuard implements CanActivate {
         .get()
         .pipe(
           catchError(() => {
-            if (AuthGuard.PUBLIC_PAGE_ROUTES.includes(state.url)) {
+            if (route.queryParams?.utm_source) {
+              this.router.navigate(['/register']);
+              resolve(false);
+            } else if (AuthGuard.PUBLIC_PAGE_ROUTES.includes(state.url)) {
               resolve(true);
               return EMPTY;
             } else if (state.url !== '/start') {
diff --git a/apps/client/src/app/pages/register/register-page.html b/apps/client/src/app/pages/register/register-page.html
index d2db0e3d8..91fc4accd 100644
--- a/apps/client/src/app/pages/register/register-page.html
+++ b/apps/client/src/app/pages/register/register-page.html
@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3 text-center" i18n>
-        Create your Ghostfolio account
+        Create your Account
       </h3>
       <mat-card class="mb-4">
         <mat-card-content class="text-center">
diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.html b/apps/client/src/app/pages/webauthn/webauthn-page.html
index df2d971d5..d4a76b54a 100644
--- a/apps/client/src/app/pages/webauthn/webauthn-page.html
+++ b/apps/client/src/app/pages/webauthn/webauthn-page.html
@@ -1,34 +1,36 @@
 <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 class="col">
+      <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>
-    <div
-      *ngIf="hasError"
-      class="align-items-center col d-flex flex-column justify-content-center"
-    >
-      <h1 class="d-flex h5 justify-content-center mb-0 text-center" i18n>
-        Oops, authentication has failed.
-      </h1>
-      <button
-        class="mb-3 mt-4"
-        color="primary"
-        i18n
-        mat-flat-button
-        (click)="signIn()"
+      <div *ngIf="!hasError" class="col d-flex justify-content-center">
+        <mat-spinner [diameter]="20"></mat-spinner>
+      </div>
+      <div
+        *ngIf="hasError"
+        class="align-items-center col d-flex flex-column justify-content-center"
       >
-        Try again
-      </button>
-      <div class="text-muted" i18n>or</div>
-      <button class="mt-1" i18n mat-flat-button (click)="deregisterDevice()">
-        Go back to Home Page
-      </button>
+        <h1 class="d-flex h5 justify-content-center mb-0 text-center" i18n>
+          Oops, authentication has failed.
+        </h1>
+        <button
+          class="mb-3 mt-4"
+          color="primary"
+          i18n
+          mat-flat-button
+          (click)="signIn()"
+        >
+          Try again
+        </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>
     </div>
   </div>
 </div>