mirror of
https://github.com/WGDashboard/WGDashboard-PRW.git
synced 2026-08-03 14:32:56 +00:00
DaanSelen
113 lines
3.5 KiB
Vue
113 lines
3.5 KiB
Vue
<script>
|
|
import QRCode from "qrcode";
|
|
import LocaleText from "@/components/text/localeText.vue";
|
|
import {fetchGet} from "@/utilities/fetch.js";
|
|
import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
|
|
export default {
|
|
name: "peerQRCode",
|
|
components: {LocaleText},
|
|
props: {
|
|
selectedPeer: Object
|
|
},
|
|
setup(){
|
|
const dashboardStore = DashboardConfigurationStore();
|
|
return {dashboardStore}
|
|
},
|
|
data(){
|
|
return{
|
|
loading: true
|
|
}
|
|
},
|
|
mounted() {
|
|
fetchGet("/api/downloadPeer/"+this.$route.params.id, {
|
|
id: this.selectedPeer.id
|
|
}, (res) => {
|
|
this.loading = false;
|
|
if (res.status){
|
|
let data = ""
|
|
if (this.selectedPeer.configuration.Protocol === "awg"){
|
|
let awgQRCodeObject = {
|
|
containers: [
|
|
{
|
|
awg: {
|
|
isThirdPartyConfig: true,
|
|
last_config: res.data.file,
|
|
port: this.selectedPeer.configuration.ListenPort,
|
|
transport_proto: "udp"
|
|
},
|
|
container: "amnezia-awg",
|
|
}
|
|
],
|
|
defaultContainer: "amnezia-awg",
|
|
description: this.selectedPeer.name,
|
|
hostName: this.dashboardStore.Configuration.Peers.remote_endpoint
|
|
}
|
|
QRCode.toCanvas(
|
|
document.querySelector("#awg_vpn_qrcode"), btoa(JSON.stringify(awgQRCodeObject)), (error) => {
|
|
if (error) console.error(error)
|
|
}
|
|
)
|
|
}
|
|
data = res.data.file
|
|
QRCode.toCanvas(document.querySelector("#qrcode"), data, (error) => {
|
|
if (error) console.error(error)
|
|
})
|
|
}else{
|
|
this.dashboardStore.newMessage("Server", res.message, "danger")
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0">
|
|
<div class="container d-flex h-100 w-100">
|
|
<div class="m-auto modal-dialog-centered dashboardModal justify-content-center">
|
|
<div class="card rounded-3 shadow">
|
|
<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-0">
|
|
<h4 class="mb-0">
|
|
<LocaleText t="QR Code"></LocaleText>
|
|
</h4>
|
|
<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="d-flex gap-2 flex-column">
|
|
<div class="d-flex flex-column gap-2 align-items-center">
|
|
<canvas id="qrcode"
|
|
style="width: 200px !important; height: 200px !important;"
|
|
class="rounded-3 shadow animate__animated animate__fadeIn animate__faster qrcode"
|
|
:class="{'d-none': loading}"></canvas>
|
|
<LocaleText t="Scan with WireGuard App" class="text-muted" v-if='this.selectedPeer.configuration.Protocol === "wg"'></LocaleText>
|
|
<LocaleText t="Scan with AmneziaWG App" class="text-muted" v-if='this.selectedPeer.configuration.Protocol === "awg"'></LocaleText>
|
|
</div>
|
|
<div v-if='this.selectedPeer.configuration.Protocol === "awg"' class="d-flex flex-column gap-2 align-items-center">
|
|
<canvas id="awg_vpn_qrcode" class="rounded-3 shadow animate__animated animate__fadeIn animate__faster qrcode"
|
|
:class="{'d-none': loading}"></canvas>
|
|
<LocaleText t="Scan with AmneziaVPN App" class="text-muted"></LocaleText>
|
|
</div>
|
|
<div class="spinner-border m-auto" role="status" v-if="loading">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@media screen and (max-width: 768px) {
|
|
.qrcode{
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
}
|
|
|
|
.qrcode{
|
|
width: 200px !important;
|
|
height: 200px !important;
|
|
}
|
|
</style> |