diff --git a/CHANGELOG.md b/CHANGELOG.md index 2257cf60..be7daaff 100644 --- a/CHANGELOG.md +++ b/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 + +### Added + +- Improved the usability of the user account registration + ## 2.145.1 - 2025-03-10 ### Added 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 86490688..45fd53fc 100644 --- a/apps/client/src/app/pages/register/register-page.component.ts +++ b/apps/client/src/app/pages/register/register-page.component.ts @@ -7,7 +7,6 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions'; import { Component, OnDestroy, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { Router } from '@angular/router'; -import { Role } from '@prisma/client'; import { DeviceDetectorService } from 'ngx-device-detector'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -59,15 +58,6 @@ export class RegisterPageComponent implements OnDestroy, OnInit { ); } - public async createAccount() { - this.dataService - .postUser() - .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe(({ accessToken, authToken, role }) => { - this.openShowAccessTokenDialog(accessToken, authToken, role); - }); - } - public async onLoginWithInternetIdentity() { try { const { authToken } = await this.internetIdentityService.login(); @@ -76,17 +66,8 @@ export class RegisterPageComponent implements OnDestroy, OnInit { } catch {} } - public openShowAccessTokenDialog( - accessToken: string, - authToken: string, - role: Role - ) { + public openShowAccessTokenDialog() { const dialogRef = this.dialog.open(ShowAccessTokenDialog, { - data: { - accessToken, - authToken, - role - }, disableClose: true, width: '30rem' }); @@ -94,8 +75,8 @@ export class RegisterPageComponent implements OnDestroy, OnInit { dialogRef .afterClosed() .pipe(takeUntil(this.unsubscribeSubject)) - .subscribe((data) => { - if (data?.authToken) { + .subscribe((authToken) => { + if (authToken) { this.tokenStorageService.saveToken(authToken, true); this.router.navigate(['/']); diff --git a/apps/client/src/app/pages/register/register-page.html b/apps/client/src/app/pages/register/register-page.html index 903aedcc..eee49083 100644 --- a/apps/client/src/app/pages/register/register-page.html +++ b/apps/client/src/app/pages/register/register-page.html @@ -22,7 +22,7 @@ class="d-inline-block" color="primary" mat-flat-button - (click)="createAccount()" + (click)="openShowAccessTokenDialog()" > Create Account 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 5aacbd45..c6535bf4 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 @@ -1,19 +1,58 @@ -import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'; -import { MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { DataService } from '@ghostfolio/client/services/data.service'; + +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ViewChild +} from '@angular/core'; +import { MatStepper } from '@angular/material/stepper'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ - selector: 'gf-show-access-token-dialog', changeDetection: ChangeDetectionStrategy.OnPush, + selector: 'gf-show-access-token-dialog', + standalone: false, styleUrls: ['./show-access-token-dialog.scss'], - templateUrl: 'show-access-token-dialog.html', - standalone: false + templateUrl: 'show-access-token-dialog.html' }) export class ShowAccessTokenDialog { - public isAgreeButtonDisabled = true; + @ViewChild(MatStepper) stepper!: MatStepper; - public constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} + public accessToken: string; + public authToken: string; + public isCreateAccountButtonDisabled = true; + public isDisclaimerChecked = false; + public role: string; - public enableAgreeButton() { - this.isAgreeButtonDisabled = false; + private unsubscribeSubject = new Subject(); + + public constructor( + private changeDetectorRef: ChangeDetectorRef, + private dataService: DataService + ) {} + + public createAccount() { + this.dataService + .postUser() + .pipe(takeUntil(this.unsubscribeSubject)) + .subscribe(({ accessToken, authToken, role }) => { + this.accessToken = accessToken; + this.authToken = authToken; + this.role = role; + + this.stepper.next(); + + this.changeDetectorRef.markForCheck(); + }); + } + + public enableCreateAccountButton() { + this.isCreateAccountButtonDisabled = false; + } + + public onChangeDislaimerChecked() { + this.isDisclaimerChecked = !this.isDisclaimerChecked; } } 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 0a6a2e5e..737d3267 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 @@ -1,48 +1,93 @@

Create Account - @if (data.role === 'ADMIN') { - {{ data.role }} + @if (role === 'ADMIN') { + {{ role }} }

-
-
- - Security Token - -
-
- -
-

- I agree to have stored my Security Token from above in a secure - place. If I lose it, I cannot get my account back. -

-
-
- - + + I understand that if I lose my security token, I cannot recover my + account. + +
+
+ +
+
+ +
+
+ + + Security Token +
+ Here is your security token. It is only visible once, please store + and keep it in a safe place. +
+ + Security Token + +
+ +
+ +
+
+ +
+
+ + + + + + +
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 d537fbe7..117c1da0 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 @@ -4,9 +4,11 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; +import { MatCheckboxModule } from '@angular/material/checkbox'; 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 { ShowAccessTokenDialog } from './show-access-token-dialog.component'; @@ -17,9 +19,11 @@ import { ShowAccessTokenDialog } from './show-access-token-dialog.component'; CommonModule, FormsModule, MatButtonModule, + MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatInputModule, + MatStepperModule, ReactiveFormsModule, TextFieldModule ], 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 dc9093b4..777c8c85 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,2 +1,6 @@ :host { + .mat-mdc-dialog-actions { + padding-left: 0 !important; + padding-right: 0 !important; + } }