Feature/restructure user account registration flow (#4393)
* Restructure user account registration flow * Update changelogpull/4430/head
Tobias Kugel
1 month ago
committed by
GitHub
parent
9abc4af203
commit
a137bbbdca
@ -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 accessToken: string;
|
||||
public authToken: string;
|
||||
public isCreateAccountButtonDisabled = true;
|
||||
public isDisclaimerChecked = false;
|
||||
public role: string;
|
||||
|
||||
private unsubscribeSubject = new Subject<void>();
|
||||
|
||||
public constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private dataService: DataService
|
||||
) {}
|
||||
|
||||
public constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
|
||||
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 enableAgreeButton() {
|
||||
this.isAgreeButtonDisabled = false;
|
||||
public onChangeDislaimerChecked() {
|
||||
this.isDisclaimerChecked = !this.isDisclaimerChecked;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,48 +1,93 @@
|
||||
<h1 mat-dialog-title>
|
||||
<span i18n>Create Account</span>
|
||||
@if (data.role === 'ADMIN') {
|
||||
<span class="badge badge-light ml-2">{{ data.role }}</span>
|
||||
@if (role === 'ADMIN') {
|
||||
<span class="badge badge-light ml-2">{{ role }}</span>
|
||||
}
|
||||
</h1>
|
||||
<div class="py-3" mat-dialog-content>
|
||||
<div>
|
||||
<mat-form-field appearance="outline" class="w-100">
|
||||
<mat-label i18n>Security Token</mat-label>
|
||||
<textarea
|
||||
cdkTextareaAutosize
|
||||
matInput
|
||||
readonly
|
||||
type="text"
|
||||
[(value)]="data.accessToken"
|
||||
></textarea>
|
||||
<div class="float-right mt-3">
|
||||
<button
|
||||
color="secondary"
|
||||
mat-flat-button
|
||||
[cdkCopyToClipboard]="data.accessToken"
|
||||
(click)="enableAgreeButton()"
|
||||
<div class="px-0" mat-dialog-content>
|
||||
<mat-stepper #stepper animationDuration="0ms" linear>
|
||||
<mat-step editable="false" [completed]="isDisclaimerChecked">
|
||||
<ng-template i18n matStepLabel>Terms and Conditions</ng-template>
|
||||
<div class="pt-2">
|
||||
<ng-container i18n
|
||||
>Please keep your security token safe. If you lose it, you will not be
|
||||
able to recover your account.</ng-container
|
||||
>
|
||||
<ion-icon class="mr-1" name="copy-outline" /><span i18n
|
||||
>Copy to clipboard</span
|
||||
</div>
|
||||
<mat-checkbox
|
||||
class="pt-2"
|
||||
color="primary"
|
||||
(change)="onChangeDislaimerChecked()"
|
||||
>
|
||||
<ng-container i18n
|
||||
>I understand that if I lose my security token, I cannot recover my
|
||||
account.</ng-container
|
||||
>
|
||||
</mat-checkbox>
|
||||
<div class="mt-3" mat-dialog-actions>
|
||||
<div class="flex-grow-1">
|
||||
<button i18n mat-button [mat-dialog-close]="undefined">Cancel</button>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
color="primary"
|
||||
mat-flat-button
|
||||
[disabled]="!isDisclaimerChecked"
|
||||
(click)="createAccount()"
|
||||
>
|
||||
</button>
|
||||
<ng-container i18n>Continue</ng-container>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<p i18n>
|
||||
I agree to have stored my <i>Security Token</i> from above in a secure
|
||||
place. If I lose it, I cannot get my account back.
|
||||
</p>
|
||||
</div>
|
||||
<div class="justify-content-end" mat-dialog-actions>
|
||||
<button i18n mat-flat-button [mat-dialog-close]="undefined">Cancel</button>
|
||||
<button
|
||||
color="primary"
|
||||
mat-flat-button
|
||||
[disabled]="isAgreeButtonDisabled"
|
||||
[mat-dialog-close]="data"
|
||||
>
|
||||
<span i18n>Agree and continue</span>
|
||||
<ion-icon class="ml-1" name="arrow-forward-outline" />
|
||||
</button>
|
||||
</mat-step>
|
||||
<mat-step editable="false">
|
||||
<ng-template i18n matStepLabel>Security Token</ng-template>
|
||||
<div class="pt-2">
|
||||
<ng-container i18n
|
||||
>Here is your security token. It is only visible once, please store
|
||||
and keep it in a safe place.</ng-container
|
||||
>
|
||||
</div>
|
||||
<mat-form-field appearance="outline" class="pt-3 w-100 without-hint">
|
||||
<mat-label i18n>Security Token</mat-label>
|
||||
<textarea
|
||||
cdkTextareaAutosize
|
||||
matInput
|
||||
readonly
|
||||
type="text"
|
||||
[(value)]="accessToken"
|
||||
></textarea>
|
||||
<div class="float-right mt-1">
|
||||
<button
|
||||
color="secondary"
|
||||
mat-flat-button
|
||||
[cdkCopyToClipboard]="accessToken"
|
||||
(click)="enableCreateAccountButton()"
|
||||
>
|
||||
<ion-icon class="mr-1" name="copy-outline" />
|
||||
<span i18n>Copy to clipboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
<div align="end" class="mt-1" mat-dialog-actions>
|
||||
<div>
|
||||
<button
|
||||
color="primary"
|
||||
mat-flat-button
|
||||
matStepperNext
|
||||
[disabled]="isCreateAccountButtonDisabled"
|
||||
[mat-dialog-close]="authToken"
|
||||
>
|
||||
<span i18n>Create Account</span>
|
||||
<ion-icon class="ml-1" name="arrow-forward-outline" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-step>
|
||||
|
||||
<ng-template matStepperIcon="done">
|
||||
<ion-icon name="checkmark-outline"></ion-icon>
|
||||
</ng-template>
|
||||
</mat-stepper>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
@ -1,2 +1,6 @@
|
||||
:host {
|
||||
.mat-mdc-dialog-actions {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue