前端图片操作优化

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-basic-details-editer/app-basic-details-editer.component.html

@@ -40,6 +40,7 @@
                 [(nzFileList)]="fileList"
                 nzName="uploadFile"
                 [nzShowButton]="fileList.length < 1"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
                 [nzPreview]="handlePreview"
                 (nzChange)="uploadImageChange($event)"
               >

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-cas-details-editer/app-cas-details-editer.component.html

@@ -40,6 +40,7 @@
                 [(nzFileList)]="fileList"
                 nzName="uploadFile"
                 [nzShowButton]="fileList.length < 1"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
                 [nzPreview]="handlePreview"
                 (nzChange)="uploadImageChange($event)"
               >

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-extend-api-details-editer/app-extend-api-details-editer.component.html

@@ -40,6 +40,7 @@
                 [(nzFileList)]="fileList"
                 nzName="uploadFile"
                 [nzShowButton]="fileList.length < 1"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
                 [nzPreview]="handlePreview"
                 (nzChange)="uploadImageChange($event)"
               >

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-form-based-details-editer/app-form-based-details-editer.component.html

@@ -40,6 +40,7 @@
                 [(nzFileList)]="fileList"
                 nzName="uploadFile"
                 [nzShowButton]="fileList.length < 1"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
                 [nzPreview]="handlePreview"
                 (nzChange)="uploadImageChange($event)"
               >

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-jwt-details-editer/app-jwt-details-editer.component.html

@@ -40,6 +40,7 @@
                 [(nzFileList)]="fileList"
                 nzName="uploadFile"
                 [nzShowButton]="fileList.length < 1"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
                 [nzPreview]="handlePreview"
                 (nzChange)="uploadImageChange($event)"
               >

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-oauth20-details-editer/app-oauth20-details-editer.component.html

@@ -8,22 +8,24 @@
             <nz-form-item style="width: 100%">
               <nz-form-label [nzMd]="8" nzRequired nzFor="id">{{ 'mxk.text.id' | i18n }}</nz-form-label>
               <nz-form-control [nzMd]="16" nzErrorTip="The input is not valid id!">
-                <input [(ngModel)]="form.model.id" readonly [ngModelOptions]="{ standalone: true }" nz-input name="id"
+                <input [(ngModel)]="form.model.id" readonly [ngModelOptions]="{ standalone: true }" nz-input name="id" id="id" />
-                  id="id" />
               </nz-form-control>
             </nz-form-item>
             <nz-form-item style="width: 100%">
-              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="secret">{{ 'mxk.apps.secret' | i18n }}
+              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="secret">{{ 'mxk.apps.secret' | i18n }} </nz-form-label>
-              </nz-form-label>
+              <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid secret!">
-              <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                nzErrorTip="The input is not valid secret!">
                 <nz-input-group nzSearch [nzAddOnAfter]="suffixPasswordButton">
-                  <input [(ngModel)]="form.model.secret" readonly [ngModelOptions]="{ standalone: true }" nz-input
+                  <input
-                    name="secret" id="secret" />
+                    [(ngModel)]="form.model.secret"
+                    readonly
+                    [ngModelOptions]="{ standalone: true }"
+                    nz-input
+                    name="secret"
+                    id="secret"
+                  />
                 </nz-input-group>
                 <ng-template #suffixPasswordButton>
-                  <button nz-button nzType="primary" nzSearch (click)="onGenerateSecret($event)">{{ 'mxk.text.generate'
+                  <button nz-button nzType="primary" nzSearch (click)="onGenerateSecret($event)">{{ 'mxk.text.generate' | i18n }}</button>
-                    | i18n }}</button>
                 </ng-template>
               </nz-form-control>
             </nz-form-item>
@@ -32,44 +34,58 @@
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="icon">{{ 'mxk.apps.icon' | i18n }}</nz-form-label>
             <div nz-col class="clearfix" nzSm="16" nzXs="24">
-              <nz-upload nzAction="/file/upload/" nzListType="picture-card" [(nzFileList)]="fileList"
+              <nz-upload
-                nzName="uploadFile" [nzShowButton]="fileList.length < 1" [nzPreview]="handlePreview"
+                nzAction="/file/upload/"
-                (nzChange)="uploadImageChange($event)">
+                nzListType="picture-card"
+                [(nzFileList)]="fileList"
+                nzName="uploadFile"
+                [nzShowButton]="fileList.length < 1"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
+                [nzPreview]="handlePreview"
+                (nzChange)="uploadImageChange($event)"
+              >
                 <div>
                   <i nz-icon nzType="plus"></i>
                   <div style="margin-top: 8px">Upload</div>
                 </div>
               </nz-upload>
-              <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null"
+              <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
-                (nzOnCancel)="previewVisible = false">
                 <ng-template #modalContent>
                   <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                 </ng-template>
               </nz-modal>
             </div>
 
-            <nz-form-control style="display: none" [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control
-              nzErrorTip="The input is not valid icon!">
+              style="display: none"
-              <input [(ngModel)]="form.model.iconId" disabled="true" [ngModelOptions]="{ standalone: true }" nz-input
+              [nzSm]="16"
-                name="icon" id="icon" />
+              [nzMd]="16"
+              [nzXs]="36"
+              [nzXl]="48"
+              nzErrorTip="The input is not valid icon!"
+            >
+              <input
+                [(ngModel)]="form.model.iconId"
+                disabled="true"
+                [ngModelOptions]="{ standalone: true }"
+                nz-input
+                name="icon"
+                id="icon"
+              />
             </nz-form-control>
           </nz-form-item>
         </div>
         <div nz-row>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="appName">{{ 'mxk.apps.name' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="appName">{{ 'mxk.apps.name' | i18n }} </nz-form-label>
-            </nz-form-label>
             <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid name!">
-              <input [(ngModel)]="form.model.appName" [ngModelOptions]="{ standalone: true }" nz-input name="appName"
+              <input [(ngModel)]="form.model.appName" [ngModelOptions]="{ standalone: true }" nz-input name="appName" id="appName" />
-                id="appName" />
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="frequently">{{ 'mxk.apps.frequently' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid frequently!">
-              nzErrorTip="The input is not valid frequently!">
+              <nz-radio-group [(ngModel)]="form.model.frequently" [ngModelOptions]="{ standalone: true }" nzButtonStyle="solid">
-              <nz-radio-group [(ngModel)]="form.model.frequently" [ngModelOptions]="{ standalone: true }"
-                nzButtonStyle="solid">
                 <label nz-radio-button nzValue="yes">{{ 'mxk.text.yes' | i18n }}</label>
                 <label nz-radio-button nzValue="no">{{ 'mxk.text.no' | i18n }}</label>
               </nz-radio-group>
@@ -78,10 +94,8 @@
         </div>
         <div nz-row>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="protocol">{{ 'mxk.apps.protocol' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="protocol">{{ 'mxk.apps.protocol' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid protocol!">
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid protocol!">
               <nz-select [(ngModel)]="form.model.protocol" [ngModelOptions]="{ standalone: true }" name="protocol">
                 <nz-option nzValue="OAuth_v2.0" nzLabel="OAuth v2.0"></nz-option>
                 <nz-option nzValue="OAuth_v2.1" nzLabel="OAuth v2.1"></nz-option>
@@ -91,10 +105,8 @@
           </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="category">{{ 'mxk.apps.category' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid category!">
-              nzErrorTip="The input is not valid category!">
+              <nz-select [(ngModel)]="form.model.category" [ngModelOptions]="{ standalone: true }" name="category" id="category">
-              <nz-select [(ngModel)]="form.model.category" [ngModelOptions]="{ standalone: true }" name="category"
-                id="category">
                 <nz-option nzValue="none" nzLabel="{{ 'mxk.apps.category.none' | i18n }}"></nz-option>
                 <nz-option nzValue="1011" nzLabel="{{ 'mxk.apps.category.1011' | i18n }}"></nz-option>
                 <nz-option nzValue="1012" nzLabel="{{ 'mxk.apps.category.1012' | i18n }}"></nz-option>
@@ -129,33 +141,31 @@
         </div>
         <div nz-row>
           <nz-form-item style="width: 100%">
-            <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="loginUrl">{{ 'mxk.apps.loginUrl' | i18n }}
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="loginUrl">{{ 'mxk.apps.loginUrl' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid loginUrl!">
-            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+              <input [(ngModel)]="form.model.loginUrl" [ngModelOptions]="{ standalone: true }" nz-input name="loginUrl" id="loginUrl" />
-              nzErrorTip="The input is not valid loginUrl!">
-              <input [(ngModel)]="form.model.loginUrl" [ngModelOptions]="{ standalone: true }" nz-input name="loginUrl"
-                id="loginUrl" />
             </nz-form-control>
           </nz-form-item>
         </div>
         <div nz-row>
           <nz-form-item>
-            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="status">{{ 'mxk.text.status' | i18n }}
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="status">{{ 'mxk.text.status' | i18n }} </nz-form-label>
-            </nz-form-label>
             <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not valid status!">
-              <nz-switch [(ngModel)]="form.model.switch_status" [ngModelOptions]="{ standalone: true }" name="status"
+              <nz-switch
-                [nzCheckedChildren]="statuscheckedTemplate" [nzUnCheckedChildren]="statusunCheckedTemplate"></nz-switch>
+                [(ngModel)]="form.model.switch_status"
+                [ngModelOptions]="{ standalone: true }"
+                name="status"
+                [nzCheckedChildren]="statuscheckedTemplate"
+                [nzUnCheckedChildren]="statusunCheckedTemplate"
+              ></nz-switch>
               <ng-template #statuscheckedTemplate><i nz-icon nzType="check"></i></ng-template>
               <ng-template #statusunCheckedTemplate><i nz-icon nzType="close"></i></ng-template>
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="isExtendAttr">{{ 'mxk.apps.isExtendAttr' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="isExtendAttr">{{ 'mxk.apps.isExtendAttr' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid isExtendAttr!">
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+              <nz-radio-group [(ngModel)]="form.model.isExtendAttr" [ngModelOptions]="{ standalone: true }" nzButtonStyle="solid">
-              nzErrorTip="The input is not valid isExtendAttr!">
-              <nz-radio-group [(ngModel)]="form.model.isExtendAttr" [ngModelOptions]="{ standalone: true }"
-                nzButtonStyle="solid">
                 <label nz-radio-button nzValue="0">{{ 'mxk.text.no' | i18n }}</label>
                 <label nz-radio-button nzValue="1">{{ 'mxk.text.yes' | i18n }}</label>
               </nz-radio-group>
@@ -168,22 +178,29 @@
           <nz-form-item style="width: 100%">
             <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="registeredRedirectUris">{{
               'mxk.apps.oauth.registeredRedirectUris' | i18n
-              }}</nz-form-label>
+            }}</nz-form-label>
-            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid registeredRedirectUris!">
-              nzErrorTip="The input is not valid registeredRedirectUris!">
+              <textarea
-              <textarea [(ngModel)]="form.model.registeredRedirectUris" [ngModelOptions]="{ standalone: true }" nz-input
+                [(ngModel)]="form.model.registeredRedirectUris"
-                name="registeredRedirectUris" id="registeredRedirectUris"></textarea>
+                [ngModelOptions]="{ standalone: true }"
+                nz-input
+                name="registeredRedirectUris"
+                id="registeredRedirectUris"
+              ></textarea>
             </nz-form-control>
           </nz-form-item>
         </div>
         <div nz-row>
           <nz-form-item style="width: 100%">
-            <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="GrantTypes">{{ 'mxk.apps.oauth.GrantTypes' | i18n }}
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="GrantTypes">{{ 'mxk.apps.oauth.GrantTypes' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid authorizedGrantTypes!">
-            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48"
+              <nz-select
-              nzErrorTip="The input is not valid authorizedGrantTypes!">
+                [(ngModel)]="form.model.select_authorizedGrantTypes"
-              <nz-select [(ngModel)]="form.model.select_authorizedGrantTypes" nzMode="multiple"
+                nzMode="multiple"
-                nzPlaceHolder="Please select" [ngModelOptions]="{ standalone: true }" name="authorizedGrantTypes">
+                nzPlaceHolder="Please select"
+                [ngModelOptions]="{ standalone: true }"
+                name="authorizedGrantTypes"
+              >
                 <nz-option nzValue="authorization_code" nzLabel="authorization_code"></nz-option>
                 <nz-option nzValue="password" nzLabel="password"></nz-option>
                 <nz-option nzValue="client_credentials" nzLabel="client_credentials"></nz-option>
@@ -197,12 +214,9 @@
         </div>
         <div nz-row>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="subject">{{ 'mxk.apps.oauth.subject' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="subject">{{ 'mxk.apps.oauth.subject' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid subject!">
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+              <nz-select [(ngModel)]="form.model.subject" [ngModelOptions]="{ standalone: true }" name="subject" id="subject">
-              nzErrorTip="The input is not valid subject!">
-              <nz-select [(ngModel)]="form.model.subject" [ngModelOptions]="{ standalone: true }" name="subject"
-                id="subject">
                 <nz-option nzValue="username" nzLabel="{{ 'mxk.users.username' | i18n }}"></nz-option>
                 <nz-option nzValue="employeeNumber" nzLabel="{{ 'mxk.users.employeeNumber' | i18n }}"></nz-option>
                 <nz-option nzValue="email" nzLabel="{{ 'mxk.users.email' | i18n }}"></nz-option>
@@ -213,11 +227,14 @@
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="scope">{{ 'mxk.apps.oauth.scope' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="scope">{{ 'mxk.apps.oauth.scope' | i18n }} </nz-form-label>
-            </nz-form-label>
             <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid scope!">
-              <nz-select [(ngModel)]="form.model.select_scope" [ngModelOptions]="{ standalone: true }" nzMode="multiple"
+              <nz-select
-                nzPlaceHolder="Please select">
+                [(ngModel)]="form.model.select_scope"
+                [ngModelOptions]="{ standalone: true }"
+                nzMode="multiple"
+                nzPlaceHolder="Please select"
+              >
                 <nz-option nzValue="read" nzLabel="read"></nz-option>
                 <nz-option nzValue="write" nzLabel="write"></nz-option>
                 <nz-option nzValue="trust" nzLabel="trust"></nz-option>
@@ -235,12 +252,10 @@
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="approvalPrompt">{{
               'mxk.apps.oauth.approvalPrompt' | i18n
-              }}</nz-form-label>
+            }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid approvalPrompt!">
-              nzErrorTip="The input is not valid approvalPrompt!">
               <nz-input-group>
-                <nz-radio-group [(ngModel)]="form.model.approvalPrompt" [ngModelOptions]="{ standalone: true }"
+                <nz-radio-group [(ngModel)]="form.model.approvalPrompt" [ngModelOptions]="{ standalone: true }" nzButtonStyle="solid">
-                  nzButtonStyle="solid">
                   <label nz-radio-button nzValue="force">{{ 'mxk.apps.oauth.approvalPrompt.force' | i18n }}</label>
                   <label nz-radio-button nzValue="auto">{{ 'mxk.apps.oauth.approvalPrompt.auto' | i18n }}</label>
                 </nz-radio-group>
@@ -251,8 +266,7 @@
             <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="pkce">PKCE</nz-form-label>
             <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid PKCE!">
               <nz-input-group>
-                <nz-radio-group [(ngModel)]="form.model.pkce" [ngModelOptions]="{ standalone: true }"
+                <nz-radio-group [(ngModel)]="form.model.pkce" [ngModelOptions]="{ standalone: true }" nzButtonStyle="solid">
-                  nzButtonStyle="solid">
                   <label nz-radio-button nzValue="yes">{{ 'mxk.text.yes' | i18n }}</label>
                   <label nz-radio-button nzValue="no">{{ 'mxk.text.no' | i18n }}</label>
                 </nz-radio-group>
@@ -264,24 +278,38 @@
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="accessTokenValiditySeconds">{{
               'mxk.apps.oauth.accessTokenValiditySeconds' | i18n
-              }}</nz-form-label>
+            }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control
-              nzErrorTip="The input is not valid accessTokenValiditySeconds!">
+              [nzSm]="16"
+              [nzMd]="16"
+              [nzXs]="36"
+              [nzXl]="48"
+              nzErrorTip="The input is not valid accessTokenValiditySeconds!"
+            >
               <nz-input-group nzAddOnAfter="{{ 'mxk.text.second' | i18n }}">
-                <input [(ngModel)]="form.model.accessTokenValiditySeconds" [ngModelOptions]="{ standalone: true }"
+                <input
-                  nz-input name="accessTokenValiditySeconds" id="accessTokenValiditySeconds" />
+                  [(ngModel)]="form.model.accessTokenValiditySeconds"
+                  [ngModelOptions]="{ standalone: true }"
+                  nz-input
+                  name="accessTokenValiditySeconds"
+                  id="accessTokenValiditySeconds"
+                />
               </nz-input-group>
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="refreshTokenValiditySeconds">{{
               'mxk.apps.oauth.refreshTokenValiditySeconds' | i18n
-              }}</nz-form-label>
+            }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid expires!">
-              nzErrorTip="The input is not valid expires!">
               <nz-input-group nzAddOnAfter="{{ 'mxk.text.second' | i18n }}">
-                <input [(ngModel)]="form.model.refreshTokenValiditySeconds" [ngModelOptions]="{ standalone: true }"
+                <input
-                  nz-input name="refreshTokenValiditySeconds" id="refreshTokenValiditySeconds" />
+                  [(ngModel)]="form.model.refreshTokenValiditySeconds"
+                  [ngModelOptions]="{ standalone: true }"
+                  nz-input
+                  name="refreshTokenValiditySeconds"
+                  id="refreshTokenValiditySeconds"
+                />
               </nz-input-group>
             </nz-form-control>
           </nz-form-item>
@@ -290,33 +318,30 @@
       <nz-tab *ngIf="form.model.protocol == 'OpenID_Connect_v1.0'" nzTitle="{{ 'mxk.apps.oauth.connect.tab' | i18n }}">
         <div nz-row>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="issuer">{{ 'mxk.apps.oauth.connect.issuer' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="issuer">{{ 'mxk.apps.oauth.connect.issuer' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid issuer!">
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+              <input [(ngModel)]="form.model.issuer" [ngModelOptions]="{ standalone: true }" nz-input name="issuer" id="issuer" />
-              nzErrorTip="The input is not valid issuer!">
-              <input [(ngModel)]="form.model.issuer" [ngModelOptions]="{ standalone: true }" nz-input name="issuer"
-                id="issuer" />
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="audience">{{ 'mxk.apps.oauth.connect.audience' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="audience">{{ 'mxk.apps.oauth.connect.audience' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid audience!">
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+              <input [(ngModel)]="form.model.audience" [ngModelOptions]="{ standalone: true }" nz-input name="audience" id="audience" />
-              nzErrorTip="The input is not valid audience!">
-              <input [(ngModel)]="form.model.audience" [ngModelOptions]="{ standalone: true }" nz-input name="audience"
-                id="audience" />
             </nz-form-control>
           </nz-form-item>
         </div>
 
         <div nz-row>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="signature">{{ 'mxk.apps.oauth.connect.signature' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="signature">{{ 'mxk.apps.oauth.connect.signature' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid signature!">
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+              <nz-select
-              nzErrorTip="The input is not valid signature!">
+                (ngModelChange)="onSelectSignature($event)"
-              <nz-select (ngModelChange)="onSelectSignature($event)" [(ngModel)]="form.model.signature"
+                [(ngModel)]="form.model.signature"
-                [ngModelOptions]="{ standalone: true }" name="signature" id="signature">
+                [ngModelOptions]="{ standalone: true }"
+                name="signature"
+                id="signature"
+              >
                 <nz-option nzValue="NONE" nzLabel="NONE"></nz-option>
                 <nz-option nzValue="RS256" nzLabel="RS256"></nz-option>
                 <nz-option nzValue="RS384" nzLabel="RS384"></nz-option>
@@ -330,11 +355,14 @@
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="userInfoResponse">{{
               'mxk.apps.oauth.connect.userInfoResponse' | i18n
-              }}</nz-form-label>
+            }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid userInfoResponse!">
-              nzErrorTip="The input is not valid userInfoResponse!">
+              <nz-select
-              <nz-select [(ngModel)]="form.model.userInfoResponse" [ngModelOptions]="{ standalone: true }"
+                [(ngModel)]="form.model.userInfoResponse"
-                name="userInfoResponse" id="userInfoResponse">
+                [ngModelOptions]="{ standalone: true }"
+                name="userInfoResponse"
+                id="userInfoResponse"
+              >
                 <nz-option nzValue="NORMAL" nzLabel="NORMAL"></nz-option>
                 <nz-option nzValue="SIGNING" nzLabel="SIGNING"></nz-option>
                 <nz-option nzValue="ENCRYPTION" nzLabel="ENCRYPTION"></nz-option>
@@ -345,23 +373,29 @@
         </div>
         <div nz-row>
           <nz-form-item style="width: 100%">
-            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="signatureKey">{{ 'mxk.apps.oauth.connect.signatureKey' | i18n
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="signatureKey">{{ 'mxk.apps.oauth.connect.signatureKey' | i18n }}</nz-form-label>
-              }}</nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid signatureKey!">
-            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48"
+              <textarea
-              nzErrorTip="The input is not valid signatureKey!">
+                [(ngModel)]="form.model.signatureKey"
-              <textarea [(ngModel)]="form.model.signatureKey" [ngModelOptions]="{ standalone: true }" nz-input
+                [ngModelOptions]="{ standalone: true }"
-                name="signatureKey" id="signatureKey"></textarea>
+                nz-input
+                name="signatureKey"
+                id="signatureKey"
+              ></textarea>
             </nz-form-control>
           </nz-form-item>
         </div>
         <div nz-row>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="algorithm">{{ 'mxk.apps.oauth.connect.algorithm' | i18n }}
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="algorithm">{{ 'mxk.apps.oauth.connect.algorithm' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid algorithm!">
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+              <nz-select
-              nzErrorTip="The input is not valid algorithm!">
+                (ngModelChange)="onSelectAlgorithm($event)"
-              <nz-select (ngModelChange)="onSelectAlgorithm($event)" [(ngModel)]="form.model.algorithm"
+                [(ngModel)]="form.model.algorithm"
-                [ngModelOptions]="{ standalone: true }" name="algorithm" id="algorithm">
+                [ngModelOptions]="{ standalone: true }"
+                name="algorithm"
+                id="algorithm"
+              >
                 <nz-option nzValue="NONE" nzLabel="NONE"></nz-option>
                 <nz-option nzValue="RSA1_5" nzLabel="RSA1_5"></nz-option>
                 <nz-option nzValue="RSA_OAEP" nzLabel="RSA_OAEP"></nz-option>
@@ -378,11 +412,14 @@
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="encryptionMethod">{{
               'mxk.apps.oauth.connect.encryptionMethod' | i18n
-              }}</nz-form-label>
+            }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid encryptionMethod!">
-              nzErrorTip="The input is not valid encryptionMethod!">
+              <nz-select
-              <nz-select [(ngModel)]="form.model.encryptionMethod" [ngModelOptions]="{ standalone: true }"
+                [(ngModel)]="form.model.encryptionMethod"
-                name="encryptionMethod" id="encryptionMethod">
+                [ngModelOptions]="{ standalone: true }"
+                name="encryptionMethod"
+                id="encryptionMethod"
+              >
                 <nz-option nzValue="A128GCM" nzLabel="A128GCM"></nz-option>
                 <nz-option nzValue="A192GCM" nzLabel="A192GCM"></nz-option>
                 <nz-option nzValue="A256GCM" nzLabel="A256GCM"></nz-option>
@@ -396,12 +433,15 @@
         </div>
         <div nz-row>
           <nz-form-item style="width: 100%">
-            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="algorithmKey">{{ 'mxk.apps.oauth.connect.algorithmKey' | i18n
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="algorithmKey">{{ 'mxk.apps.oauth.connect.algorithmKey' | i18n }}</nz-form-label>
-              }}</nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid algorithmKey!">
-            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48"
+              <textarea
-              nzErrorTip="The input is not valid algorithmKey!">
+                [(ngModel)]="form.model.algorithmKey"
-              <textarea [(ngModel)]="form.model.algorithmKey" [ngModelOptions]="{ standalone: true }" nz-input
+                [ngModelOptions]="{ standalone: true }"
-                name="algorithmKey" id="algorithmKey"></textarea>
+                nz-input
+                name="algorithmKey"
+                id="algorithmKey"
+              ></textarea>
             </nz-form-control>
           </nz-form-item>
         </div>
@@ -410,18 +450,14 @@
         <div nz-row>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="logoutUrl">{{ 'mxk.apps.logoutUrl' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid logoutUrl!">
-              nzErrorTip="The input is not valid logoutUrl!">
+              <input [(ngModel)]="form.model.logoutUrl" [ngModelOptions]="{ standalone: true }" nz-input name="logoutUrl" id="logoutUrl" />
-              <input [(ngModel)]="form.model.logoutUrl" [ngModelOptions]="{ standalone: true }" nz-input
-                name="logoutUrl" id="logoutUrl" />
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="logoutType">{{ 'mxk.apps.logoutType' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid logoutType!">
-              nzErrorTip="The input is not valid logoutType!">
+              <nz-select [(ngModel)]="form.model.logoutType" [ngModelOptions]="{ standalone: true }" name="logoutType" id="logoutType">
-              <nz-select [(ngModel)]="form.model.logoutType" [ngModelOptions]="{ standalone: true }" name="logoutType"
-                id="logoutType">
                 <nz-option nzValue="0" nzLabel="{{ 'mxk.apps.logoutType.none' | i18n }}"></nz-option>
                 <nz-option nzValue="1" nzLabel="{{ 'mxk.apps.logoutType.back_channel' | i18n }}"></nz-option>
                 <nz-option nzValue="2" nzLabel="{{ 'mxk.apps.logoutType.front_channel' | i18n }}"></nz-option>
@@ -433,10 +469,8 @@
         <div nz-row>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="visible">{{ 'mxk.apps.visible' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid visible!">
-              nzErrorTip="The input is not valid visible!">
+              <nz-select [(ngModel)]="form.model.visible" [ngModelOptions]="{ standalone: true }" name="visible" id="visible">
-              <nz-select [(ngModel)]="form.model.visible" [ngModelOptions]="{ standalone: true }" name="visible"
-                id="visible">
                 <nz-option nzValue="0" nzLabel="{{ 'mxk.apps.visible.hidden' | i18n }}"></nz-option>
                 <nz-option nzValue="1" nzLabel="{{ 'mxk.apps.visible.all' | i18n }}"></nz-option>
                 <nz-option nzValue="2" nzLabel="{{ 'mxk.apps.visible.internet' | i18n }}"></nz-option>
@@ -446,38 +480,30 @@
           </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="sortIndex">{{ 'mxk.text.sortIndex' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid sortIndex!">
-              nzErrorTip="The input is not valid sortIndex!">
+              <input [(ngModel)]="form.model.sortIndex" [ngModelOptions]="{ standalone: true }" nz-input name="sortIndex" id="sortIndex" />
-              <input [(ngModel)]="form.model.sortIndex" [ngModelOptions]="{ standalone: true }" nz-input
-                name="sortIndex" id="sortIndex" />
             </nz-form-control>
           </nz-form-item>
         </div>
         <div nz-row>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="vendor">{{ 'mxk.apps.vendor' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid vendor!">
-              nzErrorTip="The input is not valid vendor!">
+              <input [(ngModel)]="form.model.vendor" [ngModelOptions]="{ standalone: true }" nz-input name="vendor" id="vendor" />
-              <input [(ngModel)]="form.model.vendor" [ngModelOptions]="{ standalone: true }" nz-input name="vendor"
-                id="vendor" />
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="vendorUrl">{{ 'mxk.apps.vendor.url' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid vendorUrl!">
-              nzErrorTip="The input is not valid vendorUrl!">
+              <input [(ngModel)]="form.model.vendorUrl" [ngModelOptions]="{ standalone: true }" nz-input name="vendorUrl" id="vendorUrl" />
-              <input [(ngModel)]="form.model.vendorUrl" [ngModelOptions]="{ standalone: true }" nz-input
-                name="vendorUrl" id="vendorUrl" />
             </nz-form-control>
           </nz-form-item>
         </div>
         <div nz-row>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="isAdapter">{{ 'mxk.apps.isAdapter' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid isAdapter!">
-              nzErrorTip="The input is not valid isAdapter!">
+              <nz-select [(ngModel)]="form.model.isAdapter" [ngModelOptions]="{ standalone: true }" name="isAdapter" id="isAdapter">
-              <nz-select [(ngModel)]="form.model.isAdapter" [ngModelOptions]="{ standalone: true }" name="isAdapter"
-                id="isAdapter">
                 <nz-option nzValue="0" nzLabel="{{ 'mxk.apps.isAdapter.no' | i18n }}"></nz-option>
                 <nz-option nzValue="1" nzLabel="{{ 'mxk.apps.isAdapter.yes' | i18n }}"></nz-option>
               </nz-select>
@@ -485,30 +511,43 @@
           </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="adapterName">{{ 'mxk.apps.adapter' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid adapterName!">
-              nzErrorTip="The input is not valid adapterName!">
               <nz-input-group nzSearch [nzAddOnAfter]="suffixAdapterButton">
-                <input [(ngModel)]="form.model.adapterName" [ngModelOptions]="{ standalone: true }" nz-input
+                <input
-                  name="adapterName" id="adapterName" />
+                  [(ngModel)]="form.model.adapterName"
+                  [ngModelOptions]="{ standalone: true }"
+                  nz-input
+                  name="adapterName"
+                  id="adapterName"
+                />
               </nz-input-group>
               <ng-template #suffixAdapterButton>
-                <button nz-button nzType="primary" nzSearch (click)="onSelectAdapter($event)">{{ 'mxk.text.select' |
+                <button nz-button nzType="primary" nzSearch (click)="onSelectAdapter($event)">{{ 'mxk.text.select' | i18n }}</button>
-                  i18n }}</button>
               </ng-template>
-              <input type="hidden" [(ngModel)]="form.model.adapterId" [ngModelOptions]="{ standalone: true }" nz-input
+              <input
-                name="adapterId" id="adapterId" />
+                type="hidden"
-              <input type="hidden" [(ngModel)]="form.model.adapter" [ngModelOptions]="{ standalone: true }" nz-input
+                [(ngModel)]="form.model.adapterId"
-                name="adapter" id="adapter" />
+                [ngModelOptions]="{ standalone: true }"
+                nz-input
+                name="adapterId"
+                id="adapterId"
+              />
+              <input
+                type="hidden"
+                [(ngModel)]="form.model.adapter"
+                [ngModelOptions]="{ standalone: true }"
+                nz-input
+                name="adapter"
+                id="adapter"
+              />
             </nz-form-control>
           </nz-form-item>
         </div>
         <div nz-row>
           <nz-form-item>
             <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="inducer">{{ 'mxk.apps.inducer' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid inducer!">
-              nzErrorTip="The input is not valid inducer!">
+              <nz-select [(ngModel)]="form.model.inducer" [ngModelOptions]="{ standalone: true }" name="isAdapter" id="inducer">
-              <nz-select [(ngModel)]="form.model.inducer" [ngModelOptions]="{ standalone: true }" name="isAdapter"
-                id="inducer">
                 <nz-option nzValue="IDP" nzLabel="IDP"></nz-option>
                 <nz-option nzValue="SP" nzLabel="SP"></nz-option>
               </nz-select>
@@ -518,12 +557,15 @@
         </div>
         <div nz-row>
           <nz-form-item style="width: 100%">
-            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="description">{{ 'mxk.text.description' | i18n }}
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="description">{{ 'mxk.text.description' | i18n }} </nz-form-label>
-            </nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid description!">
-            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48"
+              <input
-              nzErrorTip="The input is not valid description!">
+                [(ngModel)]="form.model.description"
-              <input [(ngModel)]="form.model.description" [ngModelOptions]="{ standalone: true }" nz-input
+                [ngModelOptions]="{ standalone: true }"
-                name="description" id="description" />
+                nz-input
+                name="description"
+                id="description"
+              />
             </nz-form-control>
           </nz-form-item>
         </div>
@@ -548,22 +590,24 @@
                 <td>
                   <button nz-button type="button" (click)="startExtraAttrEdit(data.id)" style="float: left">{{
                     'mxk.text.edit' | i18n
-                    }}</button>
+                  }}</button>
-                  <button nz-button type="button" (click)="deleteExtraAttrRow(data.id)" nzDanger>{{ 'mxk.text.delete' |
+                  <button nz-button type="button" (click)="deleteExtraAttrRow(data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
-                    i18n }}</button>
                 </td>
               </ng-container>
               <ng-template #editTemplate>
-                <td><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.attr"
+                <td
-                    [ngModelOptions]="{ standalone: true }" /></td>
+                  ><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.attr" [ngModelOptions]="{ standalone: true }"
-                <td><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.type"
+                /></td>
-                    [ngModelOptions]="{ standalone: true }" /></td>
+                <td
-                <td><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.value"
+                  ><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.type" [ngModelOptions]="{ standalone: true }"
-                    [ngModelOptions]="{ standalone: true }" /></td>
+                /></td>
+                <td
+                  ><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.value" [ngModelOptions]="{ standalone: true }"
+                /></td>
                 <td>
                   <button nz-button type="button" (click)="saveExtraAttrEdit(data.id)" style="float: left">{{
                     'mxk.text.submit' | i18n
-                    }}</button>
+                  }}</button>
                 </td>
               </ng-template>
             </tr>

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-saml20-details-editer/app-saml20-details-editer.component.html

@@ -35,6 +35,7 @@
                 [(nzFileList)]="fileList"
                 nzName="uploadFile"
                 [nzShowButton]="fileList.length < 1"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
                 [nzPreview]="handlePreview"
                 (nzChange)="uploadImageChange($event)"
               >

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-token-based-details-editer/app-token-based-details-editer.component.html

@@ -40,6 +40,7 @@
                 [(nzFileList)]="fileList"
                 nzName="uploadFile"
                 [nzShowButton]="fileList.length < 1"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
                 [nzPreview]="handlePreview"
                 (nzChange)="uploadImageChange($event)"
               >

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/user-editer/user-editer.component.html

@@ -84,6 +84,7 @@
                 nzName="uploadFile"
                 [nzShowButton]="fileList.length < 1"
                 [nzPreview]="handlePreview"
+                [nzShowUploadList]="{ showPreviewIcon: true, showRemoveIcon: true }"
                 (nzChange)="uploadImageChange($event)"
               >
                 <div>