hide oidc tab while protocol not OpenID_Connect_v1.0

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

@@ -8,24 +8,22 @@
             <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>
@@ -34,57 +32,44 @@
           <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" [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>
@@ -93,8 +78,10 @@
         </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>
@@ -104,8 +91,10 @@
           </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>
@@ -140,31 +129,33 @@
         </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>
@@ -177,29 +168,22 @@
           <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>
@@ -213,9 +197,12 @@
         </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>
@@ -226,14 +213,11 @@
             </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>
@@ -251,10 +235,12 @@
           <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>
@@ -265,7 +251,8 @@
             <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>
@@ -277,70 +264,59 @@
           <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>
         </div>
       </nz-tab>
-      <nz-tab nzTitle="{{ 'mxk.apps.oauth.connect.tab' | i18n }}">
+      <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>
@@ -354,14 +330,11 @@
           <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>
@@ -372,29 +345,23 @@
         </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>
@@ -411,14 +378,11 @@
           <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>
@@ -432,15 +396,12 @@
         </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>
@@ -449,14 +410,18 @@
         <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>
@@ -468,8 +433,10 @@
         <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>
@@ -479,30 +446,38 @@
           </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>
@@ -510,49 +485,31 @@
           </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 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>
@@ -577,24 +534,22 @@
                 <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>
@@ -608,4 +563,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>
+</div>