88 lines
2.6 KiB
Vue
88 lines
2.6 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useAuthStore } from "../stores/auth";
|
|
import { LogIn, ShieldCheck } from "lucide-vue-next";
|
|
import logoUrl from "../assets/SB Sports.jpg";
|
|
|
|
const router = useRouter();
|
|
const auth = useAuthStore();
|
|
|
|
const username = ref("");
|
|
const password = ref("");
|
|
const error = ref("");
|
|
const loading = ref(false);
|
|
|
|
async function handleLogin() {
|
|
error.value = "";
|
|
loading.value = true;
|
|
try {
|
|
await auth.login(username.value, password.value);
|
|
router.push("/");
|
|
} catch (e) {
|
|
error.value = e.message;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen gradient-brand flex items-center justify-center p-6">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-10">
|
|
<!-- Logo -->
|
|
<div class="flex flex-col items-center mb-8">
|
|
<img :src="logoUrl" alt="SB Sport" class="h-20 w-auto object-contain mb-2" />
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form @submit.prevent="handleLogin" class="flex flex-col gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">
|
|
Utilisateur
|
|
</label>
|
|
<input
|
|
v-model="username"
|
|
type="text"
|
|
autocomplete="username"
|
|
required
|
|
placeholder="sanae"
|
|
class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">
|
|
Mot de passe
|
|
</label>
|
|
<input
|
|
v-model="password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
required
|
|
class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
|
|
/>
|
|
</div>
|
|
|
|
<p v-if="error" class="text-red-500 text-sm text-center">{{ error }}</p>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="loading"
|
|
class="flex items-center justify-center gap-2 bg-blue-900 hover:bg-blue-800 disabled:opacity-60 text-white font-semibold py-3 rounded-xl transition-colors mt-2"
|
|
>
|
|
<LogIn class="w-4 h-4" />
|
|
{{ loading ? "Connexion…" : "Se connecter" }}
|
|
</button>
|
|
</form>
|
|
|
|
<div
|
|
class="flex items-center justify-center gap-1 mt-6 text-xs text-gray-400"
|
|
>
|
|
<ShieldCheck class="w-3 h-3" />
|
|
Accès sécurisé
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|