Feature/improve twa onboarding (#173)

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

* Update changelog

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
 

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') {

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">

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

@@ -1,34 +1,36 @@
 <div class="container">
   <div class="row">
-    <div
+    <div class="col">
-      class="align-items-center d-flex flex-column justify-content-center mb-4 w-100"
+      <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()"
       >
-        Try again
+        <gf-logo size="medium"></gf-logo>
-      </button>
+      </div>
-      <div class="text-muted" i18n>or</div>
+
-      <button class="mt-1" i18n mat-flat-button (click)="deregisterDevice()">
+      <div *ngIf="!hasError" class="col d-flex justify-content-center">
-        Go back to Home Page
+        <mat-spinner [diameter]="20"></mat-spinner>
-      </button>
+      </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()"
+        >
+          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>