nuxt-auth-kit 1.0.0

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

@@ -0,0 +1,209 @@
+<template>
+  <div class="auth-login">
+    <h1 class="text-3xl font-bold text-[#1a2e1a] mb-2">{{ title }}</h1>
+    <p class="text-[#6b7c6b] mb-8">{{ subtitle }}</p>
+
+    <!-- Role Switcher -->
+    <div v-if="roles && roles.length > 0" class="flex gap-6 mb-8">
+      <label
+        v-for="r in roles"
+        :key="r.value"
+        class="flex items-center gap-2 cursor-pointer"
+      >
+        <input
+          type="radio"
+          :value="r.value"
+          v-model="selectedRole"
+          class="accent-[#1B4332] w-4 h-4"
+        />
+        <span class="text-sm text-[#1a2e1a]">{{ r.label }}</span>
+      </label>
+    </div>
+
+    <!-- Social Login -->
+    <div v-if="showSocial" class="space-y-3 mb-6">
+      <button
+        type="button"
+        @click="$emit('google-login')"
+        class="w-full flex items-center justify-center gap-3 bg-white border border-[#e0e0d8] rounded-2xl py-3 px-4 text-[#1a2e1a] font-medium hover:bg-[#f5f5ed] transition-colors"
+      >
+        <svg class="w-5 h-5" viewBox="0 0 24 24">
+          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+        </svg>
+        Se connecter avec Google
+      </button>
+
+      <button
+        type="button"
+        @click="$emit('apple-login')"
+        class="w-full flex items-center justify-center gap-3 bg-white border border-[#e0e0d8] rounded-2xl py-3 px-4 text-[#1a2e1a] font-medium hover:bg-[#f5f5ed] transition-colors"
+      >
+        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
+        </svg>
+        Se connecter avec Apple
+      </button>
+
+      <div class="flex items-center gap-3 my-2">
+        <div class="flex-1 h-px bg-[#d8d8cc]"></div>
+        <span class="text-sm text-[#8a9a8a]">OU</span>
+        <div class="flex-1 h-px bg-[#d8d8cc]"></div>
+      </div>
+    </div>
+
+    <!-- Form -->
+    <form @submit.prevent="handleSubmit" class="space-y-4">
+      <!-- Error alert -->
+      <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>
+
+      <!-- Email -->
+      <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="form.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>
+        <p v-if="fieldErrors.email" class="text-red-500 text-xs mt-1">{{ fieldErrors.email }}</p>
+      </div>
+
+      <!-- Password -->
+      <div>
+        <div class="flex justify-between items-center mb-1.5">
+          <label class="text-sm font-medium text-[#1a2e1a]">
+            Mot de passe <span class="text-red-500">*</span>
+          </label>
+          <button
+            type="button"
+            @click="$emit('forgot-password')"
+            class="text-sm text-[#1B4332] font-medium hover:underline"
+          >
+            Mot de passe oublié ?
+          </button>
+        </div>
+        <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+          </span>
+          <input
+            v-model="form.password"
+            :type="showPassword ? 'text' : 'password'"
+            placeholder="Entrez votre mot de passe"
+            required
+            autocomplete="current-password"
+            class="w-full bg-white border border-[#e0e0d8] rounded-2xl py-3 pl-11 pr-12 text-[#1a2e1a] placeholder-[#aab4aa] focus:outline-none focus:border-[#1B4332] focus:ring-2 focus:ring-[#1B4332]/20 transition"
+          />
+          <button
+            type="button"
+            @click="showPassword = !showPassword"
+            class="absolute right-4 top-1/2 -translate-y-1/2 text-[#8a9a8a] hover:text-[#1a2e1a]"
+          >
+            <svg v-if="!showPassword" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+            </svg>
+            <svg v-else 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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+            </svg>
+          </button>
+        </div>
+        <p v-if="fieldErrors.password" class="text-red-500 text-xs mt-1">{{ fieldErrors.password }}</p>
+      </div>
+
+      <!-- Submit -->
+      <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 disabled:cursor-not-allowed mt-2"
+      >
+        <span v-if="!loading">Se connecter</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>
+          Connexion en cours...
+        </span>
+      </button>
+    </form>
+
+    <!-- Register link -->
+    <p class="text-center text-sm text-[#6b7c6b] mt-6">
+      Pas encore de compte ?
+      <button type="button" @click="$emit('register')" class="text-[#1B4332] font-semibold hover:underline ml-1">
+        S'inscrire
+      </button>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useAuth } from '../../composables/useAuth'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  showSocial?: boolean
+  roles?: Array<{ value: string; label: string }>
+}>(), {
+  title: 'Connexion',
+  subtitle: 'Bienvenue ! Entrez vos informations pour continuer.',
+  showSocial: true,
+  roles: () => []
+})
+
+const emit = defineEmits<{
+  'forgot-password': []
+  'register': []
+  'google-login': []
+  'apple-login': []
+  'success': [user: any]
+}>()
+
+const { login, loading } = useAuth()
+
+const form = reactive({ email: '', password: '' })
+const showPassword = ref(false)
+const error = ref<string | null>(null)
+const fieldErrors = reactive<Record<string, string>>({})
+const selectedRole = ref(props.roles?.[0]?.value || '')
+
+async function handleSubmit() {
+  error.value = null
+  Object.keys(fieldErrors).forEach(k => delete fieldErrors[k])
+
+  const result = await login({ email: form.email, password: form.password })
+
+  if (!result.success && result.error) {
+    if (result.error.errors) {
+      Object.entries(result.error.errors).forEach(([k, v]) => {
+        fieldErrors[k] = v[0]
+      })
+    } else {
+      error.value = result.error.message
+    }
+  } else if (result.success) {
+    emit('success', null)
+  }
+}
+</script>

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

@@ -0,0 +1,182 @@
+<template>
+  <div class="auth-register">
+    <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>
+
+      <!-- Name -->
+      <div>
+        <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">
+          Nom complet <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+          </span>
+          <input
+            v-model="form.name"
+            type="text"
+            placeholder="Jean Dupont"
+            required
+            autocomplete="name"
+            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>
+        <p v-if="fieldErrors.name" class="text-red-500 text-xs mt-1">{{ fieldErrors.name }}</p>
+      </div>
+
+      <!-- Email -->
+      <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="form.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>
+        <p v-if="fieldErrors.email" class="text-red-500 text-xs mt-1">{{ fieldErrors.email }}</p>
+      </div>
+
+      <!-- Password -->
+      <div>
+        <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">
+          Mot de passe <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+          </span>
+          <input
+            v-model="form.password"
+            :type="showPassword ? 'text' : 'password'"
+            placeholder="Minimum 8 caractères"
+            required
+            autocomplete="new-password"
+            class="w-full bg-white border border-[#e0e0d8] rounded-2xl py-3 pl-11 pr-12 text-[#1a2e1a] placeholder-[#aab4aa] focus:outline-none focus:border-[#1B4332] focus:ring-2 focus:ring-[#1B4332]/20 transition"
+          />
+          <button type="button" @click="showPassword = !showPassword" class="absolute right-4 top-1/2 -translate-y-1/2 text-[#8a9a8a] hover:text-[#1a2e1a]">
+            <svg v-if="!showPassword" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+            </svg>
+            <svg v-else 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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+            </svg>
+          </button>
+        </div>
+        <p v-if="fieldErrors.password" class="text-red-500 text-xs mt-1">{{ fieldErrors.password }}</p>
+      </div>
+
+      <!-- Password Confirmation -->
+      <div>
+        <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">
+          Confirmer le mot de passe <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </span>
+          <input
+            v-model="form.password_confirmation"
+            :type="showPassword ? 'text' : 'password'"
+            placeholder="Confirmez votre mot de passe"
+            required
+            autocomplete="new-password"
+            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 disabled:cursor-not-allowed mt-2"
+      >
+        <span v-if="!loading">Créer un compte</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>
+          Création en cours...
+        </span>
+      </button>
+    </form>
+
+    <p class="text-center text-sm text-[#6b7c6b] mt-6">
+      Déjà un compte ?
+      <button type="button" @click="$emit('login')" class="text-[#1B4332] font-semibold hover:underline ml-1">
+        Se connecter
+      </button>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useAuth } from '../../composables/useAuth'
+
+withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+}>(), {
+  title: 'Créer un compte',
+  subtitle: 'Rejoignez-nous dès aujourd\'hui.'
+})
+
+const emit = defineEmits<{
+  login: []
+  success: [user: any]
+}>()
+
+const { register, loading } = useAuth()
+
+const form = reactive({
+  name: '',
+  email: '',
+  password: '',
+  password_confirmation: ''
+})
+const showPassword = ref(false)
+const error = ref<string | null>(null)
+const fieldErrors = reactive<Record<string, string>>({})
+
+async function handleSubmit() {
+  error.value = null
+  Object.keys(fieldErrors).forEach(k => delete fieldErrors[k])
+
+  const result = await register(form)
+
+  if (!result.success && result.error) {
+    if (result.error.errors) {
+      Object.entries(result.error.errors).forEach(([k, v]) => {
+        fieldErrors[k] = v[0]
+      })
+    } else {
+      error.value = result.error.message
+    }
+  } else if (result.success) {
+    emit('success', null)
+  }
+}
+</script>

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

@@ -0,0 +1,134 @@
+<template>
+  <div class="auth-reset-password">
+    <div v-if="!done">
+      <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="form.email" type="email" required placeholder="hello@example.com"
+              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>
+          <p v-if="fieldErrors.email" class="text-red-500 text-xs mt-1">{{ fieldErrors.email }}</p>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">Nouveau mot de passe <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+            </span>
+            <input v-model="form.password" :type="showPassword ? 'text' : 'password'" required placeholder="Minimum 8 caractères"
+              class="w-full bg-white border border-[#e0e0d8] rounded-2xl py-3 pl-11 pr-12 text-[#1a2e1a] placeholder-[#aab4aa] focus:outline-none focus:border-[#1B4332] focus:ring-2 focus:ring-[#1B4332]/20 transition" />
+            <button type="button" @click="showPassword = !showPassword" class="absolute right-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 v-if="!showPassword" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+              </svg>
+            </button>
+          </div>
+          <p v-if="fieldErrors.password" class="text-red-500 text-xs mt-1">{{ fieldErrors.password }}</p>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">Confirmer le mot de passe <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+              </svg>
+            </span>
+            <input v-model="form.password_confirmation" :type="showPassword ? 'text' : 'password'" required placeholder="Confirmez votre mot de passe"
+              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">Réinitialiser le mot de passe</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>
+            Réinitialisation...
+          </span>
+        </button>
+      </form>
+    </div>
+
+    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </div>
+      <h2 class="text-2xl font-bold text-[#1a2e1a] mb-3">Mot de passe réinitialisé !</h2>
+      <p class="text-[#6b7c6b] mb-8">Votre mot de passe a été mis à jour avec succès.</p>
+      <button type="button" @click="$emit('back-to-login')"
+        class="bg-[#1B4332] hover:bg-[#163828] text-[#D4FF6B] font-semibold py-3 px-8 rounded-2xl transition-colors">
+        Se connecter
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useAuth } from '../../composables/useAuth'
+import { useRoute } from '#app'
+
+withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+}>(), {
+  title: 'Nouveau mot de passe',
+  subtitle: 'Choisissez un nouveau mot de passe sécurisé.'
+})
+
+const emit = defineEmits<{ 'back-to-login': [] }>()
+
+const route = useRoute()
+const { resetPassword, loading } = useAuth()
+
+const form = reactive({
+  email: (route.query.email as string) || '',
+  password: '',
+  password_confirmation: '',
+  token: (route.query.token as string) || (route.params.token as string) || ''
+})
+const showPassword = ref(false)
+const error = ref<string | null>(null)
+const fieldErrors = reactive<Record<string, string>>({})
+const done = ref(false)
+
+async function handleSubmit() {
+  error.value = null
+  Object.keys(fieldErrors).forEach(k => delete fieldErrors[k])
+
+  const result = await resetPassword(form)
+
+  if (result.success) {
+    done.value = true
+  } else if (result.error) {
+    if (result.error.errors) {
+      Object.entries(result.error.errors).forEach(([k, v]) => { fieldErrors[k] = v[0] })
+    } else {
+      error.value = result.error.message
+    }
+  }
+}
+</script>

package/dist/runtime/components/profile/UpdatePasswordForm.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="profile-update-password">
+    <h2 class="text-2xl font-bold text-[#1a2e1a] mb-6">{{ title }}</h2>
+
+    <form @submit.prevent="handleSubmit" class="space-y-5">
+      <div v-if="successMsg" class="bg-green-50 border border-green-200 text-green-700 rounded-xl px-4 py-3 text-sm">
+        {{ successMsg }}
+      </div>
+      <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">Mot de passe actuel <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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+            </svg>
+          </span>
+          <input v-model="form.current_password" :type="show.current ? 'text' : 'password'" required placeholder="Votre mot de passe actuel"
+            class="w-full bg-white border border-[#e0e0d8] rounded-2xl py-3 pl-11 pr-12 text-[#1a2e1a] placeholder-[#aab4aa] focus:outline-none focus:border-[#1B4332] focus:ring-2 focus:ring-[#1B4332]/20 transition" />
+          <button type="button" @click="show.current = !show.current" class="absolute right-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 v-if="!show.current" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+            </svg>
+          </button>
+        </div>
+        <p v-if="fieldErrors.current_password" class="text-red-500 text-xs mt-1">{{ fieldErrors.current_password }}</p>
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">Nouveau mot de passe <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </span>
+          <input v-model="form.password" :type="show.new ? 'text' : 'password'" required placeholder="Minimum 8 caractères"
+            class="w-full bg-white border border-[#e0e0d8] rounded-2xl py-3 pl-11 pr-12 text-[#1a2e1a] placeholder-[#aab4aa] focus:outline-none focus:border-[#1B4332] focus:ring-2 focus:ring-[#1B4332]/20 transition" />
+          <button type="button" @click="show.new = !show.new" class="absolute right-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 v-if="!show.new" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+              <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+            </svg>
+          </button>
+        </div>
+        <p v-if="fieldErrors.password" class="text-red-500 text-xs mt-1">{{ fieldErrors.password }}</p>
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-[#1a2e1a] mb-1.5">Confirmer le nouveau mot de passe <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </span>
+          <input v-model="form.password_confirmation" :type="show.new ? 'text' : 'password'" required placeholder="Confirmez votre nouveau mot de passe"
+            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="bg-[#1B4332] hover:bg-[#163828] text-[#D4FF6B] font-semibold py-3 px-8 rounded-2xl transition-colors disabled:opacity-60">
+        <span v-if="!loading">Changer le mot de passe</span>
+        <span v-else class="flex items-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>
+          Modification...
+        </span>
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { useAuth } from '../../composables/useAuth'
+
+withDefaults(defineProps<{ title?: string }>(), { title: 'Changer le mot de passe' })
+
+const { updatePassword, loading } = useAuth()
+
+const form = reactive({ current_password: '', password: '', password_confirmation: '' })
+const show = reactive({ current: false, new: false })
+const error = ref<string | null>(null)
+const successMsg = ref<string | null>(null)
+const fieldErrors = reactive<Record<string, string>>({})
+
+async function handleSubmit() {
+  error.value = null
+  successMsg.value = null
+  Object.keys(fieldErrors).forEach(k => delete fieldErrors[k])
+
+  const result = await updatePassword(form)
+
+  if (result.success) {
+    successMsg.value = 'Mot de passe modifié avec succès !'
+    form.current_password = ''
+    form.password = ''
+    form.password_confirmation = ''
+  } else if (result.error) {
+    if (result.error.errors) {
+      Object.entries(result.error.errors).forEach(([k, v]) => { fieldErrors[k] = v[0] })
+    } else {
+      error.value = result.error.message
+    }
+  }
+}
+</script>