From 8d18c8e98f1b6531d1997feb6933419d71401968 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Wed, 13 Dec 2023 19:27:36 +0330 Subject: [PATCH] [gui] redesign forms Co-Authored-By: Alireza Ahmadi --- web/assets/css/custom.css | 70 +- web/assets/js/model/outbound.js | 10 +- web/assets/js/model/xray.js | 14 +- web/html/login.html | 5 + web/html/xui/client_bulk_modal.html | 317 +++----- web/html/xui/form/client.html | 386 +++++----- web/html/xui/form/inbound.html | 139 ++-- web/html/xui/form/outbound.html | 681 ++++++------------ web/html/xui/form/protocol/dokodemo.html | 56 +- web/html/xui/form/protocol/http.html | 2 +- web/html/xui/form/protocol/shadowsocks.html | 74 +- web/html/xui/form/protocol/socks.html | 79 +- web/html/xui/form/protocol/trojan.html | 106 +-- web/html/xui/form/protocol/vless.html | 112 ++- web/html/xui/form/protocol/vmess.html | 40 +- web/html/xui/form/sniffing.html | 37 +- web/html/xui/form/stream/external_proxy.html | 46 +- web/html/xui/form/stream/stream_grpc.html | 26 +- web/html/xui/form/stream/stream_http.html | 37 +- web/html/xui/form/stream/stream_kcp.html | 118 +-- web/html/xui/form/stream/stream_quic.html | 61 +- web/html/xui/form/stream/stream_settings.html | 7 +- web/html/xui/form/stream/stream_sockopt.html | 60 +- web/html/xui/form/stream/stream_tcp.html | 159 ++-- web/html/xui/form/stream/stream_ws.html | 29 +- web/html/xui/form/tls_settings.html | 568 +++++---------- web/html/xui/inbound_info_modal.html | 291 ++++---- web/html/xui/inbound_modal.html | 5 + web/html/xui/inbounds.html | 4 + web/html/xui/xray.html | 5 +- web/html/xui/xray_reverse_modal.html | 102 +-- web/html/xui/xray_rule_modal.html | 185 ++--- 32 files changed, 1444 insertions(+), 2387 deletions(-) diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css index ae2dbf16..b633d644 100644 --- a/web/assets/css/custom.css +++ b/web/assets/css/custom.css @@ -55,7 +55,7 @@ style attribute { } .ant-table-tbody > tr > td, .ant-table-thead > tr > th { - padding: 12px 16px; + padding: 12px 8px; overflow-wrap: break-word; } .ant-table-thead > tr > th { @@ -93,7 +93,6 @@ style attribute { .ant-table-body { overflow-x: auto !important; } - .ant-card-hoverable { cursor: auto; cursor: pointer; @@ -133,6 +132,13 @@ style attribute { margin: 0.5rem; padding: 0.5rem; } + .ant-modal-body { + padding: 10px; + } + .ant-form-item-label { + line-height: 1.5; + padding: 8px 0 0; + } } .ant-layout-content { @@ -410,6 +416,10 @@ style attribute { background-color: white; } +.ant-form-item { + margin-bottom: 0; +} + .ant-setting-textarea { margin-top: 1.5rem; } @@ -802,12 +812,6 @@ style attribute { border-color: #fec093; } -.ant-modal-confirm-confirm .ant-modal-confirm-body>.anticon, .ant-modal-confirm-warning .ant-modal-confirm-body>.anticon, -.ant-alert-warning .ant-alert-icon, -.has-warning.has-feedback .ant-form-item-children-icon { - color: #f37b24; -} - .dark .has-warning .ant-input, .dark .has-warning .ant-input:hover { border-color: #784e1d; @@ -1045,53 +1049,3 @@ li.ant-select-dropdown-menu-item:empty:after { .ant-input-number { overflow: clip; } - -.tag-of-wrap { - text-wrap: pretty; - overflow-wrap: anywhere; - max-width: 200px; -} - -.tag-of-wrap-l { - text-wrap: pretty; - overflow-wrap: anywhere; - max-width: 350px; -} - -.ant-modal-body, -.ant-collapse-content>.ant-collapse-content-box { - overflow-x: auto; -} - -.ant-calendar-year-panel-year:hover, -.ant-calendar-decade-panel-decade:hover, -.ant-calendar-month-panel-month:hover, -.ant-dropdown-menu-item:hover, -.ant-dropdown-menu-submenu-title:hover, -.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled), -.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled), -.ant-table-tbody - > tr.ant-table-row-hover:not(.ant-table-expanded-row):not( - .ant-table-row-selected - ) - > td, -.ant-table-tbody - > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) - > td, -.ant-table-thead - > tr.ant-table-row-hover:not(.ant-table-expanded-row):not( - .ant-table-row-selected - ) - > td, -.ant-table-thead - > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) - > td { - background-color: rgb(232 244 242); -} - -.dark .ant-dropdown-menu-item:hover, -.dark .ant-dropdown-menu-submenu-title:hover, -.dark .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled), -.dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) { - background-color: #313f5a; -} diff --git a/web/assets/js/model/outbound.js b/web/assets/js/model/outbound.js index 75d3b878..5aad52dd 100644 --- a/web/assets/js/model/outbound.js +++ b/web/assets/js/model/outbound.js @@ -476,7 +476,7 @@ class Outbound extends CommonClass { if(data.length !=2) return null; switch(data[0].toLowerCase()){ case Protocols.VMess: - return this.fromVmessLink(JSON.parse(atob(data[1]))); + return this.fromVmessLink(JSON.parse(Base64.decode(data[1]))); case Protocols.VLESS: case Protocols.Trojan: case 'ss': @@ -493,8 +493,8 @@ class Outbound extends CommonClass { if (network === 'tcp') { stream.tcp = new TcpStreamSettings( json.type, - json.host ? json.host.split(','): [], - json.path ? json.path.split(','): []); + json.host ?? '', + json.path ?? ''); } else if (network === 'kcp') { stream.kcp = new KcpStreamSettings(); stream.type = json.type; @@ -505,7 +505,7 @@ class Outbound extends CommonClass { stream.network = 'http' stream.http = new HttpStreamSettings( json.path, - json.host ? json.host.split(',') : []); + json.host); } else if (network === 'quic') { stream.quic = new QuicStreamSettings( json.host ? json.host : 'none', @@ -570,7 +570,7 @@ class Outbound extends CommonClass { let sni=url.searchParams.get('sni') ?? ''; let sid=url.searchParams.get('sid') ?? ''; let spx=url.searchParams.get('spx') ?? ''; - stream.tls = new RealityStreamSettings(pbk, fp, sni, sid, spx); + stream.reality = new RealityStreamSettings(pbk, fp, sni, sid, spx); } let data = link.split('?'); diff --git a/web/assets/js/model/xray.js b/web/assets/js/model/xray.js index 9478312e..e0c8a912 100644 --- a/web/assets/js/model/xray.js +++ b/web/assets/js/model/xray.js @@ -602,7 +602,7 @@ class XtlsStreamSettings extends XrayCommonClass { alpn=[ALPN_OPTION.H2,ALPN_OPTION.HTTP1], settings=new XtlsStreamSettings.Settings()) { super(); - this.server = serverName; + this.sni = serverName; this.certs = certificates; this.alpn = alpn; this.settings = settings; @@ -636,7 +636,7 @@ class XtlsStreamSettings extends XrayCommonClass { toJson() { return { - serverName: this.server, + serverName: this.sni, certificates: XtlsStreamSettings.toJsonArray(this.certs), alpn: this.alpn, settings: this.settings, @@ -1081,7 +1081,7 @@ class Inbound extends XrayCommonClass { get serverName() { if (this.stream.isTls) return this.stream.tls.sni; - if (this.stream.isXtls) return this.stream.xtls.server; + if (this.stream.isXtls) return this.stream.xtls.sni; if (this.stream.isReality) return this.stream.reality.serverNames; return ""; } @@ -1326,8 +1326,8 @@ class Inbound extends XrayCommonClass { if(this.stream.xtls.settings.allowInsecure){ params.set("allowInsecure", "1"); } - if (!ObjectUtil.isEmpty(this.stream.xtls.server)){ - params.set("sni", this.stream.xtls.server); + if (!ObjectUtil.isEmpty(this.stream.xtls.sni)){ + params.set("sni", this.stream.xtls.sni); } params.set("flow", flow); } @@ -1533,8 +1533,8 @@ class Inbound extends XrayCommonClass { if(this.stream.xtls.settings.allowInsecure){ params.set("allowInsecure", "1"); } - if (this.stream.xtls.settings.serverName !== ''){ - params.set("sni", this.stream.xtls.settings.serverName); + if (!ObjectUtil.isEmpty(this.stream.xtls.sni)){ + params.set("sni", this.stream.xtls.sni); } params.set("flow", flow); } diff --git a/web/html/login.html b/web/html/login.html index 900dd176..520bbcb4 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -27,6 +27,7 @@ text-align: center; align-items: center; justify-content: center; + width: 100%; } .title { font-size: 32px; @@ -92,6 +93,10 @@ .dark h1 { color: rgba(255, 255, 255, 0.85); } + .ant-form-item { + margin-bottom: 16px; + } + .ant-btn-primary-login { color: #008771; background-color: #e8f4f2; diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html index e0295110..1fa64306 100644 --- a/web/html/xui/client_bulk_modal.html +++ b/web/html/xui/client_bulk_modal.html @@ -2,206 +2,123 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{ i18n "pages.client.method" }} - - - Random - Random+Prefix - Random+Prefix+Num - Random+Prefix+Num+Postfix - Prefix+Num+Postfix - - -
{{ i18n "pages.client.first" }} - - - -
{{ i18n "pages.client.last" }} - - - -
{{ i18n "pages.client.prefix" }} - - - -
{{ i18n "pages.client.postfix" }} - - - -
{{ i18n "pages.client.clientCount" }} - - - -
Flow - - - {{ i18n "none" }} - [[ key ]] - - -
Subscription - - - - - - - - -
Telegram ID - - - - - - - - -
- - - - - -
- - - - - {{ i18n "none" }} - [[ key ]] - - -
- {{ i18n "pages.inbounds.totalFlow" }}(GB) - - - - - - - - -
{{ i18n "pages.client.delayedStart" }} - - - -
{{ i18n "pages.client.expireDays" }} - - - -
- {{ i18n "pages.inbounds.expireDate" }} - - - - - - - - -
- {{ i18n "pages.client.renew" }} - - - - - - - - -
+ + + + Random + Random+Prefix + Random+Prefix+Num + Random+Prefix+Num+Postfix + Prefix+Num+Postfix + + + + + + + + + + + + + + + + + + + + {{ i18n "none" }} + [[ key ]] + + + + + {{ i18n "none" }} + [[ key ]] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -{{end}} +{{end}} \ No newline at end of file diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html index 4ef8f2d6..f7f9d727 100644 --- a/web/html/xui/inbound_modal.html +++ b/web/html/xui/inbound_modal.html @@ -98,6 +98,11 @@ client.flow = ""; }); } + if ((this.inModal.inbound.protocol == Protocols.VLESS || this.inModal.inbound.protocol == Protocols.TROJAN) && !inModal.inbound.xtls) { + this.inModal.inbound.settings.vlesses.forEach(client => { + client.flow = ""; + }); + } }, SSMethodChange() { if (this.inModal.inbound.isSSMultiUser) { diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html index f842d5a1..89c90831 100644 --- a/web/html/xui/inbounds.html +++ b/web/html/xui/inbounds.html @@ -43,6 +43,10 @@ 0%, 50%, 100% { transform: scale(1); opacity: 1; } 10% { transform: scale(1.5); opacity: .2; } } + .info-large-tag { + max-width: 200px; + overflow: hidden; + } diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html index 05f21052..b1f62651 100644 --- a/web/html/xui/xray.html +++ b/web/html/xui/xray.html @@ -3,7 +3,6 @@ {{template "head" .}} - @@ -29,6 +28,10 @@ margin: 0; padding: 12px .5rem; } + .ant-table-thead > tr > th, + .ant-table-tbody > tr > td { + padding: 10px 0px; + } } .ant-tabs-bar { diff --git a/web/html/xui/xray_reverse_modal.html b/web/html/xui/xray_reverse_modal.html index 0980ffb9..cb4e7037 100644 --- a/web/html/xui/xray_reverse_modal.html +++ b/web/html/xui/xray_reverse_modal.html @@ -2,77 +2,41 @@ - - - - - - - - - - - - - - + + + + [[ x ]] + + + + + + + +
{{ i18n "pages.xray.outbound.type" }} - - - [[ x ]] - - -
{{ i18n "pages.xray.outbound.tag" }} - - - -
{{ i18n "pages.xray.outbound.domain" }} - - - -
@@ -173,4 +137,4 @@ }); -{{end}} \ No newline at end of file +{{end}} diff --git a/web/html/xui/xray_rule_modal.html b/web/html/xui/xray_rule_modal.html index a5fd2e54..523a3d2c 100644 --- a/web/html/xui/xray_rule_modal.html +++ b/web/html/xui/xray_rule_modal.html @@ -2,149 +2,100 @@ - - - - - - - -
Domain Matcher - - + + + [[ dm ]] - -
Source IPs + + + + + + + + + + + + [[ x ]] + + + + + [[ x ]] + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + [[ tag ]] + + + + + [[ tag ]] + +
@@ -274,4 +225,4 @@ }); -{{end}} \ No newline at end of file +{{end}}