new page layout

nginx/vue/src/components/admin/Login.vue

@@ -1,13 +1,26 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
+import { useAuthStore } from "@/stores/auth";
 
-const loggedIn = ref(false);
+const auth = useAuthStore();
+const username = ref("");
+const password = ref("");
+const loggedIn = computed(() => Object.keys(auth.user.ID || {}).length > 0);
+
+function handleLogin() {
+    auth.logIn(username.value, password.value);
+}
 </script>
 
 <template>
-    <div v-if="!loggedIn">
+    <div v-if="loggedIn">
+        <p>{{ auth.user.ID }}</p>
+        <p>{{ auth.user.username }}</p>
+    </div>
+    <div v-else>
         <h1>login</h1>
-        <textarea>Username</textarea>
-        <textarea>Password</textarea>
+        <textarea v-model="username"></textarea>
+        <textarea type="password" v-model="password"></textarea>
+        <button @click="handleLogin">Log In</button>
     </div>
 </template>