diff --git a/apps/client/src/app/pages/register/register-page.component.ts b/apps/client/src/app/pages/register/register-page.component.ts index 66a5f4beb..11b81c32a 100644 --- a/apps/client/src/app/pages/register/register-page.component.ts +++ b/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' diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/interfaces/interfaces.ts b/apps/client/src/app/pages/register/show-access-token-dialog/interfaces/interfaces.ts new file mode 100644 index 000000000..c32acac40 --- /dev/null +++ b/apps/client/src/app/pages/register/show-access-token-dialog/interfaces/interfaces.ts @@ -0,0 +1,4 @@ +export interface ShowAccessTokenDialogParams { + deviceType: string; + needsToAcceptTermsOfService: boolean; +} diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts index c6535bf48..6dd15045b 100644 --- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts +++ b/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(); public constructor( private changeDetectorRef: ChangeDetectorRef, + @Inject(MAT_DIALOG_DATA) public data: ShowAccessTokenDialogParams, private dataService: DataService ) {} diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html index 96c5c967a..7e09c8bbe 100644 --- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html +++ b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html @@ -5,7 +5,12 @@ }
- + Terms and Conditions
@@ -15,14 +20,28 @@ >
I understand that if I lose my security token, I cannot recover my - account. + @if (data.needsToAcceptTermsOfService) { +   + and I agree to the + Terms of Service. + } @else { + . + }
@@ -35,7 +54,8 @@ [disabled]="!isDisclaimerChecked" (click)="createAccount()" > - Continue + Continue +
@@ -78,8 +98,7 @@ [disabled]="isCreateAccountButtonDisabled" [mat-dialog-close]="authToken" > - Create Account - + Create Account
diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts index 117c1da00..0c7a6fc85 100644 --- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts +++ b/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] diff --git a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss b/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss index 777c8c854..0198e38bf 100644 --- a/apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.scss +++ b/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; } }