117 lines
4.0 KiB
Vue
117 lines
4.0 KiB
Vue
<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">
|
|
← Back to ServiceFinder
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'blank',
|
|
})
|
|
|
|
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>
|