mirror of
https://github.com/h44z/wg-portal.git
synced 2025-08-09 15:02:24 +00:00
131 lines
3.7 KiB
Vue
131 lines
3.7 KiB
Vue
<script setup>
|
|
import Modal from "./Modal.vue";
|
|
import {peerStore} from "@/stores/peers";
|
|
import {interfaceStore} from "@/stores/interfaces";
|
|
import {computed} from "vue";
|
|
|
|
const peers = peerStore()
|
|
const interfaces = interfaceStore()
|
|
|
|
const props = defineProps({
|
|
peerId: String,
|
|
visible: Boolean,
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
function close() {
|
|
emit('close')
|
|
}
|
|
|
|
const selectedPeer = computed(() => {
|
|
return peers.Find(props.peerId)
|
|
})
|
|
|
|
const selectedInterface = computed(() => {
|
|
let i = interfaces.GetSelected;
|
|
|
|
if (!i) {
|
|
i = { // dummy interface to avoid 'undefined' exceptions
|
|
Identifier: "none",
|
|
Mode: "server"
|
|
}
|
|
}
|
|
|
|
return i
|
|
})
|
|
|
|
const title = computed(() => {
|
|
if (selectedPeer.value) {
|
|
return "Peer: " + selectedPeer.value.Name
|
|
}
|
|
return ""
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Modal :title="title" :visible="visible" @close="close">
|
|
<template #default>
|
|
<div class="accordion">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Peer Information
|
|
</button>
|
|
</h2>
|
|
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
|
|
<div class="accordion-body">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h4>Details</h4>
|
|
<ul>
|
|
<li>Firstname: Some</li>
|
|
<li>Lastname: Username</li>
|
|
<li>Phone: 123456789</li>
|
|
<li>Mail: x@y.de</li>
|
|
</ul>
|
|
<h4>Traffic</h4>
|
|
<p><i class="fas fa-long-arrow-alt-down"></i> 1.5 MB / <i class="fas fa-long-arrow-alt-up"></i> 3.9 MB</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<img class="config-qr-img" src="https://hexdocs.pm/qr_code/docs/qrcode.svg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="selectedInterface.Mode==='server'" class="accordion-item">
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
Peer Configuration
|
|
</button>
|
|
</h2>
|
|
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" style="">
|
|
<div class="accordion-body">
|
|
<pre>
|
|
# AUTOGENERATED FILE - PROVIDED BY WIREGUARD PORTAL
|
|
# WireGuard configuration: Some username (Home)
|
|
# -WGP- PublicKey: xyz123
|
|
|
|
[Interface]
|
|
|
|
# Core settings
|
|
PrivateKey = abcd2131234
|
|
Address = 10.6.6.3/32, fd9f:6666::3/128
|
|
|
|
# Misc. settings (optional)
|
|
DNS = 10.10.1.20, fd9f:6666::10:6:6:1
|
|
MTU = 1380
|
|
|
|
[Peer]
|
|
PublicKey = oidjsfgsp9oih23
|
|
Endpoint = vpn.server.de:51820
|
|
AllowedIPs = 10.6.6.0/24, 10.10.0.0/16, 10.12.0.0/16, fd9f:6666::/64
|
|
PresharedKey = +1FPHPdsfjkln23
|
|
PersistentKeepalive = 16
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<div class="flex-fill text-start">
|
|
<button type="button" class="btn btn-primary me-1">Download</button>
|
|
<button type="button" class="btn btn-primary me-1">Email</button>
|
|
</div>
|
|
<button @click.prevent="close" type="button" class="btn btn-secondary">Close</button>
|
|
|
|
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style>
|
|
.config-qr-img {
|
|
max-width: 100%;
|
|
}
|
|
</style>
|