From: Volker Theile <vtheile@suse.com>
Date: Tue, 6 Feb 2018 11:02:50 +0000 (+0100)
Subject: mgr/dashboard_v2: Add cdPasswordButton directive
X-Git-Tag: v13.0.2~84^2~80
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=4cfd508c592c92d6ffc1c06ebe5c71c137b6e937;p=ceph.git

mgr/dashboard_v2: Add cdPasswordButton directive

Signed-off-by: Volker Theile <vtheile@suse.com>
---

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 924f164a3d70..e96b1b30b8f8 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 96554e0b55a3..a535cd9fde42 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 d017d87f09a9..1f77356d2967 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 000000000000..1fc8f9c7cbb9
--- /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 000000000000..b375ba256b0a
--- /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 766db6401d0a..e4cbc3b344da 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,