From 8224503bdaa7bf4dd60c62c23807a6a3de9166b4 Mon Sep 17 00:00:00 2001
From: MaxKey <shimingxy@qq.com>
Date: Thu, 23 Feb 2023 10:52:46 +0800
Subject: [PATCH] select-protocol use tab

---
 .../select-protocol.component.html            | 208 ++++++++++--------
 .../src/assets/i18n/en-US.json                |   3 +
 .../src/assets/i18n/zh-CN.json                |   3 +
 .../src/assets/i18n/zh-TW.json                |   3 +
 4 files changed, 124 insertions(+), 93 deletions(-)

diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-protocol/select-protocol.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-protocol/select-protocol.component.html
index f9e798335..5bb4d3c25 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-protocol/select-protocol.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-protocol/select-protocol.component.html
@@ -1,96 +1,118 @@
 <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>
+<nz-tabset nzType="card">
+    <nz-tab nzTitle="{{ 'mxk.apps.protocol.select.standard' | i18n }}">
+        <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>
+            </tbody>
+        </nz-table>
+    </nz-tab>
+    <nz-tab nzTitle="{{ 'mxk.apps.protocol.select.custom' | i18n }}">
+        <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="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/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/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/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>
+    </nz-tab>
+</nz-tabset>
 <div *nzModalFooter style="display: none"> </div>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
index 940f63479..49899b581 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
@@ -275,6 +275,9 @@
 			"name": "App Name",
 			"icon": "Icon",
 			"protocol": "Protocol",
+			"protocol.select.standard": "Standard",
+			"protocol.select.custom": "Custom",
+			"protocol.select.template": "Template",
 			"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",
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
index 451c4a73a..f7ea0e275 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
@@ -276,6 +276,9 @@
 			"name": "应用名称",
 			"icon": "图标",
 			"protocol": "协议",
+			"protocol.select.standard": "标准协议",
+			"protocol.select.custom": "定制协议",
+			"protocol.select.template": "应用模板",
 			"protocol.formbased": "表单认证",
 			"protocol.formbased.discription": "HTTP+HTML 简单的基于表单的认证，一个网站使用一个Web表单收集，并随后进行身份验证；认证的凭证信息来源于用户代理，通常web浏览器。",
 			"protocol.desktop": "桌面认证",
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
index 70ac32bc0..e410ffa02 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
@@ -277,6 +277,9 @@
 			"name": "應用名稱",
 			"icon": "圖標",
 			"protocol": "協議",
+			"protocol.select.standard": "標準協議",
+			"protocol.select.custom": "定制協議",
+			"protocol.select.template": "應用範本",
 			"protocol.formbased":"表單認證",
 			"protocol.formbased.discription":"HTTP+HTML簡單的基於表單的認證,一個網站使用一個Web表單收集,並隨後進行身份驗證；認證的憑證資訊來源於用戶代理,通常web瀏覽器。",
 			"protocol.desktop":"案頭認證",