nuxt-auth-kit 1.0.0

package/README.md

@@ -0,0 +1,307 @@
+# nuxt-auth-kit
+
+Package Nuxt d'authentification clé-en-main pour API Laravel. Installez-le une fois, utilisez-le dans tous vos projets.
+
+## Fonctionnalités
+
+- ✅ **Connexion / Déconnexion**
+- ✅ **Inscription** avec confirmation de mot de passe
+- ✅ **Profil connecté** (`useAuth().user`)
+- ✅ **Modification du profil** (nom, email, avatar)
+- ✅ **Changement de mot de passe**
+- ✅ **Mot de passe oublié** (envoi d'email)
+- ✅ **Réinitialisation de mot de passe** (via token)
+- ✅ **Gestion des rôles & permissions** (RBAC)
+- ✅ **Middlewares** : `auth`, `guest`, `role`
+- ✅ **Session persistante** via cookie sécurisé
+- ✅ **Composants Vue** prêts à l'emploi (design Hotelook-like)
+- ✅ **TypeScript** complet
+
+## Installation
+
+```bash
+npm install nuxt-auth-kit
+# ou
+yarn add nuxt-auth-kit
+# ou
+pnpm add nuxt-auth-kit
+```
+
+## Configuration
+
+Dans `nuxt.config.ts` :
+
+```ts
+export default defineNuxtConfig({
+  modules: [
+    'nuxt-auth-kit',
+    '@nuxt/ui'         // requis pour les styles
+  ],
+
+  nuxtAuthKit: {
+    apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:8000',
+
+    // Endpoints Laravel (personnalisables)
+    endpoints: {
+      login: '/api/auth/login',
+      register: '/api/auth/register',
+      logout: '/api/auth/logout',
+      me: '/api/auth/me',
+      updateProfile: '/api/auth/profile',
+      updatePassword: '/api/auth/password',
+      forgotPassword: '/api/auth/forgot-password',
+      resetPassword: '/api/auth/reset-password'
+    },
+
+    // Redirections
+    redirects: {
+      login: '/auth/login',
+      home: '/',
+      afterLogout: '/auth/login'
+    },
+
+    // Cookie
+    tokenCookieName: 'auth_token',
+
+    // RBAC
+    rbac: {
+      superAdminRole: 'super-admin',
+      defaultUserRole: 'user'
+    }
+  }
+})
+```
+
+Dans `.env` :
+```env
+NUXT_PUBLIC_API_BASE=https://api.monprojet.com
+```
+
+---
+
+## Utilisation
+
+### Pages d'authentification
+
+#### `pages/auth/login.vue`
+```vue
+<template>
+  <AuthLayout app-name="MonApp" :quote="quote">
+    <AuthLoginForm
+      :roles="[
+        { value: 'user', label: 'En tant qu\'utilisateur' },
+        { value: 'owner', label: 'En tant que propriétaire' }
+      ]"
+      :show-social="true"
+      @forgot-password="navigateTo('/auth/forgot-password')"
+      @register="navigateTo('/auth/register')"
+    />
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ middleware: 'guest' })
+
+const quote = {
+  text: 'Une expérience fluide et agréable. La plateforme rend tout si simple.',
+  author: 'Alex Mitchell',
+  location: 'Amsterdam'
+}
+</script>
+```
+
+#### `pages/auth/register.vue`
+```vue
+<template>
+  <AuthLayout app-name="MonApp">
+    <AuthRegisterForm @login="navigateTo('/auth/login')" />
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ middleware: 'guest' })
+</script>
+```
+
+#### `pages/auth/forgot-password.vue`
+```vue
+<template>
+  <AuthLayout app-name="MonApp">
+    <AuthForgotPasswordForm @back-to-login="navigateTo('/auth/login')" />
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ middleware: 'guest' })
+</script>
+```
+
+#### `pages/auth/reset-password.vue`
+```vue
+<template>
+  <AuthLayout app-name="MonApp">
+    <AuthResetPasswordForm @back-to-login="navigateTo('/auth/login')" />
+  </AuthLayout>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ middleware: 'guest' })
+</script>
+```
+
+---
+
+### Page profil
+
+#### `pages/profile/index.vue`
+```vue
+<template>
+  <div class="max-w-2xl mx-auto py-10 px-4 space-y-10">
+    <ProfileUpdateForm title="Mon profil" :show-avatar="true" />
+    <hr class="border-gray-200" />
+    <ProfileUpdatePasswordForm title="Changer le mot de passe" />
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ middleware: 'auth' })
+</script>
+```
+
+---
+
+### Le composable `useAuth`
+
+```ts
+const {
+  user,              // Ref<AuthUser | null>
+  isAuthenticated,   // ComputedRef<boolean>
+  isGuest,           // ComputedRef<boolean>
+  loading,           // Ref<boolean>
+
+  // Actions
+  login,
+  register,
+  logout,
+  fetchUser,
+  updateProfile,
+  updatePassword,
+  forgotPassword,
+  resetPassword,
+
+  // RBAC
+  hasRole,           // (role: string | string[]) => boolean
+  hasPermission      // (perm: string | string[]) => boolean
+} = useAuth()
+```
+
+#### Exemples RBAC
+```ts
+const { hasRole, hasPermission, user } = useAuth()
+
+// Vérifier un rôle
+if (hasRole('admin')) { ... }
+if (hasRole(['admin', 'manager'])) { ... }
+
+// Vérifier une permission
+if (hasPermission('edit-posts')) { ... }
+
+// Dans un template
+<div v-if="hasRole('admin')">Section admin</div>
+```
+
+---
+
+### Middlewares
+
+```ts
+// Page protégée (utilisateurs connectés uniquement)
+definePageMeta({ middleware: 'auth' })
+
+// Page publique (invités uniquement, redirige si connecté)
+definePageMeta({ middleware: 'guest' })
+
+// Page avec rôle requis
+definePageMeta({
+  middleware: 'role',
+  roles: ['admin', 'manager']  // au moins un des rôles
+})
+```
+
+---
+
+## API Laravel attendue
+
+Le package attend les endpoints suivants (personnalisables) :
+
+| Méthode | Route | Description |
+|---------|-------|-------------|
+| `POST` | `/api/auth/login` | Connexion → `{ user, token }` |
+| `POST` | `/api/auth/register` | Inscription → `{ user, token }` |
+| `POST` | `/api/auth/logout` | Déconnexion |
+| `GET` | `/api/auth/me` | Utilisateur connecté → `{ user }` |
+| `PUT` | `/api/auth/profile` | Mise à jour profil → `{ user }` |
+| `PUT` | `/api/auth/password` | Changement mot de passe |
+| `POST` | `/api/auth/forgot-password` | Email de réinitialisation |
+| `POST` | `/api/auth/reset-password` | Réinitialisation avec token |
+
+### Exemple avec Laravel Sanctum
+
+```php
+// routes/api.php
+Route::prefix('auth')->group(function () {
+    Route::post('login', [AuthController::class, 'login']);
+    Route::post('register', [AuthController::class, 'register']);
+    Route::post('forgot-password', [AuthController::class, 'forgotPassword']);
+    Route::post('reset-password', [AuthController::class, 'resetPassword']);
+
+    Route::middleware('auth:sanctum')->group(function () {
+        Route::post('logout', [AuthController::class, 'logout']);
+        Route::get('me', [AuthController::class, 'me']);
+        Route::put('profile', [AuthController::class, 'updateProfile']);
+        Route::put('password', [AuthController::class, 'updatePassword']);
+    });
+});
+```
+
+---
+
+## Architecture du package
+
+```
+nuxt-auth-kit/
+├── src/
+│   ├── module/
+│   │   └── index.ts              # Nuxt module definition
+│   └── runtime/
+│       ├── types/
+│       │   └── index.ts          # TypeScript types
+│       ├── stores/
+│       │   └── auth.ts           # Pinia store
+│       ├── composables/
+│       │   └── useAuth.ts        # Main composable
+│       ├── plugins/
+│       │   └── auth.ts           # Session restore plugin
+│       ├── middleware/
+│       │   ├── auth.ts           # Protected routes
+│       │   ├── guest.ts          # Guest-only routes
+│       │   └── role.ts           # Role-based access
+│       └── components/
+│           ├── auth/
+│           │   ├── AuthLayout.vue         # Split-screen layout
+│           │   ├── LoginForm.vue          # Login form
+│           │   ├── RegisterForm.vue       # Register form
+│           │   ├── ForgotPasswordForm.vue # Forgot password
+│           │   └── ResetPasswordForm.vue  # Reset password
+│           └── profile/
+│               ├── UpdateProfileForm.vue  # Profile update
+│               └── UpdatePasswordForm.vue # Password update
+├── package.json
+└── README.md
+```
+
+---
+
+## Mise en ligne (publication npm)
+
+Voir le fichier `PUBLISH.md` pour la procédure complète.

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,5 @@
+export { AuthUser, LoginCredentials, ModuleOptions, RegisterData } from '../dist/runtime/types/index.js';
+
+declare const _default: any;
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,5 @@
+export { AuthUser, LoginCredentials, ModuleOptions, RegisterData } from '../dist/runtime/types/index.js';
+
+declare const _default: any;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-auth-kit",
+  "configKey": "nuxtAuthKit",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,92 @@
+import { defineNuxtModule, createResolver, addPlugin, addImports, addRouteMiddleware, addComponent } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "nuxt-auth-kit",
+    configKey: "nuxtAuthKit",
+    compatibility: {
+      nuxt: "^3.0.0"
+    }
+  },
+  defaults: {
+    apiBase: process.env.NUXT_PUBLIC_API_BASE || "http://localhost:8000",
+    tokenStorage: "cookie",
+    tokenCookieName: "auth_token",
+    endpoints: {
+      login: "/api/auth/login",
+      register: "/api/auth/register",
+      logout: "/api/auth/logout",
+      me: "/api/auth/me",
+      updateProfile: "/api/auth/profile",
+      updatePassword: "/api/auth/password",
+      forgotPassword: "/api/auth/forgot-password",
+      resetPassword: "/api/auth/reset-password"
+    },
+    redirects: {
+      login: "/auth/login",
+      home: "/",
+      afterLogout: "/auth/login"
+    },
+    rbac: {
+      superAdminRole: "super-admin",
+      defaultUserRole: "user"
+    }
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.public.nuxtAuthKit = {
+      apiBase: options.apiBase,
+      endpoints: options.endpoints,
+      redirects: options.redirects,
+      tokenCookieName: options.tokenCookieName,
+      rbac: options.rbac
+    };
+    if (!nuxt.options.modules?.includes("@pinia/nuxt")) {
+      nuxt.options.modules.push("@pinia/nuxt");
+    }
+    addPlugin(resolver.resolve("./runtime/plugins/auth"));
+    addImports([
+      {
+        name: "useAuth",
+        as: "useAuth",
+        from: resolver.resolve("./runtime/composables/useAuth")
+      },
+      {
+        name: "useAuthStore",
+        as: "useAuthStore",
+        from: resolver.resolve("./runtime/stores/auth")
+      }
+    ]);
+    addRouteMiddleware({
+      name: "auth",
+      path: resolver.resolve("./runtime/middleware/auth"),
+      global: false
+    });
+    addRouteMiddleware({
+      name: "guest",
+      path: resolver.resolve("./runtime/middleware/guest"),
+      global: false
+    });
+    addRouteMiddleware({
+      name: "role",
+      path: resolver.resolve("./runtime/middleware/role"),
+      global: false
+    });
+    const components = [
+      // Auth
+      { name: "AuthLayout", filePath: resolver.resolve("./runtime/components/auth/AuthLayout.vue") },
+      { name: "AuthLoginForm", filePath: resolver.resolve("./runtime/components/auth/LoginForm.vue") },
+      { name: "AuthRegisterForm", filePath: resolver.resolve("./runtime/components/auth/RegisterForm.vue") },
+      { name: "AuthForgotPasswordForm", filePath: resolver.resolve("./runtime/components/auth/ForgotPasswordForm.vue") },
+      { name: "AuthResetPasswordForm", filePath: resolver.resolve("./runtime/components/auth/ResetPasswordForm.vue") },
+      // Profile
+      { name: "ProfileUpdateForm", filePath: resolver.resolve("./runtime/components/profile/UpdateProfileForm.vue") },
+      { name: "ProfileUpdatePasswordForm", filePath: resolver.resolve("./runtime/components/profile/UpdatePasswordForm.vue") }
+    ];
+    for (const component of components) {
+      addComponent(component);
+    }
+  }
+});
+
+export { module as default };

package/dist/runtime/components/auth/AuthLayout.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="auth-layout min-h-screen flex">
+    <!-- Left Panel: Form -->
+    <div class="auth-layout__form w-full lg:w-1/2 flex flex-col justify-center px-8 md:px-16 py-12 bg-[#EEEEE6]">
+      <!-- Logo -->
+      <div class="mb-10">
+        <slot name="logo">
+          <div class="flex items-center gap-2">
+            <div class="w-10 h-10 bg-[#1B4332] rounded-xl flex items-center justify-center">
+              <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+              </svg>
+            </div>
+            <span class="text-xl font-bold text-[#1B4332]">{{ appName }}</span>
+          </div>
+        </slot>
+      </div>
+
+      <!-- Form Content -->
+      <div class="max-w-md w-full mx-auto">
+        <slot />
+      </div>
+    </div>
+
+    <!-- Right Panel: Testimonial / Illustration -->
+    <div class="hidden lg:flex lg:w-1/2 bg-[#F5F5ED] flex-col justify-between p-16 relative overflow-hidden">
+      <div class="relative z-10">
+        <!-- Quote -->
+        <div class="text-[#D97706] text-5xl font-serif leading-none mb-6">"</div>
+        <blockquote class="text-3xl font-medium text-[#1a2e1a] leading-relaxed mb-4">
+          {{ quote.text }}
+        </blockquote>
+        <div class="text-[#D97706] text-5xl font-serif leading-none text-right mb-8">"</div>
+
+        <!-- Author -->
+        <div class="flex items-center gap-3">
+          <div v-if="quote.avatar" class="w-12 h-12 rounded-full overflow-hidden bg-gray-200">
+            <img :src="quote.avatar" :alt="quote.author" class="w-full h-full object-cover" />
+          </div>
+          <div v-else class="w-12 h-12 rounded-full bg-[#1B4332] flex items-center justify-center">
+            <span class="text-white text-lg font-semibold">{{ quote.author.charAt(0) }}</span>
+          </div>
+          <div>
+            <p class="font-semibold text-[#1a2e1a]">{{ quote.author }}</p>
+            <p class="text-sm text-[#6b7c6b]">{{ quote.location }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Illustration / Decoration -->
+      <div class="absolute bottom-0 right-0 left-0 pointer-events-none">
+        <slot name="illustration">
+          <svg viewBox="0 0 600 400" class="w-full opacity-80" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- City buildings illustration -->
+            <rect x="320" y="120" width="80" height="280" rx="4" stroke="#2d4a3e" stroke-width="2" fill="#F5EFD6" />
+            <rect x="340" y="140" width="12" height="18" rx="1" fill="#a8c4b0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="360" y="140" width="12" height="18" rx="1" fill="#a8c4b0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="340" y="175" width="12" height="18" rx="1" fill="#a8c4b0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="360" y="175" width="12" height="18" rx="1" fill="#a8c4b0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="340" y="210" width="12" height="18" rx="1" fill="#a8c4b0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="360" y="210" width="12" height="18" rx="1" fill="#a8c4b0" stroke="#2d4a3e" stroke-width="1.5" />
+
+            <rect x="410" y="60" width="100" height="340" rx="4" stroke="#2d4a3e" stroke-width="2" fill="#F0E8C8" />
+            <rect x="420" y="80" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="445" y="80" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="470" y="80" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="420" y="115" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="445" y="115" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="470" y="115" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="420" y="150" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="445" y="150" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="470" y="150" width="15" height="20" rx="1" fill="#b0cfc0" stroke="#2d4a3e" stroke-width="1.5" />
+
+            <rect x="520" y="180" width="70" height="220" rx="4" stroke="#2d4a3e" stroke-width="2" fill="#d4e8d8" />
+            <rect x="530" y="200" width="12" height="16" rx="1" fill="#88b898" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="550" y="200" width="12" height="16" rx="1" fill="#88b898" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="530" y="230" width="12" height="16" rx="1" fill="#88b898" stroke="#2d4a3e" stroke-width="1.5" />
+            <rect x="550" y="230" width="12" height="16" rx="1" fill="#88b898" stroke="#2d4a3e" stroke-width="1.5" />
+
+            <!-- Trees -->
+            <circle cx="350" cy="370" r="20" stroke="#2d4a3e" stroke-width="2" fill="#a8d4b0" />
+            <rect x="347" y="370" width="6" height="30" fill="#2d4a3e" />
+            <circle cx="480" cy="365" r="16" stroke="#2d4a3e" stroke-width="2" fill="#88c498" />
+            <rect x="477" y="365" width="5" height="25" fill="#2d4a3e" />
+
+            <!-- Person -->
+            <circle cx="300" cy="340" r="18" stroke="#2d4a3e" stroke-width="2" fill="#d4c8a8" />
+            <path d="M280 400 Q300 355 320 400" stroke="#2d4a3e" stroke-width="2" fill="#a8c4b0" />
+          </svg>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  appName?: string
+  quote?: {
+    text: string
+    author: string
+    location: string
+    avatar?: string
+  }
+}>(), {
+  appName: 'App',
+  quote: () => ({
+    text: 'Une expérience fluide et agréable. La plateforme rend tout si simple.',
+    author: 'Alex Mitchell',
+    location: 'Paris, France'
+  })
+})
+</script>
+
+<style scoped>
+.auth-layout{font-family:inherit}
+</style>

package/dist/runtime/components/auth/ForgotPasswordForm.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="auth-forgot-password">
+    <div v-if="!sent">
+      <h1 class="text-3xl font-bold text-[#1a2e1a] mb-2">{{ title }}</h1>
+      <p class="text-[#6b7c6b] mb-8">{{ subtitle }}</p>
+
+      <form @submit.prevent="handleSubmit" class="space-y-4">
+        <div v-if="error" class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 text-sm">
+          {{ error }}
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">
+            Email <span class="text-red-500">*</span>
+          </label>
+          <div class="relative">
+            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-[#8a9a8a]">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </span>
+            <input
+              v-model="email"
+              type="email"
+              placeholder="hello@example.com"
+              required
+              autocomplete="email"
+              class="w-full bg-white border border-[#e0e0d8] rounded-2xl py-3 pl-11 pr-4 text-[#1a2e1a] placeholder-[#aab4aa] focus:outline-none focus:border-[#1B4332] focus:ring-2 focus:ring-[#1B4332]/20 transition"
+            />
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          :disabled="loading"
+          class="w-full bg-[#1B4332] hover:bg-[#163828] text-[#D4FF6B] font-semibold py-3.5 rounded-2xl transition-colors disabled:opacity-60 mt-2"
+        >
+          <span v-if="!loading">Envoyer le lien de réinitialisation</span>
+          <span v-else class="flex items-center justify-center gap-2">
+            <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+            </svg>
+            Envoi en cours...
+          </span>
+        </button>
+      </form>
+    </div>
+
+    <!-- Success state -->
+    <div v-else class="text-center">
+      <div class="w-16 h-16 bg-[#1B4332]/10 rounded-full flex items-center justify-center mx-auto mb-6">
+        <svg class="w-8 h-8 text-[#1B4332]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+        </svg>
+      </div>
+      <h2 class="text-2xl font-bold text-[#1a2e1a] mb-3">Email envoyé !</h2>
+      <p class="text-[#6b7c6b] mb-8">
+        Si un compte existe pour <strong>{{ email }}</strong>, vous recevrez un lien de réinitialisation sous peu.
+      </p>
+      <button
+        type="button"
+        @click="sent = false; email = ''"
+        class="text-[#1B4332] font-semibold hover:underline text-sm"
+      >
+        Utiliser un autre email
+      </button>
+    </div>
+
+    <p class="text-center text-sm text-[#6b7c6b] mt-6">
+      <button type="button" @click="$emit('back-to-login')" class="text-[#1B4332] font-semibold hover:underline flex items-center gap-1 mx-auto">
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+        </svg>
+        Retour à la connexion
+      </button>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useAuth } from '../../composables/useAuth'
+
+withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+}>(), {
+  title: 'Mot de passe oublié ?',
+  subtitle: 'Saisissez votre email pour recevoir un lien de réinitialisation.'
+})
+
+defineEmits<{ 'back-to-login': [] }>()
+
+const { forgotPassword, loading } = useAuth()
+
+const email = ref('')
+const error = ref<string | null>(null)
+const sent = ref(false)
+
+async function handleSubmit() {
+  error.value = null
+  const result = await forgotPassword({ email: email.value })
+  if (result.success) {
+    sent.value = true
+  } else {
+    error.value = result.error?.message || 'Une erreur est survenue'
+  }
+}
+</script>