From 1b0de200c0b0f0562e61f57a9e97284d17cf97fd Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Tue, 22 Aug 2023 21:11:29 +0200
Subject: [PATCH] Show ALPN order #483

---
 web/assets/css/custom.css           |  1 +
 web/assets/js/model/xray.js         |  4 ++--
 web/html/xui/form/tls_settings.html | 12 ++++++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 67c67708..9277a48d 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -240,6 +240,7 @@ body {
 .ant-card-dark .ant-collapse-content,
 .ant-card-dark .ant-calendar,
 .ant-card-dark .ant-table-placeholder,
+.ant-card-dark .ant-select-selection__choice,
 .ant-card-dark .ant-input-group-addon {
     color: hsla(0,0%,100%,.65);
     background-color: #262f3d;
diff --git a/web/assets/js/model/xray.js b/web/assets/js/model/xray.js
index 1b22a134..c970b4bc 100644
--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
@@ -71,9 +71,9 @@ const UTLS_FINGERPRINT = {
 };
 
 const ALPN_OPTION = {
-    HTTP1: "http/1.1",
-    H2: "h2",
     H3: "h3",
+    H2: "h2",
+    HTTP1: "http/1.1",
 };
 
 const SNIFFING_OPTION = {
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index f2f6f4db..ef682a9f 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -94,12 +94,16 @@
             </td>
         </tr>
         <tr>
-            <td>Alpn</td>
+            <td>ALPN</td>
             <td>
                 <a-form-item>
-                    <a-checkbox-group v-model="inbound.stream.tls.alpn">
-                        <a-checkbox v-for="key,value in ALPN_OPTION" :value="key">[[ value ]]</a-checkbox>
-                    </a-checkbox-group>
+                    <a-select
+                        mode="multiple"
+                        style="width: 250px"
+                        :dropdown-class-name="themeSwitcher.darkCardClass"
+                        v-model="inbound.stream.tls.alpn">
+                        <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+                    </a-select>
                 </a-form-item>
             </td>
         </tr>