forked from BRETT/BRETT
66 lines
2.1 KiB
Vue
66 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
|
|
const { login } = useAuth()
|
|
const { t } = useI18n()
|
|
const name = ref('')
|
|
const password = ref('')
|
|
const errorMessage = ref('')
|
|
const loading = ref(false)
|
|
|
|
async function onSubmit() {
|
|
if (loading.value) return
|
|
loading.value = true
|
|
errorMessage.value = ''
|
|
try {
|
|
await login(name.value, password.value)
|
|
await navigateTo('/')
|
|
}
|
|
catch (err) {
|
|
const e = err as { data?: { statusMessage?: string, message?: string } }
|
|
errorMessage.value = e.data?.statusMessage ?? e.data?.message ?? t('auth.loginFailed')
|
|
}
|
|
finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto max-w-sm px-4 lg:px-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{{ $t('auth.loginTitle') }}</CardTitle>
|
|
<CardDescription>{{ $t('auth.loginDesc') }}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form class="space-y-4" @submit.prevent="onSubmit">
|
|
<div class="space-y-1.5">
|
|
<Label for="name">{{ $t('common.name') }}</Label>
|
|
<Input id="name" v-model="name" autocomplete="username" required />
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<Label for="password">{{ $t('common.password') }}</Label>
|
|
<Input id="password" v-model="password" type="password" autocomplete="current-password" required />
|
|
</div>
|
|
<p v-if="errorMessage" class="text-sm text-destructive">
|
|
{{ errorMessage }}
|
|
</p>
|
|
<Button type="submit" class="w-full" :disabled="loading">
|
|
{{ $t('auth.login') }}
|
|
</Button>
|
|
<p class="text-center text-sm text-muted-foreground">
|
|
{{ $t('auth.noAccount') }}
|
|
<NuxtLink to="/register" class="text-primary underline">
|
|
{{ $t('auth.register') }}
|
|
</NuxtLink>
|
|
</p>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|