chordia-ui 3.2.0 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/login/LoginPage.jsx

@@ -157,6 +157,7 @@ export default function LoginPage({
   onGoToLogin,
   loading: externalLoading,
   error: externalError,
+  codeError,
   defaultView = 'signin',
 }) {
   const [email, setEmail] = useState('');
@@ -166,8 +167,9 @@ export default function LoginPage({
   const [internalError, setInternalError] = useState(null);
   const [view, setView] = useState(defaultView);
   const [codeEmail, setCodeEmail] = useState('');
+  const [codeFullName, setCodeFullName] = useState('');
   const [verifyEmail, setVerifyEmail] = useState('');
-  const [otpDigits, setOtpDigits] = useState(['', '', '', '']);
+  const [otpDigits, setOtpDigits] = useState(['', '', '', '', '', '']);
   const otpRefs = useRef([]);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -185,9 +187,56 @@ export default function LoginPage({
     return () => clearInterval(t);
   }, []);
 
+  // Sync React state with browser autofill (autofill doesn't fire onChange)
+  const emailRef = useRef(null);
+  const passwordRef = useRef(null);
+  const [autofilled, setAutofilled] = useState(false);
+  useEffect(() => {
+    const sync = () => {
+      const e = emailRef.current;
+      const p = passwordRef.current;
+      if (e && e.value) setEmail(e.value);
+      if (p && p.value) setPassword(p.value);
+    };
+    // Poll for autofill values at multiple intervals
+    const timers = [100, 300, 600, 1000, 2000].map(ms => setTimeout(sync, ms));
+
+    // Detect Chrome/Safari autofill via the :-webkit-autofill animation
+    const handleAnimationStart = (e) => {
+      if (e.animationName === 'onAutoFillStart' || e.target.matches(':-webkit-autofill')) {
+        setAutofilled(true);
+        setTimeout(sync, 50);
+      }
+    };
+    const eEl = emailRef.current;
+    const pEl = passwordRef.current;
+    eEl?.addEventListener('animationstart', handleAnimationStart);
+    pEl?.addEventListener('animationstart', handleAnimationStart);
+    // Also listen for input/change events that some password managers fire
+    const onInput = () => setTimeout(sync, 0);
+    eEl?.addEventListener('input', onInput);
+    pEl?.addEventListener('input', onInput);
+
+    return () => {
+      timers.forEach(clearTimeout);
+      eEl?.removeEventListener('animationstart', handleAnimationStart);
+      pEl?.removeEventListener('animationstart', handleAnimationStart);
+      eEl?.removeEventListener('input', onInput);
+      pEl?.removeEventListener('input', onInput);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Switch to full-name screen when host app signals unregistered email
+  useEffect(() => {
+    if (codeError && view === 'verifycode') {
+      setOtpDigits(['', '', '', '', '', '']);
+      setView('getcodewithname');
+    }
+  }, [codeError]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const loading = externalLoading ?? internalLoading;
   const error = externalError ?? internalError;
-  const canSubmit = email && password && !loading;
+  const canSubmit = (email && password && !loading) || (autofilled && !loading);
 
   // Error-aware focus handlers for sign-in fields
   const focusErr = (e) => {
@@ -204,7 +253,7 @@ export default function LoginPage({
     const next = [...otpDigits];
     next[index] = digit;
     setOtpDigits(next);
-    if (digit && index < 3) otpRefs.current[index + 1]?.focus();
+    if (digit && index < 5) otpRefs.current[index + 1]?.focus();
   };
 
   const handleOtpKeyDown = (index, e) => {
@@ -216,10 +265,14 @@ export default function LoginPage({
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!canSubmit) return;
+    // Read directly from DOM if React state missed autofill
+    const submitEmail = email || emailRef.current?.value || '';
+    const submitPassword = password || passwordRef.current?.value || '';
+    if (!submitEmail || !submitPassword) return;
     setInternalError(null);
     setInternalLoading(true);
     try {
-      await onLogin?.(email, password);
+      await onLogin?.(submitEmail, submitPassword);
     } catch (err) {
       setInternalError(err?.message || 'Something went wrong. Please try again.');
     } finally {
@@ -462,7 +515,7 @@ export default function LoginPage({
 
               <div style={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 16 }}>
                 <Field label="Enter one-time code" gap={12}>
-                  <div style={{ display: 'flex', gap: 12 }}>
+                  <div style={{ display: 'flex', gap: 8 }}>
                     {otpDigits.map((digit, i) => (
                       <input key={i} ref={(el) => { otpRefs.current[i] = el; }}
                         type="text" inputMode="numeric" maxLength={1} value={digit}
@@ -470,9 +523,9 @@ export default function LoginPage({
                         onKeyDown={(e) => handleOtpKeyDown(i, e)}
                         autoFocus={i === 0}
                         style={{
-                          width: 72, height: 72, textAlign: 'center', fontSize: 24, fontWeight: 600,
+                          flex: 1, minWidth: 0, height: 40, textAlign: 'center', fontSize: 16, fontWeight: 600,
                           fontFamily: FF, color: 'var(--color-text)', border: '1px solid var(--color-input-border)',
-                          borderRadius: 8, outline: 'none', background: 'white', boxSizing: 'border-box',
+                          borderRadius: 4, outline: 'none', background: 'white', boxSizing: 'border-box',
                           transition: 'border-color 0.15s, box-shadow 0.15s', caretColor: GREEN,
                         }}
                         onFocus={focusGreen} onBlur={blurGray}
@@ -491,7 +544,7 @@ export default function LoginPage({
             </>
 
           ) : view === 'getcode' ? (
-            /* ── Get Code ── */
+            /* ── Get Code (original — email only) ── */
             <>
               <ViewHeading title="Get code" subtitle="We'll send a one time pass-code to your email" />
               <div style={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 16 }}>
@@ -501,7 +554,7 @@ export default function LoginPage({
                     style={inputBase} onFocus={focusGreen} onBlur={blurGray} />
                 </Field>
 
-                <GreenButton onClick={() => { setVerifyEmail(codeEmail); setOtpDigits(['', '', '', '']); setView('verifycode'); onOneTimeCode?.(codeEmail); }} disabled={!codeEmail}>
+                <GreenButton onClick={() => { setVerifyEmail(codeEmail); setOtpDigits(['', '', '', '', '', '']); setView('verifycode'); onOneTimeCode?.(codeEmail); }} disabled={!codeEmail}>
                   Send One-time Code
                 </GreenButton>
                 <Divider />
@@ -510,6 +563,53 @@ export default function LoginPage({
               </div>
             </>
 
+          ) : view === 'getcodewithname' ? (
+            /* ── Get Code with Full Name (unregistered email) ── */
+            <>
+              <ViewHeading title="Complete your sign in" subtitle="We’ve sent a one-time code to your email. Please enter the code and your full name to sign in" />
+              <div style={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 16 }}>
+               
+                <Field label="Email" gap={12}>
+                  <input type="email" value={codeEmail} onChange={(e) => setCodeEmail(e.target.value)}
+                    placeholder="workemail@example.com" autoComplete="email"
+                    style={inputBase} onFocus={focusGreen} onBlur={blurGray} />
+                </Field>
+
+                <Field label="Full Name" gap={12}>
+                  <input type="text" value={codeFullName} onChange={(e) => setCodeFullName(e.target.value)}
+                    placeholder="Enter your full name" autoComplete="name"
+                    style={inputBase} onFocus={focusGreen} onBlur={blurGray} />
+                </Field>
+
+                <Field label="Enter one-time code" gap={12}>
+                  <div style={{ display: 'flex', gap: 8 }}>
+                    {otpDigits.map((digit, i) => (
+                      <input key={i} ref={(el) => { otpRefs.current[i] = el; }}
+                        type="text" inputMode="numeric" maxLength={1} value={digit}
+                        onChange={(e) => handleOtpChange(i, e.target.value)}
+                        onKeyDown={(e) => handleOtpKeyDown(i, e)}
+                        autoFocus={i === 0}
+                        style={{
+                          flex: 1, minWidth: 0, height: 40, textAlign: 'center', fontSize: 16, fontWeight: 600,
+                          fontFamily: FF, color: 'var(--color-text)', border: '1px solid var(--color-input-border)',
+                          borderRadius: 4, outline: 'none', background: 'white', boxSizing: 'border-box',
+                          transition: 'border-color 0.15s, box-shadow 0.15s', caretColor: GREEN,
+                        }}
+                        onFocus={focusGreen} onBlur={blurGray}
+                      />
+                    ))}
+                  </div>
+                </Field>
+
+                <GreenButton onClick={() => { setVerifyEmail(codeEmail); onOneTimeCode?.(codeEmail, codeFullName, otpDigits.join('')); }} disabled={!codeEmail || !codeFullName || otpDigits.some(d => !d)}>
+                  Verify & Sign In
+                </GreenButton>
+                <Divider />
+                <NavRow text="I have my password" linkText="Back to Sign in" onClick={() => { setView('signin'); onGoToLogin?.(); }} />
+                <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={40} />
+              </div>
+            </>
+
           ) : view === 'resetpassword' ? (
             /* ── Reset Password ── */
             <>
@@ -539,7 +639,7 @@ export default function LoginPage({
 
                   <form onSubmit={handleSubmit} style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
                     <Field label="Email" gap={12}>
-                      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
+                      <input ref={emailRef} type="email" value={email} onChange={(e) => setEmail(e.target.value)}
                         placeholder="workemail@example.com" required autoComplete="email"
                         style={{ ...inputBase, border: `1px solid ${error ? 'var(--color-text)' : 'var(--color-input-border)'}` }}
                         onFocus={focusErr} onBlur={blurErr} />
@@ -547,7 +647,7 @@ export default function LoginPage({
 
                     <Field label="Password" gap={12}>
                       <div style={{ position: 'relative' }}>
-                        <input type={showPassword ? 'text' : 'password'} value={password}
+                        <input ref={passwordRef} type={showPassword ? 'text' : 'password'} value={password}
                           onChange={(e) => setPassword(e.target.value)}
                           placeholder="Enter password" required autoComplete="current-password"
                           style={{ ...inputBase, padding: '10px 44px 10px 16px', border: `1px solid ${error ? 'var(--color-text)' : 'var(--color-input-border)'}` }}
@@ -588,7 +688,7 @@ export default function LoginPage({
                 </div>
 
                 <NavRow text="Not a member yet?" linkText="Sign Up" onClick={() => { setView('signup'); onSignUp?.(); }} />
-                <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={6} />
+                <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={16} />
               </div>
             </div>
           )}