Feature/improve registration page (#451)

* Improve registration page

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the registration page
+
 ## 1.68.0 - 01.11.2021
 
 ### Changed

apps/client/src/app/components/header/header.component.html

@@ -229,7 +229,13 @@
       mat-button
       [routerLink]="['/']"
     >
-      <gf-logo [hideName]="!currentRoute || currentRoute === 'start'"></gf-logo>
+      <gf-logo
+        [hideName]="
+          !currentRoute ||
+          currentRoute === 'register' ||
+          currentRoute === 'start'
+        "
+      ></gf-logo>
     </a>
     <span class="spacer"></span>
     <a

apps/client/src/app/pages/register/register-page.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -6,6 +6,7 @@ import { TokenStorageService } from '@ghostfolio/client/services/token-storage.s
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { format } from 'date-fns';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -20,6 +21,7 @@ import { ShowAccessTokenDialog } from './show-access-token-dialog/show-access-to
 export class RegisterPageComponent implements OnDestroy, OnInit {
   public currentYear = format(new Date(), 'yyyy');
   public demoAuthToken: string;
+  public deviceType: string;
   public hasPermissionForSocialLogin: boolean;
   public historicalDataItems: LineChartItem[];
 
@@ -29,8 +31,8 @@ export class RegisterPageComponent implements OnDestroy, OnInit {
    * @constructor
    */
   public constructor(
-    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private router: Router,
     private tokenStorageService: TokenStorageService
@@ -45,6 +47,7 @@ export class RegisterPageComponent implements OnDestroy, OnInit {
     const { demoAuthToken, globalPermissions } = this.dataService.fetchInfo();
 
     this.demoAuthToken = demoAuthToken;
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
     this.hasPermissionForSocialLogin = hasPermission(
       globalPermissions,
       permissions.enableSocialLogin

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

@@ -1,11 +1,22 @@
+<div class="intro-container mb-5">
+  <div class="intro-inner-container mx-auto">
+    <div class="h-100 intro w-100"></div>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
-    <div class="col">
+    <div
-      <h3 class="d-flex justify-content-center mb-3 text-center" i18n>
+      class="align-items-center d-flex flex-column justify-content-center w-100"
-        Create your Account
+    >
-      </h3>
+      <gf-logo size="large"></gf-logo>
-      <mat-card class="mb-4">
+      <p class="lead m-0">Wealth Management Software</p>
-        <mat-card-content class="text-center">
+    </div>
+  </div>
+
+  <div class="button-container row">
+    <div class="align-items-center col d-flex justify-content-center">
+      <div class="py-5 text-center">
         <button
           class="d-inline-block"
           color="primary"
@@ -17,14 +28,19 @@
           Create Account
         </button>
         <ng-container *ngIf="hasPermissionForSocialLogin">
-            <div class="my-3 text-muted" i18n>or</div>
+          <div
+            class="m-3 text-muted"
+            i18n
+            [ngClass]="{'d-inline': deviceType !== 'mobile' }"
+          >
+            or
+          </div>
           <a color="accent" href="/api/auth/google" mat-flat-button
             ><ion-icon class="mr-1" name="logo-google"></ion-icon
             ><span i18n>Continue with Google</span></a
           >
         </ng-container>
-        </mat-card-content>
+      </div>
-      </mat-card>
     </div>
   </div>
 </div>

apps/client/src/app/pages/register/register-page.scss

@@ -1,3 +1,26 @@
 :host {
   display: block;
+
+  .button-container {
+    .mat-stroked-button {
+      background-color: var(--light-background);
+    }
+  }
+
+  .intro-container {
+    background-color: #ffffff;
+    margin-top: -5rem;
+
+    .intro-inner-container {
+      aspect-ratio: 16 / 9;
+      max-height: 66vh;
+
+      .intro {
+        background-image: url('/assets/intro.jpg');
+        background-position: top left;
+        background-repeat: no-repeat;
+        background-size: contain;
+      }
+    }
+  }
 }