Fix

frontend/src/pages/InvitationRegister.jsx

@@ -1,6 +1,30 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 
+// Wrap défini en dehors du composant pour éviter le remontage à chaque frappe
+function Wrap({ appInfo, children }) {
+  return (
+    <div style={{ display: 'flex', minHeight: '100dvh' }}>
+      <div className="login-bg-col" style={{ flex: '1 1 50%', display: 'none', position: 'relative', overflow: 'hidden', background: '#0d0d0d' }}>
+        <img src="/login-bg.jpg" alt="" aria-hidden="true" onError={e => { e.target.style.display = 'none'; }}
+          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }} />
+        <div style={{ position: 'absolute', bottom: 40, left: 40, color: '#fff', display: 'flex', alignItems: 'center', gap: 12 }}>
+          {appInfo.iconUrl && <img src={appInfo.iconUrl} alt="" width={36} height={36} style={{ borderRadius: 8 }} />}
+          <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.3px' }}>{appInfo.appName}</span>
+        </div>
+      </div>
+      <div style={{ flex: '1 1 50%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 24px', background: 'var(--background, #fff)', minWidth: 0 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, marginBottom: 32 }}>
+          {appInfo.iconUrl && <img src={appInfo.iconUrl} alt={appInfo.appName} width={52} height={52} style={{ borderRadius: 12 }} />}
+          <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.4px' }}>{appInfo.appName}</span>
+        </div>
+        <div style={{ width: '100%', maxWidth: 360 }}>{children}</div>
+      </div>
+      <style>{'@media (min-width: 768px) { .login-bg-col { display: block !important; } }'}</style>
+    </div>
+  );
+}
+
 export default function InvitationRegister() {
   const { token }   = useParams();
   const navigate    = useNavigate();
@@ -50,32 +74,10 @@ export default function InvitationRegister() {
     finally { setBusy(false); }
   };
 
-  // ── Layout commun ────────────────────────────────────────────────────────
-  const Wrap = ({ children }) => (
-    <div style={{ display: 'flex', minHeight: '100dvh' }}>
-      <div className="login-bg-col" style={{ flex: '1 1 50%', display: 'none', position: 'relative', overflow: 'hidden', background: '#0d0d0d' }}>
-        <img src="/login-bg.jpg" alt="" aria-hidden="true" onError={e => { e.target.style.display = 'none'; }}
-          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }} />
-        <div style={{ position: 'absolute', bottom: 40, left: 40, color: '#fff', display: 'flex', alignItems: 'center', gap: 12 }}>
-          {appInfo.iconUrl && <img src={appInfo.iconUrl} alt="" width={36} height={36} style={{ borderRadius: 8 }} />}
-          <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.3px' }}>{appInfo.appName}</span>
-        </div>
-      </div>
-      <div style={{ flex: '1 1 50%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 24px', background: 'var(--background, #fff)', minWidth: 0 }}>
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, marginBottom: 32 }}>
-          {appInfo.iconUrl && <img src={appInfo.iconUrl} alt={appInfo.appName} width={52} height={52} style={{ borderRadius: 12 }} />}
-          <span style={{ fontSize: 20, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.4px' }}>{appInfo.appName}</span>
-        </div>
-        <div style={{ width: '100%', maxWidth: 360 }}>{children}</div>
-      </div>
-      <style>{`@media (min-width: 768px) { .login-bg-col { display: block !important; } }`}</style>
-    </div>
-  );
-
   // ── Chargement ───────────────────────────────────────────────────────────
   if (status === 'loading') {
     return (
-      <Wrap>
+      <Wrap appInfo={appInfo}>
         <p style={{ textAlign: 'center', color: 'var(--text-muted)' }}>Vérification du lien…</p>
       </Wrap>
     );
@@ -84,7 +86,7 @@ export default function InvitationRegister() {
   // ── Lien invalide / expiré ───────────────────────────────────────────────
   if (status === 'invalid') {
     return (
-      <Wrap>
+      <Wrap appInfo={appInfo}>
         <div style={{ textAlign: 'center' }}>
           <div style={{ width: 56, height: 56, borderRadius: '50%', background: '#fef2f2', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
             <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#dc2626" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -104,7 +106,7 @@ export default function InvitationRegister() {
   // ── Succès ───────────────────────────────────────────────────────────────
   if (status === 'done') {
     return (
-      <Wrap>
+      <Wrap appInfo={appInfo}>
         <div style={{ textAlign: 'center' }}>
           <div style={{ width: 56, height: 56, borderRadius: '50%', background: '#f0fdf4', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
             <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -127,7 +129,7 @@ export default function InvitationRegister() {
   const roleLabel = inv?.role === 'admin' ? 'Administrateur' : 'Utilisateur';
 
   return (
-    <Wrap>
+    <Wrap appInfo={appInfo}>
       <div style={{ marginBottom: 28 }}>
         <h1 style={{ margin: '0 0 6px', fontSize: 26, fontWeight: 700, letterSpacing: '-0.5px', color: 'var(--text)' }}>
           Finaliser votre inscription