ocroguennec/crowdlending-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix

Browse Source
This commit is contained in:
Olivier
2026-06-15 22:35:03 +02:00
parent a5b4f3e721
commit ceda5bcf1b
1 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/InvitationRegister.jsx
+28 -26
View File
@@ -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