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)
|
||||||||||||
|
Defined in src/app/auth/auth.component.ts:17
|
||||||||||||
|
Parameters :
|
| login |
login()
|
|
Defined in src/app/auth/auth.component.ts:48
|
|
Returns :
void
|
| Async ngOnInit |
ngOnInit()
|
|
Defined in src/app/auth/auth.component.ts:25
|
|
Returns :
Promise<void>
|
| Async onSubmit |
onSubmit()
|
|
Defined in src/app/auth/auth.component.ts:38
|
|
Returns :
Promise<void>
|
| switchWindows |
switchWindows()
|
|
Defined in src/app/auth/auth.component.ts:59
|
|
Returns :
void
|
| toggleDisplay | ||||||
toggleDisplay(element: any)
|
||||||
|
Defined in src/app/auth/auth.component.ts:67
|
||||||
|
Parameters :
Returns :
void
|
| keyForm |
Type : FormGroup
|
|
Defined in src/app/auth/auth.component.ts:14
|
| loading |
Type : boolean
|
Default value : false
|
|
Defined in src/app/auth/auth.component.ts:16
|
| matcher |
Type : CustomErrorStateMatcher
|
Default value : new CustomErrorStateMatcher()
|
|
Defined in src/app/auth/auth.component.ts:17
|
| submitted |
Type : boolean
|
Default value : false
|
|
Defined in src/app/auth/auth.component.ts:15
|
| 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 {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
) { }
async ngOnInit(): Promise<void> {
this.keyForm = this.formBuilder.group({
key: ['', Validators.required],
});
await this.authService.init();
// if (this.authService.privateKey !== undefined) {
// const setKey = await this.authService.setKey(this.authService.privateKey);
// }
// }
}
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;
}
login(): void {
// TODO check if we have privatekey
// Send us to home if we have a private key
// talk to meta somehow
// in the error interceptor if 401/403 handle it
// if 200 go /home
if (this.authService.getPrivateKey()) {
this.router.navigate(['/home']);
}
}
switchWindows(): void {
this.authService.sessionToken = undefined;
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';
}
}
}
<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 bg-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