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 :)
2025-08-27 23:41:14 +00:00 · 2023-11-30 09:42:02 -05:00
parent f07508073f
commit 0c0bce9755
15 changed files with 462 additions and 41 deletions
--- 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" %}