90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
<template>
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
|
<UCard class="w-full max-w-md">
|
|
<template #header>
|
|
<div class="flex flex-col items-center">
|
|
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 mb-4" />
|
|
<h2 class="text-2xl font-bold text-gray-900">Admin Login</h2>
|
|
</div>
|
|
</template>
|
|
|
|
<form @submit.prevent="handleSubmit" class="space-y-6">
|
|
<UFormGroup label="Username" name="username" required>
|
|
<UInput
|
|
v-model="form.username"
|
|
placeholder="Enter username"
|
|
icon="i-heroicons-user"
|
|
size="lg"
|
|
variant="outline"
|
|
:disabled="loading"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Password" name="password" required>
|
|
<UInput
|
|
v-model="form.password"
|
|
type="password"
|
|
placeholder="Enter password"
|
|
icon="i-heroicons-lock-closed"
|
|
size="lg"
|
|
variant="outline"
|
|
:disabled="loading"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<div v-if="error" class="text-red-600 text-sm p-3 bg-red-50 border border-red-200 rounded-md">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<UButton
|
|
type="submit"
|
|
variant="solid"
|
|
color="primary"
|
|
size="lg"
|
|
block
|
|
:loading="loading"
|
|
>
|
|
Login
|
|
</UButton>
|
|
</form>
|
|
</UCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const form = reactive({
|
|
username: '',
|
|
password: ''
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
|
|
const handleSubmit = async () => {
|
|
if (!form.username || !form.password) {
|
|
error.value = 'Please enter both username and password'
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
error.value = ''
|
|
|
|
try {
|
|
await $fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
body: {
|
|
username: form.username,
|
|
password: form.password
|
|
}
|
|
})
|
|
|
|
// Redirect to admin page on successful login
|
|
await navigateTo('/admin')
|
|
} catch (err: any) {
|
|
error.value = err.data?.statusMessage || 'Login failed'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|