BRETT/app/pages/login.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'
import { Spinner } from '@/components/ui/spinner'

const { login } = useAuth()
const { site } = useSiteSettings()
const { t } = useI18n()

useHead({ title: computed(() => t('auth.loginTitle')) })
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 w-full max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
    <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">
            <Spinner v-if="loading" />
            {{ $t('auth.login') }}
          </Button>
          <p v-if="site.registrationOpen" 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>