byGalax
6caa674c19
PostgREST translates .eq('col', null) to `col = NULL` which is always false
in SQL. The migration silently returned zero rows -> setupNewUserIdentity
fired but re-wrapped nothing -> users could set a PIN but every send threw
'Awaiting key'. Switching to .is('col', null) emits `col IS NULL` and the
migration finally finds its work.
Also makes the migration trigger idempotent and re-fires it on:
- every successful loadOrUnlockUserKey
- AuthContext startup when the user-key is already cached
so users stuck on 0.18.0 auto-recover the moment they install 0.18.1.
PinInput: focused + active-slot now show a brand-coloured ring, glow, and
a blinking caret so users see where the next keystroke lands.
64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
|
|
interface Props {
|
|
value: string;
|
|
onChange: (next: string) => void;
|
|
length?: number;
|
|
autoFocus?: boolean;
|
|
disabled?: boolean;
|
|
ariaLabel: string;
|
|
onSubmit?: () => void;
|
|
}
|
|
|
|
export function PinInput({ value, onChange, length = 6, autoFocus, disabled, ariaLabel, onSubmit }: Props) {
|
|
const ref = useRef<HTMLInputElement | null>(null);
|
|
const [focused, setFocused] = useState(false);
|
|
useEffect(() => { if (autoFocus) ref.current?.focus(); }, [autoFocus]);
|
|
// Index of the next empty slot the next keystroke will fill. When the user
|
|
// has typed all `length` digits, no slot is "active" — the form should
|
|
// submit instead of pretending one is still focused.
|
|
const activeIndex = value.length < length ? value.length : -1;
|
|
return (
|
|
<div className="relative flex justify-center" onClick={() => ref.current?.focus()}>
|
|
<input
|
|
ref={ref}
|
|
aria-label={ariaLabel}
|
|
inputMode="numeric"
|
|
autoComplete="one-time-code"
|
|
pattern="\d*"
|
|
maxLength={length}
|
|
disabled={disabled}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value.replace(/\D/g, '').slice(0, length))}
|
|
onKeyDown={(e) => { if (e.key === 'Enter' && value.length === length) onSubmit?.(); }}
|
|
onFocus={() => setFocused(true)}
|
|
onBlur={() => setFocused(false)}
|
|
className="absolute h-px w-px overflow-hidden p-0 opacity-0"
|
|
/>
|
|
<div className="flex gap-2">
|
|
{Array.from({ length }).map((_, i) => {
|
|
const filled = i < value.length;
|
|
const active = focused && i === activeIndex;
|
|
let classes =
|
|
'flex h-12 w-10 items-center justify-center rounded-lg border text-lg font-semibold transition ';
|
|
if (filled) {
|
|
classes += 'border-brand-400 bg-brand-500/10 text-white';
|
|
} else if (active) {
|
|
// Brand-coloured ring + glow so the user immediately sees where
|
|
// the next keystroke lands. The animated cursor inside reinforces
|
|
// the "input is alive" feeling.
|
|
classes += 'border-brand-400 bg-brand-500/10 text-brand-300 ring-2 ring-brand-400/40 shadow-[0_0_12px_-2px] shadow-brand-500/40';
|
|
} else {
|
|
classes += 'border-white/10 bg-ink-800 text-neutral-500';
|
|
}
|
|
return (
|
|
<span key={i} className={classes}>
|
|
{filled ? '•' : active ? <span className="animate-pulse">|</span> : ''}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|