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 :)
2026-08-04 06:53:00 +00:00 · 2023-11-30 09:42:02 -05:00
parent f07508073f
commit 0c0bce9755
15 changed files with 462 additions and 41 deletions
@@ -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")
+					}
+				})
+			}
+		}
+	}
+}