Updated AWG

src/static/client/src/components/Configuration/configuration.vue

@@ -55,9 +55,9 @@ window.dayjs = dayjs
 			</small>
 			<span class="badge rounded-3 ms-sm-auto"
 			      :class="[props.config.protocol === 'wg' ? 'wireguardBg' : 'amneziawgBg' ]"
-			      v-if="props.config.protocol === 'wg'">
-							{{ props.config.protocol === 'wg' ? 'WireGuard': 'AmneziaWG' }}
-						</span>
+			>
+				{{ props.config.protocol === 'wg' ? 'WireGuard': 'AmneziaWG' }}
+			</span>
 		</div>
 		<div class="card-body p-3 d-flex gap-3 flex-column">
 			<div>
@@ -92,6 +92,8 @@ window.dayjs = dayjs
 		<Transition name="app">
 			<ConfigurationQRCode
 				v-if="showQRCode"
+				:config="props.config"
+				:protocol="props.config.protocol"
 				@back="showQRCode = false"
 				:qrcode-data="config.peer_configuration_data.file"></ConfigurationQRCode>
 		</Transition>

src/static/client/src/components/Configuration/configurationQRCode.vue

@@ -1,29 +1,40 @@
 <script setup>
 import Qrcode from "@/components/SignIn/qrcode.vue";
+import {computed} from "vue";
 
 const props = defineProps([
-	'qrcodeData'
+	'qrcodeData', 'protocol'
 ])
 
 const emits = defineEmits([
 	'back'
 ])
-
 </script>
 
 <template>
-<div class="p-2 position-fixed top-0 start-0 vw-100 vh-100 d-flex qrcodeContainer p-3 overflow-scroll">
-	<div class="m-auto d-flex gap-3 flex-column p-3">
-		<div>
-			<a role="button" @click="emits('back')" class="btn btn-body rounded-3 btn-sm">
-				<i class="me-2 bi bi-x-lg"></i> Dismiss
-			</a>
-		</div>
-		<Qrcode :content="props.qrcodeData"></Qrcode>
-		<button class="btn bg-primary-subtle border-primary-subtle rounded-3">
-			<i class="bi bi-download me-2"></i>Download
-		</button>
+<div class="p-2 position-fixed top-0 start-0 vw-100 vh-100 d-flex qrcodeContainer p-3 overflow-scroll flex-column">
+	<div>
+		<a role="button" @click="emits('back')" class="btn btn-outline-body rounded-3 btn-sm">
+			<i class="me-2 bi bi-chevron-left"></i> Back
+		</a>
 	</div>
+	<div class="m-auto d-flex gap-3 flex-column p-3" style="width: 400px">
+
+		<div class="d-flex flex-column gap-2 align-items-center">
+			<Qrcode :content="props.qrcodeData"></Qrcode>
+			<small>
+				Scan with {{ protocol === "wg" ? 'WireGuard':'AmneziaWG'}} App
+			</small>
+			<hr class="border-white w-100 my-2">
+			<button class="btn bg-primary-subtle border-primary-subtle rounded-3">
+				<i class="bi bi-download me-2"></i>Download
+			</button>
+			<small v-if="protocol === 'wg'" class="text-center text-muted">
+				For AmneziaVPN App, please download the configuration file and import into it.
+			</small>
+		</div>
+	</div>
+
 </div>
 </template>
 

src/static/client/src/components/SignIn/qrcode.vue

@@ -14,7 +14,7 @@ onMounted(() => {
 </script>
 
 <template>
-<div>
+<div class="d-flex gap-2 flex-column">
 	<canvas :id="'qrcode_' + id" class="rounded-3"></canvas>
 </div>
 </template>