login functionality + home page mock

2026-01-15 23:26:14 +00:00
parent 1d08dd6a0c
commit fd0fc20b7d
9 changed files with 401 additions and 28 deletions
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <h1>Login Form</h1>
+    <div>Username: <input v-model="loginFormData.username" /></div>
+    <div>Password: <input v-model="loginFormData.password" /></div>
+    <button @click="login">LOGIN</button>
+    <button @click="reset">RESET</button>
+  </div>
+  <div v-if="token">
+    <h2>API Request Form</h2>
+    <div>
+      Request: <code>GET {{ api }}</code>/ <input v-model="loginFormData.password" />
+    </div>
+    <div>Token: {{ token }}</div>
+    <button @click="sendRequest">SEND REQUEST</button>
+  </div>
+  <div v-if="messages.length > 0">
+    <h2>Messages</h2>
+    <div v-for="message in messages">
+      <pre>{{ message }}</pre>
+    </div>
+  </div>
+</template>
+<script setup>
+const config = useRuntimeConfig();
+const api = config.public.apiBase;
+const loginFormData = reactive({
+  username: null,
+  password: null,
+});
+const token = ref(null);
+const messages = ref([]);
+async function login() {
+  reset();
+  try {
+    await $fetch(`${api}/auth/login`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: loginFormData,
+      onResponse({ request, response, options }) {
+        messages.value.push({
+          method: options.method,
+          request: request,
+          status: response.status,
+          statusText: response.statusText,
+          payload: response._data,
+        });
+        if (response.status == 200) token.value = response._data;
+      },
+    });
+  } catch (e) {
+    console.error("login request failed: ", e);
+  }
+}
+function reset() {
+  token.value = null;
+  messages.value = [];
+}
+async function sendRequest() {
+  try {
+    await $fetch(`${api}/`, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${token.value}`,
+      },
+      onResponse({ request, response, options }) {
+        messages.value.push({
+          method: options.method,
+          request: request,
+          status: response.status,
+          statusText: response.statusText,
+          payload: response._data,
+        });
+      },
+    });
+  } catch (e) {
+    console.error("api request failed: ", e);
+  }
+}
+</script>