app add update， add protocol description

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

@@ -47,22 +47,9 @@
 </nz-card>
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
-    <button nz-button nz-dropdown [nzType]="'primary'" [nzDropdownMenu]="menuAddApps">
-      {{ 'mxk.text.add' | i18n }}
-      <i nz-icon nzType="down"></i>
-    </button>
-    <nz-dropdown-menu #menuAddApps="nzDropdownMenu">
-      <ul nz-menu>
-        <li nz-menu-item (click)="onAdd($event, 'OAuth_v2.0')">{{ 'mxk.apps.protocol.oauth2.0' | i18n }}</li>
-        <li nz-menu-item (click)="onAdd($event, 'SAML_v2.0')">{{ 'mxk.apps.protocol.saml2.0' | i18n }}</li>
-        <li nz-menu-item (click)="onAdd($event, 'CAS')">{{ 'mxk.apps.protocol.cas' | i18n }}</li>
-        <li nz-menu-item (click)="onAdd($event, 'JWT')">{{ 'mxk.apps.protocol.jwt' | i18n }}</li>
-        <li nz-menu-item (click)="onAdd($event, 'Token_Based')">{{ 'mxk.apps.protocol.tokenbased' | i18n }}</li>
-        <li nz-menu-item (click)="onAdd($event, 'Form_Based')">{{ 'mxk.apps.protocol.formbased' | i18n }}</li>
-        <li nz-menu-item (click)="onAdd($event, 'Extend_API')">{{ 'mxk.apps.protocol.extendapi' | i18n }}</li>
-        <li nz-menu-item (click)="onAdd($event, 'Basic')">{{ 'mxk.apps.protocol.basic' | i18n }}</li>
-      </ul>
-    </nz-dropdown-menu>
+    <button nz-button type="button" (click)="onAddSelectProtocol($event)" [nzType]="'primary'" class="mx-sm">{{
+      'mxk.text.add' | i18n
+      }}</button>
 
     <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
       'mxk.text.delete' | i18n

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.ts

@@ -35,6 +35,7 @@ import { AppJwtDetailsEditerComponent } from './app-jwt-details-editer/app-jwt-d
 import { AppOauth20DetailsEditerComponent } from './app-oauth20-details-editer/app-oauth20-details-editer.component';
 import { AppSaml20DetailsEditerComponent } from './app-saml20-details-editer/app-saml20-details-editer.component';
 import { AppTokenBasedDetailsEditerComponent } from './app-token-based-details-editer/app-token-based-details-editer.component';
+import { SelectProtocolComponent } from './select-protocol/select-protocol.component';
 
 @Component({
   selector: 'app-apps',
@@ -184,16 +185,34 @@ export class AppsComponent implements OnInit {
     this.router.navigateByUrl(`/permissions/resources?appId=${appId}&appName=${appName}`);
   }
 
-  onAdd(e: MouseEvent, protocol: String): void {
+  onAddSelectProtocol(e: MouseEvent): void {
     e.preventDefault();
+
+    const modal = this.modalService.create({
+      nzContent: SelectProtocolComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzComponentParams: {},
+      nzWidth: 960,
+      nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
+    });
+    // Return a result when closed
+    modal.afterClose.subscribe(result => {
+      if (result.data) {
+        this.onAdd(`${result.data}`);
+      }
+    });
+  }
+
+  onAdd(protocol: String): void {
     const modal = this.modalService.create({
       nzContent: this.chooseComponent(protocol),
       nzViewContainerRef: this.viewContainerRef,
       nzComponentParams: {
         isEdit: false,
+        protocol: protocol,
         id: ''
       },
-      nzWidth: 800,
+      nzWidth: 960,
       nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
     });
     // Return a result when closed

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-protocol/select-protocol.component.html

@@ -0,0 +1,96 @@
+<div *nzModalTitle> {{ 'mxk.text.select' | i18n }} </div>
+<nz-table nzTableLayout="auto" nzSize="middle" [nzData]="[{}]" [nzShowPagination]="false" nzBordered nzWidth="100%">
+    <thead>
+        <tr>
+            <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
+            <th nzAlign="center">{{ 'mxk.apps.protocol' | i18n }}</th>
+            <th nzAlign="center">{{ 'mxk.text.description' | i18n }}</th>
+            <th nzAlign="center" class="table_cell_action_2" style="width: 120px">{{ 'mxk.text.action' | i18n }}</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td nzAlign="center"><img height="40px" border="0px" src="./assets/protocol/oauth2.png" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.oauth2.0' | i18n }} </td>
+            <td nzAlign="left"> {{ 'mxk.apps.protocol.oauth2.0.discription' | i18n }}</td>
+            <td nzAlign="left"><button nz-button type="button" [nzType]="'primary'"
+                    (click)="onSelect($event, 'OAuth_v2.0')" class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+        <tr>
+            <td nzAlign="center"><img height="40" border="0px" src="./assets/protocol/oidc.png" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.oidc' | i18n }}</td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.oidc.discription' | i18n }} </td>
+            <td nzAlign="left"><button nz-button type="button" [nzType]="'primary'"
+                    (click)="onSelect($event, 'OpenID_Connect_v1.0')" class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+        <tr>
+            <td nzAlign="center"><img height="40" border="0px" src="./assets/protocol/saml.jpg" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.saml2.0' | i18n }} </td>
+            <td nzAlign="left"> {{ 'mxk.apps.protocol.saml2.0.discription' | i18n }} </td>
+            <td nzAlign="left"><button nz-button type="button" [nzType]="'primary'"
+                    (click)="onSelect($event, 'SAML_v2.0')" class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+        <tr>
+            <td nzAlign="center"><img height="40" border="0px" src="./assets/protocol/cas.png" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.cas' | i18n }} </td>
+            <td nzAlign="left"> {{ 'mxk.apps.protocol.cas.discription' | i18n }}</td>
+            <td nzAlign="left"><button nz-button type="button" [nzType]="'primary'" (click)="onSelect($event, 'CAS')"
+                    class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+        <tr>
+            <td nzAlign="center"><img height="40" border="0px" src="./assets/protocol/jwt.jpg" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.jwt' | i18n }} </td>
+            <td nzAlign="left"> {{ 'mxk.apps.protocol.jwt.discription' | i18n }}</td>
+            <td nzAlign="left"><button nz-button type="button" [nzType]="'primary'" (click)="onSelect($event, 'JWT')"
+                    class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+        <tr>
+            <td nzAlign="center"><img height="40" border="0px" src="./assets/protocol/token.png" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.tokenbased' | i18n }} </td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.tokenbased.discription' | i18n }} </td>
+            <td nzAlign="left"><button nz-button type="button.discription" [nzType]="'primary'"
+                    (click)="onSelect($event, 'Token_Based')" class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+        <tr>
+            <td nzAlign="center"><img height="40" border="0px" src="./assets/protocol/form.png" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.formbased' | i18n }} </td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.formbased.discription' | i18n }} </td>
+            <td nzAlign="left"><button nz-button type="button" [nzType]="'primary'"
+                    (click)="onSelect($event, 'Form_Based')" class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+        <tr>
+            <td nzAlign="center"><img height="40" border="0px" src="./assets/protocol/api.png" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.extendapi' | i18n }} </td>
+            <td nzAlign="left"> {{ 'mxk.apps.protocol.extendapi.discription' | i18n }}</td>
+            <td nzAlign="left"><button nz-button type="button" [nzType]="'primary'"
+                    (click)="onSelect($event, 'Extend_API')" class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+        <tr>
+            <td nzAlign="center"><img height="40" border="0px" src="./assets/protocol/basic.png" /></td>
+            <td nzAlign="left">{{ 'mxk.apps.protocol.basic' | i18n }} </td>
+            <td nzAlign="left"> {{ 'mxk.apps.protocol.basic.discription' | i18n }}</td>
+            <td nzAlign="left"><button nz-button type="button" [nzType]="'primary'" (click)="onSelect($event, 'Basic')"
+                    class="mx-sm">{{
+                    'mxk.text.add' | i18n
+                    }}</button></td>
+        </tr>
+    </tbody>
+</nz-table>
+
+<div *nzModalFooter style="display: none"> </div>

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-protocol/select-protocol.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectProtocolComponent } from './select-protocol.component';
+
+describe('SelectProtocolComponent', () => {
+  let component: SelectProtocolComponent;
+  let fixture: ComponentFixture<SelectProtocolComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SelectProtocolComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectProtocolComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-protocol/select-protocol.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
+
+@Component({
+  selector: 'app-select-protocol',
+  templateUrl: './select-protocol.component.html',
+  styleUrls: ['./select-protocol.component.less']
+})
+export class SelectProtocolComponent implements OnInit {
+  constructor(private modalRef: NzModalRef) {}
+
+  ngOnInit(): void {}
+
+  onSelect(e: MouseEvent, protocol: String): void {
+    e.preventDefault();
+    this.modalRef.destroy({ refresh: true, data: protocol });
+  }
+}

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/routes.module.ts

@@ -29,6 +29,7 @@ import { AppSaml20DetailsEditerComponent } from './apps/app-saml20-details-edite
 import { AppTokenBasedDetailsEditerComponent } from './apps/app-token-based-details-editer/app-token-based-details-editer.component';
 import { AppsComponent } from './apps/apps.component';
 import { SelectAppsComponent } from './apps/select-apps/select-apps.component';
+import { SelectProtocolComponent } from './apps/select-protocol/select-protocol.component';
 import { OrganizationEditerComponent } from './organizations/organization-editer/organization-editer.component';
 import { OrganizationsComponent } from './organizations/organizations.component';
 import { RouteRoutingModule } from './routes-routing.module';
@@ -52,6 +53,7 @@ const COMPONENTS: Array<Type<null>> = [];
     UserEditerComponent,
     AccountEditerComponent,
     SelectUserComponent,
+    SelectProtocolComponent,
     AppCasDetailsEditerComponent,
     AppFormBasedDetailsEditerComponent,
     AppJwtDetailsEditerComponent,

maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json

@@ -276,15 +276,27 @@
 			"icon": "Icon",
 			"protocol": "Protocol",
 			"protocol.formbased": "formbased",
+			"protocol.formbased.discription": "HTTP+HTML simple form-based authentication. A website uses a Web form to collect and then perform authentication; The credential information for authentication comes from user agents, usually web browsers.",
 			"protocol.desktop": "desktop",
+			"protocol.desktop.discription": "desktop",
 			"protocol.tokenbased": "tokenbased",
+			"protocol.tokenbased.discription": "Simple token is a certificate or digital certificate shared by the authentication center and the application. The authentication center uses HTTP POST to submit the token to the application system, which then performs authentication.",
 			"protocol.oauth2.0": "OAuth2.x",
+			"protocol.oauth2.0.discription": "OAuth (Open Authorization) is the industry-standard protocol for authorization. OAuth 2.0 focuses on client developer simplicity while providing specific authorization flows for web applications, desktop applications, mobile phones, and living room devices. ",
+			"protocol.oidc": "OpenID Connect",
+			"protocol.oidc.discription": "OpenID Connect (OIDC) extends the OAuth 2.0 authorization protocol for use also as an authentication protocol, OIDC=(Identity, Authentication)+OAuth 2.0. Use OIDC for single sign-on (SSO) of distributed sites.",
 			"protocol.saml2.0": "SAML2.0",
+			"protocol.saml2.0.discription": "Security Assertion Markup Language (SAML) is an open standard for exchanging authentication and authorization data between an identity provider and a service provider. SAML is an XML-based markup language for security assertions, which are statements that service providers use to make access-control decisions.",
 			"protocol.ltpa": "Lightweight Third-Party(LTPA)",
-			"protocol.cas": "CAS ",
-			"protocol.jwt": "JwtToken",
+			"protocol.ltpa.discription": "Lightweight Third-Party(LTPA)",
+			"protocol.cas": "CAS",
+			"protocol.cas.discription": "Enterprise Single Sign-On - CAS is an enterprise multilingual single sign-on solution and identity provider for the web and attempts to be a comprehensive platform for your authentication and authorization needs.CAS is an open and well-documented authentication protocol,It is a widely used.",
+			"protocol.jwt": "JWT Token",
+			"protocol.jwt.discription": "JWT, or JSON Web Token is JSON Object which is used to securely transfer information over the web(between two parties). It can be used for an authentication system and can also be used for information exchange.",
 			"protocol.extendapi": "API Extend",
+			"protocol.extendapi.discription": "Extending the API that provides authentication for application services, the authentication of application systems can be realized, such as Tencent corporate mailbox, Netease corporate mailbox, etc.",
 			"protocol.basic": "Basic",
+			"protocol.basic.discription": "The basic login URL link is convenient for users access.",
 			"category": "Category",
 			"category.none": "None",
 			"category.1011": "Enterprise Services/Data Analysis",

maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json

@@ -277,15 +277,27 @@
 			"icon": "图标",
 			"protocol": "协议",
 			"protocol.formbased": "表单认证",
+			"protocol.formbased.discription": "HTTP+HTML 简单的基于表单的认证，一个网站使用一个Web表单收集，并随后进行身份验证；认证的凭证信息来源于用户代理，通常web浏览器。",
 			"protocol.desktop": "桌面认证",
+			"protocol.desktop.discription": "桌面认证",
 			"protocol.tokenbased": "令牌认证",
+			"protocol.tokenbased.discription": "简单令牌即认证中心和应用共享凭证或者数字证书，认证中心使用HTTP POST的方式提交令牌到应用系统，应用系统并随后进行身份验证。",
 			"protocol.oauth2.0": "OAuth2.x",
+			"protocol.oauth2.0.discription": "OAuth（开放授权）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频等），而无需将用户名和密码提供给第三方应用。",
+			"protocol.oidc": "OpenID Connect",
+			"protocol.oidc.discription": "OIDC 是 OpenID Connect 的简称，OIDC = (Identity, Authentication) + OAuth 2.0。使用 OIDC 进行分布式站点的单点登录 （SSO）。",
 			"protocol.saml2.0": "SAML2.0",
+			"protocol.saml2.0.discription": "SAML 基于XML协议，使用包含断言（Assertion）的安全令牌，在授权方（IDP）和消费方（应用）之间传递身份信息，实现基于网络跨域的单点登录。",
 			"protocol.ltpa": "轻量级认证(LTPA)",
+			"protocol.ltpa.discription": "轻量级认证(LTPA)",
 			"protocol.cas": "CAS认证",
+			"protocol.cas.discription": "CAS是Central Authentication Service的缩写，中央认证服务，一种独立开放指令协议,具有广泛的使用。",
 			"protocol.jwt": "JWT令牌",
+			"protocol.jwt.discription": "JSON Web Token是一个开放标准，用于在各方之间安全地将信息作为JSON对象传输。由于此信息是经过数字签名的，因此可以被验证和信任。",
 			"protocol.extendapi": "API扩展认证",
+			"protocol.extendapi.discription": "通过对应用服务提供认证的API进行扩展，实现应用系统的认证，例如腾讯企业邮箱、网易企业邮箱等。",
 			"protocol.basic": "基本登录",
+			"protocol.basic.discription": "基本登录地址访问链接，方便用户使用。",
 			"category": "分类",
 			"category.none": "暂无",
 			"category.1011": "企业服务/数据分析",

maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json

@@ -277,16 +277,28 @@
 			"name": "應用名稱",
 			"icon": "圖標",
 			"protocol": "協議",
-			"protocol.formbased": "表單認證",
-			"protocol.desktop": "桌面認證",
-			"protocol.tokenbased": "令牌認證",
-			"protocol.oauth2.0": "OAuth2.x",
-			"protocol.saml2.0": "SAML2.0",
-			"protocol.ltpa": "輕量級認證(LTPA)",
-			"protocol.cas": "CAS認證",
-			"protocol.jwt": "JWT令牌",
-			"protocol.extendapi": "API擴展認證",
-			"protocol.basic": "基本登錄",
+			"protocol.formbased":"表單認證",
+			"protocol.formbased.discription":"HTTP+HTML簡單的基於表單的認證,一個網站使用一個Web表單收集,並隨後進行身份驗證；認證的憑證資訊來源於用戶代理,通常web瀏覽器。",
+			"protocol.desktop":"案頭認證",
+			"protocol.desktop.discription":"案頭認證",
+			"protocol.tokenbased":"令牌認證",
+			"protocol.tokenbased.discription":"簡單令牌即認證中心和應用共亯憑證或者數位憑證,認證中心使用HTTP POST的管道提交權杖到應用系統,應用系統並隨後進行身份驗證。",
+			"protocol.oauth2.0":"OAuth2.x",
+			"protocol.oauth2.0.discription":"OAuth（開放授權）是一個開放標準,允許用戶讓協力廠商應用訪問該用戶在某一網站上存儲的私密的資源（如照片,視頻等）,而無需將用戶名和密碼提供給協力廠商應用。",
+			"protocol.oidc":"OpenID Connect",
+			"protocol.oidc.discription":"OIDC是OpenID Connect的簡稱,OIDC =（Identity,Authentication）+ OAuth 2.0。使用OIDC進行分佈式網站的單點登錄（SSO）。",
+			"protocol.saml2.0":"SAML2.0",
+			"protocol.saml2.0.discription":"SAML基於XML協定,使用包含斷言（Assertion）的安全權杖,在授權方（IDP）和消費方（應用）之間傳遞身份資訊,實現基於網絡跨域的單點登錄。",
+			"protocol.ltpa":"輕量級認證(LTPA)",
+			"protocol.ltpa.discription":"輕量級認證(LTPA)",
+			"protocol.cas":"CAS認證",
+			"protocol.cas.discription":"CAS是Central Authentication Service的縮寫,中央認證服務,一種獨立開放指令協定,具有廣泛的使用。",
+			"protocol.jwt":"JWT令牌",
+			"protocol.jwt.discription":"JSON Web Token是一個開放標準,用於在各方之間安全地將資訊作為JSON對象傳輸。由於此資訊是經過數位簽章的,囙此可以被驗證和信任。",
+			"protocol.extendapi":"API擴展認證",
+			"protocol.extendapi.discription":"通過對應用服務提供認證的API進行擴展,實現應用系統的認證,例如騰訊企業郵箱、網易企業郵箱等。",
+			"protocol.basic":"基本登入",
+			"protocol.basic.discription":"基本登入地址訪問連結,方便用戶使用。",
 			"category": "分類",
 			"category.none": "暫無",
 			"category.1011": "企業服務/數據分析",