From 123f71cb863d58a0aba274d69d5dd9bbbe4a7c84 Mon Sep 17 00:00:00 2001 From: Lucy C <12953208+elvece@users.noreply.github.com> Date: Mon, 27 Jun 2022 13:51:35 -0600 Subject: [PATCH] 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 | 5 +++- .../fonts/Redacted/redacted.regular.ttf | Bin 0 -> 17036 bytes .../form-object/form-object.component.html | 10 ++++++-- .../form-object/form-object.component.scss | 4 ++++ .../generic-input.component.html | 10 ++++---- .../generic-input.component.module.ts | 1 + .../generic-input/generic-input.component.ts | 22 +++++++++++++++--- frontend/projects/ui/src/styles.scss | 7 ++++++ 8 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 frontend/assets/fonts/Redacted/redacted.regular.ttf diff --git a/Makefile b/Makefile index e16fa2abe..b09adaca7 100644 --- a/Makefile +++ b/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 diff --git a/frontend/assets/fonts/Redacted/redacted.regular.ttf b/frontend/assets/fonts/Redacted/redacted.regular.ttf new file mode 100644 index 0000000000000000000000000000000000000000..3bc1fe32c5d2531891d9441ddeb1bd99b8dd8af0 GIT binary patch literal 17036 zcmeHPYjjja60W}U%w#5+nM^_;0ecugAd`215CVh{!Ye=w4`(z8L*5XQm*meffSWf5h0LC>uMVs4;H?hLNvM* z`n*$DUse}=w5c~yZYJm_E-sr_zW-3sFyJeI8&QOH=-|lBZwvU=?54pXxVS*+i2w%8 zaY?`#eTD*S0fTx{J6lTz(i_tChk!pEg3=+nL5dS3f>6D59TfpNF3KU>capLEY&p~@ zXL~u(gQCw^ZbS=l$bkg4#48xlakPl`c(C3B=mnjgtf<-OR%&O{*%E2Lbevnbi}&Jv zcwat%C-W>mhi`ZHZKdy|_IA(;YEGM2kxEV6&SQDJNH3Kzk|EB%p_PyrBGT?~M!BM6dc^kZ6&K&T&sE&r*VC{6fU5@%8l2!wOiE5kO-s)hGIUtx z@T?KpBS($S8IwB}-aUT8#7UD2rc9kycumpt88c^H>+@fCeevuY=FAPy%DeBm_rdiW zw`|_}*zX^I;;ARMKfU7_x%t`Wc0J$n!b>l{{0h~VmQ{VY9|^Z4C~vd&u-%jKLxpIgrHC(3%S80z-8Z}NQ@ zcgPy!;j+WFPo*S=WD}hs*i_lVmFN1zhe0(rJ;0f}eM-k_d zsmLeifD-c)V&$ANfnZF8B5CB&ShqWl9}U6`7&H;O%~W-RejtnVdiYUQxQF{DPmgoU z%4F#%C=UNiwH>dE&6=Fh!wCSqum7n2Cy zEzCBl)DtwxywH~&w+B5g@3WM{a&mLo zcbfFNFVmWhhU3{gbrP!7tP{-!(Y(`S)PJA7lZp0phuhKL?QrKw{A@qA{%oaT=C@Df zDf=KI_iVW?9s8J$dc&=gWtPljeX>kPn|17Sr5IQOrKI*`Zig=YY`K}vD0*q*G`nd2 zqQ!%@PiXt+mGOS)LBHh9C*H~D-+kJcuAdva%XVEo*L0VDSDGBn-l6mK<-D%lxkg=; zrH#Avzqc-Dzv?dCy4yD{_jz@fewVYHE7d11XPbAIZe3m5uISfQS=zWuzppgAXm-*5 zo_zjq23kC5@u0A2M_0!0N7}hgJJ)IFI_+Gio$Iu7op!F% z&UOE5=Q`^AiD#$pT)Nt)or$zFk#;7+2h&Qf2y#SH@h!Hf|L5UO@zqUn0-3qBTlS{R ziOl|nt}=@+%#lZf{F!s`EOb+{TFmFNJn+36a$iOvMF>>whtP|bPSyDIbb;%PT}$4nc*|S>%v!uZwucS z-WvYBHP)J8Ewol!S6R1O_gIfx&)8hH6kCC<(ze33$@Y@%nC*0gJ;EC?A)+*5dBlc@ zmWU$}Uq@Oa2S(;a&W&6axju4NoJ;z>bUt(Wpm+c4bZ4SMIJF*=BlwR4+upR?8ZeN=2zMpR)`b=0b;tx@RCD$?6>1cbj_b2YG=n2uYqU)pAL_Zn5Kl-ESvoXD5hQ<`d)Zh-rJcfI3%!!yU zdKi1ahm>8o4O?y~8&BjsN))3sC#lPBr~PmTrVj(Y86{L_$obr?)+LIdooZc2189$0 z*Au5t)w+SUBLgrr)<|~NL2shLY_HmGratVHS`VW>l0~hDBfoN>TDMY~v{J3x7?)bq zdIV+Yj;Zwn6r;DQ^*1R+-4f;E{CDAbGIYP0+0#FK?a%f)-sq0U5{1xGSKwSo3S9oqcZXE-ztS(8I^A$JU211O>^3$U|w8ZZ|TiFN30fJEW7BC2Z9T7i|B zhVcbm8gnh?Jr5QXek=BYP!vp2aABV^$P}$Z@l1o4X2G8`@XWw{ezyqimvpv`Zcz8h z&Y%r@sKj*Gh4jc6HzMECOkrf9aAa@WuwO=E|8$U(qR2(j*l~Lx>%1rRqB!Jw_ohB{ z6=b=oFL|gR^~auiHDYrR4W7I=faz%qt)RQ; zWqOF(XeF(od+8B+g0?aP1?dC2lOAM7W}^F;nO4zjbb^J^MtYLIq0{tlydR#XH|Y&} z2KFwYweZD1!@39PPxLm^g7*5PqA2fgcBYQ!V9H6;1VJrGbXZP*+-h2oA~Dk87&0705VMkNn&e zMGwF&?f)@ literal 0 HcmV?d00001 diff --git a/frontend/projects/ui/src/app/components/form-object/form-object.component.html b/frontend/projects/ui/src/app/components/form-object/form-object.component.html index 2b3888511..6a9cd9141 100644 --- a/frontend/projects/ui/src/app/components/form-object/form-object.component.html +++ b/frontend/projects/ui/src/app/components/form-object/form-object.component.html @@ -72,6 +72,12 @@ - + - - +

diff --git a/frontend/projects/ui/src/app/modals/generic-input/generic-input.component.module.ts b/frontend/projects/ui/src/app/modals/generic-input/generic-input.component.module.ts index d2b1faab4..a13572070 100644 --- a/frontend/projects/ui/src/app/modals/generic-input/generic-input.component.module.ts +++ b/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], diff --git a/frontend/projects/ui/src/app/modals/generic-input/generic-input.component.ts b/frontend/projects/ui/src/app/modals/generic-input/generic-input.component.ts index ec3eb0876..70b291016 100644 --- a/frontend/projects/ui/src/app/modals/generic-input/generic-input.component.ts +++ b/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 = { @@ -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() diff --git a/frontend/projects/ui/src/styles.scss b/frontend/projects/ui/src/styles.scss index db31afd59..5de41be67 100644 --- a/frontend/projects/ui/src/styles.scss +++ b/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';