Fix/mask generic inputs (#1570)

* add masking to generic input component

* clear inputs after submission

* adjust convenience FE make steps

* cleaner masking

* remove mask pipe from module

* switch to redacted font

Makefile

@@ -83,4 +83,7 @@ patch-db/client/dist: $(PATCH_DB_CLIENT_SRC) patch-db/client/node_modules
 	npm --prefix patch-db/client run build
 
 # this is a convenience step to build all frontends - it is not referenced elsewhere in this file
-frontend: frontend/node_modules frontend/config.json $(EMBASSY_UIS) 
+frontends: frontend/node_modules frontend/config.json $(EMBASSY_UIS) 
+
+# this is a convenience step to build the UI
+ui: frontend/node_modules frontend/config.json frontend/dist/ui

frontend/projects/ui/src/app/components/form-object/form-object.component.html

@@ -72,6 +72,12 @@
             <ion-input
               type="text"
               [inputmode]="spec.type === 'number' ? 'tel' : 'text'"
+              [class.redacted]="
+                spec.type === 'string' &&
+                entry.value.value &&
+                spec.masked &&
+                !unmasked[entry.key]
+              "
               [placeholder]="spec.placeholder || 'Enter ' + spec.name"
               [formControlName]="entry.key"
               (ionFocus)="presentAlertChangeWarning(entry.key, spec)"
@@ -80,7 +86,7 @@
             </ion-input>
           </ng-template>
           <!-- removing mask button until proper solution implemented -->
-          <!-- <ion-button
+          <ion-button
             *ngIf="spec.type === 'string' && spec.masked"
             slot="end"
             fill="clear"
@@ -92,7 +98,7 @@
               [name]="unmasked[entry.key] ? 'eye-off-outline' : 'eye-outline'"
               size="small"
             ></ion-icon>
-          </ion-button> -->
+          </ion-button>
           <ion-note
             *ngIf="spec.type === 'number' && spec.units"
             slot="end"

frontend/projects/ui/src/app/components/form-object/form-object.component.scss

@@ -10,6 +10,10 @@
   --border-color: var(--ion-color-danger-shade);
 }
 
+.redacted {
+  font-family: 'Redacted'
+}
+
 ion-input {
   font-family: 'Courier New';
   font-weight: bold;

frontend/projects/ui/src/app/modals/generic-input/generic-input.component.html

@@ -23,13 +23,13 @@
           <ion-input
             #mainInput
             type="text"
-            [(ngModel)]="value"
             name="value"
+            [ngModel]="masked ? maskedValue : value"
+            (ngModelChange)="transformInput($event)"
             [placeholder]="options.placeholder"
             (ionChange)="error = ''"
           ></ion-input>
-          <!-- removing mask button until proper solution implemented -->
-          <!-- <ion-button
+          <ion-button
             slot="end"
             *ngIf="options.useMask"
             fill="clear"
@@ -38,10 +38,10 @@
           >
             <ion-icon
               slot="icon-only"
-              [name]="unmasked ? 'eye-off-outline' : 'eye-outline'"
+              [name]="!masked ? 'eye-off-outline' : 'eye-outline'"
               size="small"
             ></ion-icon>
-          </ion-button> -->
+          </ion-button>
         </ion-item>
         <!-- error -->
         <p *ngIf="error">

frontend/projects/ui/src/app/modals/generic-input/generic-input.component.module.ts

@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
 import { RouterModule } from '@angular/router'
 import { SharedPipesModule } from '@start9labs/shared'
 import { FormsModule } from '@angular/forms'
+import { MaskPipeModule } from 'src/app/pipes/mask/mask.module'
 
 @NgModule({
   declarations: [GenericInputComponent],

frontend/projects/ui/src/app/modals/generic-input/generic-input.component.ts

@@ -1,20 +1,26 @@
 import { Component, Input, ViewChild } from '@angular/core'
 import { ModalController, IonicSafeString, IonInput } from '@ionic/angular'
 import { getErrorMessage } from '@start9labs/shared'
+import { MaskPipe } from 'src/app/pipes/mask/mask.pipe'
 
 @Component({
   selector: 'generic-input',
   templateUrl: './generic-input.component.html',
   styleUrls: ['./generic-input.component.scss'],
+  providers: [MaskPipe],
 })
 export class GenericInputComponent {
   @ViewChild('mainInput') elem: IonInput
   @Input() options: GenericInputOptions
   value: string
-  unmasked = false
+  maskedValue: string
+  masked: boolean
   error: string | IonicSafeString
 
-  constructor(private readonly modalCtrl: ModalController) {}
+  constructor(
+    private readonly modalCtrl: ModalController,
+    private readonly mask: MaskPipe,
+  ) {}
 
   ngOnInit() {
     const defaultOptions: Partial<GenericInputOptions> = {
@@ -29,6 +35,7 @@ export class GenericInputComponent {
       ...this.options,
     }
 
+    this.masked = !!this.options.useMask
     this.value = this.options.initialValue || ''
   }
 
@@ -37,13 +44,22 @@ export class GenericInputComponent {
   }
 
   toggleMask() {
-    this.unmasked = !this.unmasked
+    this.masked = !this.masked
   }
 
   cancel() {
     this.modalCtrl.dismiss()
   }
 
+  transformInput(newValue: string) {
+    let i = 0
+    this.value = newValue
+      .split('')
+      .map(x => (x === '●' ? this.value[i++] : x))
+      .join('')
+    this.maskedValue = this.mask.transform(this.value)
+  }
+
   async submit() {
     const value = this.value.trim()
 

frontend/projects/ui/src/styles.scss

@@ -43,6 +43,13 @@
   src: url('/assets/fonts/Open_Sans/OpenSans-Light.ttf');
 }
 
+@font-face {
+  font-family: 'Redacted';
+  font-style: normal;
+  font-weight: normal;
+  src: url('/assets/fonts/Redacted/redacted.regular.ttf');
+}
+
 /** Ionic CSS Variables overrides **/
 :root {
   --ion-font-family: 'Open Sans';