WIP

APP/src/components/password-input/password-input.component.html

@@ -0,0 +1,11 @@
+<div class="input-group">
+  <input #password nbInput fullWidth name='passwordInput{{uuid}}' [type]="fieldTextType ? 'text' : 'password'"
+    (blur)="onBlur()" [(ngModel)]="text" />
+  <div class="input-group-append">
+    <button nbButton hero type="button" tabindex="-1" size="small" status="primary"
+      nbTooltip="{{ fieldTextType ? 'Hide password' : 'Show password' }}" nbTooltipStatus="primary"
+      (click)="toggleFieldTextType()" [disabled]="disabledState">
+      <nb-icon [icon]="fieldTextType ? 'eye-outline' : 'eye-off-outline'" pack="eva"></nb-icon>
+    </button>
+  </div>
+</div>

APP/src/components/password-input/password-input.component.scss

@@ -0,0 +1,19 @@
+:host {
+  flex: auto;
+  display: contents;
+}
+
+.input-group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+
+  input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .input-group-append {
+    flex-shrink: 0;
+  }
+}

APP/src/components/password-input/password-input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { PasswordInputComponent } from './password-input.component';
+import { PasswordInputModule } from './password-input.module';
+
+describe('PasswordInputComponent', () => {
+  let component: PasswordInputComponent;
+  let fixture: ComponentFixture<PasswordInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormsModule, PasswordInputModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PasswordInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

APP/src/components/password-input/password-input.component.ts

@@ -0,0 +1,78 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { UuidUtils } from '../../utilities/uuid-utils';
+
+@Component({
+  selector: 'rbj-password-input',
+  templateUrl: './password-input.component.html',
+  styleUrl: './password-input.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PasswordInputComponent),
+      multi: true,
+    },
+  ],
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+})
+export class PasswordInputComponent implements ControlValueAccessor {
+  private _value = '';
+  disabledState = false;
+  uuid: string = UuidUtils.generate();
+  /**
+   *
+   */
+  constructor(
+    private cdRef: ChangeDetectorRef,
+  ) {
+
+  }
+  @Input() id = '';
+  @Input() placeholder = 'Passphrase';
+  text: string = '';
+
+
+  onChange = (value: string) => { };
+  onTouched = () => { };
+  @Output() blur = new EventEmitter<string>();
+
+  fieldTextType = false;
+
+  toggleFieldTextType(): void {
+    this.fieldTextType = !this.fieldTextType;
+  }
+
+  writeValue(value: string): void {
+    if (value != this.lastBlurValue) {
+      this.text = value;
+      this.lastBlurValue = value;
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabledState = isDisabled;
+  }
+
+  lastBlurValue: string = '';
+  onBlur() {
+    if (this.lastBlurValue != this.text) {
+      this.lastBlurValue = this.text;
+      this.blur.emit(this.text);
+    }
+  }
+}

APP/src/components/password-input/password-input.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NbInputModule, NbButtonModule, NbIconModule, NbTooltipModule } from '@nebular/theme';
+import { PasswordInputComponent } from './password-input.component';
+
+@NgModule({
+  declarations: [PasswordInputComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    NbInputModule,
+    NbButtonModule,
+    NbIconModule,
+    NbTooltipModule,
+  ],
+  exports: [PasswordInputComponent],
+})
+export class PasswordInputModule {}