mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-22 07:10:09 +01:00
Added loading bar between each routes
This commit is contained in:
Donald Zou
parent
4833a29e57
commit
27c67ec202
4
src/static/app/dist/assets/index.css
vendored
4
src/static/app/dist/assets/index.css
vendored
File diff suppressed because one or more lines are too long
42
src/static/app/dist/assets/index.js
vendored
42
src/static/app/dist/assets/index.js
vendored
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
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"
|
||||
}
|
||||
}
|
||||
]
|
||||
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
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
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();
|
||||
|
||||
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();
|
||||
}
|
||||
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;
|
||||
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
|
||||
@ -1232,4 +1232,37 @@ pre.index-alert {
|
||||
100%{
|
||||
--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%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user