From 87756f16d92580071986767409f2d65046c07f7d Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Tue, 25 Jun 2024 15:38:50 +0800
Subject: [PATCH] [improve] support for password type to the
 `app-multi-func-input` component. (#2132)

Co-authored-by: tomsun28 <tomsun28@outlook.com>
---
 .../monitor-edit/monitor-edit.component.html  | 48 +++++++------------
 .../monitor-edit/monitor-edit.component.ts    |  2 -
 .../monitor-new/monitor-new.component.html    | 48 +++++++------------
 .../monitor-new/monitor-new.component.ts      |  2 -
 .../multi-func-input.component.html           | 13 +++--
 .../multi-func-input.component.less           |  8 ++++
 .../multi-func-input.component.ts             |  4 ++
 7 files changed, 57 insertions(+), 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
index 46b72127867..2c60da2a577 100644
--- 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
index 6101a214202..b33393e432e 100644
--- 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
index 6c085d8b87c..1f9b8ae8d64 100644
--- 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
index 3a684eee609..0f439adb95c 100644
--- 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
index 2a955cda00e..cca738eca70 100755
--- 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
index e69de29bb2d..b6c4565310e 100755
--- 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
index eef08a19c98..e7f5bb41d45 100755
--- 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;