Move auth component files.

package-lock.json

@@ -2293,7 +2293,6 @@
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
       "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
-      "dev": true,
       "requires": {
         "bn.js": "^4.0.0",
         "inherits": "^2.0.1",
@@ -2304,8 +2303,7 @@
         "bn.js": {
           "version": "4.11.9",
           "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
-          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
-          "dev": true
         }
       }
     },
@@ -5424,8 +5422,7 @@
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
-      "dev": true
     },
     "handle-thing": {
       "version": "2.0.1",
@@ -5996,8 +5993,7 @@
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
-      "dev": true
     },
     "indent-string": {
       "version": "4.0.0",
@@ -6036,8 +6032,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-      "dev": true
     },
     "ini": {
       "version": "1.3.5",
@@ -7653,8 +7648,7 @@
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
-      "dev": true
     },
     "minimalistic-crypto-utils": {
       "version": "1.0.1",
@@ -7874,6 +7868,11 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
     "node-fetch-npm": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz",
@@ -7930,6 +7929,14 @@
         }
       }
     },
+    "node-localstorage": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-localstorage/-/node-localstorage-1.3.1.tgz",
+      "integrity": "sha512-NMWCSWWc6JbHT5PyWlNT2i8r7PgGYXVntmKawY83k/M0UJScZ5jirb61TLnqKwd815DfBQu+lR3sRw08SPzIaQ==",
+      "requires": {
+        "write-file-atomic": "^1.1.4"
+      }
+    },
     "node-releases": {
       "version": "1.1.65",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.65.tgz",
@@ -8337,6 +8344,16 @@
         "is-wsl": "^2.1.1"
       }
     },
+    "openpgp": {
+      "version": "4.10.10",
+      "resolved": "https://registry.npmjs.org/openpgp/-/openpgp-4.10.10.tgz",
+      "integrity": "sha512-Ub48OogGPjNsr0G/wnJ/SyAQzt/tfcXZTWVZdjKFpXCQV1Ca+upFdSPPkBlGG3lb9EQGOKZJ2tzYNH6ZyKMkDQ==",
+      "requires": {
+        "asn1.js": "^5.0.0",
+        "node-fetch": "^2.1.2",
+        "node-localstorage": "~1.3.0"
+      }
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
@@ -10686,8 +10703,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-      "dev": true
     },
     "sass": {
       "version": "1.26.10",
@@ -11048,6 +11064,11 @@
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true
     },
+    "slide": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
+      "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc="
+    },
     "smart-buffer": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.1.0.tgz",
@@ -13661,6 +13682,16 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
     },
+    "write-file-atomic": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.3.4.tgz",
+      "integrity": "sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8=",
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "imurmurhash": "^0.1.4",
+        "slide": "^1.1.5"
+      }
+    },
     "ws": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~10.2.0",
     "@angular/platform-browser-dynamic": "~10.2.0",
     "@angular/router": "~10.2.0",
+    "openpgp": "^4.10.10",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

src/app/auth/add-key/add-key.component.html

@@ -1,69 +0,0 @@
-<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" name="privateKeyAsc" id="privateKeyAsc" 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 class="text-dark-50 text-center font-weight-bold">Enter Passphrase</h4>
-          </div>
-
-          <form [formGroup]="passphraseForm" (ngSubmit)="login()">
-
-            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Passphrase</mat-label>
-              <input matInput name="state" id="state" formControlName="passphrase"
-                     placeholder="Enter your passphrase..." [errorStateMatcher]="matcher">
-              <div *ngIf="submitted && passphraseFormStub.passphrase.errors" class="invalid-feedback">
-                <mat-error *ngIf="passphraseFormStub.passphrase.errors.required">Passphrase is required.</mat-error>
-              </div>
-            </mat-form-field>
-
-            <div class="form-group mb-0 text-center">
-              <button mat-raised-button matRipple color="primary" type="submit">
-  <!--              <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>-->
-                Login
-              </button>
-            </div>
-          </form>
-
-          <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>

src/app/auth/add-key/add-key.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AddKeyComponent } from './add-key.component';
-
-describe('AddKeyComponent', () => {
-  let component: AddKeyComponent;
-  let fixture: ComponentFixture<AddKeyComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AddKeyComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AddKeyComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/auth/add-key/add-key.component.ts

@@ -1,88 +0,0 @@
-import {AfterViewInit, Component, OnInit, Renderer2} from '@angular/core';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {CustomErrorStateMatcher} from '../../_helpers';
-import {AuthService} from '../../_services';
-
-@Component({
-  selector: 'app-add-key',
-  templateUrl: './add-key.component.html',
-  styleUrls: ['./add-key.component.scss']
-})
-export class AddKeyComponent implements OnInit, AfterViewInit {
-  keyForm: FormGroup;
-  passphraseForm: FormGroup;
-  submitted: boolean = false;
-  loading: boolean = false;
-  matcher = new CustomErrorStateMatcher();
-
-  constructor(
-    private authService: AuthService,
-    private formBuilder: FormBuilder,
-    private renderer: Renderer2
-  ) { }
-
-  ngAfterViewInit(): void {
-    console.log(window.location);
-    const xhr = new XMLHttpRequest();
-    xhr.responseType = 'text';
-    xhr.open('GET', window.location.origin + '/privatekey.asc');
-    xhr.onload = (e) => {
-      if (xhr.status !== 200) {
-        console.warn('failed to autoload private key ciphertext');
-        return;
-      }
-      (document.getElementById('privateKeyAsc') as HTMLInputElement).value = xhr.responseText;
-    };
-    xhr.send();
-  }
-
-  ngOnInit(): void {
-    this.keyForm = this.formBuilder.group({
-      key: ['', Validators.required],
-    });
-    this.passphraseForm = this.formBuilder.group({
-      passphrase: ['', Validators.required],
-    });
-    if (this.authService.privateKey !== undefined ) {
-      this.authService.setKey(this.authService.privateKey).then(r => {
-        if (this.authService.sessionToken !== undefined) {
-          this.authService.setState(
-            'click to perform login ' + this.authService.sessionLoginCount + ' with token ' + this.authService.sessionToken);
-        }
-      });
-    }
-  }
-
-  get keyFormStub(): any { return this.keyForm.controls; }
-  get passphraseFormStub(): any { return this.passphraseForm.controls; }
-
-  onSubmit(): void {
-    this.submitted = true;
-
-    if (this.keyForm.invalid) { return; }
-
-    this.loading = true;
-    this.authService.setKey(this.keyFormStub.key.value).then();
-  }
-
-  login(): void {
-    // if (this.passphraseForm.invalid) { return; }
-    this.authService.login();
-  }
-
-  switchWindows(): void {
-    const divOne = document.getElementById('one');
-    const divTwo = document.getElementById('two');
-    this.toggleDisplay(divOne);
-    this.toggleDisplay(divTwo);
-  }
-
-  toggleDisplay(element: any): void {
-    const style = window.getComputedStyle(element).display;
-    if (style === 'block') {
-      element.style.display = 'none';
-    } else {
-      element.style.display = 'block';
-    }
-  }
-}

src/app/auth/auth-routing.module.ts

@@ -2,10 +2,9 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { AuthComponent } from './auth.component';
-import {AddKeyComponent} from './add-key/add-key.component';
 
 const routes: Routes = [
-  { path: '', component: AddKeyComponent },
+  { path: '', component: AuthComponent },
   { path: '**', redirectTo: '', pathMatch: 'full'},
 ];
 

src/app/auth/auth.component.html

@@ -2,98 +2,68 @@
   <div class="row justify-content-center mt-5 mb-5">
     <div class="col-lg-6 col-md-8 col-sm-10">
       <div class="card">
-        <!-- Logo-->
+        <mat-card-title class="card-header pt-4 pb-4 text-center bg-dark">
-        <div class="card-header pt-4 pb-4 text-center bg-dark">
           <a routerLink="/">
-            <!--            <span><img src="assets/images/logo.png" alt="" height="18"></span>-->
+            <h1 class="text-white">CICADA</h1>
-            <h1 class="text-white">CIC CLIENT</h1>
           </a>
-        </div>
+        </mat-card-title>
-
+        <div  id="one" style="display: block" class="card-body p-4">
-        <div class="card-body p-4">
 
           <div class="text-center w-75 m-auto">
-            <h4 class="text-dark-50 text-center mt-0 font-weight-bold">Sign Up</h4>
+            <h4 class="text-dark-50 text-center font-weight-bold">Add Private Key</h4>
           </div>
 
-          <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+          <form [formGroup]="keyForm" (ngSubmit)="onSubmit()">
 
-            <div class="form-group">
+            <mat-form-field appearance="outline" class="full-width">
-              <label for="emailaddress">Email address</label>
+              <mat-label>Private Key</mat-label>
-              <input class="form-control" type="email" id="emailaddress" required placeholder="Enter your email" formControlName="email" [ngClass]="{ 'is-invalid': submitted && form.email.errors }">
+              <textarea matInput style="height: 30rem" name="privateKeyAsc" id="privateKeyAsc" formControlName="key"
-              <div *ngIf="submitted && form.email.errors" class="invalid-feedback">
+                        placeholder="Enter your private key..." [errorStateMatcher]="matcher"></textarea>
-                <div *ngIf="form.email.errors.required">Email is required</div>
+              <div *ngIf="submitted && keyFormStub.key.errors" class="invalid-feedback">
-              </div>
+                <mat-error *ngIf="keyFormStub.key.errors.required">Private Key is required.</mat-error>
               </div>
+            </mat-form-field>
 
-            <div class="form-group">
+            <button mat-raised-button matRipple color="primary" type="submit" [disabled]="loading">
-              <label for="password">Password</label>
-              <div class="input-group input-group-merge">
-                <input type="password" id="password" class="form-control" placeholder="Enter your password" formControlName="password" [ngClass]="{ 'is-invalid': submitted && form.password.errors }" required>
-                <div class="input-group-append" data-password="false" appPasswordToggle [id]="'password'" [iconId]="'icon'">
-                  <div class="input-group-text">
-                    <span id="icon" class="fa fa-eye"></span>
-                  </div>
-                </div>
-                <div *ngIf="submitted && form.password.errors" class="invalid-feedback">
-                  <div *ngIf="form.password.errors.required">Password is required</div>
-                  <div *ngIf="form.password.errors.hasCapitalCase">Should contain at least 1 uppercase alphabet</div>
-                  <div *ngIf="form.password.errors.hasSmallCase">Should contain at least 1 lowercase alphabet</div>
-                  <div *ngIf="form.password.errors.hasNumber">Should contain at least 1 number</div>
-                  <div *ngIf="form.password.errors.minlength">Should be at least 8 characters</div>
-                </div>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label for="confirmPassword">Confirm Password</label>
-              <div class="input-group input-group-merge">
-                <input type="password" id="confirmPassword" class="form-control" placeholder="Enter your password" formControlName="confirmPasword" [ngClass]="{ 'is-invalid': submitted && form.confirmPassword.errors }" required>
-                <div class="input-group-append" data-password="false">
-                  <div class="input-group-text" appPasswordToggle [id]="'confirmPassword'" [iconId]="'icon2'">
-                    <span id="icon2" class="fa fa-eye"></span>
-                  </div>
-                </div>
-                <div *ngIf="submitted && form.confirmPassword.errors" class="invalid-feedback">
-                  <div *ngIf="form.confirmPassword.errors.required">Password is required</div>
-                  <div *ngIf="form.confirmPassword.errors.NoPasswordMatch">Your passwords do not match</div>
-                </div>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" id="checkbox-signup" formControlName="terms" [ngClass]="{ 'is-invalid': submitted && form.terms.errors }" required>
-                <label class="custom-control-label" for="checkbox-signup">I accept <a href="#" class="text-muted">Terms and Conditions</a></label>
-                <div *ngIf="submitted && form.terms.errors" class="invalid-feedback">
-                  <div *ngIf="form.terms.errors.required">Accept terms and conditions to continue!</div>
-                </div>
-              </div>
-            </div>
-
-            <div class="form-group mb-0 text-center">
-              <button matRipple mat-raised-button color="primary" type="submit" [disabled]="loading">
               <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
-                Sign Up
+              Add Key
             </button>
-            </div>
-            <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
 
           </form>
-        </div> <!-- end card-body -->
         </div>
-      <!-- end card -->
+        <div  id="two" style="display: none" class="card-body p-4 align-items-center">
+
+          <div class="text-center w-75 m-auto">
+            <h4 class="text-dark-50 text-center font-weight-bold">Enter Passphrase</h4>
+          </div>
+
+          <form [formGroup]="passphraseForm" (ngSubmit)="login()">
+
+            <mat-form-field appearance="outline" class="full-width">
+              <mat-label>Passphrase</mat-label>
+              <input matInput name="state" id="state" formControlName="passphrase"
+                     placeholder="Enter your passphrase..." [errorStateMatcher]="matcher">
+              <div *ngIf="submitted && passphraseFormStub.passphrase.errors" class="invalid-feedback">
+                <mat-error *ngIf="passphraseFormStub.passphrase.errors.required">Passphrase is required.</mat-error>
+              </div>
+            </mat-form-field>
+
+            <div class="form-group mb-0 text-center">
+              <button mat-raised-button matRipple color="primary" type="submit">
+                <!--              <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>-->
+                Login
+              </button>
+            </div>
+          </form>
 
           <div class="row mt-3">
             <div class="col-12 text-center">
-          <p class="text-muted">Already have account? <a routerLink="/auth/key" class="text-muted ml-1"><b>Log In</b></a></p>
+              <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> <!-- end col -->
         </div>
-  <!-- end row -->
+      </div>
+    </div>
+  </div>
 </div>
-<!-- end container -->
-<!--<app-footer></app-footer>-->

src/app/auth/auth.component.ts

@@ -1,51 +1,89 @@
-import { Component, OnInit } from '@angular/core';
+import {AfterViewInit, Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {CustomValidator} from '../_helpers';
+import {CustomErrorStateMatcher, CustomValidator} from '../_helpers';
+import {AuthService} from '../_services';
 
 @Component({
   selector: 'app-auth',
   templateUrl: './auth.component.html',
   styleUrls: ['./auth.component.scss']
 })
-export class AuthComponent implements OnInit {
+export class AuthComponent implements OnInit, AfterViewInit {
-  registerForm: FormGroup;
+  keyForm: FormGroup;
+  passphraseForm: FormGroup;
   submitted: boolean = false;
   loading: boolean = false;
-  error: any;
+  matcher = new CustomErrorStateMatcher();
 
   constructor(
+    private authService: AuthService,
     private formBuilder: FormBuilder,
   ) { }
 
   ngOnInit(): void {
-    this.registerForm = this.formBuilder.group({
+    this.keyForm = this.formBuilder.group({
-      email: ['', Validators.required],
+      key: ['', Validators.required],
-      password: ['', [
+    });
-        // 1. Password Field is Required
+    this.passphraseForm = this.formBuilder.group({
-        Validators.required,
+      passphrase: ['', Validators.required],
-        // 2. check whether the entered password has a number
+    });
-        CustomValidator.patternValidator(/\d/, { hasNumber: true }),
+    if (this.authService.privateKey !== undefined ) {
-        // 3. check whether the entered password has upper case letter
+      this.authService.setKey(this.authService.privateKey).then(r => {
-        CustomValidator.patternValidator(/[A-Z]/, { hasCapitalCase: true }),
+        if (this.authService.sessionToken !== undefined) {
-        // 4. check whether the entered password has a lower-case letter
+          this.authService.setState(
-        CustomValidator.patternValidator(/[a-z]/, { hasSmallCase: true }),
+            'click to perform login ' + this.authService.sessionLoginCount + ' with token ' + this.authService.sessionToken);
-        // 6. Has a minimum length of 8 characters
+        }
-        Validators.minLength(8)]],
-      confirmPassword: ['', Validators.required],
-      terms: ['', Validators.required]
-    }, {
-      // validator for the form group
-      validator: CustomValidator.passwordMatchValidator
       });
     }
+  }
 
-  get form(): any { return this.registerForm.controls; }
+  ngAfterViewInit(): void {
+    console.log(window.location);
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = 'text';
+    xhr.open('GET', window.location.origin + '/privatekey.asc');
+    xhr.onload = (e) => {
+      if (xhr.status !== 200) {
+        console.warn('failed to autoload private key ciphertext');
+        return;
+      }
+      (document.getElementById('privateKeyAsc') as HTMLInputElement).value = xhr.responseText;
+    };
+    xhr.send();
+  }
+
+  get keyFormStub(): any { return this.keyForm.controls; }
+  get passphraseFormStub(): any { return this.passphraseForm.controls; }
 
   onSubmit(): void {
     this.submitted = true;
 
-    if (this.registerForm.invalid) { return; }
+    if (this.keyForm.invalid) { return; }
 
     this.loading = true;
+    this.authService.setKey(this.keyFormStub.key.value).then();
+    this.loading = false;
+  }
+
+  login(): void {
+    // if (this.passphraseForm.invalid) { return; }
+    this.authService.login();
+  }
+
+  switchWindows(): void {
+    this.authService.sessionToken = undefined;
+    const divOne = document.getElementById('one');
+    const divTwo = document.getElementById('two');
+    this.toggleDisplay(divOne);
+    this.toggleDisplay(divTwo);
+  }
+
+  toggleDisplay(element: any): void {
+    const style = window.getComputedStyle(element).display;
+    if (style === 'block') {
+      element.style.display = 'none';
+    } else {
+      element.style.display = 'block';
+    }
   }
 }

src/app/auth/auth.module.ts

@@ -5,7 +5,6 @@ import { AuthRoutingModule } from './auth-routing.module';
 import { AuthComponent } from './auth.component';
 import {ReactiveFormsModule} from '@angular/forms';
 import {PasswordToggleDirective} from './_directives/password-toggle.directive';
-import { AddKeyComponent } from './add-key/add-key.component';
 import {MatCardModule} from '@angular/material/card';
 import {MatSelectModule} from '@angular/material/select';
 import {MatInputModule} from '@angular/material/input';
@@ -15,7 +14,7 @@ import {MatRippleModule} from '@angular/material/core';
 
 
 @NgModule({
-  declarations: [AuthComponent, PasswordToggleDirective, AddKeyComponent],
+  declarations: [AuthComponent, PasswordToggleDirective],
   imports: [
     CommonModule,
     AuthRoutingModule,