From a9fcf35a5416d37972ddef4bb6618087154ea7f0 Mon Sep 17 00:00:00 2001
From: Spencer Ofwiti <maxspencer56@gmail.com>
Date: Fri, 15 Jan 2021 07:58:39 +0300
Subject: [PATCH] Add switching between key input and passphrase input.

---
 src/app/auth/add-key/add-key.component.html |  8 ++++++--
 src/app/auth/add-key/add-key.component.ts   | 19 ++++++++++++++++++-
 src/app/auth/auth.component.html            |  2 +-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/app/auth/add-key/add-key.component.html b/src/app/auth/add-key/add-key.component.html
index f482090..ffcd35c 100644
--- a/src/app/auth/add-key/add-key.component.html
+++ b/src/app/auth/add-key/add-key.component.html
@@ -19,7 +19,9 @@
               <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>
-              <mat-error *ngIf="keyFormStub.key.errors.required">Private Key is required.</mat-error>
+              <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">
@@ -41,7 +43,9 @@
               <mat-label>Passphrase</mat-label>
               <input matInput name="state" id="state" formControlName="passphrase"
                      placeholder="Enter your passphrase..." [errorStateMatcher]="matcher">
-              <mat-error *ngIf="passphraseFormStub.passphrase.errors.required">Passphrase is required.</mat-error>
+              <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>
 
             <button mat-raised-button matRipple color="primary" type="submit" [disabled]="loading">
diff --git a/src/app/auth/add-key/add-key.component.ts b/src/app/auth/add-key/add-key.component.ts
index 66ba825..4f391fe 100644
--- a/src/app/auth/add-key/add-key.component.ts
+++ b/src/app/auth/add-key/add-key.component.ts
@@ -22,7 +22,7 @@ export class AddKeyComponent implements OnInit, AfterViewInit {
   ) { }
 
   ngAfterViewInit(): void {
-    console.debug(window.location);
+    console.log(window.location);
     const xhr = new XMLHttpRequest();
     xhr.responseType = 'text';
     xhr.open('GET', window.location.origin + '/privatekey.asc');
@@ -55,10 +55,27 @@ export class AddKeyComponent implements OnInit, AfterViewInit {
 
     this.loading = true;
     this.authService.setKey(this.keyFormStub.key.value).then();
+    this.switchWindows();
   }
 
   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';
+    }
+  }
 }
diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html
index 645c061..75d6756 100644
--- a/src/app/auth/auth.component.html
+++ b/src/app/auth/auth.component.html
@@ -86,7 +86,7 @@
 
       <div class="row mt-3">
         <div class="col-12 text-center">
-          <p class="text-muted">Already have account? <a routerLink="/auth" class="text-muted ml-1"><b>Log In</b></a></p>
+          <p class="text-muted">Already have account? <a routerLink="/auth/key" class="text-muted ml-1"><b>Log In</b></a></p>
         </div> <!-- end col-->
       </div>
       <!-- end row -->