Base Frontend

src/App.vue

@@ -0,0 +1,52 @@
+<template>
+  <main class="min-h-screen p-6">
+    <h1 class="text-3xl font-bold mb-4">Telefonkönyv – Frontend</h1>
+
+    <section class="space-y-3">
+      <div class="p-4 rounded-2xl border bg-white shadow-sm">
+        <div class="text-sm opacity-70 mb-2">
+          API prefix: <code>{{ apiBase }}</code>
+        </div>
+
+        <button
+          class="px-4 py-2 rounded-xl border shadow hover:bg-gray-100"
+          @click="checkHealth"
+        >
+          / (health) hívása
+        </button>
+
+        <button
+          class="ml-2 px-4 py-2 rounded-xl border shadow hover:bg-gray-100"
+          @click="authTest"
+        >
+          /auth (admin,admin) hívása
+        </button>
+
+        <pre class="mt-3 p-3 bg-gray-100 rounded-xl text-sm overflow-auto">{{ out }}</pre>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const apiBase = `${import.meta.env.VITE_BACKEND_API_HOST}:${import.meta.env.VITE_BACKEND_API_PORT}`
+const out = ref('')
+
+async function checkHealth() {
+  out.value = 'Hívás...'
+  const res = await fetch(`${apiBase}/`)
+  out.value = JSON.stringify(await res.json(), null, 2)
+}
+
+async function authTest() {
+  out.value = 'Hívás...'
+  const res = await fetch(`${apiBase}/auth`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ authUname: 'admin', authPw: 'admin' })
+  })
+  out.value = JSON.stringify(await res.json(), null, 2)
+}
+</script>

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+
+createApp(App).mount('#app')