kamp/WGDashboard
1
0
Fork 0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00
Code

Added loading bar between each routes

Browse Source
This commit is contained in:
Donald Zou 2024-10-04 17:48:24 +08:00
parent 4833a29e57
commit 27c67ec202
5 changed files with 207 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/static/app/dist/assets/index.css vendored
View File

File diff suppressed because one or more lines are too long

42
src/static/app/dist/assets/index.js vendored
View File

File diff suppressed because one or more lines are too long

1
src/static/app/src/App.vue
View File

@ -24,6 +24,7 @@ const getActiveCrossServer = computed(() => {
</script>
<template>
<div style="z-index: 9999; height: 5px" class="position-absolute loadingBar top-0 start-0"></div>
<nav class="navbar bg-dark sticky-top" data-bs-theme="dark">
<div class="container-fluid d-flex text-body align-items-center">
<span class="navbar-brand mb-0 h1">WGDashboard</span>

292
src/static/app/src/router/index.js
View File

@ -18,157 +18,161 @@ import Totp from "@/components/setupComponent/totp.vue";
import Share from "@/views/share.vue";
const checkAuth = async () => {
let result = false
await fetchGet("/api/validateAuthentication", {}, (res) => {
result = res.status
});
return result;
let result = false
await fetchGet("/api/validateAuthentication", {}, (res) => {
result = res.status
});
return result;
}
const router = createRouter({
history: createWebHashHistory(),
scrollBehavior(){
if (document.querySelector("main") !== null){
document.querySelector("main").scrollTo({
top: 0
})
}
history: createWebHashHistory(),
scrollBehavior(){
if (document.querySelector("main") !== null){
document.querySelector("main").scrollTo({
top: 0
})
}
},
routes: [
{
name: "Index",
path: '/',
component: Index,
meta: {
requiresAuth: true,
},
children: [
{
name: "Configuration List",
path: '',
component: ConfigurationList,
meta: {
title: "WireGuard Configurations"
}
},
{
name: "Settings",
path: '/settings',
component: Settings,
meta: {
title: "Settings"
}
},
{
path: '/ping',
name: "Ping",
component: Ping,
},
{
path: '/traceroute',
name: "Traceroute",
component: Traceroute,
},
{
name: "New Configuration",
path: '/new_configuration',
component: NewConfiguration,
meta: {
title: "New Configuration"
}
},
{
name: "Configuration",
path: '/configuration/:id',
component: Configuration,
meta: {
title: "Configuration"
},
children: [
{
name: "Peers List",
path: 'peers',
component: PeerList
},
{
name: "Peers Create",
path: 'create',
component: PeerCreate
},
]
},
},
routes: [
{
name: "Index",
path: '/',
component: Index,
meta: {
requiresAuth: true,
},
children: [
{
name: "Configuration List",
path: '',
component: ConfigurationList,
meta: {
title: "WireGuard Configurations"
}
},
{
name: "Settings",
path: '/settings',
component: Settings,
meta: {
title: "Settings"
}
},
{
path: '/ping',
name: "Ping",
component: Ping,
},
{
path: '/traceroute',
name: "Traceroute",
component: Traceroute,
},
{
name: "New Configuration",
path: '/new_configuration',
component: NewConfiguration,
meta: {
title: "New Configuration"
}
},
{
name: "Configuration",
path: '/configuration/:id',
component: Configuration,
meta: {
title: "Configuration"
},
children: [
{
name: "Peers List",
path: 'peers',
component: PeerList
},
{
name: "Peers Create",
path: 'create',
component: PeerCreate
},
]
},
]
},
{
path: '/signin', component: Signin,
meta: {
title: "Sign In"
}
},
{
path: '/welcome', component: Setup,
meta: {
requiresAuth: true,
title: "Welcome to WGDashboard"
},
},
{
path: '/2FASetup', component: Totp,
meta: {
requiresAuth: true,
title: "Multi-Factor Authentication Setup"
},
},
{
path: '/share', component: Share,
meta: {
title: "Share"
}
}
]
]
},
{
path: '/signin', component: Signin,
meta: {
title: "Sign In"
}
},
{
path: '/welcome', component: Setup,
meta: {
requiresAuth: true,
title: "Welcome to WGDashboard"
},
},
{
path: '/2FASetup', component: Totp,
meta: {
requiresAuth: true,
title: "Multi-Factor Authentication Setup"
},
},
{
path: '/share', component: Share,
meta: {
title: "Share"
}
}
]
});
router.beforeEach(async (to, from, next) => {
const wireguardConfigurationsStore = WireguardConfigurationsStore();
const dashboardConfigurationStore = DashboardConfigurationStore();
const wireguardConfigurationsStore = WireguardConfigurationsStore();
const dashboardConfigurationStore = DashboardConfigurationStore();
if (to.meta.title){
if (to.params.id){
document.title = to.params.id + " | WGDashboard";
}else{
document.title = to.meta.title + " | WGDashboard";
}
}else{
document.title = "WGDashboard"
}
dashboardConfigurationStore.ShowNavBar = false;
if (to.meta.requiresAuth){
if (!dashboardConfigurationStore.getActiveCrossServer()){
if (cookie.getCookie("authToken") && await checkAuth()){
await dashboardConfigurationStore.getConfiguration()
if (!wireguardConfigurationsStore.Configurations && to.name !== "Configuration List"){
await wireguardConfigurationsStore.getConfigurations();
}
dashboardConfigurationStore.Redirect = undefined;
next()
}else{
dashboardConfigurationStore.Redirect = to;
next("/signin")
dashboardConfigurationStore.newMessage("WGDashboard", "Sign in session ended, please sign in again", "warning")
}
}else{
await dashboardConfigurationStore.getConfiguration()
if (!wireguardConfigurationsStore.Configurations && to.name !== "Configuration List"){
await wireguardConfigurationsStore.getConfigurations();
}
next()
}
}else {
next();
}
if (to.meta.title){
if (to.params.id){
document.title = to.params.id + " | WGDashboard";
}else{
document.title = to.meta.title + " | WGDashboard";
}
}else{
document.title = "WGDashboard"
}
dashboardConfigurationStore.ShowNavBar = false;
document.querySelector(".loadingBar").classList.remove("loadingDone")
document.querySelector(".loadingBar").classList.add("loading")
if (to.meta.requiresAuth){
if (!dashboardConfigurationStore.getActiveCrossServer()){
if (cookie.getCookie("authToken") && await checkAuth()){
await dashboardConfigurationStore.getConfiguration()
if (!wireguardConfigurationsStore.Configurations && to.name !== "Configuration List"){
await wireguardConfigurationsStore.getConfigurations();
}
dashboardConfigurationStore.Redirect = undefined;
next()
}else{
dashboardConfigurationStore.Redirect = to;
next("/signin")
dashboardConfigurationStore.newMessage("WGDashboard", "Sign in session ended, please sign in again", "warning")
}
}else{
await dashboardConfigurationStore.getConfiguration()
if (!wireguardConfigurationsStore.Configurations && to.name !== "Configuration List"){
await wireguardConfigurationsStore.getConfigurations();
}
next()
}
}else {
next();
}
});
router.afterEach(() => {
document.querySelector(".loadingBar").classList.remove("loading")
document.querySelector(".loadingBar").classList.add("loadingDone")
})
export default router

33
src/static/css/dashboard.css
View File

@ -1233,3 +1233,36 @@ pre.index-alert {
--bgdegree: 594deg;
}
}
.loadingBar{
background: linear-gradient(var(--degree), var(--brandColor1) var(--distance2), var(--brandColor2) 100%);
}
.loadingBar.loading{
animation: loading cubic-bezier(0.82, 0.58, 0.17, 1) 0.2s forwards;
}
.loadingBar.loadingDone{
animation: loadingDone cubic-bezier(0.82, 0.58, 0.17, 1) 0.5s forwards;
}
@keyframes loading {
from{
opacity: 0;
width: 0%;
}
to{
opacity: 1;
width: 20%;
}
}
@keyframes loadingDone {
from{
opacity: 1;
width: 20%;
}
to{
opacity: 0;
width: 100%;
}
}