initiation librodrome

app/pages/admin/login.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="login-page">
+    <form class="login-form" @submit.prevent="login">
+      <div class="i-lucide-lock h-10 w-10 text-primary mb-4 mx-auto" />
+      <h1 class="font-display text-2xl font-bold text-white text-center mb-6">Administration</h1>
+
+      <div v-if="error" class="login-error">
+        {{ error }}
+      </div>
+
+      <label class="login-label" for="password">Mot de passe</label>
+      <input
+        id="password"
+        v-model="password"
+        type="password"
+        class="login-input"
+        placeholder="Entrez le mot de passe"
+        autofocus
+      />
+
+      <button type="submit" class="login-btn" :disabled="loading">
+        <div v-if="loading" class="i-lucide-loader-2 h-4 w-4 animate-spin" />
+        Se connecter
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+const password = ref('')
+const error = ref('')
+const loading = ref(false)
+
+async function login() {
+  error.value = ''
+  loading.value = true
+
+  try {
+    await $fetch('/api/admin/auth/login', {
+      method: 'POST',
+      body: { password: password.value },
+    })
+    navigateTo('/admin')
+  }
+  catch {
+    error.value = 'Mot de passe incorrect'
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.login-page {
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(20 8% 3.5%);
+}
+
+.login-form {
+  width: 100%;
+  max-width: 24rem;
+  padding: 2.5rem;
+  border: 1px solid hsl(20 8% 14%);
+  border-radius: 1rem;
+  background: hsl(20 8% 6%);
+}
+
+.login-error {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  background: hsl(0 60% 45% / 0.15);
+  color: hsl(0 60% 70%);
+  font-size: 0.85rem;
+  margin-bottom: 1rem;
+}
+
+.login-label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: hsl(20 8% 60%);
+  margin-bottom: 0.375rem;
+}
+
+.login-input {
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid hsl(20 8% 18%);
+  background: hsl(20 8% 4%);
+  color: white;
+  font-size: 0.9rem;
+  margin-bottom: 1.25rem;
+}
+
+.login-input:focus {
+  outline: none;
+  border-color: hsl(12 76% 48% / 0.5);
+}
+
+.login-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: hsl(12 76% 48%);
+  color: white;
+  font-weight: 600;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.login-btn:hover:not(:disabled) {
+  background: hsl(12 76% 42%);
+}
+
+.login-btn:disabled {
+  opacity: 0.7;
+  cursor: wait;
+}
+</style>