File

src/app/auth/auth.component.ts

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector app-auth
styleUrls ./auth.component.scss
templateUrl ./auth.component.html

Index

Properties
Methods
Accessors

Constructor

constructor(authService: AuthService, formBuilder: FormBuilder, router: Router, errorDialogService: ErrorDialogService)
Parameters :
Name Type Optional
authService AuthService No
formBuilder FormBuilder No
router Router No
errorDialogService ErrorDialogService No

Methods

Async login
login()
Returns : Promise<void>
Async ngOnInit
ngOnInit()
Returns : Promise<void>
Async onSubmit
onSubmit()
Returns : Promise<void>
switchWindows
switchWindows()
Returns : void
toggleDisplay
toggleDisplay(element: any)
Parameters :
Name Type Optional
element any No
Returns : void

Properties

keyForm
Type : FormGroup
loading
Type : boolean
Default value : false
matcher
Type : CustomErrorStateMatcher
Default value : new CustomErrorStateMatcher()
submitted
Type : boolean
Default value : false

Accessors

keyFormStub
getkeyFormStub()
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 { LoggingService } from '@app/_services/logging.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
  ) {}

  async ngOnInit(): Promise<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: HttpError.message,
      });
    }
  }

  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

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""