Add authentication check and logout functionality in app.vue

pages/login.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gray-50">
+    <div class="max-w-md w-full space-y-8">
+      <div>
+        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          Faber Finances
+        </h2>
+        <p class="mt-2 text-center text-sm text-gray-600">
+          Enter the shared password to continue
+        </p>
+      </div>
+      <form class="mt-8 space-y-6" @submit.prevent="login">
+        <div class="rounded-md shadow-sm -space-y-px">
+          <div>
+            <label for="password" class="sr-only">Password</label>
+            <input
+              id="password"
+              v-model="password"
+              name="password"
+              type="password"
+              required
+              class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+              placeholder="Password"
+              :disabled="loading"
+            />
+          </div>
+        </div>
+
+        <div v-if="error" class="text-red-600 text-sm text-center">
+          {{ error }}
+        </div>
+
+        <div>
+          <button
+            type="submit"
+            :disabled="loading"
+            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <span v-if="loading">Signing in...</span>
+            <span v-else>Sign in</span>
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: false
+})
+
+const password = ref('')
+const loading = ref(false)
+const error = ref('')
+
+const login = async () => {
+  if (!password.value) {
+    error.value = 'Password is required'
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+
+  try {
+    const response = await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: {
+        password: password.value
+      }
+    })
+
+    if (response.success) {
+      await navigateTo('/')
+    }
+  } catch (err) {
+    error.value = err.data?.message || 'Invalid password'
+  } finally {
+    loading.value = false
+  }
+}
+
+// Check if already authenticated
+onMounted(async () => {
+  try {
+    const { authenticated } = await $fetch('/api/auth/check')
+    if (authenticated) {
+      await navigateTo('/')
+    }
+  } catch (err) {
+    // Not authenticated, stay on login page
+  }
+})
+</script>