Add password toggle directive.

src/app/_directives/index.ts

@@ -0,0 +1 @@
+// export * from 'password-toggle.directive';

src/app/_directives/password-toggle.directive.spec.ts

@@ -0,0 +1,8 @@
+import { PasswordToggleDirective } from './password-toggle.directive';
+
+describe('PasswordToggleDirective', () => {
+  it('should create an instance', () => {
+    const directive = new PasswordToggleDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/_directives/password-toggle.directive.ts

@@ -0,0 +1,36 @@
+import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
+
+@Directive({
+  selector: '[appPasswordToggle]'
+})
+export class PasswordToggleDirective {
+  @Input()
+  id: string;
+  iconId: string;
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+  ) {
+    this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
+      this.togglePasswordVisibility();
+    });
+  }
+
+  togglePasswordVisibility(): void {
+    const password = document.getElementById(this.id);
+    const icon = document.getElementById(this.iconId);
+    // @ts-ignore
+    if (password.type === 'password') {
+      // @ts-ignore
+      password.type = 'text';
+      icon.classList.remove('fa-eye');
+      icon.classList.add('fa-eye-slash');
+    } else {
+      // @ts-ignore
+      password.type = 'password';
+      icon.classList.remove('fa-eye-slash');
+      icon.classList.add('fa-eye');
+    }
+  }
+}