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

<div *nzModalTitle> {{ isEdit ? ('mxk.text.edit' | i18n) : ('mxk.text.add' | i18n) }} </div>
<div>
  <form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit($event)" se-container="1">
    <nz-tabset style="width: 100%">
      <nz-tab nzTitle="{{ 'mxk.apps.tab.basic' | i18n }}">
        <div nz-row>
          <nz-form-item>
            <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" />
              </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!">
                <input
                  [(ngModel)]="form.model.secret"
                  readonly
                  [ngModelOptions]="{ standalone: true }"
                  nz-input
                  name="secret"
                  id="secret"
                />
              </nz-form-control>
            </nz-form-item>
          </nz-form-item>

          <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)"
              >
                <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">
                <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>
          </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-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" />
            </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">
                <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>
            </nz-form-control>
          </nz-form-item>
        </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!">
              <input [(ngModel)]="form.model.protocol" [ngModelOptions]="{ standalone: true }" nz-input name="protocol" id="protocol" />
            </nz-form-control>
          </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-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>
                <nz-option nzValue="1013" nzLabel="{{ 'mxk.apps.category.1013' | i18n }}"></nz-option>
                <nz-option nzValue="1014" nzLabel="{{ 'mxk.apps.category.1014' | i18n }}"></nz-option>
                <nz-option nzValue="1015" nzLabel="{{ 'mxk.apps.category.1015' | i18n }}"></nz-option>
                <nz-option nzValue="1016" nzLabel="{{ 'mxk.apps.category.1016' | i18n }}"></nz-option>
                <nz-option nzValue="1017" nzLabel="{{ 'mxk.apps.category.1017' | i18n }}"></nz-option>
                <nz-option nzValue="1111" nzLabel="{{ 'mxk.apps.category.1111' | i18n }}"></nz-option>
                <nz-option nzValue="1112" nzLabel="{{ 'mxk.apps.category.1112' | i18n }}"></nz-option>
                <nz-option nzValue="1113" nzLabel="{{ 'mxk.apps.category.1113' | i18n }}"></nz-option>
                <nz-option nzValue="1114" nzLabel="{{ 'mxk.apps.category.1114' | i18n }}"></nz-option>
                <nz-option nzValue="1211" nzLabel="{{ 'mxk.apps.category.1211' | i18n }}"></nz-option>
                <nz-option nzValue="1212" nzLabel="{{ 'mxk.apps.category.1212' | i18n }}"></nz-option>
                <nz-option nzValue="1213" nzLabel="{{ 'mxk.apps.category.1213' | i18n }}"></nz-option>
                <nz-option nzValue="1214" nzLabel="{{ 'mxk.apps.category.1214' | i18n }}"></nz-option>
                <nz-option nzValue="1215" nzLabel="{{ 'mxk.apps.category.1215' | i18n }}"></nz-option>
                <nz-option nzValue="1311" nzLabel="{{ 'mxk.apps.category.1311' | i18n }}"></nz-option>
                <nz-option nzValue="1411" nzLabel="{{ 'mxk.apps.category.1411' | i18n }}"></nz-option>
                <nz-option nzValue="1511" nzLabel="{{ 'mxk.apps.category.1511' | i18n }}"></nz-option>
                <nz-option nzValue="1512" nzLabel="{{ 'mxk.apps.category.1512' | i18n }}"></nz-option>
                <nz-option nzValue="1611" nzLabel="{{ 'mxk.apps.category.1611' | i18n }}"></nz-option>
                <nz-option nzValue="1711" nzLabel="{{ 'mxk.apps.category.1711' | i18n }}"></nz-option>
                <nz-option nzValue="1712" nzLabel="{{ 'mxk.apps.category.1712' | i18n }}"></nz-option>
                <nz-option nzValue="1811" nzLabel="{{ 'mxk.apps.category.1811' | i18n }}"></nz-option>
                <nz-option nzValue="1812" nzLabel="{{ 'mxk.apps.category.1812' | i18n }}"></nz-option>
                <nz-option nzValue="1911" nzLabel="{{ 'mxk.apps.category.1911' | i18n }}"></nz-option>
                <nz-option nzValue="1912" nzLabel="{{ 'mxk.apps.category.1912' | i18n }}"></nz-option>
              </nz-select>
            </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="loginUrl">{{ 'mxk.apps.loginUrl' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="20" [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-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>
              <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">
                <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>
            </nz-form-control>
          </nz-form-item>
        </div>
      </nz-tab>
      <nz-tab nzTitle="{{ 'mxk.apps.saml.tab' | i18n }}">
        <div nz-row>
          <nz-form-item style="width: 100%">
            <nz-form-label [nzSm]="4" [nzXs]="24" nzRequired nzFor="spAcsUrl">{{ 'mxk.apps.saml.spAcsUrl' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid spAcsUrl!">
              <input [(ngModel)]="form.model.spAcsUrl" [ngModelOptions]="{ standalone: true }" nz-input name="spAcsUrl" id="spAcsUrl" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="binding">{{ 'mxk.apps.saml.binding' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid binding!">
              <nz-select [(ngModel)]="form.model.binding" [ngModelOptions]="{ standalone: true }" nz-input name="binding" id="binding">
                <nz-option nzValue="Redirect-Post" nzLabel="Redirect-Post"></nz-option>
                <nz-option nzValue="Post-Post" nzLabel="Post-Post"></nz-option>
                <nz-option nzValue="IdpInit-Post" nzLabel="IdpInit-Post"></nz-option>
                <nz-option nzValue="Redirect-PostSimpleSign" nzLabel="Redirect-PostSimpleSign"></nz-option>
                <nz-option nzValue="Post-PostSimpleSign" nzLabel="Post-PostSimpleSign"></nz-option>
                <nz-option nzValue="IdpInit-PostSimpleSign" nzLabel="IdpInit-PostSimpleSign"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="entityId">{{ 'mxk.apps.saml.entityId' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid entityId!">
              <input [(ngModel)]="form.model.entityId" [ngModelOptions]="{ standalone: true }" nz-input name="entityId" id="entityId" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="audience">{{ 'mxk.apps.saml.audience' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [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>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="issuer">{{ 'mxk.apps.saml.issuer' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [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>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="signature">{{ 'mxk.apps.saml.signature' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid signature!">
              <nz-select
                [(ngModel)]="form.model.signature"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="signature"
                id="signature"
              >
                <nz-option nzValue="RSAwithSHA1" nzLabel="RSAwithSHA1"></nz-option>
                <nz-option nzValue="RSAwithSHA256" nzLabel="RSAwithSHA256"></nz-option>
                <nz-option nzValue="RSAwithSHA384" nzLabel="RSAwithSHA384"></nz-option>
                <nz-option nzValue="RSAwithSHA512" nzLabel="RSAwithSHA512"></nz-option>
                <nz-option nzValue="RSAwithMD5" nzLabel="RSAwithMD5"></nz-option>
                <nz-option nzValue="RSAwithRIPEMD160" nzLabel="RSAwithRIPEMD160"></nz-option>
                <nz-option nzValue="DSAwithSHA1" nzLabel="DSAwithSHA1"></nz-option>
                <nz-option nzValue="ECDSAwithSHA1" nzLabel="ECDSAwithSHA1"></nz-option>
                <nz-option nzValue="ECDSAwithSHA256" nzLabel="ECDSAwithSHA256"></nz-option>
                <nz-option nzValue="ECDSAwithSHA384" nzLabel="ECDSAwithSHA384"></nz-option>
                <nz-option nzValue="ECDSAwithSHA512" nzLabel="ECDSAwithSHA512"></nz-option>
                <nz-option nzValue="HMAC-MD5" nzLabel="HMAC-MD5"></nz-option>
                <nz-option nzValue="HMAC-SHA1" nzLabel="HMAC-SHA1"></nz-option>
                <nz-option nzValue="HMAC-SHA256" nzLabel="HMAC-SHA256"></nz-option>
                <nz-option nzValue="HMAC-SHA384" nzLabel="HMAC-SHA384"></nz-option>
                <nz-option nzValue="HMAC-SHA512" nzLabel="HMAC-SHA512"></nz-option>
                <nz-option nzValue="HMAC-RIPEMD160" nzLabel="HMAC-RIPEMD160"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="digestMethod">{{ 'mxk.apps.saml.digestMethod' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid digestMethod!">
              <nz-select
                [(ngModel)]="form.model.digestMethod"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="digestMethod"
                id="digestMethod"
              >
                <nz-option nzValue="MD5" nzLabel="MD5"></nz-option>
                <nz-option nzValue="SHA1" nzLabel="SHA1"></nz-option>
                <nz-option nzValue="SHA256" nzLabel="SHA256"></nz-option>
                <nz-option nzValue="SHA384" nzLabel="SHA384"></nz-option>
                <nz-option nzValue="SHA512" nzLabel="SHA512"></nz-option>
                <nz-option nzValue="RIPEMD-160" nzLabel="RIPEMD-160"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="encrypted">{{ 'mxk.apps.saml.encrypted' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid encrypted!">
              <nz-select
                [(ngModel)]="form.model.encrypted"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="encrypted"
                id="encrypted"
              >
                <nz-option nzValue="no" nzLabel="{{ 'mxk.apps.saml.encrypted.no' | i18n }}"></nz-option>
                <nz-option nzValue="yes" nzLabel="{{ 'mxk.apps.saml.encrypted.yes' | i18n }}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="validityInterval">{{
              'mxk.apps.saml.validityInterval' | i18n
            }}</nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid validityInterval!">
              <nz-input-group nzAddOnAfter="{{ 'mxk.text.second' | i18n }}">
                <input
                  [(ngModel)]="form.model.validityInterval"
                  [ngModelOptions]="{ standalone: true }"
                  nz-input
                  name="validityInterval"
                  id="validityInterval"
                />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="nameidFormat">{{ 'mxk.apps.saml.nameidFormat' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid nameidFormat!">
              <nz-select
                [(ngModel)]="form.model.nameidFormat"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="nameidFormat"
                id="nameidFormat"
              >
                <nz-option nzValue="persistent" nzLabel="persistent"></nz-option>
                <nz-option nzValue="transient" nzLabel="transient"></nz-option>
                <nz-option nzValue="emailAddress" nzLabel="emailAddress"></nz-option>
                <nz-option nzValue="X509SubjectName" nzLabel="X509SubjectName"></nz-option>
                <nz-option nzValue="WindowsDomainQualifiedName" nzLabel="WindowsDomainQualifiedName"></nz-option>
                <nz-option nzValue="unspecified" nzLabel="unspecified"></nz-option>
                <nz-option nzValue="entity" nzLabel="entity"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="nameIdConvert">{{
              'mxk.apps.saml.nameIdConvert' | i18n
            }}</nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid nameIdConvert!">
              <nz-select
                [(ngModel)]="form.model.nameIdConvert"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="nameIdConvert"
                id="nameIdConvert"
              >
                <nz-option nzValue="original" nzLabel="{{ 'mxk.apps.saml.nameIdConvert.original' | i18n }}"></nz-option>
                <nz-option nzValue="uppercase" nzLabel="{{ 'mxk.apps.saml.nameIdConvert.upperCase' | i18n }}"> </nz-option>
                <nz-option nzValue="lowercase" nzLabel="{{ 'mxk.apps.saml.nameIdConvert.lowerCase' | i18n }}"> </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="fileType">{{ 'mxk.apps.saml.fileType' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid fileType!">
              <nz-select [(ngModel)]="form.model.fileType" [ngModelOptions]="{ standalone: true }" nz-input name="fileType" id="fileType">
                <nz-option nzValue="certificate" nzLabel="{{ 'mxk.apps.saml.fileType.certificate' | i18n }}"> </nz-option>
                <nz-option nzValue="metadata_file" nzLabel="{{ 'mxk.apps.saml.fileType.metadata.file' | i18n }}"> </nz-option>
                <nz-option nzValue="metadata_url" nzLabel="{{ 'mxk.apps.saml.fileType.metadata.url' | i18n }}"> </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="metaFile">{{ 'mxk.apps.saml.metaFile' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid nameIdConvert!">
              <nz-upload
                *ngIf="form.model.fileType == 'certificate' || form.model.fileType == 'metadata_file'"
                nzAction="/file/upload/"
                nzName="uploadFile"
                (nzChange)="uploadMetaChange($event)"
              >
                <div class="ant-btn">
                  <i nz-icon nzType="upload"></i>
                  {{ 'mxk.text.upload' | i18n }}
                </div>
              </nz-upload>
              <input
                *ngIf="form.model.fileType == 'metadata_url'"
                [(ngModel)]="form.model.metaUrl"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="metaUrl"
                id="metaUrl"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="certIssuer">{{ 'mxk.apps.saml.certIssuer' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid certIssuer!">
              <input
                [(ngModel)]="form.model.certIssuer"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                disabled="true"
                name="certIssuer"
                id="certIssuer"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="certExpiration">{{
              'mxk.apps.saml.certExpiration' | i18n
            }}</nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid issuer!">
              <input
                [(ngModel)]="form.model.certExpiration"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                disabled="true"
                name="certExpiration"
                id="certExpiration"
              />
            </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="certSubject">{{ 'mxk.apps.saml.certSubject' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="20" [nzMd]="20" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid certSubject!">
              <input
                [(ngModel)]="form.model.certSubject"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                disabled="true"
                name="certSubject"
                id="certSubject"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
      </nz-tab>

      <nz-tab nzTitle="{{ 'mxk.apps.tab.extra' | i18n }}">
        <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>
          </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-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>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <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-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>
                <nz-option nzValue="3" nzLabel="{{ 'mxk.apps.visible.intranet' | i18n }}"></nz-option>
              </nz-select>
            </nz-form-control>
          </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>
          </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>
          </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>
          </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-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>
            </nz-form-control>
          </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-input-group nzSearch [nzAddOnAfter]="suffixAdapterButton">
                <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>
              </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"
              />
            </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]="20" [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>
      </nz-tab>
      <nz-tab nzTitle="{{ 'mxk.apps.tab.custom' | i18n }}" *ngIf="isEdit && form.model.isExtendAttr === '1'">
        <button nz-button (click)="addExtraAttrRow($event)" nzType="primary">{{ 'mxk.text.add' | i18n }}</button>
        <nz-table #editRowTable nzBordered [nzData]="extraAttrListOfData" nzTableLayout="fixed">
          <thead>
            <tr>
              <th nzWidth="25%">{{ 'mxk.custom.extraAttr.attr' | i18n }}</th>
              <th nzWidth="15%">{{ 'mxk.custom.extraAttr.type' | i18n }}</th>
              <th nzWidth="40%">{{ 'mxk.custom.extraAttr.value' | i18n }}</th>
              <th>{{ 'mxk.text.action' | i18n }}</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of editRowTable.data">
              <ng-container *ngIf="!extraAttrEditCache[data.id].edit; else editTemplate">
                <td>{{ data.attr }}</td>
                <td>{{ data.type }}</td>
                <td>{{ data.value }}</td>
                <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>
                </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>
                  <button nz-button type="button" (click)="saveExtraAttrEdit(data.id)" style="float: left">{{
                    'mxk.text.submit' | i18n
                  }}</button>
                </td>
              </ng-template>
            </tr>
          </tbody>
        </nz-table>
      </nz-tab>
    </nz-tabset>
  </form>
</div>

<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>