chordia-ui 3.2.1 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.2.1",
+  "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

@@ -190,16 +190,40 @@ export default function LoginPage({
   // 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 && !email) setEmail(e.value);
-      if (p && p.value && !password) setPassword(p.value);
+      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);
     };
-    // Check multiple times as autofill timing varies across browsers
-    const timers = [100, 500, 1000, 2000].map(ms => setTimeout(sync, ms));
-    return () => timers.forEach(clearTimeout);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Switch to full-name screen when host app signals unregistered email
@@ -212,7 +236,7 @@ export default function LoginPage({
 
   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) => {
@@ -241,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 {
@@ -487,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}
@@ -495,9 +523,9 @@ export default function LoginPage({
                         onKeyDown={(e) => handleOtpKeyDown(i, e)}
                         autoFocus={i === 0}
                         style={{
-                          width: 56, height: 56, textAlign: 'center', fontSize: 20, 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}
@@ -554,7 +582,7 @@ export default function LoginPage({
                 </Field>
 
                 <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}
@@ -562,9 +590,9 @@ export default function LoginPage({
                         onKeyDown={(e) => handleOtpKeyDown(i, e)}
                         autoFocus={i === 0}
                         style={{
-                          width: 56, height: 56, textAlign: 'center', fontSize: 20, 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}
@@ -660,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={12} />
+                <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={16} />
               </div>
             </div>
           )}