/* global React, Icons, Button, Badge, cn, useState, useEffect, useRef, useLang */ /* ============================================================ AUTH KIT — shared building blocks for Login & Sign-up so the two pages stay perfectly consistent (same fields, states, marketing aside, validation rules). Loaded BEFORE pages-auth / pages-signup. Front-end mock: there is no server. "Loading" states are simulated with a short timer so every button has a real pending affordance, and validation is real (email shape, password strength) to make the forms behave like the shipping product. ============================================================ */ /* ---- bilingual strings ---- */ const AUTH_T = { fr: { orEmail: "ou avec votre email", sso: "SSO Entreprise", ssoBtn: "Se connecter avec le SSO", continueWith: (p) => `Continuer avec ${p}`, signupWith: (p) => `S'inscrire avec ${p}`, email: "Email", emailPh: "nom@entreprise.com", emailErr: "Entrez une adresse email valide.", password: "Mot de passe", passwordPh: "Votre mot de passe", createPassword: "Créer un mot de passe", createPasswordPh: "8 caractères minimum", show: "Afficher le mot de passe", hide: "Masquer le mot de passe", firstName: "Prénom", firstNamePh: "Camille", firstNameErr: "Indiquez votre prénom.", forgot: "Mot de passe oublié ?", remember: "Se souvenir de moi", pwWeak: "Faible", pwMedium: "Moyen", pwStrong: "Fort", pwHint: "8+ caractères, avec chiffres et majuscules pour un mot de passe fort.", legalPre: "En continuant, vous acceptez nos ", terms: "Conditions", and: " et notre ", privacy: "Politique de confidentialité", dot: ".", aside: { loginBadge: "Bon retour", loginTitle: ["Votre temps,", "intelligemment."], loginSub: "Une seule app pour vos agendas, tâches, habitudes et objectifs. Pensée pour celles et ceux qui veulent reprendre le contrôle.", signupBadge: "Accès anticipé", signupTitle: ["Commencez en", "deux minutes."], signupSub: "Créez votre compte et laissez DPM bâtir votre première semaine — autour de votre énergie, pas contre elle.", features: [ { i: "Calendar", t: "Multi-agenda", d: "Google · Outlook · Apple" }, { i: "Target", t: "Focus & Pomodoro", d: "Sessions guidées" }, { i: "Heart", t: "Énergie", d: "S'adapte à votre rythme" }, { i: "BarChart", t: "Statistiques", d: "Vos métriques privées" }, ], proof: [ { v: "12 000+", l: "agendas planifiés" }, { v: "4,9/5", l: "note moyenne" }, { v: "92 %", l: "gardent leur série" }, ], quote: "« En deux minutes le matin, ma journée est posée. Je n'ai jamais autant tenu mes objectifs. »", quoteName: "Sofia R. · Fondatrice", secure: "Chiffrement AES-256 · Conforme RGPD", }, }, en: { orEmail: "or with your email", sso: "Enterprise SSO", ssoBtn: "Sign in with SSO", continueWith: (p) => `Continue with ${p}`, signupWith: (p) => `Sign up with ${p}`, email: "Email", emailPh: "name@company.com", emailErr: "Enter a valid email address.", password: "Password", passwordPh: "Your password", createPassword: "Create a password", createPasswordPh: "At least 8 characters", show: "Show password", hide: "Hide password", firstName: "First name", firstNamePh: "Camille", firstNameErr: "Tell us your first name.", forgot: "Forgot password?", remember: "Remember me", pwWeak: "Weak", pwMedium: "Medium", pwStrong: "Strong", pwHint: "8+ characters, with numbers and capitals for a strong password.", legalPre: "By continuing, you agree to our ", terms: "Terms", and: " and ", privacy: "Privacy Policy", dot: ".", aside: { loginBadge: "Welcome back", loginTitle: ["Manage your time", "intelligently."], loginSub: "One app for your calendars, tasks, habits and goals. Built for people who want to take back control.", signupBadge: "Early access", signupTitle: ["Get started in", "two minutes."], signupSub: "Create your account and let DPM build your first week — around your energy, not against it.", features: [ { i: "Calendar", t: "Multi-calendar", d: "Google · Outlook · Apple" }, { i: "Target", t: "Focus & Pomodoro", d: "Guided sessions" }, { i: "Heart", t: "Energy", d: "Adapts to your rhythm" }, { i: "BarChart", t: "Insights", d: "Your private metrics" }, ], proof: [ { v: "12,000+", l: "calendars planned" }, { v: "4.9/5", l: "average rating" }, { v: "92%", l: "keep their streak" }, ], quote: "“Two minutes each morning and my day is set. I've never hit my goals so consistently.”", quoteName: "Sofia R. · Founder", secure: "AES-256 encryption · GDPR-compliant", }, }, }; function useAuthT() { const lang = (typeof useLang === "function") ? useLang() : "fr"; return [AUTH_T[lang === "fr" ? "fr" : "en"], lang]; } /* ---- validation helpers ---- */ function emailValid(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(String(v || "").trim()); } /* 0 none · 1 weak · 2 medium · 3 strong */ function passwordScore(v) { const s = String(v || ""); if (!s) return 0; let pts = 0; if (s.length >= 8) pts++; if (s.length >= 12) pts++; if (/[0-9]/.test(s)) pts++; if (/[A-Z]/.test(s)) pts++; if (/[^A-Za-z0-9]/.test(s)) pts++; if (s.length < 6) return 1; if (pts <= 2) return 1; if (pts === 3) return 2; return 3; } /* ---- spinner (inline, currentColor) ---- */ function Spinner({ size = 16 }) { return ( ); } /* ---- labelled field wrapper with error slot ---- */ function Field({ id, label, error, children, hint }) { return (
{children} {error ?

{error}

: hint ?

{hint}

: null}
); } /* ---- text input that matches the design system, with optional left icon ---- NOTE: we build the spread object manually and delete icon/invalid rather than relying on `{...rest}` destructuring — the in-browser Babel + JSX instrumentation here does not reliably strip renamed/rest props, which leaked `icon`/`invalid` onto the DOM . Explicit deletion is bulletproof. */ function AuthInput(allProps) { const Icon = allProps.icon; const invalid = allProps.invalid; const className = allProps.className || ""; const rest = Object.assign({}, allProps); delete rest.icon; delete rest.invalid; delete rest.className; return (
{Icon ? : null}
); } /* ---- password field: left lock, show/hide toggle, optional strength meter ---- */ function PasswordField({ id, value, onChange, placeholder, autoComplete = "current-password", invalid, withMeter = false }) { const [show, setShow] = useState(false); const [T] = useAuthT(); const score = passwordScore(value); const labels = [null, T.pwWeak, T.pwMedium, T.pwStrong]; const colors = [null, "0 84% 60%", "38 92% 55%", "142 70% 48%"]; return (
{withMeter && value && (
{[1, 2, 3].map(i => ( ))}
{labels[score]}
)}
); } /* ---- social button with per-button loading state ---- */ function OAuthButton({ icon, label, loading = false, disabled = false, onClick }) { return ( ); } /* ---- shared marketing aside (right pane) ---- */ function AuthAside({ variant = "login" }) { const [T] = useAuthT(); const a = T.aside; const isSignup = variant === "signup"; const title = isSignup ? a.signupTitle : a.loginTitle; return (
{isSignup ? a.signupBadge : a.loginBadge}

{title[0]}
{title[1]}

{isSignup ? a.signupSub : a.loginSub}

{isSignup ? ( <> {/* social proof metrics */}
{a.proof.map((p, i) => (
{p.v}
{p.l}
))}
{/* short testimonial */}
{[0,1,2,3,4].map(s => )}

{a.quote}

SR {a.quoteName}
) : (
{a.features.map(f => (
{React.createElement(Icons[f.i] || Icons.Calendar, { size: 18, className: "mb-2" })}
{f.t}
{f.d}
))}
)}
{a.secure}
); } /* ---- legal line shared by both forms ---- */ function AuthLegalLine({ onLegal }) { const [T] = useAuthT(); return (

{T.legalPre} {T.and} {T.dot}

); } Object.assign(window, { AUTH_T, useAuthT, emailValid, passwordScore, Spinner, Field, AuthInput, PasswordField, OAuthButton, AuthAside, AuthLegalLine, });