✨ Use Vue-based login page

src/App.vue

@@ -7,9 +7,9 @@ import DateSelector from "./components/date-selector.vue";
 
 <template>
   <TitleBar />
-  <DateSelector v-show="$route.name != 'Settings'" />
+  <DateSelector v-show="$route.name != 'Settings' && $route.name != 'Login'" />
   <RouterView />
-  <BottomNavbar />
+  <BottomNavbar v-show="$route.name != 'Login'" />
 </template>
 
 <style>

src/components/titlebar-element.vue

@@ -11,7 +11,7 @@ const routeName = computed(() => route.name);
   <div class="titlebar">
     <span class="title">{{ routeName }}</span>
     <div class="settings">
-      <RouterLink to="/settings">
+      <RouterLink to="/settings" v-show="$route.name != 'Login'">
         <MenuIcon />
       </RouterLink>
     </div>

src/router/index.js

@@ -3,6 +3,7 @@ import TimetableView from "../views/TimetableView.vue";
 import SubstitutionView from "../views/SubstitutionView.vue";
 import HistoryView from "../views/HistoryView.vue";
 import SettingsView from "../views/SettingsView.vue";
+import LoginView from "../views/LoginView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -31,6 +32,11 @@ const router = createRouter({
       name: "Settings",
       component: SettingsView,
     },
+    {
+      path: "/login",
+      name: "Login",
+      component: LoginView,
+    },
   ],
 });
 

src/store.js

@@ -1,5 +1,6 @@
 import { computed } from "@vue/reactivity";
 import { ref, watch } from "vue";
+import router from "./router";
 
 export const substitutionFilter = ref(
   localStorage.getItem("substitutionFilter") || "all"
@@ -62,6 +63,10 @@ export const parsedTimetable = computed(() => {
 
 export async function fetchData() {
   const baseUrl = "/api";
+
+  const checkResponse = await fetch(`${baseUrl}/check`);
+  if (checkResponse.status != 200) router.push("/login");
+
   const timetableResponse = await fetch(
     `${baseUrl}/timetable?class=${timetableClass.value}`
   );

src/views/LoginView.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="login">
+    <h1>Timetable V2</h1>
+    <form action="/login" method="POST">
+      <input
+        type="password"
+        name="password"
+        autocomplete="current-password"
+        placeholder="Password"
+      />
+      <button type="submit">Login</button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login {
+  padding: 65px 10px 80px 10px;
+}
+
+body {
+  background-color: #353535;
+}
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: Arial, Helvetica, sans-serif;
+  color: #bdbdbd;
+  height: 80%;
+}
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+input {
+  border: 0px;
+  outline: none;
+  background-color: #3a3737;
+  padding: 5px 5px;
+  margin: 5px 0;
+  border: 2px solid #34631f;
+  border-radius: 5px;
+  color: #bdbdbd;
+}
+
+button {
+  outline: none;
+  padding: 5px 5px;
+  border: 2px solid #1f5b63;
+  border-radius: 5px;
+  color: #bdbdbd;
+  background-color: #242121;
+}
+</style>