create-crm-tmp 2.0.0 → 2.1.0

package/template/src/app/(auth)/invite/[token]/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { Eye, EyeOff } from 'lucide-react';
 import { useAppToast } from '@/contexts/app-toast-context';
+import { devToast } from '@/lib/utils';
 
 export default function InvitePage() {
   const router = useRouter();
@@ -49,7 +50,7 @@ export default function InvitePage() {
         setValidating(false);
       } catch {
         setValidating(false);
-        toast.error('Erreur lors de la validation du lien');
+        toast.error('Ce lien d\'invitation n\'est plus valide. Contactez votre administrateur.');
         router.replace('/signin');
       }
     };
@@ -93,8 +94,7 @@ export default function InvitePage() {
         '/signin?message=Mot de passe défini avec succès, vous pouvez maintenant vous connecter',
       );
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Erreur lors de la définition du mot de passe';
-      setError(message);
+      setError(devToast('Erreur lors de la définition du mot de passe', err));
     } finally {
       setLoading(false);
     }
@@ -131,15 +131,16 @@ export default function InvitePage() {
 
         <form onSubmit={handleSubmit} className="space-y-6">
           <div>
-            <label className="block text-sm font-medium text-gray-700">Mot de passe</label>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700">Mot de passe</label>
             <div className="relative mt-1">
               <input
+                id="password"
                 type={showPassword ? 'text' : 'password'}
                 required
                 minLength={6}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:border-indigo-500"
                 placeholder="••••••••"
               />
               <button
@@ -155,17 +156,18 @@ export default function InvitePage() {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700">
+            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
               Confirmer le mot de passe
             </label>
             <div className="relative mt-1">
               <input
+                id="confirmPassword"
                 type={showConfirmPassword ? 'text' : 'password'}
                 required
                 minLength={6}
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
-                className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:border-indigo-500"
                 placeholder="••••••••"
               />
               <button
@@ -186,7 +188,7 @@ export default function InvitePage() {
           <button
             type="submit"
             disabled={loading}
-            className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {loading ? 'Création du compte...' : 'Créer mon compte'}
           </button>

package/template/src/app/(auth)/layout.tsx

@@ -1,3 +1,3 @@
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
-  return <div className="bg-lienar-to-br min-h-screen from-blue-50 to-indigo-100">{children}</div>;
+  return <div className="bg-gradient-to-br min-h-screen from-blue-50 to-indigo-100">{children}</div>;
 }

package/template/src/app/(auth)/reset-password/complete/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Eye, EyeOff } from 'lucide-react';
 import { useAppToast } from '@/contexts/app-toast-context';
+import { devToast } from '@/lib/utils';
 
 function ResetPasswordCompleteContent() {
   const router = useRouter();
@@ -39,7 +40,7 @@ function ResetPasswordCompleteContent() {
         setValidating(false);
       } catch (err) {
         setValidating(false);
-        toast.error('Erreur lors de la validation du lien');
+        toast.error(devToast('Ce lien de réinitialisation n\'est plus valide. Veuillez en demander un nouveau.', err));
         router.replace('/signin');
       }
     };
@@ -48,7 +49,7 @@ function ResetPasswordCompleteContent() {
       validateToken();
     } else {
       setValidating(false);
-      toast.error('Token manquant');
+      toast.error('Ce lien est incomplet. Veuillez réessayer depuis votre email.');
       router.replace('/signin');
     }
   }, [token, toast, router]);
@@ -87,7 +88,7 @@ function ResetPasswordCompleteContent() {
         '/signin?message=Mot de passe réinitialisé avec succès, vous pouvez maintenant vous connecter',
       );
     } catch (err: any) {
-      setError(err.message);
+      setError(devToast('Erreur lors de la réinitialisation du mot de passe', err));
     } finally {
       setLoading(false);
     }
@@ -122,15 +123,16 @@ function ResetPasswordCompleteContent() {
 
         <form onSubmit={handleSubmit} className="space-y-6">
           <div>
-            <label className="block text-sm font-medium text-gray-700">Nouveau mot de passe</label>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-700">Nouveau mot de passe</label>
             <div className="relative mt-1">
               <input
+                id="password"
                 type={showPassword ? 'text' : 'password'}
                 required
                 minLength={6}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:border-indigo-500"
                 placeholder="••••••••"
               />
               <button
@@ -146,17 +148,18 @@ function ResetPasswordCompleteContent() {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700">
+            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
               Confirmer le mot de passe
             </label>
             <div className="relative mt-1">
               <input
+                id="confirmPassword"
                 type={showConfirmPassword ? 'text' : 'password'}
                 required
                 minLength={6}
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
-                className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:border-indigo-500"
                 placeholder="••••••••"
               />
               <button
@@ -177,7 +180,7 @@ function ResetPasswordCompleteContent() {
           <button
             type="submit"
             disabled={loading}
-            className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {loading ? 'Réinitialisation...' : 'Réinitialiser le mot de passe'}
           </button>

package/template/src/app/(auth)/reset-password/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { useAppToast } from '@/contexts/app-toast-context';
+import { devToast } from '@/lib/utils';
 
 export default function ResetPasswordPage() {
   const router = useRouter();
@@ -39,8 +40,7 @@ export default function ResetPasswordPage() {
 
       setSuccess(true);
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : "Erreur lors de l'envoi du code";
-      setError(message);
+      setError(devToast("Erreur lors de l'envoi du code", err));
     } finally {
       setLoading(false);
     }
@@ -123,7 +123,7 @@ export default function ResetPasswordPage() {
                 required
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 placeholder-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:border-indigo-500"
                 placeholder="vous@exemple.com"
               />
             </div>
@@ -131,7 +131,7 @@ export default function ResetPasswordPage() {
             <button
               type="submit"
               disabled={loading}
-              className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {loading ? 'Envoi...' : 'Envoyer le code'}
             </button>

package/template/src/app/(auth)/reset-password/verify/page.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useAppToast } from '@/contexts/app-toast-context';
+import { devToast } from '@/lib/utils';
 
 function VerifyResetCodeContent() {
   const router = useRouter();
@@ -88,8 +89,7 @@ function VerifyResetCodeContent() {
       // Rediriger vers la page de définition du nouveau mot de passe
       router.push(`/reset-password/complete?token=${data.token}`);
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Code invalide';
-      setError(message);
+      setError(devToast('Code invalide', err));
       setCode(['', '', '', '', '', '']);
       const firstInput = document.getElementById('code-0') as HTMLInputElement;
       firstInput?.focus();
@@ -123,7 +123,7 @@ function VerifyResetCodeContent() {
                   onChange={(e) => handleCodeChange(index, e.target.value)}
                   onKeyDown={(e) => handleKeyDown(index, e)}
                   onPaste={index === 0 ? handlePaste : undefined}
-                  className="h-12 w-12 rounded-lg border-2 border-gray-300 text-center text-xl font-bold text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none sm:h-14 sm:w-14 sm:text-2xl"
+                  className="h-12 w-12 rounded-lg border-2 border-gray-300 text-center text-xl font-bold text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:border-indigo-500 sm:h-14 sm:w-14 sm:text-2xl"
                   autoFocus={index === 0}
                 />
               ))}
@@ -132,7 +132,7 @@ function VerifyResetCodeContent() {
             <button
               type="submit"
               disabled={loading || code.join('').length !== 6}
-              className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {loading ? 'Vérification...' : 'Vérifier le code'}
             </button>

package/template/src/app/(auth)/signin/page.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { signIn, signOut } from '@/lib/auth-client';
 import { Eye, EyeOff } from 'lucide-react';
 import { useAppToast } from '@/contexts/app-toast-context';
+import { devToast } from '@/lib/utils';
 
 function SignInContent() {
   const router = useRouter();
@@ -19,13 +20,21 @@ function SignInContent() {
   const [showPassword, setShowPassword] = useState(false);
 
   useEffect(() => {
+    const inactive = searchParams.get('inactive');
+    if (inactive === '1') {
+      toast.warning(
+        'Votre compte a été désactivé. Contactez un administrateur si vous pensez que c’est une erreur.',
+      );
+      router.replace('/signin', { scroll: false });
+      return;
+    }
     const message = searchParams.get('message');
     if (message) {
       setSuccessMessage(message);
       // Nettoyer l'URL
       router.replace('/signin', { scroll: false });
     }
-  }, [searchParams, router]);
+  }, [searchParams, router, toast]);
 
   useEffect(() => {
     if (!successMessage) return;
@@ -72,8 +81,7 @@ function SignInContent() {
       // Étape 3 : Rediriger vers le dashboard si tout est OK
       router.push('/dashboard');
     } catch (err) {
-      setError('Email ou mot de passe incorrect');
-      console.error(err);
+      setError(devToast('Email ou mot de passe incorrect', err));
     } finally {
       setLoading(false);
     }
@@ -101,7 +109,7 @@ function SignInContent() {
                 required
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 placeholder-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:border-indigo-500"
                 placeholder="vous@exemple.com"
               />
             </div>
@@ -117,7 +125,7 @@ function SignInContent() {
                   required
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  className="block w-full rounded-lg border border-gray-300 px-4 py-3 pr-10 text-gray-900 placeholder-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:border-indigo-500"
                   placeholder="••••••••"
                 />
                 <button
@@ -134,7 +142,7 @@ function SignInContent() {
             <button
               type="submit"
               disabled={loading}
-              className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+              className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
             >
               {loading ? 'Connexion...' : 'Se connecter'}
             </button>