[improve] support for password type to the app-multi-func-input com…

…ponent. (#2132) Co-authored-by: tomsun28 <[email protected]>
apache · Jun 25, 2024 · 87756f1 · 87756f1
1 parent e1cda50
commit 87756f1
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 68 deletions.
diff --git a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
@@ -89,21 +89,15 @@
             >{{ paramDefine.name }}
           </nz-form-label>
           <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
-            <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
-              <input
-                [type]="passwordVisible ? 'text' : 'password'"
-                nz-input
-                placeholder="input password"
-                [required]="paramDefine.required"
-                [(ngModel)]="params[i].paramValue"
-                [id]="paramDefine.field"
-                [name]="paramDefine.field"
-                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
-              />
-            </nz-input-group>
-            <ng-template #suffixTemplate>
-              <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
-            </ng-template>
+            <app-multi-func-input
+              [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+              [(value)]="params[i].paramValue"
+              [required]="paramDefine.required"
+              [name]="paramDefine.field"
+              [id]="paramDefine.field"
+              groupStyle="width: 100%"
+              type="password"
+            />
           </nz-form-control>
 
           <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
@@ -238,21 +232,15 @@
                 >{{ paramDefine.name }}
               </nz-form-label>
               <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
-                <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
-                  <input
-                    [type]="passwordVisible ? 'text' : 'password'"
-                    nz-input
-                    placeholder="input password"
-                    [required]="paramDefine.required"
-                    [(ngModel)]="advancedParams[i].paramValue"
-                    [id]="paramDefine.field"
-                    [name]="paramDefine.field"
-                    [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
-                  />
-                </nz-input-group>
-                <ng-template #suffixTemplate>
-                  <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
-                </ng-template>
+                <app-multi-func-input
+                  [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+                  [(value)]="advancedParams[i].paramValue"
+                  [required]="paramDefine.required"
+                  [name]="paramDefine.field"
+                  [id]="paramDefine.field"
+                  groupStyle="width: 100%"
+                  type="password"
+                />
               </nz-form-control>
 
               <nz-form-label

diff --git a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
@@ -66,7 +66,6 @@ export class MonitorEditComponent implements OnInit {
   collector: string = '';
   profileForm: FormGroup = new FormGroup({});
   detected: boolean = false;
-  passwordVisible: boolean = false;
   isSpinning: boolean = false;
   spinningTip: string = 'Loading...';
 
@@ -75,7 +74,6 @@ export class MonitorEditComponent implements OnInit {
       .pipe(
         switchMap((paramMap: ParamMap) => {
           this.isSpinning = true;
-          this.passwordVisible = false;
           let id = paramMap.get('monitorId');
           this.monitor.id = Number(id);
           // 查询监控信息

diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
@@ -98,21 +98,15 @@
             >{{ paramDefine.name }}
           </nz-form-label>
           <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
-            <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
-              <input
-                [type]="passwordVisible ? 'text' : 'password'"
-                nz-input
-                [required]="paramDefine.required"
-                placeholder="input password"
-                [(ngModel)]="params[i].paramValue"
-                [id]="paramDefine.field"
-                [name]="paramDefine.field"
-                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
-              />
-            </nz-input-group>
-            <ng-template #suffixTemplate>
-              <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
-            </ng-template>
+            <app-multi-func-input
+              [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+              [(value)]="params[i].paramValue"
+              [required]="paramDefine.required"
+              [name]="paramDefine.field"
+              [id]="paramDefine.field"
+              groupStyle="width: 100%"
+              type="password"
+            />
           </nz-form-control>
 
           <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
@@ -247,21 +241,15 @@
                 >{{ paramDefine.name }}
               </nz-form-label>
               <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
-                <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
-                  <input
-                    [type]="passwordVisible ? 'text' : 'password'"
-                    nz-input
-                    placeholder="input password"
-                    [required]="paramDefine.required"
-                    [(ngModel)]="advancedParams[i].paramValue"
-                    [id]="paramDefine.field"
-                    [name]="paramDefine.field"
-                    [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
-                  />
-                </nz-input-group>
-                <ng-template #suffixTemplate>
-                  <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
-                </ng-template>
+                <app-multi-func-input
+                  [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+                  [(value)]="advancedParams[i].paramValue"
+                  [required]="paramDefine.required"
+                  [name]="paramDefine.field"
+                  [id]="paramDefine.field"
+                  groupStyle="width: 100%"
+                  type="password"
+                />
               </nz-form-control>
 
               <nz-form-label

diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
@@ -52,7 +52,6 @@ export class MonitorNewComponent implements OnInit {
   collectors!: Collector[];
   collector: string = '';
   detected: boolean = false;
-  passwordVisible: boolean = false;
   // 是否显示加载中
   isSpinning: boolean = false;
   spinningTip: string = 'Loading...';
@@ -83,7 +82,6 @@ export class MonitorNewComponent implements OnInit {
           }
           this.titleSvc.setTitleByI18n(`monitor.app.${this.monitor.app}`);
           this.detected = false;
-          this.passwordVisible = false;
           this.isSpinning = true;
           return this.appDefineSvc.getAppParamsDefine(this.monitor.app);
         })

diff --git a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.html
@@ -20,16 +20,21 @@
 <nz-input-group [nzSuffix]="inputClearTpl" [style]="groupStyle">
   <input
     nz-input
-    [(ngModel)]="inputValue"
-    [placeholder]="placeholder"
-    [type]="type"
+    [id]="id"
+    [type]="passwordVisible ? 'text' : type"
+    [name]="name"
     [style]="inputStyle"
+    [required]="required"
+    [placeholder]="placeholder"
     [nzSize]="size"
+    [(ngModel)]="inputValue"
     (ngModelChange)="onChange()"
   />
 </nz-input-group>
 <ng-template #inputClearTpl>
   @if (allowClear && inputValue) {
-  <span nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="inputValue = null; onChange()"></span>
+  <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="inputValue = null; onChange()"></i>
+  } @if (type === 'password') {
+  <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
   }
 </ng-template>
diff --git a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.less b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.less
@@ -0,0 +1,8 @@
+:host {
+  ::ng-deep {
+    .ant-input-suffix {
+      display: flex;
+      gap: 4px;
+    }
+  }
+}
diff --git a/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.ts b/web-app/src/app/shared/components/multi-func-input/multi-func-input.component.ts
@@ -28,7 +28,10 @@ import { NzSizeLDSType } from 'ng-zorro-antd/core/types';
 export class MultiFuncInputComponent implements OnInit {
   constructor() {}
 
+  @Input() id!: string;
   @Input() value!: any;
+  @Input() name!: string;
+  @Input() required!: boolean;
   @Input() groupStyle!: string;
   @Input() inputStyle!: string;
   @Input() placeholder!: string;
@@ -38,6 +41,7 @@ export class MultiFuncInputComponent implements OnInit {
   @Output() readonly valueChange = new EventEmitter<string>();
 
   inputValue: any | undefined;
+  passwordVisible: boolean = false;
 
   ngOnInit(): void {
     this.inputValue = this.value;