Update

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

@@ -0,0 +1,22 @@
+<script setup>
+import {onMounted} from "vue";
+import QRCode from "qrcode";
+
+const props = defineProps([
+	"content"
+])
+
+onMounted(() => {
+	QRCode.toCanvas(document.getElementById('qrcode'), props.content, function (error) {})
+})
+</script>
+
+<template>
+<div>
+	<canvas id="qrcode" class="rounded-3 shadow"></canvas>
+</div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -2,7 +2,7 @@
 import {computed, reactive, ref} from "vue";
 import {clientStore} from "@/stores/clientStore.js";
 import axios from "axios";
-import {requestURl} from "@/utilities/request.js";
+import {axiosPost, requestURl} from "@/utilities/request.js";
 import {useRoute, useRouter} from "vue-router";
 const loading = ref(false)
 const formData = reactive({
@@ -20,15 +20,14 @@ const signIn = async (e) => {
 		return;
 	}
 	loading.value = true;
-	await axios.post(requestURl("/api/signin"), formData).then(res => {
-		let data = res.data;
-		if (!data.status){
-			store.newNotification(data.message, "danger")
-			loading.value = false;
-		}else{
-			emits("totpToken", data.message)
-		}
-	})
+
+	const data = await axiosPost("/api/signin", formData)
+	if (!data.status){
+		store.newNotification(data.message, "danger")
+		loading.value = false;
+	}else{
+		emits("totpToken", data.message)
+	}
 }
 
 const formFilled = computed(() => {

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

@@ -1,10 +1,10 @@
 <script setup async>
 import {computed, onMounted, reactive, ref} from "vue";
 import axios from "axios";
-import {requestURl} from "@/utilities/request.js";
+import {axiosPost, requestURl} from "@/utilities/request.js";
 import {useRouter} from "vue-router";
 import {clientStore} from "@/stores/clientStore.js";
-import QRCode from "qrcode";
+import Qrcode from "@/components/SignIn/qrcode.vue";
 
 const props = defineProps([
 	'totpToken'
@@ -47,30 +47,28 @@ onMounted(() => {
 const emits = defineEmits(['clearToken'])
 
 onMounted(() => {
-	if (totpKey.value){
-		QRCode.toCanvas(document.getElementById('qrcode'), totpKey.value, function (error) {})
-	}
+
 })
 
 const verify = async (e) => {
 	e.preventDefault()
 	if (formFilled){
 		loading.value = true
-		await axios.post(requestURl('/api/signin/totp'), {
+		const data = await axiosPost('/api/signin/totp', {
 			Token: props.totpToken,
 			UserProvidedTOTP: formData.TOTP
-		}).then(res => {
-			loading.value = false
-			let data = res.data
+		})
+		loading.value = false
+		if (data){
 			if (data.status){
 				router.push('/')
 			}else{
 				store.newNotification(data.message, "danger")
 			}
-		}).catch(() => {
+		}else{
 			store.newNotification("Sign in status is invalid", "danger")
 			emits('clearToken')
-		})
+		}
 	}
 }
 </script>
@@ -88,7 +86,7 @@ const verify = async (e) => {
 			<div class="card-body d-flex gap-3 flex-column">
 				<h2 class="mb-0">Initial Setup</h2>
 				<p class="mb-0">Please scan the following QR Code to generate TOTP with your choice of authenticator</p>
-				<canvas id="qrcode" class="rounded-3 shadow "></canvas>
+				<Qrcode :content="totpKey"></Qrcode>
 				<p class="mb-0">Or you can click the link below:</p>
 				<div class="card rounded-3 ">
 					<div class="card-body">

src/static/client/src/router/router.js

@@ -3,7 +3,7 @@ import Index from "@/views/index.vue";
 import SignIn from "@/views/signin.vue";
 import SignUp from "@/views/signup.vue";
 import axios from "axios";
-import {requestURl} from "@/utilities/request.js";
+import {axiosGet, requestURl} from "@/utilities/request.js";
 import {clientStore} from "@/stores/clientStore.js";
 
 const router = createRouter({
@@ -37,6 +37,8 @@ router.beforeEach(async (to, from, next) => {
 	const store = clientStore()
 
 	if (to.path === '/signout'){
+
+
 		await axios.get(requestURl('/api/signout')).then(() => {
 			next('/signin')
 		}).catch(() => {
@@ -45,13 +47,13 @@ router.beforeEach(async (to, from, next) => {
 		store.newNotification("Sign in session ended, please sign in again", "warning")
 	}else{
 		if (to.meta.auth){
-			await axios.get(requestURl('/api/validateAuthentication')).then(res => {
+			const status = await axiosGet('/api/validateAuthentication')
+			if (status){
 				next()
-			}).catch(() => {
-
+			}else{
 				store.newNotification("Sign in session ended, please sign in again", "warning")
 				next('/signin')
-			})
+			}
 		}else{
 			next()
 		}

src/static/client/src/utilities/request.js

@@ -1,5 +1,26 @@
+import axios from "axios";
+
 export const requestURl = (url) => {
 	return import.meta.env.MODE === 'development' ? '/client' + url
 		: `${window.location.protocol}//${(window.location.host + window.location.pathname + url).replace(/\/\//g, '/')}`
 }
 
+export const axiosPost = async (URL, body = {}) => {
+	try{
+		const res = await axios.post(requestURl(URL), body)
+		return res.data
+	} catch (error){
+		console.log(error)
+		return undefined
+	}
+}
+
+export const axiosGet = async (URL, query = {}) => {
+	try{
+		const res = await axios.get(requestURl(URL), query)
+		return res.data
+	} catch (error){
+		console.log(error)
+		return undefined
+	}
+}