feat: Add NordVPN NordLynx (WireGuard) integration (#3827)
* feat: Add NordVPN NordLynx (WireGuard) integration with dedicated UI and backend services. * remove limit=10 to get all servers * feat: add city selector to NordVPN modal * feat: auto-select best server on country/city change * feat: simplify filter logic and enforce > 7% load * fix --------- Co-authored-by: Sanaei <ho3ein.sanaei@gmail.com>
This commit is contained in:
Peter Liu
@@ -0,0 +1,306 @@
|
||||
{{define "modals/nordModal"}}
|
||||
<a-modal id="nord-modal" v-model="nordModal.visible" title="NordVPN NordLynx"
|
||||
:confirm-loading="nordModal.confirmLoading" :closable="true" :mask-closable="true"
|
||||
:footer="null" :class="themeSwitcher.currentTheme">
|
||||
<template v-if="nordModal.nordData == null">
|
||||
<a-tabs default-active-key="token" :class="themeSwitcher.currentTheme">
|
||||
<a-tab-pane key="token" tab='{{ i18n "pages.xray.outbound.accessToken" }}'>
|
||||
<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:18} }" :style="{ marginTop: '20px' }">
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.accessToken" }}'>
|
||||
<a-input v-model="nordModal.token" placeholder='{{ i18n "pages.xray.outbound.accessToken" }}'></a-input>
|
||||
<div :style="{ marginTop: '10px' }">
|
||||
<a-button type="primary" icon="login" @click="login()" :loading="nordModal.confirmLoading">{{ i18n "login" }}</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="key" tab='{{ i18n "pages.xray.outbound.privateKey" }}'>
|
||||
<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:18} }" :style="{ marginTop: '20px' }">
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.privateKey" }}'>
|
||||
<a-input v-model="nordModal.manualKey" placeholder='{{ i18n "pages.xray.outbound.privateKey" }}'></a-input>
|
||||
<div :style="{ marginTop: '10px' }">
|
||||
<a-button type="primary" icon="save" @click="saveKey()" :loading="nordModal.confirmLoading">{{ i18n "save" }}</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
<template v-else>
|
||||
<table :style="{ margin: '5px 0', width: '100%' }">
|
||||
<tr class="client-table-odd-row" v-if="nordModal.nordData.token">
|
||||
<td>{{ i18n "pages.xray.outbound.accessToken" }}</td>
|
||||
<td>[[ nordModal.nordData.token ]]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ i18n "pages.xray.outbound.privateKey" }}</td>
|
||||
<td>[[ nordModal.nordData.private_key ]]</td>
|
||||
</tr>
|
||||
</table>
|
||||
<a-button @click="logout" :loading="nordModal.confirmLoading" type="danger">{{ i18n "logout" }}</a-button>
|
||||
<a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.settings" }}</a-divider>
|
||||
<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:18} }" :style="{ marginTop: '10px' }">
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.country" }}'>
|
||||
<a-select v-model="nordModal.countryId" @change="fetchServers" show-search option-filter-prop="label">
|
||||
<a-select-option v-for="c in nordModal.countries" :key="c.id" :value="c.id" :label="c.name">
|
||||
[[ c.name ]] ([[ c.code ]])
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.city" }}' v-if="nordModal.cities.length > 0">
|
||||
<a-select v-model="nordModal.cityId" @change="onCityChange" show-search option-filter-prop="label">
|
||||
<a-select-option :key="0" :value="null" label='{{ i18n "pages.xray.outbound.allCities" }}'>
|
||||
{{ i18n "pages.xray.outbound.allCities" }}
|
||||
</a-select-option>
|
||||
<a-select-option v-for="c in nordModal.cities" :key="c.id" :value="c.id" :label="c.name">
|
||||
[[ c.name ]]
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label='{{ i18n "pages.xray.outbound.server" }}' v-if="filteredServers.length > 0">
|
||||
<a-select v-model="nordModal.serverId">
|
||||
<a-select-option v-for="s in filteredServers" :key="s.id" :value="s.id">
|
||||
[[ s.cityName ]] - [[ s.name ]] ({{ i18n "pages.xray.outbound.load" }}: [[ s.load ]]%)
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-divider :style="{ margin: '10px 0' }">{{ i18n "pages.xray.outbound.outboundStatus" }}</a-divider>
|
||||
<a-form :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
|
||||
<template v-if="nordOutboundIndex>=0">
|
||||
<a-tag color="green" :style="{ lineHeight: '31px' }">{{ i18n "enabled" }}</a-tag>
|
||||
<a-button @click="resetOutbound" :loading="nordModal.confirmLoading" type="danger">{{ i18n "reset" }}</a-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag color="orange" :style="{ lineHeight: '31px' }">{{ i18n "disabled" }}</a-tag>
|
||||
<a-button @click="addOutbound" :disabled="!nordModal.serverId" :loading="nordModal.confirmLoading" type="primary">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
|
||||
</template>
|
||||
</a-form>
|
||||
</template>
|
||||
</a-modal>
|
||||
|
||||
<script>
|
||||
const nordModal = {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
nordData: null,
|
||||
token: '',
|
||||
manualKey: '',
|
||||
countries: [],
|
||||
countryId: null,
|
||||
cities: [],
|
||||
cityId: null,
|
||||
servers: [],
|
||||
serverId: null,
|
||||
show() {
|
||||
this.visible = true;
|
||||
this.getData();
|
||||
},
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
loading(loading = true) {
|
||||
this.confirmLoading = loading;
|
||||
},
|
||||
async getData() {
|
||||
this.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/xray/nord/data');
|
||||
if (msg.success) {
|
||||
this.nordData = msg.obj ? JSON.parse(msg.obj) : null;
|
||||
if (this.nordData) {
|
||||
await this.fetchCountries();
|
||||
}
|
||||
}
|
||||
this.loading(false);
|
||||
},
|
||||
async login() {
|
||||
this.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/xray/nord/reg', { token: this.token });
|
||||
if (msg.success) {
|
||||
this.nordData = JSON.parse(msg.obj);
|
||||
await this.fetchCountries();
|
||||
}
|
||||
this.loading(false);
|
||||
},
|
||||
async saveKey() {
|
||||
this.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/xray/nord/setKey', { key: this.manualKey });
|
||||
if (msg.success) {
|
||||
this.nordData = JSON.parse(msg.obj);
|
||||
await this.fetchCountries();
|
||||
}
|
||||
this.loading(false);
|
||||
},
|
||||
async logout(index) {
|
||||
this.loading(true);
|
||||
const msg = await HttpUtil.post('/panel/xray/nord/del');
|
||||
if (msg.success) {
|
||||
this.delOutbound(index);
|
||||
this.delRouting();
|
||||
this.nordData = null;
|
||||
this.token = '';
|
||||
this.manualKey = '';
|
||||
this.countries = [];
|
||||
this.cities = [];
|
||||
this.servers = [];
|
||||
this.countryId = null;
|
||||
this.cityId = null;
|
||||
}
|
||||
this.loading(false);
|
||||
},
|
||||
async fetchCountries() {
|
||||
const msg = await HttpUtil.post('/panel/xray/nord/countries');
|
||||
if (msg.success) {
|
||||
this.countries = JSON.parse(msg.obj);
|
||||
}
|
||||
},
|
||||
async fetchServers() {
|
||||
this.loading(true);
|
||||
this.servers = [];
|
||||
this.cities = [];
|
||||
this.serverId = null;
|
||||
this.cityId = null;
|
||||
const msg = await HttpUtil.post('/panel/xray/nord/servers', { countryId: this.countryId });
|
||||
if (msg.success) {
|
||||
const data = JSON.parse(msg.obj);
|
||||
const locations = data.locations || [];
|
||||
const locToCity = {};
|
||||
const citiesMap = new Map();
|
||||
locations.forEach(loc => {
|
||||
if (loc.country && loc.country.city) {
|
||||
citiesMap.set(loc.country.city.id, loc.country.city);
|
||||
locToCity[loc.id] = loc.country.city;
|
||||
}
|
||||
});
|
||||
this.cities = Array.from(citiesMap.values()).sort((a, b) => a.name.localeCompare(b.name));
|
||||
|
||||
this.servers = (data.servers || []).map(s => {
|
||||
const firstLocId = (s.location_ids || [])[0];
|
||||
const city = locToCity[firstLocId];
|
||||
s.cityId = city ? city.id : null;
|
||||
s.cityName = city ? city.name : 'Unknown';
|
||||
return s;
|
||||
}).sort((a, b) => a.load - b.load);
|
||||
|
||||
if (this.servers.length > 0) {
|
||||
this.serverId = this.servers[0].id;
|
||||
}
|
||||
|
||||
if (this.servers.length === 0) {
|
||||
app.$message.warning('No servers found for the selected country');
|
||||
}
|
||||
}
|
||||
this.loading(false);
|
||||
},
|
||||
addOutbound() {
|
||||
const server = this.servers.find(s => s.id === this.serverId);
|
||||
if (!server) return;
|
||||
|
||||
const tech = server.technologies.find(t => t.id === 35);
|
||||
const publicKey = tech.metadata.find(m => m.name === 'public_key').value;
|
||||
|
||||
const outbound = {
|
||||
tag: `nord-${server.hostname}`,
|
||||
protocol: 'wireguard',
|
||||
settings: {
|
||||
secretKey: this.nordData.private_key,
|
||||
address: ['10.5.0.2/32'],
|
||||
peers: [{
|
||||
publicKey: publicKey,
|
||||
endpoint: server.station + ':51820'
|
||||
}],
|
||||
noKernelTun: false
|
||||
}
|
||||
};
|
||||
|
||||
app.templateSettings.outbounds.push(outbound);
|
||||
app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
|
||||
this.close();
|
||||
app.$message.success('NordVPN outbound added');
|
||||
},
|
||||
resetOutbound(index) {
|
||||
const server = this.servers.find(s => s.id === this.serverId);
|
||||
if (!server || index === -1) return;
|
||||
|
||||
const tech = server.technologies.find(t => t.id === 35);
|
||||
const publicKey = tech.metadata.find(m => m.name === 'public_key').value;
|
||||
|
||||
const oldTag = app.templateSettings.outbounds[index].tag;
|
||||
const newTag = `nord-${server.hostname}`;
|
||||
|
||||
const outbound = {
|
||||
tag: newTag,
|
||||
protocol: 'wireguard',
|
||||
settings: {
|
||||
secretKey: this.nordData.private_key,
|
||||
address: ['10.5.0.2/32'],
|
||||
peers: [{
|
||||
publicKey: publicKey,
|
||||
endpoint: server.station + ':51820'
|
||||
}],
|
||||
noKernelTun: false
|
||||
}
|
||||
};
|
||||
app.templateSettings.outbounds[index] = outbound;
|
||||
|
||||
// Sync routing rules
|
||||
app.templateSettings.routing.rules.forEach(r => {
|
||||
if (r.outboundTag === oldTag) {
|
||||
r.outboundTag = newTag;
|
||||
}
|
||||
});
|
||||
|
||||
app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
|
||||
this.close();
|
||||
app.$message.success('NordVPN outbound updated');
|
||||
},
|
||||
delOutbound(index) {
|
||||
if (index !== -1) {
|
||||
app.templateSettings.outbounds.splice(index, 1);
|
||||
app.outboundSettings = JSON.stringify(app.templateSettings.outbounds);
|
||||
}
|
||||
},
|
||||
delRouting() {
|
||||
if (app.templateSettings && app.templateSettings.routing) {
|
||||
app.templateSettings.routing.rules = app.templateSettings.routing.rules.filter(r => !r.outboundTag.startsWith("nord-"));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
new Vue({
|
||||
delimiters: ['[[', ']]'],
|
||||
el: '#nord-modal',
|
||||
data: {
|
||||
nordModal: nordModal,
|
||||
},
|
||||
methods: {
|
||||
login: () => nordModal.login(),
|
||||
saveKey: () => nordModal.saveKey(),
|
||||
logout() { nordModal.logout(this.nordOutboundIndex) },
|
||||
fetchServers: () => nordModal.fetchServers(),
|
||||
addOutbound: () => nordModal.addOutbound(),
|
||||
resetOutbound() { nordModal.resetOutbound(this.nordOutboundIndex) },
|
||||
onCityChange() {
|
||||
if (this.filteredServers.length > 0) {
|
||||
this.nordModal.serverId = this.filteredServers[0].id;
|
||||
} else {
|
||||
this.nordModal.serverId = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nordOutboundIndex: {
|
||||
get: function () {
|
||||
return app.templateSettings ? app.templateSettings.outbounds.findIndex((o) => o.tag.startsWith("nord-")) : -1;
|
||||
}
|
||||
},
|
||||
filteredServers: function() {
|
||||
if (!this.nordModal.cityId) {
|
||||
return this.nordModal.servers;
|
||||
}
|
||||
return this.nordModal.servers.filter(s => s.cityId === this.nordModal.cityId);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -313,6 +313,25 @@
|
||||
</template>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
<a-setting-list-item paddings="small">
|
||||
<template #title>{{ i18n "pages.xray.nordRouting" }}</template>
|
||||
<template #control>
|
||||
<template v-if="NordExist">
|
||||
<a-select mode="tags" :style="{ width: '100%' }"
|
||||
v-model="nordDomains"
|
||||
:dropdown-class-name="themeSwitcher.currentTheme">
|
||||
<a-select-option :value="p.value" :label="p.label"
|
||||
v-for="p in settingsData.ServicesOptions">
|
||||
<span>[[ p.label ]]</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-button type="primary" icon="api"
|
||||
@click="showNord()">{{ i18n "pages.xray.outbound.nordvpn" }}</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-setting-list-item>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="6"
|
||||
header='{{ i18n "pages.settings.resetDefaultConfig"}}'>
|
||||
|
||||
@@ -9,6 +9,8 @@
|
||||
</a-button>
|
||||
<a-button type="primary" icon="cloud"
|
||||
@click="showWarp()">WARP</a-button>
|
||||
<a-button type="primary" icon="api"
|
||||
@click="showNord()">NordVPN</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :xs="12" :sm="12" :lg="12" :style="{ textAlign: 'right' }">
|
||||
|
||||
@@ -163,6 +163,7 @@
|
||||
{{template "modals/dnsPresetsModal"}}
|
||||
{{template "modals/fakednsModal"}}
|
||||
{{template "modals/warpModal"}}
|
||||
{{template "modals/nordModal"}}
|
||||
<script>
|
||||
const rulesColumns = [
|
||||
{ title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } },
|
||||
@@ -1056,6 +1057,9 @@
|
||||
showWarp() {
|
||||
warpModal.show();
|
||||
},
|
||||
showNord() {
|
||||
nordModal.show();
|
||||
},
|
||||
async loadCustomGeoAliases() {
|
||||
try {
|
||||
const msg = await HttpUtil.get('/panel/api/custom-geo/aliases');
|
||||
@@ -1429,6 +1433,19 @@
|
||||
this.templateRuleSetter({ outboundTag: "warp", property: "domain", data: newValue });
|
||||
}
|
||||
},
|
||||
nordTag: {
|
||||
get: function () {
|
||||
return this.templateSettings ? (this.templateSettings.outbounds.find((o) => o.tag.startsWith("nord-")) || { tag: "nord" }).tag : "nord";
|
||||
}
|
||||
},
|
||||
nordDomains: {
|
||||
get: function () {
|
||||
return this.templateRuleGetter({ outboundTag: this.nordTag, property: "domain" });
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.templateRuleSetter({ outboundTag: this.nordTag, property: "domain", data: newValue });
|
||||
}
|
||||
},
|
||||
torrentSettings: {
|
||||
get: function () {
|
||||
return ArrayUtils.doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols);
|
||||
@@ -1446,6 +1463,11 @@
|
||||
return this.templateSettings ? this.templateSettings.outbounds.findIndex((o) => o.tag == "warp") >= 0 : false;
|
||||
},
|
||||
},
|
||||
NordExist: {
|
||||
get: function () {
|
||||
return this.templateSettings ? this.templateSettings.outbounds.findIndex((o) => o.tag.startsWith("nord-")) >= 0 : false;
|
||||
},
|
||||
},
|
||||
enableDNS: {
|
||||
get: function () {
|
||||
return this.templateSettings ? this.templateSettings.dns != null : false;
|
||||
|
||||
Reference in New Issue
Block a user