Finished Index

src/client.py

@@ -53,6 +53,13 @@ def createClientBlueprint(wireguardConfigurations: dict[WireguardConfiguration],
             session['totpVerified'] = False
         return ResponseObject(status, msg)
 
+    @client.get(f'{prefix}/api/signout')
+    def ClientAPI_SignOut():
+        session.pop('username')
+        session.pop('role')
+        session.pop('totpVerified')
+        return ResponseObject(True)
+    
     @client.get(f'{prefix}/api/signin/totp')
     def ClientAPI_SignIn_TOTP():
         token = request.args.get('Token', None)

src/static/client/src/App.vue

@@ -6,10 +6,11 @@ import NotificationList from "@/components/notification/notificationList.vue";
 <template>
 	<div data-bs-theme="dark" class="text-body bg-body w-100 h-100">
 		<div class="d-flex vh-100 vw-100 p-4 overflow-y-scroll">
-			<div class="m-auto p-5 bg-body-tertiary rounded-4 shadow-lg border" style="width: 700px">
+			<div class="mx-auto my-sm-auto bg-body-tertiary rounded-4 shadow-lg border position-relative"
+			     style="width: 700px">
 				<Suspense>
 					<RouterView v-slot="{ Component }">
-						<Transition name="app" mode="out-in" type="transition" appear>
+						<Transition name="app" type="transition" mode="out-in">
 							<Component :is="Component"></Component>
 						</Transition>
 					</RouterView>

src/static/client/src/assets/main.css

@@ -76,11 +76,19 @@
 
 .app-enter-active,
 .app-leave-active {
+
     transition: all 0.3s cubic-bezier(0.82, 0.58, 0.17, 1);
 }
 .app-enter-from,
 .app-leave-to{
     opacity: 0;
     filter: blur(5px);
+}
+
+.app-enter-from{
+    transform: scale(1.03);
+}
+
+.app-leave-to{
     transform: scale(0.97);
 }

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

@@ -82,15 +82,12 @@ if (route.query.Email){
 			<button
 				:disabled="!formFilled || loading"
 				class="btn btn-primary rounded-3 btn-brand px-3 py-2">
-				<Transition name="slide-right" mode="out-in">
 				<span v-if="!loading" class="d-block">
 					Continue <i class="ms-2 bi bi-arrow-right"></i>
 				</span>
 				<span v-else class="d-block">
-						Loading...
+					Loading...<i class="ms-2 spinner-border spinner-border-sm"></i>
-						<i class="spinner-border spinner-border-sm"></i>
 				</span>
-				</Transition>
 			</button>
 		</form>
 		<div>

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

@@ -14,7 +14,7 @@ const formData = reactive({
 	TOTP: ""
 })
 
-const loading = ref(false)
+const loading = ref(true)
 const replace = () => {
 	formData.TOTP = formData.TOTP.replace(/\D/i, "")
 }
@@ -25,12 +25,14 @@ const formFilled = computed(() => {
 const store = clientStore()
 const router = useRouter()
 
-await axios.get(requestURl('/api/signin/totp'), {
+onMounted(() => {
+	axios.get(requestURl('/api/signin/totp'), {
 		params: {
 			Token: props.totpToken
 		}
-}).then(res => {
+	}).then(res => {
 		let data = res.data
+		loading.value = false
 		if (data.status){
 			if (data.message){
 				totpKey.value = data.message
@@ -39,6 +41,7 @@ await axios.get(requestURl('/api/signin/totp'), {
 			store.newNotification(data.message, "danger")
 			router.push('/signin')
 		}
+	})
 })
 
 const emits = defineEmits(['clearToken'])
@@ -117,14 +120,13 @@ const verify = async (e) => {
 		<button
 			:disabled="!formFilled || loading"
 			class="btn btn-primary rounded-3 btn-brand px-3 py-2">
-			<Transition name="slide-right" mode="out-in">
 			<span v-if="!loading" class="d-block">
 				Continue <i class="ms-2 bi bi-arrow-right"></i>
 			</span>
 			<span v-else class="d-block">
-					<i class="spinner-border spinner-border-sm"></i>
+				Loading...
+				<i class="ms-2 spinner-border spinner-border-sm"></i>
 			</span>
-			</Transition>
 		</button>
 	</div>
 

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

@@ -26,22 +26,38 @@ const router = createRouter({
 			path: '/signup',
 			component: SignUp,
 			name: "Sign Up"
+		},
+		{
+			path: '/signout',
+			name: "Sign Out"
 		}
 	]
 })
-
 router.beforeEach(async (to, from, next) => {
+	const store = clientStore()
+
+	if (to.path === '/signout'){
+		await axios.get(requestURl('/api/signout')).then(() => {
+			next('/signin')
+		}).catch(() => {
+			next('/signin')
+		});
+		store.newNotification("Sign in session ended, please sign in again", "warning")
+	}else{
 		if (to.meta.auth){
 			await axios.get(requestURl('/api/validateAuthentication')).then(res => {
 				next()
 			}).catch(() => {
-			const store = clientStore()
+
 				store.newNotification("Sign in session ended, please sign in again", "warning")
 				next('/signin')
 			})
 		}else{
 			next()
 		}
+	}
+
+
 })
 
 router.afterEach((to, from, next) => {

src/static/client/src/views/index.vue

@@ -3,11 +3,45 @@
 </script>
 
 <template>
-<h1>
+<div class="">
-	Index PAge
+	<ul class="nav  gap-0 border-bottom">
-</h1>
+		<li class="nav-item">
+			<a class="nav-link text-body border-start-0" aria-current="page" href="#">
+				<strong>WGDashboard Client</strong>
+			</a>
+		</li>
+		<li class="nav-item ms-auto">
+			<a class="nav-link text-body" aria-current="page" href="#">
+				<i class="bi bi-gear-fill me-sm-2"></i>
+				<span>Settings</span>
+			</a>
+		</li>
+		<li class="nav-item">
+			<RouterLink to="/signout" class="nav-link text-danger" aria-current="page">
+				<i class="bi bi-box-arrow-left me-sm-2"></i>
+				<span>Sign Out</span>
+			</RouterLink>
+		</li>
+	</ul>
+	<div class="d-flex flex-column gap-3">
+		<div class="px-3 border-bottom py-4">
+			<h6>Hi donaldzou@live.hk!</h6>
+			<h5 class="mb-0">You have <strong>3</strong> configurations available</h5>
+		</div>
+		<div></div>
+	</div>
+</div>
 </template>
 
 <style scoped>
+.nav-link{
+	padding: 1rem 1rem;
+	border-left: 1px solid var(--bs-border-color)
+}
 
+@media screen and (max-width: 576px) {
+	.nav-link span{
+		display: none;
+	}
+}
 </style>

src/static/client/src/views/signin.vue

@@ -8,7 +8,7 @@ const checkTotp = ref("")
 </script>
 
 <template>
-	<div>
+	<div class="p-3 p-sm-5">
 		<Transition name="app" mode="out-in">
 			<SignInForm
 				@totpToken="token => { checkTotp = token }"

src/static/client/src/views/signup.vue

@@ -68,7 +68,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<div>
+	<div class="p-3 p-sm-5">
 		<h1>Sign Up</h1>
 		<p>to use WGDashboard Client</p>
 		<form class="mt-4 d-flex flex-column gap-3" @submit="e => signUp(e)">
@@ -122,7 +122,6 @@ onMounted(() => {
 			<button
 				:disabled="!formFilled || !validatePassword || loading"
 				class=" btn btn-primary rounded-3 btn-brand px-3 py-2">
-				<Transition name="slide-right" mode="out-in">
 				<span v-if="!loading" class="d-block">
 						Continue <i class="ms-2 bi bi-arrow-right"></i>
 					</span>
@@ -130,7 +129,6 @@ onMounted(() => {
 						Loading...
 						<i class="spinner-border spinner-border-sm"></i>
 					</span>
-				</Transition>
 			</button>
 		</form>
 		<div>