477 lines
21 KiB
Vue
477 lines
21 KiB
Vue
<template>
|
|
<v-container>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-card dark>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title class="headline">Clients</v-list-item-title>
|
|
</v-list-item-content>
|
|
<v-btn
|
|
color="success"
|
|
@click="startAddClient"
|
|
>
|
|
Ajout nouveau client
|
|
<v-icon right dark>mdi-account-multiple-plus-outline</v-icon>
|
|
</v-btn>
|
|
</v-list-item>
|
|
<v-row>
|
|
<v-col
|
|
v-for="(client, i) in clients"
|
|
:key="i"
|
|
sm12 lg6
|
|
>
|
|
<v-card
|
|
:color="client.enable ? '#1F7087' : 'warning'"
|
|
class="mx-auto"
|
|
raised
|
|
shaped
|
|
>
|
|
<v-list-item>
|
|
<v-list-item-content>
|
|
<v-list-item-title class="headline">{{ client.name }}</v-list-item-title>
|
|
<v-list-item-subtitle>{{ client.email }}</v-list-item-subtitle>
|
|
<v-list-item-subtitle>Créé: {{ client.created | formatDate }}</v-list-item-subtitle>
|
|
<v-list-item-subtitle>Modifié: {{ client.updated | formatDate }}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
|
|
<v-list-item-avatar
|
|
tile
|
|
size="150"
|
|
>
|
|
<v-img :src="`${apiBaseUrl}/client/${client.id}/config?qrcode=true`"/>
|
|
</v-list-item-avatar>
|
|
</v-list-item>
|
|
|
|
<v-card-text class="text--primary">
|
|
<v-chip
|
|
v-for="(ip, i) in client.address"
|
|
:key="i"
|
|
color="indigo"
|
|
text-color="white"
|
|
>
|
|
<v-icon left>mdi-ip-network</v-icon>
|
|
{{ ip }}
|
|
</v-chip>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-tooltip bottom>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
text
|
|
:href="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`"
|
|
v-on="on"
|
|
>
|
|
<span class="d-none d-lg-flex">Télécharger</span>
|
|
<v-icon right dark>mdi-cloud-download-outline</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>Télécharger</span>
|
|
</v-tooltip>
|
|
|
|
<v-tooltip bottom>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
text
|
|
@click.stop="startUpdateClient(client)"
|
|
v-on="on"
|
|
>
|
|
<span class="d-none d-lg-flex">Editer</span>
|
|
<v-icon right dark>mdi-square-edit-outline</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>Editer</span>
|
|
</v-tooltip>
|
|
|
|
<v-tooltip bottom>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
text
|
|
@click="sendEmailClient(client.id)"
|
|
v-on="on"
|
|
>
|
|
<span class="d-none d-lg-flex">Envoyer message</span>
|
|
<v-icon right dark>mdi-email-outline</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>Envoyer message</span>
|
|
</v-tooltip>
|
|
|
|
<v-tooltip bottom>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
text
|
|
@click="deleteClient(client)"
|
|
v-on="on"
|
|
>
|
|
<span class="d-none d-lg-flex">Supprimer</span>
|
|
<v-icon right dark>mdi-trash-can-outline</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>Supprimer</span>
|
|
</v-tooltip>
|
|
|
|
<v-spacer/>
|
|
<v-tooltip right>
|
|
<template v-slot:activator="{ on }">
|
|
<v-switch
|
|
dark
|
|
v-on="on"
|
|
color="success"
|
|
v-model="client.enable"
|
|
v-on:change="updateClient(client)"
|
|
/>
|
|
</template>
|
|
<span> {{client.enable ? 'Désactiver' : 'Activer'}} ce client</span>
|
|
</v-tooltip>
|
|
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
<v-dialog
|
|
v-if="client"
|
|
v-model="dialogAddClient"
|
|
max-width="550"
|
|
>
|
|
<v-card>
|
|
<v-card-title class="headline">Ajout nouveau client</v-card-title>
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col
|
|
cols="12"
|
|
>
|
|
<v-form
|
|
ref="form"
|
|
v-model="valid"
|
|
>
|
|
<v-text-field
|
|
v-model="client.name"
|
|
label="Nom convivial"
|
|
:rules="[ v => !!v || 'Nom client est requis', ]"
|
|
required
|
|
/>
|
|
<v-text-field
|
|
v-model="client.email"
|
|
label="Client messagerie"
|
|
:rules="[ v => (/.+@.+\..+/.test(v) || v === '') || 'Adresse non valide',]"
|
|
/>
|
|
<v-select
|
|
v-model="client.address"
|
|
:items="server.address"
|
|
label="Adresse IP client choisie parmi les réseaux suivants"
|
|
:rules="[ v => !!v || 'Réseau requis', ]"
|
|
multiple
|
|
chips
|
|
persistent-hint
|
|
required
|
|
/>
|
|
<v-combobox
|
|
v-model="client.allowedIPs"
|
|
chips
|
|
hint="Saisir le CIDR IPv4 ou IPv6 et appuyez sur touche Entrée"
|
|
label="IP autorisés"
|
|
multiple
|
|
dark
|
|
>
|
|
<template v-slot:selection="{ attrs, item, select, selected }">
|
|
<v-chip
|
|
v-bind="attrs"
|
|
:input-value="selected"
|
|
close
|
|
@click="select"
|
|
@click:close="client.allowedIPs.splice(client.allowedIPs.indexOf(item), 1)"
|
|
>
|
|
<strong>{{ item }}</strong>
|
|
</v-chip>
|
|
</template>
|
|
</v-combobox>
|
|
|
|
<v-switch
|
|
v-model="client.enable"
|
|
color="red"
|
|
inset
|
|
:label="client.enable ? 'Activer client après création': 'Désactiver client après création'"
|
|
/>
|
|
<v-switch
|
|
v-model="client.ignorePersistentKeepalive"
|
|
color="red"
|
|
inset
|
|
:label="'Ignorer le keepalive persistant global: ' + (client.ignorePersistentKeepalive ? 'Oui': 'NON')"
|
|
/>
|
|
</v-form>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer/>
|
|
<v-btn
|
|
:disabled="!valid"
|
|
color="success"
|
|
@click="addClient(client)"
|
|
>
|
|
Valider
|
|
<v-icon right dark>mdi-check-outline</v-icon>
|
|
</v-btn>
|
|
<v-btn
|
|
color="primary"
|
|
@click="dialogAddClient = false"
|
|
>
|
|
Abandon
|
|
<v-icon right dark>mdi-close-circle-outline</v-icon>
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-dialog
|
|
v-if="client"
|
|
v-model="dialogEditClient"
|
|
max-width="550"
|
|
>
|
|
<v-card>
|
|
<v-card-title class="headline">Edition client</v-card-title>
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col
|
|
cols="12"
|
|
>
|
|
<v-form
|
|
ref="form"
|
|
v-model="valid"
|
|
>
|
|
<v-text-field
|
|
v-model="client.name"
|
|
label="Nom convivial"
|
|
:rules="[ v => !!v || 'Nom client est requis',]"
|
|
required
|
|
/>
|
|
<v-text-field
|
|
v-model="client.email"
|
|
label="Messagerie"
|
|
:rules="[ v => (/.+@.+\..+/.test(v) || v === '') || 'Adresse non valide',]"
|
|
required
|
|
/>
|
|
<v-combobox
|
|
v-model="client.address"
|
|
chips
|
|
hint="Saisir le CIDR IPv4 ou IPv6 et appuyez sur touche Entrée"
|
|
label="Adresses"
|
|
multiple
|
|
dark
|
|
>
|
|
<template v-slot:selection="{ attrs, item, select, selected }">
|
|
<v-chip
|
|
v-bind="attrs"
|
|
:input-value="selected"
|
|
close
|
|
@click="select"
|
|
@click:close="client.address.splice(client.address.indexOf(item), 1)"
|
|
>
|
|
<strong>{{ item }}</strong>
|
|
</v-chip>
|
|
</template>
|
|
</v-combobox>
|
|
<v-combobox
|
|
v-model="client.allowedIPs"
|
|
chips
|
|
hint="Saisir le CIDR IPv4 ou IPv6 et appuyez sur touche Entrée"
|
|
label="IP autorisés"
|
|
multiple
|
|
dark
|
|
>
|
|
<template v-slot:selection="{ attrs, item, select, selected }">
|
|
<v-chip
|
|
v-bind="attrs"
|
|
:input-value="selected"
|
|
close
|
|
@click="select"
|
|
@click:close="client.allowedIPs.splice(client.allowedIPs.indexOf(item), 1)"
|
|
>
|
|
<strong>{{ item }}</strong>
|
|
</v-chip>
|
|
</template>
|
|
</v-combobox>
|
|
<v-switch
|
|
v-model="client.ignorePersistentKeepalive"
|
|
color="red"
|
|
inset
|
|
:label="'Ignorer le keepalive persistant global: ' + (client.ignorePersistentKeepalive ? 'Oui': 'NON')"
|
|
/>
|
|
</v-form>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer/>
|
|
<v-btn
|
|
:disabled="!valid"
|
|
color="success"
|
|
@click="updateClient(client)"
|
|
>
|
|
Valider
|
|
<v-icon right dark>mdi-check-outline</v-icon>
|
|
</v-btn>
|
|
<v-btn
|
|
color="primary"
|
|
@click="dialogEditClient = false"
|
|
>
|
|
Abandon
|
|
<v-icon right dark>mdi-close-circle-outline</v-icon>
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<Notification v-bind:notification="notification"/>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
import {ApiService, API_BASE_URL} from '../services/ApiService'
|
|
import Notification from '../components/Notification'
|
|
|
|
export default {
|
|
name: 'Clients',
|
|
|
|
components: {
|
|
Notification
|
|
},
|
|
|
|
data: () => ({
|
|
api: null,
|
|
apiBaseUrl: API_BASE_URL,
|
|
clients: [],
|
|
notification: {
|
|
show: false,
|
|
color: '',
|
|
text: '',
|
|
},
|
|
dialogAddClient: false,
|
|
dialogEditClient: false,
|
|
client: null,
|
|
server: null,
|
|
valid: false,
|
|
}),
|
|
|
|
mounted () {
|
|
this.api = new ApiService();
|
|
this.getClients();
|
|
this.getServer()
|
|
},
|
|
|
|
methods: {
|
|
getClients() {
|
|
this.api.get('/client').then((res) => {
|
|
this.clients = res
|
|
}).catch((e) => {
|
|
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
|
});
|
|
},
|
|
|
|
getServer() {
|
|
this.api.get('/server').then((res) => {
|
|
this.server = res;
|
|
}).catch((e) => {
|
|
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
|
});
|
|
},
|
|
|
|
startAddClient() {
|
|
this.dialogAddClient = true;
|
|
this.client = {
|
|
name: "",
|
|
email: "",
|
|
enable: true,
|
|
allowedIPs: ["0.0.0.0/0", "::/0"],
|
|
address: this.server.address,
|
|
}
|
|
},
|
|
addClient(client) {
|
|
if (client.allowedIPs.length < 1) {
|
|
this.notify('error', 'Veuillez fournir au moins une adresse CIDR valide pour les adresses IP autorisées du client.');
|
|
return;
|
|
}
|
|
for (let i = 0; i < client.allowedIPs.length; i++){
|
|
if (this.$isCidr(client.allowedIPs[i]) === 0) {
|
|
this.notify('error', 'Un CIDR invalide a été détecté, veuillez corriger avant de soumettre');
|
|
return
|
|
}
|
|
}
|
|
this.dialogAddClient = false;
|
|
|
|
this.api.post('/client', client).then((res) => {
|
|
this.notify('success', `Client ${res.name} ajouté avec succès`);
|
|
this.getClients()
|
|
}).catch((e) => {
|
|
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
|
});
|
|
},
|
|
|
|
deleteClient(client) {
|
|
if(confirm(`Voulez-vous vraiment supprimer ${client.name} ?`)){
|
|
this.api.delete(`/client/${client.id}`).then((res) => {
|
|
this.notify('success', "Client supprimé avec succès");
|
|
this.getClients()
|
|
}).catch((e) => {
|
|
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
|
});
|
|
}
|
|
},
|
|
|
|
sendEmailClient(id) {
|
|
this.api.get(`/client/${id}/email`).then((res) => {
|
|
this.notify('success', "Courriel envoyé avec succès");
|
|
this.getClients()
|
|
}).catch((e) => {
|
|
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
|
});
|
|
},
|
|
|
|
startUpdateClient(client) {
|
|
this.client = client;
|
|
this.dialogEditClient = true;
|
|
},
|
|
updateClient(client) {
|
|
// check allowed IPs
|
|
if (client.allowedIPs.length < 1) {
|
|
this.notify('error', 'Veuillez fournir au moins une adresse CIDR valide pour les adresses IP autorisées du client');
|
|
return;
|
|
}
|
|
for (let i = 0; i < client.allowedIPs.length; i++){
|
|
if (this.$isCidr(client.allowedIPs[i]) === 0) {
|
|
this.notify('error', 'Un CIDR invalide a été détecté, veuillez corriger avant de soumettre');
|
|
return
|
|
}
|
|
}
|
|
// check address
|
|
if (client.address.length < 1) {
|
|
this.notify('error', 'Veuillez fournir au moins une adresse CIDR valide pour le client');
|
|
return;
|
|
}
|
|
for (let i = 0; i < client.address.length; i++){
|
|
if (this.$isCidr(client.address[i]) === 0) {
|
|
this.notify('error', 'Un CIDR invalide a été détecté, veuillez corriger avant de soumettre');
|
|
return
|
|
}
|
|
}
|
|
// all good, submit
|
|
this.dialogEditClient = false;
|
|
|
|
this.api.patch(`/client/${client.id}`, client).then((res) => {
|
|
this.notify('success', `Client ${res.name} mise à jour réussie`);
|
|
this.getClients()
|
|
}).catch((e) => {
|
|
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
|
});
|
|
},
|
|
|
|
notify(color, msg) {
|
|
this.notification.show = true;
|
|
this.notification.color = color;
|
|
this.notification.text = msg;
|
|
}
|
|
}
|
|
};
|
|
</script>
|