admin felület különválasztva

2026-06-24 11:29:45 +00:00
parent 71ef33bb85
commit 80a5d67f79
462 changed files with 87873 additions and 312 deletions
--- a/frontend_admin/pages/login.vue
+++ b/frontend_admin/pages/login.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="min-h-screen bg-slate-900 flex items-center justify-center px-4">
+    <div class="w-full max-w-md">
+      <!-- Logo / Branding -->
+      <div class="text-center mb-8">
+        <div class="flex items-center justify-center gap-3 mb-4">
+          <img
+            src="/sf_logo.png"
+            class="h-12 w-auto drop-shadow-md"
+            alt="ServiceFinder Logo"
+          />
+          <span class="text-3xl font-extrabold tracking-wider">
+            <span class="text-white">SERVICE</span>
+            <span class="text-cyan-400">FINDER</span>
+          </span>
+        </div>
+        <h1 class="text-xl font-semibold text-slate-300">Staff Portal</h1>
+        <p class="text-sm text-slate-500 mt-1">Authorised personnel only</p>
+      </div>
+
+      <!-- Login Card -->
+      <div class="bg-slate-800 rounded-xl shadow-2xl border border-slate-700 p-8">
+        <!-- Error Alert -->
+        <div
+          v-if="authStore.error"
+          class="mb-6 p-3 rounded-lg bg-red-900/40 border border-red-700 text-red-300 text-sm"
+        >
+          {{ authStore.error }}
+        </div>
+
+        <form @submit.prevent="handleLogin" class="space-y-5">
+          <!-- Email -->
+          <div>
+            <label for="email" class="block text-sm font-medium text-slate-300 mb-1.5">
+              Email Address
+            </label>
+            <input
+              id="email"
+              v-model="email"
+              type="email"
+              autocomplete="email"
+              required
+              placeholder="admin@example.com"
+              class="w-full px-4 py-2.5 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition"
+            />
+          </div>
+
+          <!-- Password -->
+          <div>
+            <label for="password" class="block text-sm font-medium text-slate-300 mb-1.5">
+              Password
+            </label>
+            <input
+              id="password"
+              v-model="password"
+              type="password"
+              autocomplete="current-password"
+              required
+              placeholder="••••••••"
+              class="w-full px-4 py-2.5 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition"
+            />
+          </div>
+
+          <!-- Submit Button -->
+          <button
+            type="submit"
+            :disabled="authStore.isLoading"
+            class="w-full py-2.5 px-4 bg-cyan-600 hover:bg-cyan-500 disabled:bg-cyan-800 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition duration-200 flex items-center justify-center gap-2"
+          >
+            <svg
+              v-if="authStore.isLoading"
+              class="animate-spin h-5 w-5 text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            <span>{{ authStore.isLoading ? 'Signing in...' : 'Sign In' }}</span>
+          </button>
+        </form>
+
+        <!-- Back to main site -->
+        <div class="mt-6 text-center">
+          <NuxtLink to="/" class="text-sm text-slate-500 hover:text-cyan-400 transition">
+            &larr; Back to ServiceFinder
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const email = ref('')
+const password = ref('')
+const router = useRouter()
+
+const authStore = useAuthStore()
+
+async function handleLogin() {
+  try {
+    await authStore.login(email.value, password.value)
+    // On success, redirect to admin dashboard
+    router.push('/')
+  } catch (err: any) {
+    // Error is already stored in authStore.error
+    console.error('Login failed:', err)
+  }
+}
+</script>