75 lines
2.4 KiB
Vue
75 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({ layout: false })
|
|
|
|
useHead({ title: 'Admin Login — vat-api.eu' })
|
|
|
|
const password = ref('')
|
|
const error = ref('')
|
|
const loading = ref(false)
|
|
|
|
async function login() {
|
|
error.value = ''
|
|
loading.value = true
|
|
try {
|
|
await $fetch('/api/admin/login', {
|
|
method: 'POST',
|
|
body: { password: password.value },
|
|
})
|
|
navigateTo('/admin/dashboard')
|
|
} catch {
|
|
error.value = 'Invalid password'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-surface-soft flex items-center justify-center px-4">
|
|
<div class="w-full max-w-sm">
|
|
<!-- Logo -->
|
|
<div class="text-center mb-8">
|
|
<NuxtLink to="/" class="inline-flex items-center gap-2 group">
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-eu-blue text-white font-heading font-bold text-lg transition-transform group-hover:scale-105">
|
|
V
|
|
</span>
|
|
<span class="font-heading font-bold text-xl text-ink">
|
|
vat-api<span class="text-eu-blue">.eu</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<p class="mt-3 text-sm text-ink-muted">Admin Dashboard</p>
|
|
</div>
|
|
|
|
<!-- Login card -->
|
|
<form
|
|
class="bg-white rounded-2xl border border-surface-border shadow-card p-6"
|
|
@submit.prevent="login"
|
|
>
|
|
<h1 class="text-title text-ink font-heading mb-6">Sign in</h1>
|
|
|
|
<div v-if="error" class="mb-4 px-4 py-2.5 rounded-xl bg-red-50 border border-red-200 text-red-700 text-sm">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<label class="block text-sm font-medium text-ink-secondary mb-1.5">Password</label>
|
|
<input
|
|
v-model="password"
|
|
type="password"
|
|
required
|
|
autofocus
|
|
placeholder="Enter admin password"
|
|
class="w-full px-4 py-2.5 rounded-xl border border-surface-border bg-white text-sm text-ink placeholder:text-ink-faint focus:outline-none focus:ring-2 focus:ring-eu-blue/20 focus:border-eu-blue/40 transition-all"
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="loading"
|
|
class="mt-5 w-full px-4 py-2.5 rounded-xl bg-eu-blue text-white font-semibold text-sm hover:bg-eu-blue-dark transition-all disabled:opacity-50"
|
|
>
|
|
{{ loading ? 'Signing in...' : 'Sign in' }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|