mirror of
https://github.com/h44z/wg-portal.git
synced 2025-09-15 15:21:14 +00:00
change tagged-input-field component, allow to paste multiple values (#365)
This commit is contained in:
Christoph
@@ -15,3 +15,85 @@ a.disabled {
|
||||
.desc::after {
|
||||
content: " ↓";
|
||||
}
|
||||
|
||||
/* style the background and the text color of the input ... */
|
||||
.vue-tags-input {
|
||||
max-width: 100% !important;
|
||||
background-color: #f7f7f9 !important;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.vue-tags-input .ti-input {
|
||||
padding: 0 0;
|
||||
border: none !important;
|
||||
transition: border-bottom 200ms ease;
|
||||
}
|
||||
|
||||
.vue-tags-input .ti-new-tag-input {
|
||||
background: transparent;
|
||||
color: var(--bs-body-color);
|
||||
padding: 0.75rem 1.5rem !important;
|
||||
}
|
||||
|
||||
|
||||
/* style the placeholders color across all browser */
|
||||
.vue-tags-input ::-webkit-input-placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
.vue-tags-input .ti-input::placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.vue-tags-input ::-moz-placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.vue-tags-input :-ms-input-placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.vue-tags-input :-moz-placeholder {
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
/* default styles for all the tags */
|
||||
.vue-tags-input .ti-tag {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border: 2px solid var(--bs-body-color);
|
||||
margin: 6px;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
/* the styles if a tag is invalid */
|
||||
.vue-tags-input .ti-tag.ti-invalid {
|
||||
background-color: #e88a74;
|
||||
}
|
||||
|
||||
/* if the user input is invalid, the input color should be red */
|
||||
.vue-tags-input .ti-new-tag-input.ti-invalid {
|
||||
color: #e88a74;
|
||||
}
|
||||
|
||||
/* if a tag or the user input is a duplicate, it should be crossed out */
|
||||
.vue-tags-input .ti-duplicate span,
|
||||
.vue-tags-input .ti-new-tag-input.ti-duplicate {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* if the user presses backspace, the complete tag should be crossed out, to mark it for deletion */
|
||||
.vue-tags-input .ti-tag:after {
|
||||
transition: transform .2s;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 2px;
|
||||
width: 108%;
|
||||
left: -4%;
|
||||
top: calc(50% - 1px);
|
||||
background-color: #000;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.vue-tags-input .ti-deletion-mark:after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import {interfaceStore} from "@/stores/interfaces";
|
||||
import {computed, ref, watch} from "vue";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { notify } from "@kyvg/vue3-notification";
|
||||
import Vue3TagsInput from 'vue3-tags-input';
|
||||
import { VueTagsInput } from '@vojtechlanka/vue-tags-input';
|
||||
import { validateCIDR, validateIP, validateDomain } from '@/helpers/validators';
|
||||
import isCidr from "is-cidr";
|
||||
import {isIP} from 'is-ip';
|
||||
@@ -38,6 +38,15 @@ const title = computed(() => {
|
||||
return t("modals.interface-edit.headline-new")
|
||||
})
|
||||
|
||||
const currentTags = ref({
|
||||
Addresses: "",
|
||||
Dns: "",
|
||||
DnsSearch: "",
|
||||
PeerDefNetwork: "",
|
||||
PeerDefAllowedIPs: "",
|
||||
PeerDefDns: "",
|
||||
PeerDefDnsSearch: ""
|
||||
})
|
||||
const formData = ref(freshInterface())
|
||||
|
||||
// functions
|
||||
@@ -137,94 +146,94 @@ function close() {
|
||||
function handleChangeAddresses(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if(isCidr(tag) === 0) {
|
||||
if(isCidr(tag.text) === 0) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid CIDR",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if(validInput) {
|
||||
formData.value.Addresses = tags
|
||||
formData.value.Addresses = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangeDns(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if(!isIP(tag)) {
|
||||
if(!isIP(tag.text)) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid IP",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if(validInput) {
|
||||
formData.value.Dns = tags
|
||||
formData.value.Dns = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangeDnsSearch(tags) {
|
||||
formData.value.DnsSearch = tags
|
||||
formData.value.DnsSearch = tags.map(tag => tag.text)
|
||||
}
|
||||
|
||||
function handleChangePeerDefNetwork(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if(isCidr(tag) === 0) {
|
||||
if(isCidr(tag.text) === 0) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid CIDR",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if(validInput) {
|
||||
formData.value.PeerDefNetwork = tags
|
||||
formData.value.PeerDefNetwork = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangePeerDefAllowedIPs(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if(isCidr(tag) === 0) {
|
||||
if(isCidr(tag.text) === 0) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid CIDR",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if(validInput) {
|
||||
formData.value.PeerDefAllowedIPs = tags
|
||||
formData.value.PeerDefAllowedIPs = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangePeerDefDns(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if(!isIP(tag)) {
|
||||
if(!isIP(tag.text)) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid IP",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if(validInput) {
|
||||
formData.value.PeerDefDns = tags
|
||||
formData.value.PeerDefDns = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangePeerDefDnsSearch(tags) {
|
||||
formData.value.PeerDefDnsSearch = tags
|
||||
formData.value.PeerDefDnsSearch = tags.map(tag => tag.text)
|
||||
}
|
||||
|
||||
async function save() {
|
||||
@@ -333,11 +342,15 @@ async function del() {
|
||||
<legend class="mt-4">{{ $t('modals.interface-edit.header-network') }}</legend>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.interface-edit.ip.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.Addresses"
|
||||
:placeholder="$t('modals.interface-edit.ip.placeholder')"
|
||||
:add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateCIDR"
|
||||
@on-tags-changed="handleChangeAddresses"/>
|
||||
<vue-tags-input class="form-control" v-model="currentTags.Addresses"
|
||||
:tags="formData.Addresses.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.interface-edit.ip.placeholder')"
|
||||
:validation="validateCIDR()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeAddresses"/>
|
||||
</div>
|
||||
<div v-if="formData.Mode==='server'" class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.interface-edit.listen-port.label') }}</label>
|
||||
@@ -345,19 +358,27 @@ async function del() {
|
||||
</div>
|
||||
<div v-if="formData.Mode!=='server'" class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.interface-edit.dns.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.Dns"
|
||||
:placeholder="$t('modals.interface-edit.dns.placeholder')"
|
||||
:add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateIP"
|
||||
@on-tags-changed="handleChangeDns"/>
|
||||
<vue-tags-input class="form-control" v-model="currentTags.Dns"
|
||||
:tags="formData.Dns.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.interface-edit.dns.placeholder')"
|
||||
:validation="validateIP()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeDns"/>
|
||||
</div>
|
||||
<div v-if="formData.Mode!=='server'" class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.interface-edit.dns-search.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.DnsSearch"
|
||||
:placeholder="$t('modals.interface-edit.dns-search.placeholder')"
|
||||
:add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateDomain"
|
||||
@on-tags-changed="handleChangeDnsSearch"/>
|
||||
<vue-tags-input class="form-control" v-model="currentTags.DnsSearch"
|
||||
:tags="formData.DnsSearch.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.interface-edit.dns-search.placeholder')"
|
||||
:validation="validateDomain()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeDnsSearch"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
@@ -420,36 +441,52 @@ async function del() {
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.networks.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.PeerDefNetwork"
|
||||
:placeholder="$t('modals.interface-edit.defaults.networks.placeholder')"
|
||||
:add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateCIDR"
|
||||
@on-tags-changed="handleChangePeerDefNetwork"/>
|
||||
<vue-tags-input class="form-control" v-model="currentTags.PeerDefNetwork"
|
||||
:tags="formData.PeerDefNetwork.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.interface-edit.defaults.networks.placeholder')"
|
||||
:validation="validateCIDR()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangePeerDefNetwork"/>
|
||||
<small class="form-text text-muted">{{ $t('modals.interface-edit.defaults.networks.description') }}</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.interface-edit.defaults.allowed-ip.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.PeerDefAllowedIPs"
|
||||
:placeholder="$t('modals.interface-edit.defaults.allowed-ip.placeholder')"
|
||||
:add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateCIDR"
|
||||
@on-tags-changed="handleChangePeerDefAllowedIPs"/>
|
||||
<vue-tags-input class="form-control" v-model="currentTags.PeerDefAllowedIPs"
|
||||
:tags="formData.PeerDefAllowedIPs.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.interface-edit.defaults.allowed-ip.placeholder')"
|
||||
:validation="validateCIDR()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangePeerDefAllowedIPs"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.interface-edit.dns.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.PeerDefDns"
|
||||
:placeholder="$t('modals.interface-edit.dns.placeholder')"
|
||||
:add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateIP"
|
||||
@on-tags-changed="handleChangePeerDefDns"/>
|
||||
<vue-tags-input class="form-control" v-model="currentTags.PeerDefDns"
|
||||
:tags="formData.PeerDefDns.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.interface-edit.dns.placeholder')"
|
||||
:validation="validateIP()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangePeerDefDns"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.interface-edit.dns-search.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.PeerDefDnsSearch"
|
||||
:placeholder="$t('modals.interface-edit.dns-search.placeholder')"
|
||||
:add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateDomain"
|
||||
@on-tags-changed="handleChangePeerDefDnsSearch"/>
|
||||
<vue-tags-input class="form-control" v-model="currentTags.PeerDefDnsSearch"
|
||||
:tags="formData.PeerDefDnsSearch.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.interface-edit.dns-search.placeholder')"
|
||||
:validation="validateDomain()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangePeerDefDnsSearch"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
|
||||
@@ -5,7 +5,7 @@ import { interfaceStore } from "@/stores/interfaces";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { notify } from "@kyvg/vue3-notification";
|
||||
import Vue3TagsInput from "vue3-tags-input";
|
||||
import { VueTagsInput } from '@vojtechlanka/vue-tags-input';
|
||||
import { validateCIDR, validateIP, validateDomain } from '@/helpers/validators';
|
||||
import isCidr from "is-cidr";
|
||||
import { isIP } from 'is-ip';
|
||||
@@ -65,6 +65,13 @@ const title = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const currentTags = ref({
|
||||
Addresses: "",
|
||||
AllowedIPs: "",
|
||||
ExtraAllowedIPs: "",
|
||||
Dns: "",
|
||||
DnsSearch: ""
|
||||
})
|
||||
const formData = ref(freshPeer())
|
||||
|
||||
// functions
|
||||
@@ -193,73 +200,73 @@ function close() {
|
||||
function handleChangeAddresses(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if (isCidr(tag) === 0) {
|
||||
if (isCidr(tag.text) === 0) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid CIDR",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if (validInput) {
|
||||
formData.value.Addresses = tags
|
||||
formData.value.Addresses = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangeAllowedIPs(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if (isCidr(tag) === 0) {
|
||||
if (isCidr(tag.text) === 0) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid CIDR",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if (validInput) {
|
||||
formData.value.AllowedIPs.Value = tags
|
||||
formData.value.AllowedIPs.Value = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangeExtraAllowedIPs(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if (isCidr(tag) === 0) {
|
||||
if (isCidr(tag.text) === 0) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid CIDR",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if (validInput) {
|
||||
formData.value.ExtraAllowedIPs = tags
|
||||
formData.value.ExtraAllowedIPs = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangeDns(tags) {
|
||||
let validInput = true
|
||||
tags.forEach(tag => {
|
||||
if (!isIP(tag)) {
|
||||
if (!isIP(tag.text)) {
|
||||
validInput = false
|
||||
notify({
|
||||
title: "Invalid IP",
|
||||
text: tag + " is not a valid IP address",
|
||||
text: tag.text + " is not a valid IP address",
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
if (validInput) {
|
||||
formData.value.Dns.Value = tags
|
||||
formData.value.Dns.Value = tags.map(tag => tag.text)
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangeDnsSearch(tags) {
|
||||
formData.value.DnsSearch.Value = tags
|
||||
formData.value.DnsSearch.Value = tags.map(tag => tag.text)
|
||||
}
|
||||
|
||||
async function save() {
|
||||
@@ -344,34 +351,64 @@ async function del() {
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.peer-edit.ip.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.Addresses"
|
||||
:placeholder="$t('modals.peer-edit.ip.placeholder')" :add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateCIDR" @on-tags-changed="handleChangeAddresses" />
|
||||
<vue-tags-input class="form-control" v-model="currentTags.Addresses"
|
||||
:tags="formData.Addresses.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.peer-edit.ip.placeholder')"
|
||||
:validation="validateCIDR()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeAddresses" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.peer-edit.allowed-ip.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.AllowedIPs.Value"
|
||||
:placeholder="$t('modals.peer-edit.allowed-ip.placeholder')" :add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateCIDR" @on-tags-changed="handleChangeAllowedIPs" />
|
||||
<vue-tags-input class="form-control" v-model="currentTags.AllowedIPs"
|
||||
:tags="formData.AllowedIPs.Value.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.peer-edit.allowed-ip.placeholder')"
|
||||
:validation="validateCIDR()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeAllowedIPs" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.peer-edit.extra-allowed-ip.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.ExtraAllowedIPs"
|
||||
:placeholder="$t('modals.peer-edit.extra-allowed-ip.placeholder')" :add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateCIDR" @on-tags-changed="handleChangeExtraAllowedIPs" />
|
||||
<vue-tags-input class="form-control" v-model="currentTags.ExtraAllowedIPs"
|
||||
:tags="formData.ExtraAllowedIPs.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.peer-edit.extra-allowed-ip.placeholder')"
|
||||
:validation="validateCIDR()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeExtraAllowedIPs" />
|
||||
<small class="form-text text-muted">{{ $t('modals.peer-edit.extra-allowed-ip.description') }}</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.peer-edit.dns.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.Dns.Value"
|
||||
:placeholder="$t('modals.peer-edit.dns.placeholder')" :add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateIP" @on-tags-changed="handleChangeDns" />
|
||||
<vue-tags-input class="form-control" v-model="currentTags.Dns"
|
||||
:tags="formData.Dns.Value.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.peer-edit.dns.placeholder')"
|
||||
:validation="validateIP()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeDns" />
|
||||
</div>
|
||||
<div hidden class="form-group">
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.peer-edit.dns-search.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.DnsSearch.Value"
|
||||
:placeholder="$t('modals.peer-edit.dns-search.label')" :add-tag-on-keys="[13, 188, 32, 9]"
|
||||
:validate="validateDomain" @on-tags-changed="handleChangeDnsSearch" />
|
||||
<vue-tags-input class="form-control" v-model="currentTags.DnsSearch"
|
||||
:tags="formData.DnsSearch.Value.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.peer-edit.dns-search.label')"
|
||||
:validation="validateDomain()"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeDnsSearch" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
|
||||
@@ -5,7 +5,7 @@ import {interfaceStore} from "@/stores/interfaces";
|
||||
import {computed, ref} from "vue";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { notify } from "@kyvg/vue3-notification";
|
||||
import Vue3TagsInput from "vue3-tags-input";
|
||||
import { VueTagsInput } from '@vojtechlanka/vue-tags-input';
|
||||
import { freshInterface } from '@/helpers/models';
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -36,6 +36,7 @@ function freshForm() {
|
||||
}
|
||||
}
|
||||
|
||||
const currentTag = ref("")
|
||||
const formData = ref(freshForm())
|
||||
|
||||
const title = computed(() => {
|
||||
@@ -55,7 +56,7 @@ function close() {
|
||||
}
|
||||
|
||||
function handleChangeUserIdentifiers(tags) {
|
||||
formData.value.Identifiers = tags
|
||||
formData.value.Identifiers = tags.map(tag => tag.text)
|
||||
}
|
||||
|
||||
async function save() {
|
||||
@@ -89,10 +90,14 @@ async function save() {
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label class="form-label mt-4">{{ $t('modals.peer-multi-create.identifiers.label') }}</label>
|
||||
<vue3-tags-input class="form-control" :tags="formData.Identifiers"
|
||||
:placeholder="$t('modals.peer-multi-create.identifiers.placeholder')"
|
||||
:add-tag-on-keys="[13, 188, 32, 9]"
|
||||
@on-tags-changed="handleChangeUserIdentifiers"/>
|
||||
<vue-tags-input class="form-control" v-model="currentTag"
|
||||
:tags="formData.Identifiers.map(str => ({ text: str }))"
|
||||
:placeholder="$t('modals.peer-multi-create.identifiers.placeholder')"
|
||||
:add-on-key="[13, 188, 32, 9]"
|
||||
:save-on-key="[13, 188, 32, 9]"
|
||||
:allow-edit-tags="true"
|
||||
:separators="[',', ';', ' ']"
|
||||
@tags-changed="handleChangeUserIdentifiers"/>
|
||||
<small class="form-text text-muted">{{ $t('modals.peer-multi-create.identifiers.description') }}</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
||||
@@ -1,14 +1,26 @@
|
||||
import isCidr from "is-cidr";
|
||||
import {isIP} from 'is-ip';
|
||||
|
||||
export function validateCIDR(value) {
|
||||
return isCidr(value) !== 0
|
||||
export function validateCIDR() {
|
||||
return [{
|
||||
classes: 'invalid-cidr',
|
||||
rule: ({ text }) => isCidr(text) === 0,
|
||||
disableAdd: true,
|
||||
}]
|
||||
}
|
||||
|
||||
export function validateIP(value) {
|
||||
return isIP(value)
|
||||
export function validateIP() {
|
||||
return [{
|
||||
classes: 'invalid-ip',
|
||||
rule: ({ text }) => !isIP(text),
|
||||
disableAdd: true,
|
||||
}]
|
||||
}
|
||||
|
||||
export function validateDomain(value) {
|
||||
return true
|
||||
export function validateDomain() {
|
||||
return [{
|
||||
classes: 'invalid-domain',
|
||||
rule: tag => tag.text.length < 3,
|
||||
disableAdd: true,
|
||||
}]
|
||||
}
|
||||
Reference in New Issue
Block a user