Combining Vue.js!!! How exciting!

Adding Vue.js to handle frontend changes, leaving the server only need to response json data. Ditching flask template and hope it can reduce the memory and cpu usage :)
2024-09-20 07:16:25 +08:00 · 2023-11-30 09:42:02 -05:00 · 2023-11-30 09:42:02 -05:00 · 0c0bce9755
parent f07508073f
commit 0c0bce9755
15 changed files with 462 additions and 41 deletions
--- a/.gitignore
+++ b/.gitignore
@ -14,4 +14,5 @@ venv/**
 log/**
 release/*
 src/db/wgdashboard.db
-.jshintrc
+.jshintrc
+node_modules/**
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,248 @@
+{
+  "name": "Wireguard-Dashboard",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "vue": "^3.3.9",
+        "vue-router": "^4.2.5"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz",
+      "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.9.tgz",
+      "integrity": "sha512-+/Lf68Vr/nFBA6ol4xOtJrW+BQWv3QWKfRwGSm70jtXwfhZNF4R/eRgyVJYoxFRhdCTk/F6g99BP0ffPgZihfQ==",
+      "dependencies": {
+        "@babel/parser": "^7.23.3",
+        "@vue/shared": "3.3.9",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.9.tgz",
+      "integrity": "sha512-nfWubTtLXuT4iBeDSZ5J3m218MjOy42Vp2pmKVuBKo2/BLcrFUX8nCSr/bKRFiJ32R8qbdnnnBgRn9AdU5v0Sg==",
+      "dependencies": {
+        "@vue/compiler-core": "3.3.9",
+        "@vue/shared": "3.3.9"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.9.tgz",
+      "integrity": "sha512-wy0CNc8z4ihoDzjASCOCsQuzW0A/HP27+0MDSSICMjVIFzk/rFViezkR3dzH+miS2NDEz8ywMdbjO5ylhOLI2A==",
+      "dependencies": {
+        "@babel/parser": "^7.23.3",
+        "@vue/compiler-core": "3.3.9",
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/compiler-ssr": "3.3.9",
+        "@vue/reactivity-transform": "3.3.9",
+        "@vue/shared": "3.3.9",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.31",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.9.tgz",
+      "integrity": "sha512-NO5oobAw78R0G4SODY5A502MGnDNiDjf6qvhn7zD7TJGc8XDeIEw4fg6JU705jZ/YhuokBKz0A5a/FL/XZU73g==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/shared": "3.3.9"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
+      "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.9.tgz",
+      "integrity": "sha512-VmpIqlNp+aYDg2X0xQhJqHx9YguOmz2UxuUJDckBdQCNkipJvfk9yA75woLWElCa0Jtyec3lAAt49GO0izsphw==",
+      "dependencies": {
+        "@vue/shared": "3.3.9"
+      }
+    },
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.9.tgz",
+      "integrity": "sha512-HnUFm7Ry6dFa4Lp63DAxTixUp8opMtQr6RxQCpDI1vlh12rkGIeYqMvJtK+IKyEfEOa2I9oCkD1mmsPdaGpdVg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.3",
+        "@vue/compiler-core": "3.3.9",
+        "@vue/shared": "3.3.9",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.5"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.9.tgz",
+      "integrity": "sha512-xxaG9KvPm3GTRuM4ZyU8Tc+pMVzcu6eeoSRQJ9IE7NmCcClW6z4B3Ij6L4EDl80sxe/arTtQ6YmgiO4UZqRc+w==",
+      "dependencies": {
+        "@vue/reactivity": "3.3.9",
+        "@vue/shared": "3.3.9"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.9.tgz",
+      "integrity": "sha512-e7LIfcxYSWbV6BK1wQv9qJyxprC75EvSqF/kQKe6bdZEDNValzeRXEVgiX7AHI6hZ59HA4h7WT5CGvm69vzJTQ==",
+      "dependencies": {
+        "@vue/runtime-core": "3.3.9",
+        "@vue/shared": "3.3.9",
+        "csstype": "^3.1.2"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.9.tgz",
+      "integrity": "sha512-w0zT/s5l3Oa3ZjtLW88eO4uV6AQFqU8X5GOgzq7SkQQu6vVr+8tfm+OI2kDBplS/W/XgCBuFXiPw6T5EdwXP0A==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.3.9",
+        "@vue/shared": "3.3.9"
+      },
+      "peerDependencies": {
+        "vue": "3.3.9"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.9.tgz",
+      "integrity": "sha512-ZE0VTIR0LmYgeyhurPTpy4KzKsuDyQbMSdM49eKkMnT5X4VfFBLysMzjIZhLEFQYjjOVVfbvUDHckwjDFiO2eA=="
+    },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vue": {
+      "version": "3.3.9",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.9.tgz",
+      "integrity": "sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.3.9",
+        "@vue/compiler-sfc": "3.3.9",
+        "@vue/runtime-dom": "3.3.9",
+        "@vue/server-renderer": "3.3.9",
+        "@vue/shared": "3.3.9"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
+      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "vue": "^3.3.9",
+    "vue-router": "^4.2.5"
+  }
+}
--- a/src/dashboard.py
+++ b/src/dashboard.py
@ -689,6 +689,9 @@ def auth_req():
    Action before every request
    @return: Redirect
    """
+    return None
+    
+    
    if getattr(g, 'db', None) is None:
        g.db = connect_db()
        g.cur = g.db.cursor()
@ -767,9 +770,13 @@ def auth():
    if password.hexdigest() == config["Account"]["password"] \
            and data['username'] == config["Account"]["username"]:
        session['username'] = data['username']
+        resp = Flask.make_response(jsonify({"status": True, "msg": ""}))
+
+
+        resp.set_cookie("auth", hashlib.sha256(f"{data['username']}{datetime.now()}".encode()).hexdigest())
        session.permanent = True
-        config.clear()
-        return jsonify({"status": True, "msg": ""})
+        config.clear(resp)
+        return 
    config.clear()
    return jsonify({"status": False, "msg": "Username or Password is incorrect."})

@ -789,8 +796,8 @@ def index():
    if "switch_msg" in session:
        msg = session["switch_msg"]
        session.pop("switch_msg")
-
-    return render_template('index.html', conf=get_conf_list(), msg=msg)
+    return render_template('index_new.html')
+    # return render_template('index.html', conf=get_conf_list(), msg=msg)


 # Setting Page
--- a/src/static/app/app.js
+++ b/src/static/app/app.js
@ -0,0 +1,51 @@
+const { createApp, ref } = Vue;
+import Index from './index.js'
+import Signin from './signin/signin.js'
+const {createPinia} = Pinia
+import {cookie} from "./cookie.js";
+
+const app = createApp({
+	template: `
+		<nav class="navbar bg-dark fixed-top" data-bs-theme="dark">
+			  <div class="container-fluid">
+			        <span class="navbar-brand mb-0 h1">WGDashboard</span>
+			  </div>
+		</nav>
+		<RouterView></RouterView>
+	`
+});
+const pinia = createPinia()
+const routes = [
+	{
+		path: '/', 
+		component: Index,
+		meta: {
+			requiresAuth: true
+		}
+	},
+	{
+		path: '/signin', component: Signin
+	}
+]
+
+const router = VueRouter.createRouter({
+	// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+	history: VueRouter.createWebHashHistory(),
+	routes, // short for `routes: routes`
+});
+
+router.beforeEach((to, from, next) => {
+	if (to.meta.requiresAuth){
+		if (cookie.getCookie("auth")){
+			next()
+		}else{
+			next("/signin")
+		}
+	}else {
+		next();
+	}
+});
+
+app.use(router);
+app.use(pinia)
+app.mount('#app');
--- a/src/static/app/cookie.js
+++ b/src/static/app/cookie.js
@ -0,0 +1,9 @@
+export const cookie = {
+	
+	//https://stackoverflow.com/a/15724300
+	getCookie(name) {
+		const value = `; ${document.cookie}`;
+		const parts = value.split(`; ${name}=`);
+		if (parts.length === 2) return parts.pop().split(';').shift();
+	}
+}
--- a/src/static/app/index.js
+++ b/src/static/app/index.js
@ -0,0 +1,5 @@
+export default {
+	template: `
+		this is idex
+	`
+}
--- a/src/static/app/signin/fetch.js
+++ b/src/static/app/signin/fetch.js
@ -0,0 +1,28 @@
+export const fetchGet = async (url, params=undefined, callback=undefined) => {
+	const urlSearchParams = new URLSearchParams(params);
+	await fetch(`${url}?${urlSearchParams.toString()}}`, {
+		headers: {
+			"content-type": "application/json"
+		}
+	})
+		.then(x => x.json())
+		.then(x => callback ? callback(x) : undefined)
+		.catch(() => {
+			alert("Error occurred! Check console")
+		});
+}
+
+export const fetchPost = async (url, body, callback) => {
+	await fetch(`${url}`, {
+		headers: {
+			"content-type": "application/json"
+		},
+		method: "POST",
+		body: JSON.stringify(body)
+	})
+		.then(x => x.json())
+		.then(x => callback ? callback(x) : undefined)
+		// .catch(() => {
+		// 	alert("Error occurred! Check console")
+		// });
+}
--- a/src/static/app/signin/signin.js
+++ b/src/static/app/signin/signin.js
@ -0,0 +1,52 @@
+import {fetchPost} from "./fetch.js";
+
+export default {
+	data(){
+		return {
+			username: "",
+			password: ""
+		}
+	},
+	template: `
+		<div class="container-fluid login-container-fluid h-100 d-flex">
+	        <div class="login-box m-auto" style="width: 500px;">
+	                <h1 class="text-center">Sign in</h1>
+	                <h5 class="text-center">to WGDashboard</h5>
+	                <div class="m-auto">
+	                    <div class="alert alert-danger d-none" role="alert" style="margin-top: 1rem; margin-bottom: 0rem;"></div>
+	                    <div class="form-group">
+	                        <label for="username" class="text-left" style="font-size: 1rem"><i class="bi bi-person-circle"></i></label>
+	                        <input type="text" v-model="username" class="form-control" id="username" name="username" placeholder="Username" required>
+	                    </div>
+	                    <div class="form-group">
+	                        <label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label>
+	                        <input type="password" v-model="password" class="form-control" id="password" name="password" placeholder="Password" required>
+	                    </div>
+	                    <button class="btn btn-dark w-100 mt-4" @click="this.auth()">Sign In</button>
+	                </div>
+	          </div>
+	    </div>
+	`,
+	methods: {
+		async auth(){
+			if (this.username && this.password){
+				await fetchPost("/auth", {
+					username: this.username,
+					password: this.password
+				}, (response) => {
+					console.log(response)
+				})
+			}else{
+					document.querySelectorAll("input[required]").forEach(x => {
+					if (x.value.length === 0){
+						x.classList.remove("is-valid")
+						x.classList.add("is-invalid")
+					}else{
+						x.classList.remove("is-invalid")
+						x.classList.add("is-valid")
+					}
+				})
+			}
+		}
+	}
+}
--- a/src/static/app/store.js
+++ b/src/static/app/store.js
@ -0,0 +1,5 @@
+import { defineStore } from 'pinia'
+
+export const wgdStore = defineStore('WGDashboardStore', {
+
+})
--- a/src/static/css/dashboard.css
+++ b/src/static/css/dashboard.css
@ -89,8 +89,8 @@ body {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
-    background-color: rgba(0, 0, 0, .25);
-    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+    /*background-color: rgba(0, 0, 0, .25);*/
+    /*box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);*/
 }

 .navbar .navbar-toggler {
@ -468,7 +468,7 @@ main {
 .login-box label[for="password"] {
    font-size: 1rem;
    margin: 0 !important;
-    transform: translateY(30px) translateX(16px);
+    transform: translateY(2.1rem) translateX(1rem);
    padding: 0;
 }

--- a/src/templates/footer.html
+++ b/src/templates/footer.html
@ -1,4 +1,3 @@
 <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
-<script src="{{ url_for('static',filename='js/tools.js') }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script><script src="{{ url_for('static',filename='js/tools.js') }}"></script>
 <script src="{{ url_for('static',filename='js/pwa.js') }}"></script>
--- a/src/templates/header.html
+++ b/src/templates/header.html
@ -11,14 +11,9 @@
    <link rel="apple-touch-icon" sizes="192x192" href="{{ url_for('static',filename='img/192x192ios.png') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/>
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 	<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
-    <!-- THEME APPLY HERE -->
-    {% if session["theme"] == "dark" %} 
-        <link rel= "stylesheet" type= "text/css" href="{{ url_for('static',filename='css/theme/dark.min.css') }}" id="darkThemeCSS">
-    {% endif %}
-    <!-- THEME APPLY HERE -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
 </head>
--- a/src/templates/index_new.html
+++ b/src/templates/index_new.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<title>WGDashboard</title>
+	<link rel="manifest" href="{{ url_for('static',filename='json/manifest.json') }}">
+	<meta name="mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="application-name" content="WGDashboard">
+	<meta name="apple-mobile-web-app-title" content="WGDashboard">
+	<meta name="msapplication-starturl" content="/">
+	<link rel="apple-touch-icon" sizes="192x192" href="{{ url_for('static',filename='img/192x192ios.png') }}">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<link rel="icon" href="{{ url_for('static',filename='img/logo.png') }}"/>
+	
+	
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">	
+	
+	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+	<script src="https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.14.6/lib/index.iife.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/pinia@2.1.7/dist/pinia.iife.min.js"></script>
+	
+	<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+</head>
+<body>
+	<div id="app" class="vw-100 vh-100"></div>
+</body>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script><script src="{{ url_for('static',filename='js/tools.js') }}"></script>
+<script src="../static/app/app.js" type="module"></script>
+
+</html>
--- a/src/templates/signin.html
+++ b/src/templates/signin.html
@ -11,29 +11,7 @@
    </style>
    <body>
        {% include "navbar.html" %}
-        <div class="container-fluid login-container-fluid">
-            <main role="main" class="container login-container">
-                <div class="login-box" style="margin: auto !important;">
-                    <h1 class="text-center">Sign in</h1>
-                    <h5 class="text-center">to WGDashboard</h5>
-                    <form style="margin-left: auto !important; margin-right: auto !important; max-width: 500px;" action="/auth" method="post">
-                        {% if message != "" %}
-                            <div class="alert alert-warning" role="alert">You need to sign in first</div>
-                        {% endif %}
-                        <div class="alert alert-danger d-none" role="alert" style="margin-top: 1rem; margin-bottom: 0rem;"></div>
-                        <div class="form-group">
-                            <label for="username" class="text-left" style="font-size: 1rem"><i class="bi bi-person-circle"></i></label>
-                            <input type="text" class="form-control" id="username" name="username" placeholder="Your username" required>
-                        </div>
-                        <div class="form-group">
-                            <label for="password" class="text-left" style="font-size: 1rem"><i class="bi bi-key-fill"></i></label>
-                            <input type="password" class="form-control" id="password" name="password" placeholder="Your password" required>
-                        </div>
-                      <button type="submit" class="btn btn-dark" style="width: 100%">Sign In</button>
-                    </form>
-                </div>
-            </main>
-        </div>
+        <div id="login"></div>
        <small class="text-muted" style="position: fixed; bottom: 0; width: 100%; text-align: center; margin-bottom: 2rem">Version: {{ version }}</small>
    </body>
 {% include "footer.html" %}