Set up terms of service

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

@@ -11,6 +11,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { ShowAccessTokenDialogParams } from './show-access-token-dialog/interfaces/interfaces';
 import { ShowAccessTokenDialog } from './show-access-token-dialog/show-access-token-dialog.component';
 
 @Component({
@@ -24,6 +25,7 @@ export class RegisterPageComponent implements OnDestroy, OnInit {
   public demoAuthToken: string;
   public deviceType: string;
   public hasPermissionForSocialLogin: boolean;
+  public hasPermissionForSubscription: boolean;
   public hasPermissionToCreateUser: boolean;
   public historicalDataItems: LineChartItem[];
   public info: InfoItem;
@@ -52,6 +54,10 @@ export class RegisterPageComponent implements OnDestroy, OnInit {
       globalPermissions,
       permissions.enableSocialLogin
     );
+    this.hasPermissionForSubscription = hasPermission(
+      globalPermissions,
+      permissions.enableSubscription
+    );
     this.hasPermissionToCreateUser = hasPermission(
       globalPermissions,
       permissions.createUserAccount
@@ -70,6 +76,10 @@ export class RegisterPageComponent implements OnDestroy, OnInit {
 
   public openShowAccessTokenDialog() {
     const dialogRef = this.dialog.open(ShowAccessTokenDialog, {
+      data: {
+        deviceType: this.deviceType,
+        needsToAcceptTermsOfService: this.hasPermissionForSubscription
+      } as ShowAccessTokenDialogParams,
       disableClose: true,
       height: this.deviceType === 'mobile' ? '98vh' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '30rem'

apps/client/src/app/pages/register/show-access-token-dialog/interfaces/interfaces.ts

@@ -0,0 +1,4 @@
+export interface ShowAccessTokenDialogParams {
+  deviceType: string;
+  needsToAcceptTermsOfService: boolean;
+}

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts

@@ -4,12 +4,16 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  Inject,
   ViewChild
 } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatStepper } from '@angular/material/stepper';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { ShowAccessTokenDialogParams } from './interfaces/interfaces';
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'gf-show-access-token-dialog',
@@ -25,11 +29,16 @@ export class ShowAccessTokenDialog {
   public isCreateAccountButtonDisabled = true;
   public isDisclaimerChecked = false;
   public role: string;
+  public routerLinkAboutTermsOfService = [
+    '/' + $localize`:snake-case:about`,
+    $localize`:snake-case:terms-of-service`
+  ];
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
+    @Inject(MAT_DIALOG_DATA) public data: ShowAccessTokenDialogParams,
     private dataService: DataService
   ) {}
 

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html

@@ -5,7 +5,12 @@
   }
 </h1>
 <div class="px-0" mat-dialog-content>
-  <mat-stepper #stepper animationDuration="0ms" [linear]="true">
+  <mat-stepper
+    #stepper
+    animationDuration="0ms"
+    [linear]="true"
+    [orientation]="data.deviceType === 'mobile' ? 'vertical' : 'horizontal'"
+  >
     <mat-step editable="false" [completed]="isDisclaimerChecked">
       <ng-template i18n matStepLabel>Terms and Conditions</ng-template>
       <div class="pt-2">
@@ -15,14 +20,28 @@
         >
       </div>
       <mat-checkbox
-        class="pt-2"
+        class="mt-2"
         color="primary"
         (change)="onChangeDislaimerChecked()"
       >
         <ng-container i18n
           >I understand that if I lose my security token, I cannot recover my
-          account.</ng-container
+          account</ng-container
         >
+        @if (data.needsToAcceptTermsOfService) {
+          <ng-container>&nbsp;</ng-container>
+          <ng-container i18n
+            >and I agree to the
+            <a
+              class="font-weight-bold"
+              target="_blank"
+              [routerLink]="routerLinkAboutTermsOfService"
+              >Terms of Service</a
+            >.</ng-container
+          >
+        } @else {
+          <ng-container>.</ng-container>
+        }
       </mat-checkbox>
       <div class="mt-3" mat-dialog-actions>
         <div class="flex-grow-1">
@@ -35,7 +54,8 @@
             [disabled]="!isDisclaimerChecked"
             (click)="createAccount()"
           >
-            <ng-container i18n>Continue</ng-container>
+            <span i18n>Continue</span>
+            <ion-icon class="ml-1" name="arrow-forward-outline" />
           </button>
         </div>
       </div>
@@ -78,8 +98,7 @@
             [disabled]="isCreateAccountButtonDisabled"
             [mat-dialog-close]="authToken"
           >
-            <span i18n>Create Account</span>
-            <ion-icon class="ml-1" name="arrow-forward-outline" />
+            <ng-container i18n>Create Account</ng-container>
           </button>
         </div>
       </div>

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts

@@ -9,6 +9,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatStepperModule } from '@angular/material/stepper';
+import { RouterModule } from '@angular/router';
 
 import { ShowAccessTokenDialog } from './show-access-token-dialog.component';
 
@@ -25,6 +26,7 @@ import { ShowAccessTokenDialog } from './show-access-token-dialog.component';
     MatInputModule,
     MatStepperModule,
     ReactiveFormsModule,
+    RouterModule,
     TextFieldModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss

@@ -1,6 +1,16 @@
 :host {
+  --mat-dialog-with-actions-content-padding: 0;
+
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+
   .mat-mdc-dialog-actions {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    padding: 0 !important;
   }
 }