feat: Implement dedicated login page and authentication middleware

pages/login.vue

@@ -0,0 +1,89 @@
+<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>