- Add slug/short_id fields to database with auto-generation

- Create migration script for existing data
- Update admin interface to show only short URLs
- Implement redirect system to avoid code duplication
- Maintain backward compatibility with old URLs

src/components/AuthGuard.tsx

@@ -152,22 +152,35 @@ export default function AuthGuard({ children, requireSuperAdmin = false }: AuthG
                 <div className="space-y-2">
                   <Label htmlFor="password">Mot de passe</Label>
                   <div className="relative">
-                    <button
-                      type="button"
-                      onClick={() => setShowPassword(!showPassword)}
-                      className="absolute left-3 top-3 text-muted-foreground hover:text-foreground"
-                    >
-                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                    </button>
                     <Input
                       id="password"
                       type={showPassword ? 'text' : 'password'}
                       placeholder="••••••••"
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
+                      onKeyDown={(e) => {
+                        // Si l'utilisateur appuie sur Tab depuis le champ mot de passe,
+                        // déplacer le focus vers le bouton œil
+                        if (e.key === 'Tab' && !e.shiftKey) {
+                          e.preventDefault();
+                          const eyeButton = document.getElementById('password-toggle');
+                          if (eyeButton) {
+                            eyeButton.focus();
+                          }
+                        }
+                      }}
                       className="pl-10"
                       required
                     />
+                    <button
+                      type="button"
+                      id="password-toggle"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute left-3 top-3 text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+                      tabIndex={0}
+                    >
+                      {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                    </button>
                   </div>
                 </div>
 

src/components/SendParticipantEmailModal.tsx

@@ -29,8 +29,10 @@ export default function SendParticipantEmailModal({
   const [sending, setSending] = useState(false);
   const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);
 
-  // Générer le lien de vote
-  const voteUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/campaigns/${campaign.id}/vote/${participant.id}`;
+  // Générer le lien de vote (utiliser uniquement le lien court)
+  const voteUrl = participant.short_id 
+    ? `${typeof window !== 'undefined' ? window.location.origin : ''}/v/${participant.short_id}`
+    : `${typeof window !== 'undefined' ? window.location.origin : ''}/v/EN_ATTENTE`;
 
   // Initialiser le message par défaut quand le modal s'ouvre
   useEffect(() => {