diff options
Diffstat (limited to 'web/html/xui/modals/dns_modal.html')
| -rw-r--r-- | web/html/xui/modals/dns_modal.html | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/web/html/xui/modals/dns_modal.html b/web/html/xui/modals/dns_modal.html new file mode 100644 index 00000000..a1ebaa9f --- /dev/null +++ b/web/html/xui/modals/dns_modal.html @@ -0,0 +1,114 @@ +{{define "modals/dnsModal"}} +<a-modal id="dns-modal" v-model="dnsModal.visible" :title="dnsModal.title" @ok="dnsModal.ok" :closable="true" + :mask-closable="false" :ok-text="dnsModal.okText" cancel-text='{{ i18n "close" }}' + :class="themeSwitcher.currentTheme"> + <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }"> + <a-form-item label='{{ i18n "pages.xray.outbound.address" }}'> + <a-input v-model.trim="dnsModal.dnsServer.address"></a-input> + </a-form-item> + <a-form-item label='{{ i18n "pages.xray.dns.domains" }}'> + <a-button icon="plus" size="small" type="primary" @click="dnsModal.dnsServer.domains.push('')"></a-button> + <template v-for="(domain, index) in dnsModal.dnsServer.domains"> + <a-input v-model.trim="dnsModal.dnsServer.domains[index]"> + <a-button icon="minus" size="small" slot="addonAfter" + @click="dnsModal.dnsServer.domains.splice(index,1)"></a-button> + </a-input> + </template> + </a-form-item> + <a-form-item label='{{ i18n "pages.xray.dns.strategy" }}' v-if="isAdvanced"> + <a-select v-model="dnsModal.dnsServer.queryStrategy" style="width: 100%" + :dropdown-class-name="themeSwitcher.currentTheme"> + <a-select-option :value="l" :label="l" v-for="l in ['UseIP', 'UseIPv4', 'UseIPv6']"> [[ l ]] </a-select-option> + </a-select> + </a-form-item> + <a-form-item label='Skip Fallback' v-if="isAdvanced"> + <a-switch v-model="dnsModal.dnsServer.skipFallback"></a-switch> + </a-form-item> + <a-form-item label='{{ i18n "pages.xray.dns.expectIPs"}}'> + <a-button icon="plus" size="small" type="primary" @click="dnsModal.dnsServer.expectIPs.push('')"></a-button> + <template v-for="(domain, index) in dnsModal.dnsServer.expectIPs"> + <a-input v-model.trim="dnsModal.dnsServer.expectIPs[index]"> + <a-button icon="minus" size="small" slot="addonAfter" + @click="dnsModal.dnsServer.expectIPs.splice(index,1)"></a-button> + </a-input> + </template> + </a-form-item> + </a-form> +</a-modal> +<script> + const dnsModal = { + title: '', + visible: false, + okText: '{{ i18n "confirm" }}', + isEdit: false, + confirm: null, + dnsServer: { + address: "localhost", + domains: [], + expectIPs: [], + queryStrategy: 'UseIP', + skipFallback: true, + }, + ok() { + domains = dnsModal.dnsServer.domains.filter(d => d.length > 0); + expectIPs = dnsModal.dnsServer.expectIPs.filter(ip => ip.length > 0); + dnsModal.dnsServer.domains = domains; + dnsModal.dnsServer.expectIPs = expectIPs; + newDnsServer = (domains.length > 0 || expectIPs.length > 0) ? dnsModal.dnsServer : dnsModal.dnsServer.address; + ObjectUtil.execute(dnsModal.confirm, newDnsServer); + }, + + show({ + title = '', + okText = '{{ i18n "confirm" }}', + dnsServer, + confirm = (dnsServer) => { }, + isEdit = false + }) { + this.title = title; + this.okText = okText; + this.confirm = confirm; + this.visible = true; + if (isEdit) { + if (typeof dnsServer == 'object') { + this.dnsServer = dnsServer; + } else { + this.dnsServer = { + address: dnsServer ?? "", + domains: [], + expectIPs: [], + queryStrategy: 'UseIP', + skipFallback: true, + } + } + } else { + this.dnsServer = { + address: "localhost", + domains: [], + expectIPs: [], + queryStrategy: 'UseIP', + skipFallback: true, + } + } + this.isEdit = isEdit; + }, + close() { + dnsModal.visible = false; + }, + }; + new Vue({ + delimiters: ['[[', ']]'], + el: '#dns-modal', + data: { + dnsModal: dnsModal, + }, + computed: { + isAdvanced: { + get: function () { + return dnsModal.dnsServer.domains.length > 0; + } + } + } + }); +</script> +{{end}}
\ No newline at end of file |