[ice] add PIN auth: 2-step name+last4 login gate against groomsmen list

2026-04-30 18:21:03 -07:00
parent 1926839a4b
commit cf13c71132
3 changed files with 251 additions and 0 deletions
--- a/client/src/components/NameModal.jsx
+++ b/client/src/components/NameModal.jsx
@@ -0,0 +1,107 @@
+import { useState, useEffect, useRef } from 'react'
+import { GROOMSMEN, validateGroomsman } from '../groommen'
+import './NameModal.css'
+
+const STORAGE_KEY_PIN = 'cabo_voter_pin'
+
+export default function NameModal({ onSubmit }) {
+  const [name, setName] = useState('')
+  const [pin, setPin] = useState('')
+  const [error, setError] = useState('')
+  const [step, setStep] = useState(1) // 1 = name, 2 = pin
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    if (step === 1) inputRef.current?.focus()
+  }, [step])
+
+  const handleNameNext = (e) => {
+    e.preventDefault()
+    if (!name.trim()) return
+
+    const key = name.trim().toLowerCase().replace(/\s+/g, '')
+    if (!GROOMSMEN[key]) {
+      setError(`"${name}" is not on the guest list. Check with the groom.`)
+      return
+    }
+    setError('')
+    setStep(2)
+    // Pre-fill pin from localStorage if saved
+    const saved = localStorage.getItem(STORAGE_KEY_PIN)
+    if (saved) setPin(saved)
+  }
+
+  const handlePinSubmit = (e) => {
+    e.preventDefault()
+    if (pin.length !== 4) {
+      setError('Enter the last 4 digits of your phone number.')
+      return
+    }
+
+    const key = name.trim().toLowerCase().replace(/\s+/g, '')
+    if (!validateGroomsman(name, pin)) {
+      setError('Wrong PIN. Make sure you\'re using the correct name + last 4 digits.')
+      return
+    }
+
+    localStorage.setItem(STORAGE_KEY_PIN, pin)
+    onSubmit(name.trim())
+  }
+
+  const handleBack = () => {
+    setStep(1)
+    setPin('')
+    setError('')
+  }
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal">
+        <div className="drag-handle"></div>
+
+        {step === 1 ? (
+          <>
+            <h2>🏄 Who's Voting?</h2>
+            <p>Enter your <strong>full name</strong> as it appears on the guest list.</p>
+            <form onSubmit={handleNameNext}>
+              <input
+                ref={inputRef}
+                type="text"
+                value={name}
+                onChange={e => { setName(e.target.value); setError('') }}
+                placeholder="e.g. Jon, Toph, Hans…"
+                maxLength={30}
+                autoComplete="off"
+                autoCapitalize="words"
+              />
+              {error && <div className="name-error">{error}</div>}
+              <button type="submit" disabled={!name.trim()}>Next →</button>
+            </form>
+          </>
+        ) : (
+          <>
+            <h2>🔐 Verify with PIN</h2>
+            <p>Enter the <strong>last 4 digits</strong> of your phone number, {name.split(' ')[0]}.</p>
+            <form onSubmit={handlePinSubmit}>
+              <input
+                ref={inputRef}
+                type="password"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={4}
+                value={pin}
+                onChange={e => { setPin(e.target.value.replace(/\D/g, '')); setError('') }}
+                placeholder="••••"
+                autoComplete="off"
+                className="pin-input"
+              />
+              {error && <div className="name-error">{error}</div>}
+              <button type="submit" disabled={pin.length !== 4}>Join the Vote →</button>
+              <button type="button" className="back-btn" onClick={handleBack}>← Back</button>
+            </form>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}