4c9040c923
Symfony 8 + API Platform 4 + Nuxt 4 monorepo. Backend: User entity, JWT auth, fixtures. Frontend: login, dashboard, auth middleware, i18n, @malio/layer-ui. Docker: dev (ports 8083/3003/5436) + prod multi-stage. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<template>
|
|
<div class="mx-auto w-full max-w-lg">
|
|
<span
|
|
class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
|
|
>
|
|
<img src="/coltura.png" alt="Logo" class="w-[150px]"/>
|
|
</span>
|
|
<form
|
|
class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
|
|
@submit.prevent="handleSubmit"
|
|
>
|
|
<MalioInputText
|
|
label="Nom d'utilisateur"
|
|
autocomplete="username"
|
|
group-class="mt-0"
|
|
inputClass="w-full"
|
|
v-model="username"
|
|
/>
|
|
|
|
<div>
|
|
<label class="text-sm font-semibold text-neutral-700" for="password">
|
|
Mot de passe
|
|
</label>
|
|
<input
|
|
id="password"
|
|
v-model="password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
|
|
/>
|
|
</div>
|
|
|
|
<MalioButton
|
|
label="Se connecter"
|
|
button-class="w-full"
|
|
:disabled="isSubmitting"
|
|
@click="handleSubmit"
|
|
/>
|
|
<p class="font-bold">v{{ version }}</p>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({layout: 'auth'})
|
|
useHead({
|
|
title: 'Connexion'
|
|
})
|
|
|
|
const auth = useAuthStore()
|
|
const {version} = useAppVersion()
|
|
|
|
const username = ref('')
|
|
const password = ref('')
|
|
const isSubmitting = ref(false)
|
|
|
|
async function handleSubmit() {
|
|
if (isSubmitting.value) return
|
|
|
|
isSubmitting.value = true
|
|
try {
|
|
await auth.login(username.value, password.value)
|
|
await navigateTo('/')
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
</script>
|