Complete sermon itinerary application with Nuxt 3, SQLite, authentication, and Docker deployment

pages/login.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="min-h-screen bg-gray-50 flex items-center justify-center px-4">
+    <div class="max-w-md w-full">
+      <div class="text-center mb-8">
+        <img src="/logos/logo.png" alt="New Life Christian Church" class="h-20 w-auto mx-auto mb-4" />
+        <h2 class="text-3xl font-bold text-gray-900">Admin Login</h2>
+        <p class="mt-2 text-sm text-gray-600">Sign in to manage sermons</p>
+      </div>
+
+      <div class="bg-white py-8 px-6 shadow-lg rounded-lg">
+        <form @submit.prevent="handleLogin" class="space-y-6">
+          <div>
+            <label for="username" class="block text-sm font-medium text-gray-700">
+              Username
+            </label>
+            <input
+              id="username"
+              v-model="username"
+              type="text"
+              required
+              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <div>
+            <label for="password" class="block text-sm font-medium text-gray-700">
+              Password
+            </label>
+            <input
+              id="password"
+              v-model="password"
+              type="password"
+              required
+              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            />
+          </div>
+
+          <div v-if="error" class="text-red-600 text-sm">
+            {{ error }}
+          </div>
+
+          <button
+            type="submit"
+            :disabled="loading"
+            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+          >
+            {{ loading ? 'Signing in...' : 'Sign in' }}
+          </button>
+        </form>
+
+        <div class="mt-6 text-center">
+          <NuxtLink to="/" class="text-sm text-blue-600 hover:text-blue-700">
+            ← Back to Sermons
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div class="mt-4 text-center text-sm text-gray-600">
+        <p>Default credentials: admin / admin123</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const username = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function handleLogin() {
+  error.value = ''
+  loading.value = true
+
+  try {
+    const response = await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: {
+        username: username.value,
+        password: password.value
+      }
+    })
+
+    if (response.success) {
+      await navigateTo('/admin')
+    }
+  } catch (e: any) {
+    error.value = e.data?.message || 'Invalid credentials'
+  } finally {
+    loading.value = false
+  }
+}
+</script>