From 4cfd508c592c92d6ffc1c06ebe5c71c137b6e937 Mon Sep 17 00:00:00 2001
From: Volker Theile <vtheile@suse.com>
Date: Tue, 6 Feb 2018 12:02:50 +0100
Subject: [PATCH] mgr/dashboard_v2: Add cdPasswordButton directive

Signed-off-by: Volker Theile <vtheile@suse.com>
---
 .../frontend/src/app/core/auth/auth.module.ts |  4 +-
 .../app/core/auth/login/login.component.html  | 27 ++++++++-----
 .../app/core/auth/login/login.component.scss  |  5 +++
 .../password-button.directive.spec.ts         |  8 ++++
 .../directives/password-button.directive.ts   | 40 +++++++++++++++++++
 .../frontend/src/app/shared/shared.module.ts  | 11 ++++-
 6 files changed, 83 insertions(+), 12 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/password-button.directive.spec.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/password-button.directive.ts

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/auth.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/auth.module.ts
index 924f164a3d7..e96b1b30b8f 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/auth.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/auth.module.ts
@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { SharedModule } from '../../shared/shared.module';
 
 import { LoginComponent } from './login/login.component';
 import { LogoutComponent } from './logout/logout.component';
@@ -8,7 +9,8 @@ import { LogoutComponent } from './logout/logout.component';
 @NgModule({
   imports: [
     CommonModule,
-    FormsModule
+    FormsModule,
+    SharedModule
   ],
   declarations: [LoginComponent, LogoutComponent],
   exports: [LogoutComponent]
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/login/login.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/login/login.component.html
index 96554e0b55a..a535cd9fde4 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/login/login.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/login/login.component.html
@@ -30,16 +30,25 @@
         <!-- Password -->
         <div class="form-group has-feedback"
              [ngClass]="{'has-error': (loginForm.submitted || password.dirty) && password.invalid}">
-          <input id="password"
-                 name="password"
-                 [(ngModel)]="model.password"
-                 #password="ngModel"
-                 type="password"
-                 placeholder="Enter your password..."
-                 class="form-control"
-                 required>
+          <div class="input-group">
+            <input id="password"
+                   name="password"
+                   [(ngModel)]="model.password"
+                   #password="ngModel"
+                   type="password"
+                   placeholder="Enter your password..."
+                   class="form-control"
+                   required>
+            <span class="input-group-btn">
+              <button type="button"
+                      class="btn btn-default btn-password"
+                      cdPasswordButton="password">
+              </button>
+            </span>
+          </div>
           <div class="help-block"
-               *ngIf="(loginForm.submitted || password.dirty) && password.invalid">Password is required</div>
+               *ngIf="(loginForm.submitted || password.dirty) && password.invalid">Password is required
+          </div>
         </div>
 
         <!-- Stay signed in -->
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/login/login.component.scss
index d017d87f09a..1f77356d296 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/login/login.component.scss
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/auth/login/login.component.scss
@@ -13,11 +13,16 @@
     margin-bottom: 30px;
   }
 
+  .btn-password,
   .form-control {
     color: #ececec;
     background-color: #555555;
   }
 
+  .btn-password:focus {
+    outline-color: #66afe9;
+  }
+
   .checkbox-primary input[type="checkbox"]:checked + label::before,
   .checkbox-primary input[type="radio"]:checked + label::before {
     background-color: $oa-color-blue;
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/password-button.directive.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/password-button.directive.spec.ts
new file mode 100644
index 00000000000..1fc8f9c7cbb
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/password-button.directive.spec.ts
@@ -0,0 +1,8 @@
+import { PasswordButtonDirective } from './password-button.directive';
+
+describe('PasswordButtonDirective', () => {
+  it('should create an instance', () => {
+    const directive = new PasswordButtonDirective(null, null);
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/password-button.directive.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/password-button.directive.ts
new file mode 100644
index 00000000000..b375ba256b0
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/directives/password-button.directive.ts
@@ -0,0 +1,40 @@
+import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[cdPasswordButton]'
+})
+export class PasswordButtonDirective implements OnInit {
+  private inputElement: any;
+  private iElement: any;
+
+  @Input('cdPasswordButton') private cdPasswordButton: string;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) { }
+
+  ngOnInit() {
+    this.inputElement = document.getElementById(this.cdPasswordButton);
+    this.iElement = this.renderer.createElement('i');
+    this.renderer.addClass(this.iElement, 'icon-prepend');
+    this.renderer.addClass(this.iElement, 'fa');
+    this.renderer.appendChild(this.el.nativeElement, this.iElement);
+    this.update();
+  }
+
+  private update() {
+    if (this.inputElement.type === 'text') {
+      this.renderer.removeClass(this.iElement, 'fa-eye');
+      this.renderer.addClass(this.iElement, 'fa-eye-slash');
+    } else {
+      this.renderer.removeClass(this.iElement, 'fa-eye-slash');
+      this.renderer.addClass(this.iElement, 'fa-eye');
+    }
+  }
+
+  @HostListener('click')
+  onClick() {
+    // Modify the type of the input field.
+    this.inputElement.type = (this.inputElement.type === 'password') ? 'text' : 'password';
+    // Update the button icon/tooltip.
+    this.update();
+  }
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
index 766db6401d0..e4cbc3b344d 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ComponentsModule } from './components/components.module';
+import { PasswordButtonDirective } from './directives/password-button.directive';
 import { PipesModule } from './pipes/pipes.module';
 import { AuthGuardService } from './services/auth-guard.service';
 import { AuthStorageService } from './services/auth-storage.service';
@@ -18,8 +19,14 @@ import { ServicesModule } from './services/services.module';
     ComponentsModule,
     ServicesModule
   ],
-  exports: [PipesModule, ServicesModule],
-  declarations: [],
+  exports: [
+    PipesModule,
+    ServicesModule,
+    PasswordButtonDirective
+  ],
+  declarations: [
+    PasswordButtonDirective
+  ],
   providers: [
     AuthService,
     AuthStorageService,
-- 
2.39.5