From 05d09aa6f0f0dd0f90e1559b92955e72a3d56ce4 Mon Sep 17 00:00:00 2001
From: shimingxy <shimingxy@qq.com>
Date: Thu, 23 Oct 2025 10:09:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=9B=BE=E7=89=87=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../config/profile/profile.component.html     | 734 +++++++++++-------
 .../app-basic-details-editer.component.html   |   1 +
 .../app-cas-details-editer.component.html     |   1 +
 ...p-extend-api-details-editer.component.html |   1 +
 ...p-form-based-details-editer.component.html |   1 +
 .../app-jwt-details-editer.component.html     |   1 +
 .../app-oauth20-details-editer.component.html | 432 ++++++-----
 .../app-saml20-details-editer.component.html  |   1 +
 ...-token-based-details-editer.component.html |   1 +
 .../user-editer/user-editer.component.html    |   1 +
 10 files changed, 690 insertions(+), 484 deletions(-)

diff --git a/maxkey-web-frontend/maxkey-web-app/src/app/routes/config/profile/profile.component.html b/maxkey-web-frontend/maxkey-web-app/src/app/routes/config/profile/profile.component.html
index e34d3410c..957ad092b 100644
--- a/maxkey-web-frontend/maxkey-web-app/src/app/routes/config/profile/profile.component.html
+++ b/maxkey-web-frontend/maxkey-web-app/src/app/routes/config/profile/profile.component.html
@@ -10,36 +10,46 @@
                 <nz-form-item style="display: none">
                   <nz-form-label [nzMd]="8" 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" [ngModelOptions]="{ standalone: true }" nz-input name="id"
-                      id="id" />
-                    <input [(ngModel)]="form.model.pictureId" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="pictureId" id="pictureId" />
+                    <input [(ngModel)]="form.model.id" [ngModelOptions]="{ standalone: true }" nz-input name="id" id="id" />
+                    <input
+                      [(ngModel)]="form.model.pictureId"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="pictureId"
+                      id="pictureId"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
                   <div nz-row style="width: 100%; margin-bottom: 18px">
-                    <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="name">{{ 'mxk.users.displayName' | i18n }}
-                    </nz-form-label>
-                    <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                      nzErrorTip="The input is not valid displayName!">
-                      <input [(ngModel)]="form.model.displayName" [ngModelOptions]="{ standalone: true }" nz-input
-                        name="displayName" id="displayName" />
+                    <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="name">{{ 'mxk.users.displayName' | i18n }} </nz-form-label>
+                    <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid displayName!">
+                      <input
+                        [(ngModel)]="form.model.displayName"
+                        [ngModelOptions]="{ standalone: true }"
+                        nz-input
+                        name="displayName"
+                        id="displayName"
+                      />
                     </nz-form-control>
                   </div>
                   <div nz-row style="width: 100%; margin-bottom: 18px">
-                    <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="username">{{ 'mxk.users.username' | i18n }}
-                    </nz-form-label>
-                    <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                      nzErrorTip="The input is not valid username!">
-                      <input [(ngModel)]="form.model.username" disabled [ngModelOptions]="{ standalone: true }" nz-input
-                        name="username" id="username" />
+                    <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="username">{{ 'mxk.users.username' | i18n }} </nz-form-label>
+                    <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid username!">
+                      <input
+                        [(ngModel)]="form.model.username"
+                        disabled
+                        [ngModelOptions]="{ standalone: true }"
+                        nz-input
+                        name="username"
+                        id="username"
+                      />
                     </nz-form-control>
                   </div>
                   <div nz-row style="width: 100%">
                     <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="gender">{{ 'mxk.users.gender' | i18n }}</nz-form-label>
                     <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid gender!">
-                      <nz-radio-group [(ngModel)]="form.model.gender_select" [ngModelOptions]="{ standalone: true }"
-                        nzButtonStyle="solid">
+                      <nz-radio-group [(ngModel)]="form.model.gender_select" [ngModelOptions]="{ standalone: true }" nzButtonStyle="solid">
                         <label nz-radio-button nzValue="2">{{ 'mxk.users.gender.male' | i18n }}</label>
                         <label nz-radio-button nzValue="1">{{ 'mxk.users.gender.female' | i18n }}</label>
                       </nz-radio-group>
@@ -48,19 +58,29 @@
                 </nz-form-item>
 
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="uploadFile">{{ 'mxk.users.picture' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="uploadFile">{{ 'mxk.users.picture' | i18n }} </nz-form-label>
                   <div nz-col class="clearfix" nzSm="16" nzXs="24">
-                    <nz-upload nzAction="/file/upload/" nzListType="picture-card" [(nzFileList)]="fileList"
-                      nzName="uploadFile" [nzShowButton]="fileList.length < 1" [nzPreview]="handlePreview"
-                      (nzChange)="uploadImageChange($event)">
+                    <nz-upload
+                      nzAction="/file/upload/"
+                      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"
-                      (nzOnCancel)="previewVisible = false">
+                    <nz-modal
+                      [nzVisible]="previewVisible"
+                      [nzContent]="modalContent"
+                      [nzFooter]="null"
+                      (nzOnCancel)="previewVisible = false"
+                    >
                       <ng-template #modalContent>
                         <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                       </ng-template>
@@ -70,55 +90,77 @@
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="employeeNumber">{{ 'mxk.users.employeeNumber' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid employeeNumber!">
-                    <input [(ngModel)]="form.model.employeeNumber" disabled [ngModelOptions]="{ standalone: true }"
-                      nz-input name="employeeNumber" id="employeeNumber" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="employeeNumber">{{ 'mxk.users.employeeNumber' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid employeeNumber!">
+                    <input
+                      [(ngModel)]="form.model.employeeNumber"
+                      disabled
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="employeeNumber"
+                      id="employeeNumber"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="windowsAccount">{{ 'mxk.users.windowsAccount' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="windowsAccount">{{ 'mxk.users.windowsAccount' | i18n }} </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid status!">
-                    <input disabled [(ngModel)]="form.model.windowsAccount" [ngModelOptions]="{ standalone: true }"
-                      nz-input name="windowsAccount" id="windowsAccount" />
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.windowsAccount"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="windowsAccount"
+                      id="windowsAccount"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="mobile">{{ 'mxk.users.mobile' | i18n }}</nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid mobile!">
-                    <input disabled [(ngModel)]="form.model.mobile" readonly [ngModelOptions]="{ standalone: true }"
-                      nz-input name="mobile" id="mobile" />
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid mobile!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.mobile"
+                      readonly
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="mobile"
+                      id="mobile"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="email">{{ 'mxk.users.email' | i18n }}</nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid email!">
-                    <input disabled [(ngModel)]="form.model.email" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="email" id="email" />
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid email!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.email"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="email"
+                      id="email"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
 
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="userType">{{ 'mxk.users.userType' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid userType!">
-                    <nz-select disabled [(ngModel)]="form.model.userType" [ngModelOptions]="{ standalone: true }"
-                      name="userType" id="userType">
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="userType">{{ 'mxk.users.userType' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid userType!">
+                    <nz-select
+                      disabled
+                      [(ngModel)]="form.model.userType"
+                      [ngModelOptions]="{ standalone: true }"
+                      name="userType"
+                      id="userType"
+                    >
                       <nz-option nzValue="EMPLOYEE" nzLabel="{{ 'mxk.users.userType.employee' | i18n }}"> </nz-option>
                       <nz-option nzValue="SUPPLIER" nzLabel="{{ 'mxk.users.userType.supplier' | i18n }}"> </nz-option>
                       <nz-option nzValue="CUSTOMER" nzLabel="{{ 'mxk.users.userType.customer' | i18n }}"> </nz-option>
-                      <nz-option nzValue="CONTRACTOR" nzLabel="{{ 'mxk.users.userType.contractor' | i18n }}">
-                      </nz-option>
+                      <nz-option nzValue="CONTRACTOR" nzLabel="{{ 'mxk.users.userType.contractor' | i18n }}"> </nz-option>
                       <nz-option nzValue="DEALER" nzLabel="{{ 'mxk.users.userType.dealer' | i18n }}"></nz-option>
                       <nz-option nzValue="PARTNER" nzLabel="{{ 'mxk.users.userType.partner' | i18n }}"></nz-option>
                       <nz-option nzValue="EXTERNAL" nzLabel="{{ 'mxk.users.userType.external' | i18n }}"></nz-option>
@@ -128,15 +170,17 @@
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="userState">{{ 'mxk.users.userstate' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid userState!">
-                    <nz-select disabled [(ngModel)]="form.model.userState" [ngModelOptions]="{ standalone: true }"
-                      name="userState" id="userState">
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="userState">{{ 'mxk.users.userstate' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid userState!">
+                    <nz-select
+                      disabled
+                      [(ngModel)]="form.model.userState"
+                      [ngModelOptions]="{ standalone: true }"
+                      name="userState"
+                      id="userState"
+                    >
                       <nz-option nzValue="RESIDENT" nzLabel="{{ 'mxk.users.userstate.resident' | i18n }}"> </nz-option>
-                      <nz-option nzValue="WITHDRAWN" nzLabel="{{ 'mxk.users.userstate.withdrawn' | i18n }}">
-                      </nz-option>
+                      <nz-option nzValue="WITHDRAWN" nzLabel="{{ 'mxk.users.userstate.withdrawn' | i18n }}"> </nz-option>
                       <nz-option nzValue="INACTIVE" nzLabel="{{ 'mxk.users.userstate.inactive' | i18n }}"> </nz-option>
                       <nz-option nzValue="RETIREE" nzLabel="{{ 'mxk.users.userstate.retiree' | i18n }}"></nz-option>
                     </nz-select>
@@ -146,21 +190,28 @@
 
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="sortIndex">{{ 'mxk.text.sortIndex' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid sortIndex!">
-                    <nz-input-number disabled [(ngModel)]="form.model.sortIndex" [ngModelOptions]="{ standalone: true }"
-                      [nzMin]="1" [nzMax]="100000" [nzStep]="1"></nz-input-number>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="sortIndex">{{ 'mxk.text.sortIndex' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid sortIndex!">
+                    <nz-input-number
+                      disabled
+                      [(ngModel)]="form.model.sortIndex"
+                      [ngModelOptions]="{ standalone: true }"
+                      [nzMin]="1"
+                      [nzMax]="100000"
+                      [nzStep]="1"
+                    ></nz-input-number>
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="status">{{ 'mxk.text.status' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid status!">
-                    <nz-select disabled [(ngModel)]="form.model.str_status" [ngModelOptions]="{ standalone: true }"
-                      name="status" id="status">
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="status">{{ 'mxk.text.status' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid status!">
+                    <nz-select
+                      disabled
+                      [(ngModel)]="form.model.str_status"
+                      [ngModelOptions]="{ standalone: true }"
+                      name="status"
+                      id="status"
+                    >
                       <nz-option nzValue="1" nzLabel="{{ 'mxk.users.status.active' | i18n }}"></nz-option>
                       <nz-option nzValue="2" nzLabel="{{ 'mxk.users.status.inactive' | i18n }}"></nz-option>
                       <nz-option nzValue="4" nzLabel="{{ 'mxk.users.status.forbidden' | i18n }}"></nz-option>
@@ -174,37 +225,53 @@
             <nz-tab nzTitle="{{ 'mxk.users.tab.personal' | i18n }}">
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="familyName">{{ 'mxk.users.familyName' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="familyName">{{ 'mxk.users.familyName' | i18n }} </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="16" nzErrorTip="The input is not valid familyName!">
-                    <input [(ngModel)]="form.model.familyName" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="familyName" id="familyName" />
+                    <input
+                      [(ngModel)]="form.model.familyName"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="familyName"
+                      id="familyName"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="middleName">{{ 'mxk.users.middleName' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="middleName">{{ 'mxk.users.middleName' | i18n }} </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid middleName!">
-                    <input [(ngModel)]="form.model.middleName" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="middleName" id="middleName" />
+                    <input
+                      [(ngModel)]="form.model.middleName"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="middleName"
+                      id="middleName"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="givenName">{{ 'mxk.users.givenName' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="givenName">{{ 'mxk.users.givenName' | i18n }} </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid givenName!">
-                    <input [(ngModel)]="form.model.givenName" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="givenName" id="givenName" />
+                    <input
+                      [(ngModel)]="form.model.givenName"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="givenName"
+                      id="givenName"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="nickName">{{ 'mxk.users.nickName' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="nickName">{{ 'mxk.users.nickName' | i18n }} </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid nickName!">
-                    <input [(ngModel)]="form.model.nickName" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="nickName" id="nickName" />
+                    <input
+                      [(ngModel)]="form.model.nickName"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="nickName"
+                      id="nickName"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
@@ -212,8 +279,7 @@
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="idType">{{ 'mxk.users.idtype' | i18n }}</nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid idType!">
-                    <nz-select [(ngModel)]="form.model.str_idType" [ngModelOptions]="{ standalone: true }" name="idType"
-                      id="idType">
+                    <nz-select [(ngModel)]="form.model.str_idType" [ngModelOptions]="{ standalone: true }" name="idType" id="idType">
                       <nz-option nzValue="0" nzLabel="{{ 'mxk.users.idtype.unknown' | i18n }}"></nz-option>
                       <nz-option nzValue="1" nzLabel="{{ 'mxk.users.idtype.idcard' | i18n }}"></nz-option>
                       <nz-option nzValue="2" nzLabel="{{ 'mxk.users.idtype.passport' | i18n }}"></nz-option>
@@ -223,11 +289,15 @@
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="idCardNo">{{ 'mxk.users.idCardNo' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="idCardNo">{{ 'mxk.users.idCardNo' | i18n }} </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid idCardNo!">
-                    <input [(ngModel)]="form.model.idCardNo" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="idCardNo" id="idCardNo" />
+                    <input
+                      [(ngModel)]="form.model.idCardNo"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="idCardNo"
+                      id="idCardNo"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
@@ -235,8 +305,7 @@
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="married">{{ 'mxk.users.married' | i18n }}</nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid married!">
-                    <nz-select [(ngModel)]="form.model.str_married" [ngModelOptions]="{ standalone: true }"
-                      name="married" id="married">
+                    <nz-select [(ngModel)]="form.model.str_married" [ngModelOptions]="{ standalone: true }" name="married" id="married">
                       <nz-option nzValue="0" nzLabel="{{ 'mxk.users.married.unknown' | i18n }}"></nz-option>
                       <nz-option nzValue="1" nzLabel="{{ 'mxk.users.married.single' | i18n }}"></nz-option>
                       <nz-option nzValue="2" nzLabel="{{ 'mxk.users.married.married' | i18n }}"></nz-option>
@@ -246,66 +315,71 @@
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="birthDate">{{ 'mxk.users.birthDate' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="birthDate">{{ 'mxk.users.birthDate' | i18n }} </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid birthDate!">
-                    <input [(ngModel)]="form.model.birthDate" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="birthDate" id="birthDate" />
+                    <input
+                      [(ngModel)]="form.model.birthDate"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="birthDate"
+                      id="birthDate"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="education">{{ 'mxk.users.education' | i18n
-                    }}</nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="education">{{ 'mxk.users.education' | i18n }}</nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid education!">
-                    <input [(ngModel)]="form.model.education" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="education" />
+                    <input [(ngModel)]="form.model.education" [ngModelOptions]="{ standalone: true }" nz-input name="education" />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="graduateFrom">{{ 'mxk.users.graduateFrom' | i18n
-                    }}</nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="graduateFrom">{{ 'mxk.users.graduateFrom' | i18n }}</nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid graduateFrom!">
-                    <input [(ngModel)]="form.model.graduateFrom" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="graduateFrom" />
+                    <input [(ngModel)]="form.model.graduateFrom" [ngModelOptions]="{ standalone: true }" nz-input name="graduateFrom" />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="graduateDate">{{ 'mxk.users.graduateDate' | i18n
-                    }}</nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="graduateDate">{{ 'mxk.users.graduateDate' | i18n }}</nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid graduateDate!">
-                    <input [(ngModel)]="form.model.graduateDate" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="graduateDate" />
+                    <input [(ngModel)]="form.model.graduateDate" [ngModelOptions]="{ standalone: true }" nz-input name="graduateDate" />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="startWorkDate">{{ 'mxk.users.startWorkDate' | i18n }}
-                  </nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="startWorkDate">{{ 'mxk.users.startWorkDate' | i18n }} </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid startWorkDate!">
-                    <input [(ngModel)]="form.model.startWorkDate" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="startWorkDate" id="startWorkDate" />
+                    <input
+                      [(ngModel)]="form.model.startWorkDate"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="startWorkDate"
+                      id="startWorkDate"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="timeZone">{{ 'mxk.users.timeZone' | i18n
-                    }}</nz-form-label>
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="timeZone">{{ 'mxk.users.timeZone' | i18n }}</nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid timeZone!">
-                    <input [(ngModel)]="form.model.timeZone" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="timeZone" />
+                    <input [(ngModel)]="form.model.timeZone" [ngModelOptions]="{ standalone: true }" nz-input name="timeZone" />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="preferredLanguage">{{ 'mxk.users.preferredLanguage' |
-                    i18n }}
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="preferredLanguage"
+                    >{{ 'mxk.users.preferredLanguage' | i18n }}
                   </nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid preferredLanguage!">
-                    <input [(ngModel)]="form.model.preferredLanguage" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="preferredLanguage" id="preferredLanguage" />
+                    <input
+                      [(ngModel)]="form.model.preferredLanguage"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="preferredLanguage"
+                      id="preferredLanguage"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
@@ -313,15 +387,19 @@
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="webSite">{{ 'mxk.users.website' | i18n }}</nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid webSite!">
-                    <input [(ngModel)]="form.model.webSite" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="webSite" id="webSite" />
+                    <input [(ngModel)]="form.model.webSite" [ngModelOptions]="{ standalone: true }" nz-input name="webSite" id="webSite" />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="defineIm">{{ 'mxk.users.ims' | i18n }}</nz-form-label>
                   <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid defineIm!">
-                    <input [(ngModel)]="form.model.defineIm" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="defineIm" id="defineIm" />
+                    <input
+                      [(ngModel)]="form.model.defineIm"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="defineIm"
+                      id="defineIm"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
@@ -329,120 +407,169 @@
             <nz-tab nzTitle="{{ 'mxk.users.tab.business' | i18n }}">
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="organization">{{ 'mxk.users.organization' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid organization!">
-                    <input disabled [(ngModel)]="form.model.organization" [ngModelOptions]="{ standalone: true }"
-                      nz-input name="organization" id="organization" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="organization">{{ 'mxk.users.organization' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid organization!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.organization"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="organization"
+                      id="organization"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="division">{{ 'mxk.users.division' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid division!">
-                    <input disabled [(ngModel)]="form.model.division" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="division" id="division" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="division">{{ 'mxk.users.division' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid division!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.division"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="division"
+                      id="division"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="departmentId">{{ 'mxk.users.departmentId' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid departmentId!">
-                    <input disabled [(ngModel)]="form.model.departmentId" [ngModelOptions]="{ standalone: true }"
-                      nz-input name="departmentId" id="departmentId" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="departmentId">{{ 'mxk.users.departmentId' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid departmentId!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.departmentId"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="departmentId"
+                      id="departmentId"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="department">{{ 'mxk.users.department' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid department!">
-                    <input disabled [(ngModel)]="form.model.department" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="department" id="department" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="department">{{ 'mxk.users.department' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid department!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.department"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="department"
+                      id="department"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="costCenter">{{ 'mxk.users.costCenter' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid departmentId!">
-                    <input disabled [(ngModel)]="form.model.costCenter" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="costCenter" id="costCenter" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="costCenter">{{ 'mxk.users.costCenter' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid departmentId!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.costCenter"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="costCenter"
+                      id="costCenter"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="jobLevel">{{ 'mxk.users.jobLevel' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid jobLevel!">
-                    <input disabled [(ngModel)]="form.model.jobLevel" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="jobLevel" id="jobLevel" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="jobLevel">{{ 'mxk.users.jobLevel' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid jobLevel!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.jobLevel"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="jobLevel"
+                      id="jobLevel"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="jobTitle">{{ 'mxk.users.jobTitle' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid jobTitle!">
-                    <input disabled [(ngModel)]="form.model.jobTitle" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="jobTitle" id="jobTitle" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="jobTitle">{{ 'mxk.users.jobTitle' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid jobTitle!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.jobTitle"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="jobTitle"
+                      id="jobTitle"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="manager">{{ 'mxk.users.manager' | i18n }}</nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid manager!">
-                    <input disabled [(ngModel)]="form.model.manager" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="manager" id="manager" />
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid manager!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.manager"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="manager"
+                      id="manager"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="assistant">{{ 'mxk.users.assistant' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid assistant!">
-                    <input disabled [(ngModel)]="form.model.assistant" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="assistant" id="assistant" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="assistant">{{ 'mxk.users.assistant' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid assistant!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.assistant"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="assistant"
+                      id="assistant"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workOfficeName">{{ 'mxk.users.workOfficeName' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid workOfficeName!">
-                    <input disabled [(ngModel)]="form.model.workOfficeName" [ngModelOptions]="{ standalone: true }"
-                      nz-input name="workOfficeName" id="workOfficeName" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workOfficeName">{{ 'mxk.users.workOfficeName' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workOfficeName!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.workOfficeName"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="workOfficeName"
+                      id="workOfficeName"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="entryDate">{{ 'mxk.users.entryDate' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid entryDate!">
-                    <input disabled [(ngModel)]="form.model.entryDate" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="entryDate" id="entryDate" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="entryDate">{{ 'mxk.users.entryDate' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid entryDate!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.entryDate"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="entryDate"
+                      id="entryDate"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="quitDate">{{ 'mxk.users.quitDate' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid quitDate!">
-                    <input disabled [(ngModel)]="form.model.quitDate" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="quitDate" id="quitDate" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="quitDate">{{ 'mxk.users.quitDate' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid quitDate!">
+                    <input
+                      disabled
+                      [(ngModel)]="form.model.quitDate"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="quitDate"
+                      id="quitDate"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
@@ -450,80 +577,93 @@
             <nz-tab nzTitle="{{ 'mxk.users.tab.business.extra' | i18n }}">
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workPhoneNumber">{{ 'mxk.users.workPhoneNumber' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid workPhoneNumber!">
-                    <input [(ngModel)]="form.model.workPhoneNumber" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="workPhoneNumber" id="workPhoneNumber" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workPhoneNumber">{{ 'mxk.users.workPhoneNumber' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workPhoneNumber!">
+                    <input
+                      [(ngModel)]="form.model.workPhoneNumber"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="workPhoneNumber"
+                      id="workPhoneNumber"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workEmail">{{ 'mxk.users.workEmail' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid workEmail!">
-                    <input [(ngModel)]="form.model.workEmail" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="workEmail" id="workEmail" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workEmail">{{ 'mxk.users.workEmail' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workEmail!">
+                    <input
+                      [(ngModel)]="form.model.workEmail"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="workEmail"
+                      id="workEmail"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workCountry">{{ 'mxk.users.workCountry' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid workCountry!">
-                    <input [(ngModel)]="form.model.workCountry" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="workCountry" id="workCountry" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workCountry">{{ 'mxk.users.workCountry' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workCountry!">
+                    <input
+                      [(ngModel)]="form.model.workCountry"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="workCountry"
+                      id="workCountry"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="region">{{ 'mxk.users.workRegion' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid region!">
-                    <input [(ngModel)]="form.model.workRegion" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="region" id="region" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="region">{{ 'mxk.users.workRegion' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid region!">
+                    <input [(ngModel)]="form.model.workRegion" [ngModelOptions]="{ standalone: true }" nz-input name="region" id="region" />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="locality">{{ 'mxk.users.workLocality' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid locality!">
-                    <input [(ngModel)]="form.model.workLocality" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="locality" id="locality" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="locality">{{ 'mxk.users.workLocality' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid locality!">
+                    <input
+                      [(ngModel)]="form.model.workLocality"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="locality"
+                      id="locality"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="street">{{ 'mxk.users.workStreetAddress' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid street!">
-                    <input [(ngModel)]="form.model.workStreetAddress" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="street" id="street" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="street">{{ 'mxk.users.workStreetAddress' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid street!">
+                    <input
+                      [(ngModel)]="form.model.workStreetAddress"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="street"
+                      id="street"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="postalCode">{{ 'mxk.users.workPostalCode' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid postalCode!">
-                    <input [(ngModel)]="form.model.workPostalCode" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="postalCode" id="postalCode" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="postalCode">{{ 'mxk.users.workPostalCode' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid postalCode!">
+                    <input
+                      [(ngModel)]="form.model.workPostalCode"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="postalCode"
+                      id="postalCode"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workFax">{{ 'mxk.users.workFax' | i18n }}</nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid workFax!">
-                    <input [(ngModel)]="form.model.workFax" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="workFax" id="workFax" />
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workFax!">
+                    <input [(ngModel)]="form.model.workFax" [ngModelOptions]="{ standalone: true }" nz-input name="workFax" id="workFax" />
                   </nz-form-control>
                 </nz-form-item>
               </div>
@@ -531,81 +671,95 @@
             <nz-tab nzTitle="{{ 'mxk.users.tab.home' | i18n }}">
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeEmail">{{ 'mxk.users.homeEmail' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid homeEmail!">
-                    <input [(ngModel)]="form.model.homeEmail" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="homeEmail" id="homeEmail" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeEmail">{{ 'mxk.users.homeEmail' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid homeEmail!">
+                    <input
+                      [(ngModel)]="form.model.homeEmail"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="homeEmail"
+                      id="homeEmail"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homePhoneNumber">{{ 'mxk.users.homePhoneNumber' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid homePhoneNumber!">
-                    <input [(ngModel)]="form.model.homePhoneNumber" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="homePhoneNumber" id="homePhoneNumber" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homePhoneNumber">{{ 'mxk.users.homePhoneNumber' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid homePhoneNumber!">
+                    <input
+                      [(ngModel)]="form.model.homePhoneNumber"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="homePhoneNumber"
+                      id="homePhoneNumber"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
                   <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeFax">{{ 'mxk.users.homeFax' | i18n }}</nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid homeFax!">
-                    <input [(ngModel)]="form.model.homeFax" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="homeFax" id="homeFax" />
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid homeFax!">
+                    <input [(ngModel)]="form.model.homeFax" [ngModelOptions]="{ standalone: true }" nz-input name="homeFax" id="homeFax" />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homePostalCode">{{ 'mxk.users.homePostalCode' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid postalCode!">
-                    <input [(ngModel)]="form.model.homePostalCode" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="homePostalCode" id="homePostalCode" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homePostalCode">{{ 'mxk.users.homePostalCode' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid postalCode!">
+                    <input
+                      [(ngModel)]="form.model.homePostalCode"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="homePostalCode"
+                      id="homePostalCode"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeCountry">{{ 'mxk.users.homeCountry' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid homeCountry!">
-                    <input [(ngModel)]="form.model.homeCountry" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="homeCountry" id="homeCountry" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeCountry">{{ 'mxk.users.homeCountry' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid homeCountry!">
+                    <input
+                      [(ngModel)]="form.model.homeCountry"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="homeCountry"
+                      id="homeCountry"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="region">{{ 'mxk.users.homeRegion' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid region!">
-                    <input [(ngModel)]="form.model.homeRegion" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="region" id="region" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="region">{{ 'mxk.users.homeRegion' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid region!">
+                    <input [(ngModel)]="form.model.homeRegion" [ngModelOptions]="{ standalone: true }" nz-input name="region" id="region" />
                   </nz-form-control>
                 </nz-form-item>
               </div>
               <div nz-row>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="locality">{{ 'mxk.users.homeLocality' | i18n }}
-                  </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid locality!">
-                    <input [(ngModel)]="form.model.homeLocality" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="locality" id="locality" />
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="locality">{{ 'mxk.users.homeLocality' | i18n }} </nz-form-label>
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid locality!">
+                    <input
+                      [(ngModel)]="form.model.homeLocality"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="locality"
+                      id="locality"
+                    />
                   </nz-form-control>
                 </nz-form-item>
                 <nz-form-item>
-                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeStreetAddress">{{ 'mxk.users.homeStreetAddress' |
-                    i18n }}
+                  <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeStreetAddress"
+                    >{{ 'mxk.users.homeStreetAddress' | i18n }}
                   </nz-form-label>
-                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                    nzErrorTip="The input is not valid street!">
-                    <input [(ngModel)]="form.model.homeStreetAddress" [ngModelOptions]="{ standalone: true }" nz-input
-                      name="street" id="street" />
+                  <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid street!">
+                    <input
+                      [(ngModel)]="form.model.homeStreetAddress"
+                      [ngModelOptions]="{ standalone: true }"
+                      nz-input
+                      name="street"
+                      id="street"
+                    />
                   </nz-form-control>
                 </nz-form-item>
               </div>
@@ -624,4 +778,4 @@
     </div>
     <div nz-col nzMd="3"></div>
   </div>
-</nz-card>
\ No newline at end of file
+</nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-basic-details-editer/app-basic-details-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-basic-details-editer/app-basic-details-editer.component.html
index 211ef53af..e3f737b22 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-basic-details-editer/app-basic-details-editer.component.html
+++ b/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)"
               >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-cas-details-editer/app-cas-details-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-cas-details-editer/app-cas-details-editer.component.html
index 37006139c..35d96da91 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-cas-details-editer/app-cas-details-editer.component.html
+++ b/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)"
               >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-extend-api-details-editer/app-extend-api-details-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-extend-api-details-editer/app-extend-api-details-editer.component.html
index e0cca5c0a..0f582ee48 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-extend-api-details-editer/app-extend-api-details-editer.component.html
+++ b/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)"
               >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-form-based-details-editer/app-form-based-details-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-form-based-details-editer/app-form-based-details-editer.component.html
index 47ffd96a6..15fa1803d 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-form-based-details-editer/app-form-based-details-editer.component.html
+++ b/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)"
               >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-jwt-details-editer/app-jwt-details-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-jwt-details-editer/app-jwt-details-editer.component.html
index fc73f1f51..59bfd8c1f 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-jwt-details-editer/app-jwt-details-editer.component.html
+++ b/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)"
               >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-oauth20-details-editer/app-oauth20-details-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-oauth20-details-editer/app-oauth20-details-editer.component.html
index 53b5280b2..e038027b6 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-oauth20-details-editer/app-oauth20-details-editer.component.html
+++ b/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"
-                  id="id" />
+                <input [(ngModel)]="form.model.id" readonly [ngModelOptions]="{ standalone: true }" nz-input name="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>
-              <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-                nzErrorTip="The input is not valid secret!">
+              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="secret">{{ 'mxk.apps.secret' | i18n }} </nz-form-label>
+              <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
-                    name="secret" id="secret" />
+                  <input
+                    [(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'
-                    | i18n }}</button>
+                  <button nz-button nzType="primary" nzSearch (click)="onGenerateSecret($event)">{{ 'mxk.text.generate' | 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"
-                nzName="uploadFile" [nzShowButton]="fileList.length < 1" [nzPreview]="handlePreview"
-                (nzChange)="uploadImageChange($event)">
+              <nz-upload
+                nzAction="/file/upload/"
+                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"
-                (nzOnCancel)="previewVisible = false">
+              <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (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"
-              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
+              style="display: none"
+              [nzSm]="16"
+              [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>
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="appName">{{ 'mxk.apps.name' | i18n }} </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"
-                id="appName" />
+              <input [(ngModel)]="form.model.appName" [ngModelOptions]="{ standalone: true }" nz-input name="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"
-              nzErrorTip="The input is not valid frequently!">
-              <nz-radio-group [(ngModel)]="form.model.frequently" [ngModelOptions]="{ standalone: true }"
-                nzButtonStyle="solid">
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid frequently!">
+              <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>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid protocol!">
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="protocol">{{ 'mxk.apps.protocol' | i18n }} </nz-form-label>
+            <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"
-              nzErrorTip="The input is not valid category!">
-              <nz-select [(ngModel)]="form.model.category" [ngModelOptions]="{ standalone: true }" name="category"
-                id="category">
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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>
-            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid loginUrl!">
-              <input [(ngModel)]="form.model.loginUrl" [ngModelOptions]="{ standalone: true }" nz-input name="loginUrl"
-                id="loginUrl" />
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="loginUrl">{{ 'mxk.apps.loginUrl' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" 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>
+            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="status">{{ 'mxk.text.status' | i18n }} </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"
-                [nzCheckedChildren]="statuscheckedTemplate" [nzUnCheckedChildren]="statusunCheckedTemplate"></nz-switch>
+              <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>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid isExtendAttr!">
-              <nz-radio-group [(ngModel)]="form.model.isExtendAttr" [ngModelOptions]="{ standalone: true }"
-                nzButtonStyle="solid">
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="isExtendAttr">{{ 'mxk.apps.isExtendAttr' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" 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-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid registeredRedirectUris!">
-              <textarea [(ngModel)]="form.model.registeredRedirectUris" [ngModelOptions]="{ standalone: true }" nz-input
-                name="registeredRedirectUris" id="registeredRedirectUris"></textarea>
+            }}</nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid registeredRedirectUris!">
+              <textarea
+                [(ngModel)]="form.model.registeredRedirectUris"
+                [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>
-            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid authorizedGrantTypes!">
-              <nz-select [(ngModel)]="form.model.select_authorizedGrantTypes" nzMode="multiple"
-                nzPlaceHolder="Please select" [ngModelOptions]="{ standalone: true }" name="authorizedGrantTypes">
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="GrantTypes">{{ 'mxk.apps.oauth.GrantTypes' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid authorizedGrantTypes!">
+              <nz-select
+                [(ngModel)]="form.model.select_authorizedGrantTypes"
+                nzMode="multiple"
+                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>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid subject!">
-              <nz-select [(ngModel)]="form.model.subject" [ngModelOptions]="{ standalone: true }" name="subject"
-                id="subject">
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="subject">{{ 'mxk.apps.oauth.subject' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" 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>
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="scope">{{ 'mxk.apps.oauth.scope' | i18n }} </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"
-                nzPlaceHolder="Please select">
+              <nz-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-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid approvalPrompt!">
+            }}</nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid approvalPrompt!">
               <nz-input-group>
-                <nz-radio-group [(ngModel)]="form.model.approvalPrompt" [ngModelOptions]="{ standalone: true }"
-                  nzButtonStyle="solid">
+                <nz-radio-group [(ngModel)]="form.model.approvalPrompt" [ngModelOptions]="{ standalone: true }" 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 }"
-                  nzButtonStyle="solid">
+                <nz-radio-group [(ngModel)]="form.model.pkce" [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>
@@ -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-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid accessTokenValiditySeconds!">
+            }}</nz-form-label>
+            <nz-form-control
+              [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 }"
-                  nz-input name="accessTokenValiditySeconds" id="accessTokenValiditySeconds" />
+                <input
+                  [(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-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid expires!">
+            }}</nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid expires!">
               <nz-input-group nzAddOnAfter="{{ 'mxk.text.second' | i18n }}">
-                <input [(ngModel)]="form.model.refreshTokenValiditySeconds" [ngModelOptions]="{ standalone: true }"
-                  nz-input name="refreshTokenValiditySeconds" id="refreshTokenValiditySeconds" />
+                <input
+                  [(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>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid issuer!">
-              <input [(ngModel)]="form.model.issuer" [ngModelOptions]="{ standalone: true }" nz-input name="issuer"
-                id="issuer" />
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="issuer">{{ 'mxk.apps.oauth.connect.issuer' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" 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>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid audience!">
-              <input [(ngModel)]="form.model.audience" [ngModelOptions]="{ standalone: true }" nz-input name="audience"
-                id="audience" />
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="audience">{{ 'mxk.apps.oauth.connect.audience' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" 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>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid signature!">
-              <nz-select (ngModelChange)="onSelectSignature($event)" [(ngModel)]="form.model.signature"
-                [ngModelOptions]="{ standalone: true }" name="signature" id="signature">
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="signature">{{ 'mxk.apps.oauth.connect.signature' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid signature!">
+              <nz-select
+                (ngModelChange)="onSelectSignature($event)"
+                [(ngModel)]="form.model.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-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid userInfoResponse!">
-              <nz-select [(ngModel)]="form.model.userInfoResponse" [ngModelOptions]="{ standalone: true }"
-                name="userInfoResponse" id="userInfoResponse">
+            }}</nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid userInfoResponse!">
+              <nz-select
+                [(ngModel)]="form.model.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>
-            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid signatureKey!">
-              <textarea [(ngModel)]="form.model.signatureKey" [ngModelOptions]="{ standalone: true }" nz-input
-                name="signatureKey" id="signatureKey"></textarea>
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="signatureKey">{{ 'mxk.apps.oauth.connect.signatureKey' | i18n }}</nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid signatureKey!">
+              <textarea
+                [(ngModel)]="form.model.signatureKey"
+                [ngModelOptions]="{ standalone: true }"
+                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>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid algorithm!">
-              <nz-select (ngModelChange)="onSelectAlgorithm($event)" [(ngModel)]="form.model.algorithm"
-                [ngModelOptions]="{ standalone: true }" name="algorithm" id="algorithm">
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="algorithm">{{ 'mxk.apps.oauth.connect.algorithm' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid algorithm!">
+              <nz-select
+                (ngModelChange)="onSelectAlgorithm($event)"
+                [(ngModel)]="form.model.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-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid encryptionMethod!">
-              <nz-select [(ngModel)]="form.model.encryptionMethod" [ngModelOptions]="{ standalone: true }"
-                name="encryptionMethod" id="encryptionMethod">
+            }}</nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid encryptionMethod!">
+              <nz-select
+                [(ngModel)]="form.model.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>
-            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid algorithmKey!">
-              <textarea [(ngModel)]="form.model.algorithmKey" [ngModelOptions]="{ standalone: true }" nz-input
-                name="algorithmKey" id="algorithmKey"></textarea>
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="algorithmKey">{{ 'mxk.apps.oauth.connect.algorithmKey' | i18n }}</nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid algorithmKey!">
+              <textarea
+                [(ngModel)]="form.model.algorithmKey"
+                [ngModelOptions]="{ standalone: true }"
+                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"
-              nzErrorTip="The input is not valid logoutUrl!">
-              <input [(ngModel)]="form.model.logoutUrl" [ngModelOptions]="{ standalone: true }" nz-input
-                name="logoutUrl" id="logoutUrl" />
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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"
-              nzErrorTip="The input is not valid logoutType!">
-              <nz-select [(ngModel)]="form.model.logoutType" [ngModelOptions]="{ standalone: true }" name="logoutType"
-                id="logoutType">
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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"
-              nzErrorTip="The input is not valid visible!">
-              <nz-select [(ngModel)]="form.model.visible" [ngModelOptions]="{ standalone: true }" name="visible"
-                id="visible">
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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"
-              nzErrorTip="The input is not valid sortIndex!">
-              <input [(ngModel)]="form.model.sortIndex" [ngModelOptions]="{ standalone: true }" nz-input
-                name="sortIndex" id="sortIndex" />
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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"
-              nzErrorTip="The input is not valid vendor!">
-              <input [(ngModel)]="form.model.vendor" [ngModelOptions]="{ standalone: true }" nz-input name="vendor"
-                id="vendor" />
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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"
-              nzErrorTip="The input is not valid vendorUrl!">
-              <input [(ngModel)]="form.model.vendorUrl" [ngModelOptions]="{ standalone: true }" nz-input
-                name="vendorUrl" id="vendorUrl" />
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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"
-              nzErrorTip="The input is not valid isAdapter!">
-              <nz-select [(ngModel)]="form.model.isAdapter" [ngModelOptions]="{ standalone: true }" name="isAdapter"
-                id="isAdapter">
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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"
-              nzErrorTip="The input is not valid adapterName!">
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid adapterName!">
               <nz-input-group nzSearch [nzAddOnAfter]="suffixAdapterButton">
-                <input [(ngModel)]="form.model.adapterName" [ngModelOptions]="{ standalone: true }" nz-input
-                  name="adapterName" id="adapterName" />
+                <input
+                  [(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' |
-                  i18n }}</button>
+                <button nz-button nzType="primary" nzSearch (click)="onSelectAdapter($event)">{{ 'mxk.text.select' | i18n }}</button>
               </ng-template>
-              <input type="hidden" [(ngModel)]="form.model.adapterId" [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" />
+              <input
+                type="hidden"
+                [(ngModel)]="form.model.adapterId"
+                [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"
-              nzErrorTip="The input is not valid inducer!">
-              <nz-select [(ngModel)]="form.model.inducer" [ngModelOptions]="{ standalone: true }" name="isAdapter"
-                id="inducer">
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid 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>
-            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid description!">
-              <input [(ngModel)]="form.model.description" [ngModelOptions]="{ standalone: true }" nz-input
-                name="description" id="description" />
+            <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="description">{{ 'mxk.text.description' | i18n }} </nz-form-label>
+            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid description!">
+              <input
+                [(ngModel)]="form.model.description"
+                [ngModelOptions]="{ standalone: true }"
+                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 nz-button type="button" (click)="deleteExtraAttrRow(data.id)" nzDanger>{{ 'mxk.text.delete' |
-                    i18n }}</button>
+                  }}</button>
+                  <button nz-button type="button" (click)="deleteExtraAttrRow(data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
                 </td>
               </ng-container>
               <ng-template #editTemplate>
-                <td><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.attr"
-                    [ngModelOptions]="{ standalone: true }" /></td>
-                <td><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.type"
-                    [ngModelOptions]="{ standalone: true }" /></td>
-                <td><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.value"
-                    [ngModelOptions]="{ standalone: true }" /></td>
+                <td
+                  ><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.attr" [ngModelOptions]="{ standalone: true }"
+                /></td>
+                <td
+                  ><input type="text" nz-input [(ngModel)]="extraAttrEditCache[data.id].data.type" [ngModelOptions]="{ standalone: true }"
+                /></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>
@@ -577,4 +621,4 @@
 <div *nzModalFooter>
   <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
   <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
-</div>
\ No newline at end of file
+</div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-saml20-details-editer/app-saml20-details-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-saml20-details-editer/app-saml20-details-editer.component.html
index 8899b0bde..dc2bebd31 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-saml20-details-editer/app-saml20-details-editer.component.html
+++ b/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)"
               >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-token-based-details-editer/app-token-based-details-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-token-based-details-editer/app-token-based-details-editer.component.html
index 26db36f76..35f57bc65 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/app-token-based-details-editer/app-token-based-details-editer.component.html
+++ b/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)"
               >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/user-editer/user-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/user-editer/user-editer.component.html
index b930c9088..edb2785e0 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/user-editer/user-editer.component.html
+++ b/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>