mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-06-28 01:06:58 +00:00
Finished Index
This commit is contained in:
Donald Zou
parent
c35d22a82f
commit
e9730f24a0
@ -52,6 +52,13 @@ def createClientBlueprint(wireguardConfigurations: dict[WireguardConfiguration],
|
||||
session['role'] = 'client'
|
||||
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():
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
@ -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...
|
||||
<i class="spinner-border spinner-border-sm"></i>
|
||||
</span>
|
||||
</Transition>
|
||||
<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...<i class="ms-2 spinner-border spinner-border-sm"></i>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
<div>
|
||||
|
||||
@ -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,20 +25,23 @@ const formFilled = computed(() => {
|
||||
const store = clientStore()
|
||||
const router = useRouter()
|
||||
|
||||
await axios.get(requestURl('/api/signin/totp'), {
|
||||
params: {
|
||||
Token: props.totpToken
|
||||
}
|
||||
}).then(res => {
|
||||
let data = res.data
|
||||
if (data.status){
|
||||
if (data.message){
|
||||
totpKey.value = data.message
|
||||
onMounted(() => {
|
||||
axios.get(requestURl('/api/signin/totp'), {
|
||||
params: {
|
||||
Token: props.totpToken
|
||||
}
|
||||
}else{
|
||||
store.newNotification(data.message, "danger")
|
||||
router.push('/signin')
|
||||
}
|
||||
}).then(res => {
|
||||
let data = res.data
|
||||
loading.value = false
|
||||
if (data.status){
|
||||
if (data.message){
|
||||
totpKey.value = data.message
|
||||
}
|
||||
}else{
|
||||
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>
|
||||
</span>
|
||||
</Transition>
|
||||
<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...
|
||||
<i class="ms-2 spinner-border spinner-border-sm"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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) => {
|
||||
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")
|
||||
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{
|
||||
next()
|
||||
if (to.meta.auth){
|
||||
await axios.get(requestURl('/api/validateAuthentication')).then(res => {
|
||||
next()
|
||||
}).catch(() => {
|
||||
|
||||
store.newNotification("Sign in session ended, please sign in again", "warning")
|
||||
next('/signin')
|
||||
})
|
||||
}else{
|
||||
next()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
router.afterEach((to, from, next) => {
|
||||
|
||||
@ -3,11 +3,45 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>
|
||||
Index PAge
|
||||
</h1>
|
||||
<div class="">
|
||||
<ul class="nav gap-0 border-bottom">
|
||||
<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>
|
||||
@ -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 }"
|
||||
|
||||
@ -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,15 +122,13 @@ 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">
|
||||
<span v-if="!loading" class="d-block">
|
||||
Continue <i class="ms-2 bi bi-arrow-right"></i>
|
||||
</span>
|
||||
<span v-else class="d-block">
|
||||
<span v-else class="d-block">
|
||||
Loading...
|
||||
<i class="spinner-border spinner-border-sm"></i>
|
||||
</span>
|
||||
</Transition>
|
||||
</button>
|
||||
</form>
|
||||
<div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user