Modification des pages d'authentification

frontend/src/pages/Register.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext.jsx';
 
@@ -8,40 +8,257 @@ export default function Register() {
   const [form, setForm] = useState({ email: '', password: '', displayName: '' });
   const [err, setErr] = useState(null);
   const [busy, setBusy] = useState(false);
+  const [appInfo, setAppInfo] = useState({ appName: 'Crowdlending Tracker', iconUrl: null });
+
+  useEffect(() => {
+    fetch('/api/app-info')
+      .then(r => r.json())
+      .then(d => setAppInfo(d))
+      .catch(() => {});
+  }, []);
 
   const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
 
+  const [verifyEmail, setVerifyEmail] = useState(null); // email à vérifier
+
   const submit = async (e) => {
     e.preventDefault();
     setErr(null); setBusy(true);
     try {
-      await register(form.email, form.password, form.displayName || undefined);
-      navigate('/');
+      const result = await register(form.email, form.password, form.displayName || undefined);
+      if (result?.requiresVerification) {
+        setVerifyEmail(result.email);
+      } else {
+        navigate('/');
+      }
     } catch (e) { setErr(e.message); }
     finally { setBusy(false); }
   };
 
   return (
-    <div className="login-shell">
-      <form className="card login-card" onSubmit={submit}>
-        <h2 style={{ marginTop: 0 }}>Créer un compte</h2>
-        {err && <div className="error">{err}</div>}
-        <label>Nom d'affichage</label>
-        <input value={form.displayName} onChange={set('displayName')} placeholder="Olivier" />
-        <div style={{ height: 10 }} />
-        <label>Email</label>
-        <input type="email" required value={form.email} onChange={set('email')} />
-        <div style={{ height: 10 }} />
-        <label>Mot de passe (8 car. min.)</label>
-        <input type="password" required minLength={8} value={form.password} onChange={set('password')} />
-        <div style={{ height: 16 }} />
-        <button className="primary" type="submit" disabled={busy} style={{ width: '100%' }}>
-          {busy ? '…' : 'Créer le compte'}
-        </button>
-        <p className="text-muted" style={{ marginTop: 16, textAlign: 'center' }}>
-          Déjà inscrit ? <Link to="/login">Se connecter</Link>
-        </p>
-      </form>
+    <div style={{ display: 'flex', minHeight: '100dvh' }}>
+
+      {/* ── Colonne gauche — image ───────────────────────────── */}
+      <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, flexShrink: 0 }} />
+          )}
+          <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.3px' }}>
+            {appInfo.appName}
+          </span>
+        </div>
+      </div>
+
+      {/* ── Colonne droite — formulaire ──────────────────────── */}
+      <div style={{
+        flex: '1 1 50%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '48px 24px',
+        background: 'var(--background, #fff)',
+        minWidth: 0,
+      }}>
+
+        {/* Logo + nom */}
+        <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 }}>
+
+          {/* ── Écran vérification email ── */}
+          {verifyEmail ? (
+            <div style={{ textAlign: 'center' }}>
+              <div style={{
+                width: 56, height: 56, borderRadius: '50%',
+                background: 'var(--primary-bg, #eff6ff)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                margin: '0 auto 20px',
+              }}>
+                <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
+                  <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                    stroke="var(--primary, #1e40af)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+              </div>
+              <h1 style={{ margin: '0 0 10px', fontSize: 22, fontWeight: 700, color: 'var(--text)' }}>
+                Vérifiez votre email
+              </h1>
+              <p style={{ margin: '0 0 6px', color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.6 }}>
+                Un email de vérification a été envoyé à
+              </p>
+              <p style={{ margin: '0 0 24px', fontWeight: 600, color: 'var(--text)', fontSize: 14 }}>
+                {verifyEmail}
+              </p>
+              <p style={{ margin: '0 0 28px', color: 'var(--text-muted)', fontSize: 13, lineHeight: 1.6 }}>
+                Cliquez sur le lien dans l'email pour activer votre compte. Vérifiez aussi vos spams.
+              </p>
+              <Link to="/login" style={{
+                display: 'block', width: '100%', padding: '11px 0',
+                background: 'var(--primary, #1e40af)', color: '#fff',
+                borderRadius: 8, fontSize: 15, fontWeight: 600,
+                textDecoration: 'none', textAlign: 'center',
+              }}>
+                Retour à la connexion
+              </Link>
+            </div>
+          ) : (
+          <>
+
+          {/* En-tête */}
+          <div style={{ marginBottom: 28 }}>
+            <h1 style={{
+              margin: '0 0 6px',
+              fontSize: 26, fontWeight: 700,
+              letterSpacing: '-0.5px',
+              color: 'var(--text)',
+            }}>
+              Créer un compte
+            </h1>
+            <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 14 }}>
+              Rejoignez {appInfo.appName}
+            </p>
+          </div>
+
+          {/* Formulaire */}
+          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+
+            {err && (
+              <div style={{
+                padding: '10px 14px', borderRadius: 8, fontSize: 14,
+                background: 'var(--danger-bg, #fef2f2)',
+                color: 'var(--danger, #dc2626)',
+                border: '1px solid var(--danger-light, #fca5a5)',
+              }}>
+                {err}
+              </div>
+            )}
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
+                Nom d'affichage
+              </label>
+              <input
+                className="form-input"
+                type="text"
+                autoComplete="name"
+                placeholder="Olivier"
+                value={form.displayName}
+                onChange={set('displayName')}
+                style={{ width: '100%' }}
+              />
+            </div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
+                Adresse email
+              </label>
+              <input
+                className="form-input"
+                type="email" required
+                autoComplete="email"
+                placeholder="vous@exemple.com"
+                value={form.email}
+                onChange={set('email')}
+                style={{ width: '100%' }}
+              />
+            </div>
+
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
+                Mot de passe <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>(8 car. min.)</span>
+              </label>
+              <input
+                className="form-input"
+                type="password" required
+                minLength={8}
+                autoComplete="new-password"
+                placeholder="••••••••"
+                value={form.password}
+                onChange={set('password')}
+                style={{ width: '100%' }}
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={busy}
+              style={{
+                marginTop: 4, width: '100%',
+                padding: '11px 0',
+                background: busy ? 'var(--text-muted)' : 'var(--primary, #1e40af)',
+                color: '#fff',
+                border: 'none', borderRadius: 8,
+                fontSize: 15, fontWeight: 600,
+                cursor: busy ? 'not-allowed' : 'pointer',
+                transition: 'background 0.15s',
+              }}
+            >
+              {busy ? 'Création…' : 'Créer le compte'}
+            </button>
+
+          </form>
+
+          <p style={{
+            marginTop: 24, textAlign: 'center',
+            fontSize: 13, color: 'var(--text-muted)',
+          }}>
+            Déjà inscrit ?{' '}
+            <Link to="/login" style={{
+              color: 'var(--text)', fontWeight: 500, textDecoration: 'underline',
+            }}>
+              Se connecter
+            </Link>
+          </p>
+
+          </>)} {/* fin verifyEmail ternaire */}
+        </div>
+      </div>
+
+      <style>{`
+        @media (min-width: 768px) {
+          .login-bg-col { display: block !important; }
+        }
+      `}</style>
     </div>
   );
 }