mirror of https://github.com/ghostfolio/ghostfolio
Tobias Kugel
8 months ago
committed by
GitHub
GitHub
7 changed files with 151 additions and 72 deletions
@ -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