src/app/auth/auth.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-auth |
| styleUrls | ./auth.component.scss |
| templateUrl | ./auth.component.html |
Properties |
Methods |
|
Accessors |
constructor(authService: AuthService, formBuilder: FormBuilder, router: Router, errorDialogService: ErrorDialogService)
|
|||||||||||||||
|
Defined in src/app/auth/auth.component.ts:18
|
|||||||||||||||
|
Parameters :
|
| Async login |
login()
|
|
Defined in src/app/auth/auth.component.ts:52
|
|
Returns :
Promise<void>
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/auth/auth.component.ts:27
|
|
Returns :
void
|
| Async onSubmit |
onSubmit()
|
|
Defined in src/app/auth/auth.component.ts:40
|
|
Returns :
Promise<void>
|
| switchWindows |
switchWindows()
|
|
Defined in src/app/auth/auth.component.ts:65
|
|
Returns :
void
|
| toggleDisplay | ||||||
toggleDisplay(element: any)
|
||||||
|
Defined in src/app/auth/auth.component.ts:72
|
||||||
|
Parameters :
Returns :
void
|
| keyForm |
Type : FormGroup
|
|
Defined in src/app/auth/auth.component.ts:15
|
| loading |
Type : boolean
|
Default value : false
|
|
Defined in src/app/auth/auth.component.ts:17
|
| matcher |
Type : CustomErrorStateMatcher
|
Default value : new CustomErrorStateMatcher()
|
|
Defined in src/app/auth/auth.component.ts:18
|
| submitted |
Type : boolean
|
Default value : false
|
|
Defined in src/app/auth/auth.component.ts:16
|
| keyFormStub |
getkeyFormStub()
|
|
Defined in src/app/auth/auth.component.ts:36
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomErrorStateMatcher } from '@app/_helpers';
import { AuthService } from '@app/_services';
import { ErrorDialogService } from '@app/_services/error-dialog.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-auth',
templateUrl: './auth.component.html',
styleUrls: ['./auth.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AuthComponent implements OnInit {
keyForm: FormGroup;
submitted: boolean = false;
loading: boolean = false;
matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
constructor(
private authService: AuthService,
private formBuilder: FormBuilder,
private router: Router,
private errorDialogService: ErrorDialogService
) {}
ngOnInit(): void {
this.keyForm = this.formBuilder.group({
key: ['', Validators.required],
});
if (this.authService.getPrivateKey()) {
this.authService.loginView();
}
}
get keyFormStub(): any {
return this.keyForm.controls;
}
async onSubmit(): Promise<void> {
this.submitted = true;
if (this.keyForm.invalid) {
return;
}
this.loading = true;
await this.authService.setKey(this.keyFormStub.key.value);
this.loading = false;
}
async login(): Promise<void> {
try {
const loginResult = await this.authService.login();
if (loginResult) {
this.router.navigate(['/home']);
}
} catch (HttpError) {
this.errorDialogService.openDialog({
message: 'Failed to login please try again.',
});
}
}
switchWindows(): void {
const divOne: HTMLElement = document.getElementById('one');
const divTwo: HTMLElement = document.getElementById('two');
this.toggleDisplay(divOne);
this.toggleDisplay(divTwo);
}
toggleDisplay(element: any): void {
const style: string = window.getComputedStyle(element).display;
if (style === 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block';
}
}
}
<app-network-status></app-network-status>
<div class="container">
<div class="row justify-content-center mt-5 mb-5">
<div class="col-lg-6 col-md-8 col-sm-10">
<div class="card">
<mat-card-title class="card-header pt-4 pb-4 text-center background-dark">
<a routerLink="/">
<h1 class="text-white">CICADA</h1>
</a>
</mat-card-title>
<div id="one" style="display: block" class="card-body p-4">
<div class="text-center w-75 m-auto">
<h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>
</div>
<form [formGroup]="keyForm" (ngSubmit)="onSubmit()">
<mat-form-field appearance="outline" class="full-width">
<mat-label>Private Key</mat-label>
<textarea
matInput
style="height: 30rem"
formControlName="key"
placeholder="Enter your private key..."
[errorStateMatcher]="matcher"
></textarea>
<div *ngIf="submitted && keyFormStub.key.errors" class="invalid-feedback">
<mat-error *ngIf="keyFormStub.key.errors.required"
>Private Key is required.</mat-error
>
</div>
</mat-form-field>
<button mat-raised-button matRipple color="primary" type="submit" [disabled]="loading">
<span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
Add Key
</button>
</form>
</div>
<div id="two" style="display: none" class="card-body p-4 align-items-center">
<div class="text-center w-75 m-auto">
<h4 id="state" class="text-dark-50 text-center font-weight-bold"></h4>
<button mat-raised-button matRipple color="primary" type="submit" (click)="login()">
Login
</button>
</div>
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">
Change private key?
<a (click)="switchWindows()" class="text-muted ml-1"><b>Enter private key</b></a>
</p>
</div>
<!-- end col-->
</div>
<!-- end row -->
</div>
</div>
</div>
</div>
</div>
./auth.component.scss