);
}
// ─── Sign-in screen ────────────────────────────────────────────────────────
function SignInScreen() {
const [loading, setLoading] = useState(false);
const [err, setErr] = useState(() => {
// Show any error that was stored across the redirect
const stored = localStorage.getItem('ours_auth_error');
if (stored) {
localStorage.removeItem('ours_auth_error');
return stored;
}
return '';
});
function handleSignIn() {
setLoading(true); setErr('');
const provider = new firebase.auth.GoogleAuthProvider();
// Prefer popup — it works on desktop Chrome and iOS Safari when called
// synchronously from a click handler (no async/await before this call).
// Redirect is unreliable on iOS PWA standalone mode because ITP clears
// localStorage between the redirect and the return, so getRedirectResult()
// always comes back empty. Only fall back to redirect if popup is blocked.
fbAuth.signInWithPopup(provider)
.catch(e => {
if (e.code === 'auth/popup-blocked') {
// Browser explicitly blocked the popup — fall back to redirect
console.warn('popup blocked, falling back to redirect');
return fbAuth.signInWithRedirect(provider);
}
// Any other error (cancelled, network, etc.) — show it
throw e;
})
.catch(e => {
console.error('sign-in error', e);
setErr('Sign-in failed: ' + (e.message || e.code));
setLoading(false);
});
}
// Clock tick marks
const ticks = [0,30,60,90,120,150,180,210,240,270,300,330].map(deg => {
const major = deg % 90 === 0;
const rad = (deg - 90) * Math.PI / 180;
const r1 = 80, r2 = major ? 70 : 74;
return (
);
});
return (
{[
{ m: 'create', title: 'Create our household', sub: "Start fresh — you'll get an invite code to share" },
{ m: 'join', title: 'Join with a code', sub: 'Your partner already set up — enter their code' },
].map(({ m, title, sub }) => (
))}