115 lines
3.6 KiB
Vue
115 lines
3.6 KiB
Vue
<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>
|