kestrelos/app/pages/login.vue

<template>
  <div class="flex min-h-[60vh] items-center justify-center p-6">
    <div class="kestrel-card w-full max-w-sm p-6">
      <h2 class="kestrel-section-heading mb-4">
        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="kestrel-label"
          >Email or username</label>
          <input
            id="login-identifier"
            v-model="identifier"
            type="text"
            autocomplete="username"
            class="kestrel-input"
            required
          >
        </div>
        <div class="mb-4">
          <label
            for="login-password"
            class="kestrel-label"
          >Password</label>
          <input
            id="login-password"
            v-model="password"
            type="password"
            autocomplete="current-password"
            class="kestrel-input"
            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 AUTH_CONFIG_DEFAULT = Object.freeze({ oidc: { enabled: false, label: '' } })
const { data: authConfig } = useAsyncData(
  'auth-config',
  () => $fetch('/api/auth/config').catch(() => AUTH_CONFIG_DEFAULT),
  { default: () => null },
)
const showDivider = computed(() => !!authConfig.value?.oidc?.enabled)
const oidcAuthorizeUrl = computed(() => {
  const r = redirect.value
  return `/api/auth/oidc/authorize${r && r !== '/' ? `?redirect=${encodeURIComponent(r)}` : ''}`
})

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>