@consilioweb/payload-support 0.5.1

package/src/portal/register/page.tsx

@@ -0,0 +1,281 @@
+'use client'
+
+import React, { useState, useRef } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+
+export default function SupportRegisterPage() {
+  const router = useRouter()
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [company, setCompany] = useState('')
+  const [phone, setPhone] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const loadedAt = useRef(Date.now())
+  const honeypotRef = useRef<HTMLInputElement>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+
+    // Client-side validation
+    if (password.length < 8) {
+      setError('Le mot de passé doit contenir au moins 8 caractères.')
+      return
+    }
+
+    if (password !== confirmPassword) {
+      setError('Les mots de passé ne correspondent pas.')
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const res = await fetch('/api/support-register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          email,
+          password,
+          firstName,
+          lastName,
+          company,
+          ...(phone ? { phone } : {}),
+          _hp: honeypotRef.current?.value || '',
+          _t: loadedAt.current,
+        }),
+      })
+
+      const data = await res.json()
+
+      if (!res.ok) {
+        if (res.status === 409) {
+          // Account already exists — redirect to login with pre-filled email
+          router.push(`/support/login?email=${encodeURIComponent(email)}`)
+          return
+        }
+        setError(data.error || 'Erreur lors de la création du compte.')
+        return
+      }
+
+      router.push('/support/dashboard')
+    } catch {
+      setError('Erreur de connexion. Veuillez réessayer.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const inputClassName =
+    'w-full rounded-xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 dark:border-slate-600 dark:bg-slate-900 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-blue-500 dark:focus:ring-blue-500/20'
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center px-4 py-12 bg-gradient-to-br from-slate-50 via-white to-blue-50 dark:from-slate-950 dark:via-slate-950 dark:to-blue-950/20">
+      {/* Decorative background element */}
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,rgba(37,99,235,0.08),transparent)] dark:bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,rgba(37,99,235,0.12),transparent)]" />
+
+      <div className="relative w-full max-w-[420px]">
+        {/* Logo / Header */}
+        <div className="mb-8 text-center">
+          <Link href="/support" className="group mb-6 inline-flex items-center gap-2.5 transition-opacity hover:opacity-80">
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-600 text-white shadow-lg shadow-blue-600/25">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-5 w-5"
+              >
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+            </div>
+            <span className="text-lg font-semibold text-slate-900 dark:text-white">Support</span>
+          </Link>
+          <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Créer un compte</h1>
+          <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+            Rejoignez votre espace support en quelques secondes
+          </p>
+        </div>
+
+        {/* Registration Form */}
+        <form
+          onSubmit={handleSubmit}
+          className="rounded-2xl border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50 dark:border-slate-700 dark:bg-slate-800 dark:shadow-none"
+        >
+          {error && (
+            <div className="mb-6 flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800/50 dark:bg-red-950/50 dark:text-red-400">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="mt-0.5 h-4 w-4 shrink-0">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+              </svg>
+              {error}
+            </div>
+          )}
+
+          {/* Prenom + Nom */}
+          <div className="mb-5 grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="firstName" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                Prenom <span className="text-red-500">*</span>
+              </label>
+              <input
+                id="firstName"
+                type="text"
+                required
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                placeholder="Jean"
+                className={inputClassName}
+              />
+            </div>
+            <div>
+              <label htmlFor="lastName" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+                Nom <span className="text-red-500">*</span>
+              </label>
+              <input
+                id="lastName"
+                type="text"
+                required
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                placeholder="Dupont"
+                className={inputClassName}
+              />
+            </div>
+          </div>
+
+          {/* Entreprise */}
+          <div className="mb-5">
+            <label htmlFor="company" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+              Entreprise <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="company"
+              type="text"
+              required
+              value={company}
+              onChange={(e) => setCompany(e.target.value)}
+              placeholder="Mon Entreprise SARL"
+              className={inputClassName}
+            />
+          </div>
+
+          {/* Telephone */}
+          <div className="mb-5">
+            <label htmlFor="phone" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+              Telephone <span className="text-sm font-normal text-slate-400">(optionnel)</span>
+            </label>
+            <input
+              id="phone"
+              type="tel"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              placeholder="06 12 34 56 78"
+              className={inputClassName}
+            />
+          </div>
+
+          {/* Email */}
+          <div className="mb-5">
+            <label htmlFor="email" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+              Email <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="email"
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="vous@entreprise.fr"
+              className={inputClassName}
+            />
+          </div>
+
+          {/* Mot de passé */}
+          <div className="mb-5">
+            <label htmlFor="password" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+              Mot de passé <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="password"
+              type="password"
+              required
+              minLength={8}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Min. 8 caractères"
+              className={inputClassName}
+            />
+          </div>
+
+          {/* Confirmer mot de passé */}
+          <div className="mb-6">
+            <label htmlFor="confirmPassword" className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
+              Confirmer le mot de passé <span className="text-red-500">*</span>
+            </label>
+            <input
+              id="confirmPassword"
+              type="password"
+              required
+              minLength={8}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="Retapez votre mot de passe"
+              className={inputClassName}
+            />
+          </div>
+
+          {/* Honeypot — hidden from humans, filled by bots */}
+          <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', top: '-9999px' }}>
+            <label htmlFor="_hp">Ne pas remplir</label>
+            <input id="_hp" name="_hp" type="text" tabIndex={-1} autoComplete="off" ref={honeypotRef} />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white shadow-lg shadow-blue-600/25 transition-all hover:bg-blue-700 hover:shadow-xl active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none"
+          >
+            {loading ? 'Creation du compte...' : 'Créer mon compte'}
+          </button>
+
+          {/* Google SSO option */}
+          <div className="my-6 flex items-center gap-3">
+            <div className="h-px flex-1 bg-slate-200 dark:bg-slate-700" />
+            <span className="text-xs font-medium text-slate-400 dark:text-slate-500">OU</span>
+            <div className="h-px flex-1 bg-slate-200 dark:bg-slate-700" />
+          </div>
+
+          {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
+          <a
+            href="/api/support/oauth/google?action=register"
+            className="flex w-full items-center justify-center gap-3 rounded-xl border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 transition-all hover:bg-slate-50 hover:shadow-md active:scale-[0.98] dark:border-slate-600 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
+          >
+            <svg className="h-5 w-5" viewBox="0 0 24 24">
+              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" 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.18A11.96 11.96 0 0 0 1 12c0 1.94.46 3.77 1.18 5.07l3.66-2.84z" 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>
+            S&apos;inscrire avec Google
+          </a>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-slate-500 dark:text-slate-400">
+          Deja un compte ?{' '}
+          <Link href="/support/login" className="font-medium text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
+            Se connecter
+          </Link>
+        </p>
+      </div>
+    </div>
+  )
+}

package/src/portal/reset-password/page.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import React, { Suspense, useState } from 'react'
+import Link from 'next/link'
+import { useSearchParams } from 'next/navigation'
+
+function ResetPasswordForm() {
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [success, setSuccess] = useState(false)
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+
+    if (password.length < 8) {
+      setError('Le mot de passe doit faire au moins 8 caractères.')
+      return
+    }
+
+    if (password !== confirm) {
+      setError('Les mots de passe ne correspondent pas.')
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const res = await fetch('/api/support-clients/reset-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token, password }),
+      })
+
+      if (res.ok) {
+        setSuccess(true)
+      } else {
+        const data = await res.json()
+        setError(data.errors?.[0]?.message || 'Le lien est invalide ou a expiré.')
+      }
+    } catch {
+      setError('Erreur de connexion.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!token) {
+    return (
+      <div className="w-full max-w-md text-center">
+        <div className="rounded-2xl border-4 border-black bg-white p-8 shadow-[6px_6px_0px_#000]">
+          <p className="mb-4 text-lg font-bold text-red-600">Lien invalide</p>
+          <p className="mb-6 text-sm text-gray-500">
+            Ce lien de réinitialisation est invalide ou a expiré.
+          </p>
+          <Link
+            href="/support/forgot-password"
+            className="block w-full rounded-xl border-3 border-black bg-[#FFD600] px-6 py-3 text-center font-black text-black shadow-[4px_4px_0px_#000]"
+          >
+            Demander un nouveau lien
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full max-w-md">
+      <div className="mb-8 text-center">
+        <h1 className="text-3xl font-black text-black">Nouveau mot de passe</h1>
+        <p className="mt-2 text-gray-600">Choisissez votre nouveau mot de passe</p>
+      </div>
+
+      {success ? (
+        <div className="rounded-2xl border-4 border-black bg-white p-8 shadow-[6px_6px_0px_#000]">
+          <div className="mb-4 rounded-xl border-2 border-green-500 bg-green-50 px-4 py-3 text-sm font-semibold text-green-700">
+            Mot de passe modifié avec succès !
+          </div>
+          <Link
+            href="/support/login"
+            className="block w-full rounded-xl border-3 border-black bg-[#00E5FF] px-6 py-3 text-center text-base font-black text-black shadow-[4px_4px_0px_#000] transition-all hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_#000]"
+          >
+            Se connecter
+          </Link>
+        </div>
+      ) : (
+        <form
+          onSubmit={handleSubmit}
+          className="rounded-2xl border-4 border-black bg-white p-8 shadow-[6px_6px_0px_#000]"
+        >
+          {error && (
+            <div className="mb-6 rounded-xl border-2 border-red-500 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700">
+              {error}
+            </div>
+          )}
+
+          <div className="mb-5">
+            <label htmlFor="password" className="mb-2 block text-sm font-bold text-black">
+              Nouveau mot de passe
+            </label>
+            <input
+              id="password"
+              type="password"
+              required
+              minLength={8}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full rounded-xl border-3 border-black px-4 py-3 text-base outline-none transition-shadow focus:shadow-[3px_3px_0px_#00E5FF]"
+            />
+            <p className="mt-1 text-xs text-gray-400">Minimum 8 caractères</p>
+          </div>
+
+          <div className="mb-6">
+            <label htmlFor="confirm" className="mb-2 block text-sm font-bold text-black">
+              Confirmer
+            </label>
+            <input
+              id="confirm"
+              type="password"
+              required
+              value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              className="w-full rounded-xl border-3 border-black px-4 py-3 text-base outline-none transition-shadow focus:shadow-[3px_3px_0px_#00E5FF]"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-xl border-3 border-black bg-[#00E5FF] px-6 py-3 text-base font-black text-black shadow-[4px_4px_0px_#000] transition-all hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_#000] disabled:opacity-50"
+          >
+            {loading ? 'Modification...' : 'Modifier le mot de passe'}
+          </button>
+        </form>
+      )}
+    </div>
+  )
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4 py-12">
+      <Suspense fallback={<p className="text-gray-400">Chargement...</p>}>
+        <ResetPasswordForm />
+      </Suspense>
+    </div>
+  )
+}