68 lines
2.3 KiB
Vue
68 lines
2.3 KiB
Vue
<template>
|
|
<div class="flex items-center justify-center px-4">
|
|
<form
|
|
class="flex w-full max-w-sm flex-col gap-4 rounded-xl border border-zinc-800 bg-zinc-900/60 p-6"
|
|
@submit.prevent="onSubmit"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2.5">
|
|
<img src="/icon.svg" alt="" class="h-9 w-9" />
|
|
<h1 class="text-lg font-semibold text-zinc-100">{{ t('common.appName') }}</h1>
|
|
</div>
|
|
<LanguageSwitcher />
|
|
</div>
|
|
<p class="text-sm text-zinc-400">{{ t('login.title') }}</p>
|
|
<label class="flex flex-col gap-1 text-xs text-zinc-400">
|
|
{{ t('login.tokenLabel') }}
|
|
<input
|
|
v-model="token"
|
|
type="password"
|
|
class="input font-mono"
|
|
:placeholder="t('login.tokenPlaceholder')"
|
|
autocomplete="current-password"
|
|
autofocus
|
|
required
|
|
/>
|
|
</label>
|
|
<p v-if="error" class="text-sm text-red-400">{{ error }}</p>
|
|
<button type="submit" class="btn-primary" :disabled="submitting || token.trim() === ''">
|
|
{{ submitting ? t('login.submitting') : t('login.submit') }}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useAuthStore } from '../stores/auth';
|
|
import { ApiError } from '../lib/api';
|
|
import LanguageSwitcher from '../components/LanguageSwitcher.vue';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const auth = useAuthStore();
|
|
|
|
const token = ref('');
|
|
const error = ref<string | null>(null);
|
|
const submitting = ref(false);
|
|
|
|
async function onSubmit(): Promise<void> {
|
|
submitting.value = true;
|
|
error.value = null;
|
|
try {
|
|
await auth.login(token.value.trim());
|
|
const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/';
|
|
await router.replace(redirect);
|
|
} catch (err) {
|
|
if (err instanceof ApiError && err.status === 401) error.value = t('login.invalidToken');
|
|
else if (err instanceof ApiError && err.status === 429) error.value = t('login.rateLimited');
|
|
else error.value = t('login.genericError', { status: err instanceof ApiError ? err.status : '?' });
|
|
} finally {
|
|
submitting.value = false;
|
|
}
|
|
}
|
|
</script>
|