Merge pull request #606 from openziti/605-failed-logins

Remove delay in username & password change events during login
openziti · Jan 15, 2025 · dda63c0 · dda63c0
2 parents 5fbd4ff + 869e691
commit dda63c0
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 14 deletions.
diff --git a/...ts/ziti-console-lib/src/lib/features/dynamic-widgets/password/password-input.component.ts b/...ts/ziti-console-lib/src/lib/features/dynamic-widgets/password/password-input.component.ts
@@ -10,7 +10,7 @@ import {debounce} from "lodash";
           <input id="schema_{{parentage?parentage+'_':''}}{{_idName}}"
                  type="password" class="jsonEntry"
                  [ngClass]="{'error': error}"
-                 [placeholder]="placeholder" [(ngModel)]="fieldValue" (paste)="onKeyup()" (keyup)="onKeyup()"/>
+                 [placeholder]="placeholder" [(ngModel)]="fieldValue" (paste)="onKeyup()" (keyup)="onKeyup()" (change)="emitEvents()"/>
           <div *ngIf="error" class="error">{{error}}</div>
       </div>
   `,
@@ -33,9 +33,12 @@ export class PasswordInputComponent {
     valueChange = new Subject<string> ();
 
     onKeyup() {
-        debounce(() => {
-            this.fieldValueChange.emit(this.fieldValue);
-            this.valueChange.next(this.fieldValue);
-        }, 500)();
+        this.emitEventsDebounced();
+    }
+
+    emitEventsDebounced = debounce(this.emitEvents.bind(this), 500);
+    emitEvents() {
+        this.fieldValueChange.emit(this.fieldValue);
+        this.valueChange.next(this.fieldValue);
     }
 }
diff --git a/projects/ziti-console-lib/src/lib/features/dynamic-widgets/string/string-input.component.ts b/projects/ziti-console-lib/src/lib/features/dynamic-widgets/string/string-input.component.ts
@@ -19,7 +19,7 @@ import {debounce} from "lodash";
           <input id="schema_{{parentage?parentage+'_':''}}{{_idName}}"
                  type="text" class="jsonEntry"
                  [ngClass]="{'error': error}"
-                 [placeholder]="placeholder" [(ngModel)]="fieldValue" (paste)="onKeyup()" (keyup)="onKeyup()"/>
+                 [placeholder]="placeholder" [(ngModel)]="fieldValue" (paste)="onKeyup()" (keyup)="onKeyup()" (change)="emitEvents()"/>
           <div *ngIf="error" class="error">{{error}}</div>
       </div>
   `,
@@ -48,9 +48,12 @@ export class StringInputComponent {
     }
 
     onKeyup() {
-        debounce(() => {
-            this.fieldValueChange.emit(this.fieldValue);
-            this.valueChange.next(this.fieldValue);
-        }, 500)();
+        this.emitEventsDebounced();
+    }
+
+    emitEventsDebounced = debounce(this.emitEvents.bind(this), 500);
+    emitEvents() {
+        this.fieldValueChange.emit(this.fieldValue);
+        this.valueChange.next(this.fieldValue);
     }
 }
diff --git a/projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss b/projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss
@@ -1122,7 +1122,7 @@ lib-tag-selector {
   input,
   select {
     &:not(.checkbox) {
-      height: 2.3rem !important;
+      height: 2.375rem !important;
       padding: 0 0.4375rem;
       border-width: 0.0625rem;
       border-radius: .3rem;
@@ -1136,7 +1136,8 @@ lib-tag-selector {
       .p-chips-multiple-container {
         padding-left: 0.3125rem;
         overflow-y: auto;
-        max-height: 4.6rem;
+        max-height: calc(2.375rem* 2 + var(--paddingXL));
+        min-height: 2.375rem;
         height: fit-content;
         gap: .3rem;
         border-width: 0.0625rem;
@@ -1160,6 +1161,18 @@ lib-tag-selector {
 
         .p-chips-token {
           margin: 0;
+          margin-right: 0.3rem;
+          margin-bottom: 0.3rem;
+        }
+      }
+    }
+    .p-chips {
+      &.p-component {
+        .p-inputtext {
+          &.p-chips-multiple-container {
+            max-height: unset;
+            padding-top: .3rem;
+          }
         }
       }
     }
@@ -1300,8 +1313,9 @@ p-dropdown {
   .p-chips.p-component {
     width: 100%;
     font-weight: 400;
-    font-family: 'Open Sans', Arial, sans-serif;
-    height: var(--defaultInputHeight);
+    font-family: "Open Sans", Arial, sans-serif;
+    min-height: var(--defaultInputHeight);
+    max-height: calc(var(--defaultInputHeight)* 2 + var(--paddingMedium));
     border-color: var(--stroke);
     border-style: solid;
     border-width: var(--inputBorderWidth);
@@ -1314,12 +1328,14 @@ p-dropdown {
     background-color: var(--navigation) !important;
     color: var(--text);
     -webkit-appearance: none;
+    overflow: auto;
 
     .p-inputtext.p-chips-multiple-container {
       width: 100%;
       padding: 0;
       border-width: var(--inputBorderWidth);
       height: fit-content;
+      gap: 0;
 
       &.p-focus {
         border-color: var(--primaryColor) !important;