### 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
keyForm loading matcher submitted
###### Methods
Async login Async ngOnInit Async onSubmit switchWindows toggleDisplay
###### Accessors
keyFormStub

### Constructor

`constructor(authService: AuthService, formBuilder: FormBuilder, router: Router, errorDialogService: ErrorDialogService)`
Defined in src/app/auth/auth.component.ts:19
Parameters :
Name | Type | Optional
authService | `AuthService` | No
formBuilder | `FormBuilder` | No
router | `Router` | No
errorDialogService | `ErrorDialogService` | No

### Methods

Async login
`login()`
Defined in src/app/auth/auth.component.ts:53
Returns : `Promise<void>`

Async ngOnInit
`ngOnInit()`
Defined in src/app/auth/auth.component.ts:28
Returns : `Promise<void>`

Async onSubmit
`onSubmit()`
Defined in src/app/auth/auth.component.ts:41
Returns : `Promise<void>`

switchWindows
`switchWindows()`
Defined in src/app/auth/auth.component.ts:66
Returns : `void`

toggleDisplay
`toggleDisplay(element: any)`
Defined in src/app/auth/auth.component.ts:73
Parameters :
Name | Type | Optional
element | `any` | No
Returns : `void`

### Properties

keyForm
Type : `FormGroup`
Defined in src/app/auth/auth.component.ts:16

loading
Type : `boolean`
Default value : `false`
Defined in src/app/auth/auth.component.ts:18

matcher
Type : `CustomErrorStateMatcher`
Default value : `new CustomErrorStateMatcher()`
Defined in src/app/auth/auth.component.ts:19

submitted
Type : `boolean`
Default value : `false`
Defined in src/app/auth/auth.component.ts:17

### Accessors

keyFormStub
get `keyFormStub()`
Defined in src/app/auth/auth.component.ts:37

    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 ""