initial commit

app/pages/login.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="flex min-h-[60vh] items-center justify-center p-6">
+    <div class="w-full max-w-sm rounded border border-kestrel-border bg-kestrel-surface p-6 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+      <h2 class="mb-4 text-lg font-semibold text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+        Sign in
+      </h2>
+      <p
+        v-if="error"
+        class="mb-3 text-xs text-red-400"
+      >
+        {{ error }}
+      </p>
+      <a
+        v-if="authConfig?.oidc?.enabled"
+        :href="oidcAuthorizeUrl"
+        class="mb-4 flex w-full items-center justify-center rounded bg-kestrel-accent px-3 py-2 text-sm font-medium text-kestrel-bg transition-opacity hover:opacity-90"
+      >
+        {{ authConfig.oidc.label }}
+      </a>
+      <p
+        v-if="showDivider"
+        class="mb-3 text-center text-xs text-kestrel-muted"
+      >
+        or
+      </p>
+      <form
+        @submit.prevent="onSubmit"
+      >
+        <div class="mb-3">
+          <label
+            for="login-identifier"
+            class="mb-1 block text-xs text-kestrel-muted"
+          >Email or username</label>
+          <input
+            id="login-identifier"
+            v-model="identifier"
+            type="text"
+            autocomplete="username"
+            class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+            required
+          >
+        </div>
+        <div class="mb-4">
+          <label
+            for="login-password"
+            class="mb-1 block text-xs text-kestrel-muted"
+          >Password</label>
+          <input
+            id="login-password"
+            v-model="password"
+            type="password"
+            autocomplete="current-password"
+            class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+            required
+          >
+        </div>
+        <button
+          type="submit"
+          class="w-full rounded bg-kestrel-accent px-3 py-2 text-sm font-medium text-kestrel-bg transition-opacity hover:opacity-90"
+          :disabled="loading"
+        >
+          {{ loading ? 'Signing in…' : 'Sign in' }}
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const redirect = computed(() => route.query.redirect || '/')
+const { data: authConfig } = useAsyncData(
+  'auth-config',
+  () => $fetch('/api/auth/config').catch(() => ({ oidc: { enabled: false, label: '' } })),
+  { default: () => null },
+)
+const showDivider = computed(() => !!authConfig.value?.oidc?.enabled)
+const oidcAuthorizeUrl = computed(() => {
+  const base = '/api/auth/oidc/authorize'
+  const q = redirect.value && redirect.value !== '/' ? `?redirect=${encodeURIComponent(redirect.value)}` : ''
+  return base + q
+})
+
+const identifier = ref('')
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+const { refresh } = useUser()
+
+async function onSubmit() {
+  error.value = ''
+  loading.value = true
+  try {
+    await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: { identifier: identifier.value, password: password.value },
+    })
+    await refresh()
+    const target = redirect.value || '/'
+    // Full page redirect so the session cookie is sent on the next request (fixes mobile Safari staying on login)
+    if (import.meta.client && typeof window !== 'undefined') {
+      window.location.href = target
+      return
+    }
+    await navigateTo(target)
+  }
+  catch (e) {
+    error.value = e?.data?.message ?? e?.message ?? 'Sign in failed'
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>