)}
{/* Family members — page link to the dedicated screen for adding /
editing the people on your roster. Same screen the inviter and
spouse share, so updates are visible to both managers. */}
{onManageFamily && (
)}
{/* Family / Co-managers — visible to every signed-in user. Individual
accounts get auto-promoted to a family the moment they invite a
spouse, so this entry point belongs at the top of Account. */}
{open === 'password' && (
)}
Passkeys · 通行密鑰
{user.passkeyCount > 0
? `${user.passkeyCount} passkey${user.passkeyCount === 1 ? '' : 's'} registered on your devices`
: 'Skip passwords by adding a passkey to this device'}
{supportsPasskey && (
)}
);
}
function rowBtnStyle(active) {
return {
width: '100%',
display: 'flex', alignItems: 'center', gap: 12,
padding: '14px 16px',
background: 'transparent', border: 'none',
fontFamily: 'inherit', cursor: 'pointer',
color: 'var(--fg-1)',
};
}
// ─────────────────────────────────────────────────────────────
// Screen: FAMILY MEMBERS — manage everyone in your family.
// Reachable from Today via "Manage family · 管理家庭".
// Both managing users (typically father+mother) see + edit the same list.
// ─────────────────────────────────────────────────────────────
function ScreenFamilyMembers({ onBack, congregations = [], showToast }) {
const congList = congregations.length > 0 ? congregations : (D.congregations || []);
const [members, setMembers] = useState(null); // null = loading
const [editing, setEditing] = useState(null); // member object or 'new'
const [error, setError] = useState(null);
const refresh = async () => {
setError(null);
try {
const list = await window.BHCAC_API.listFamilyMembers();
setMembers(Array.isArray(list) ? list : (list?.members || []));
} catch (err) {
setError(err.message);
setMembers([]);
}
};
useEffect(() => { refresh(); }, []);
const handleSave = async (form) => {
if (editing && editing !== 'new' && editing.id) {
const updated = await window.BHCAC_API.updateFamilyMember(editing.id, form);
// Backend returns the bare member object.
const m = updated?.member || updated || {};
setMembers(ms => (ms || []).map(x => x.id === editing.id ? { ...x, ...m } : x));
showToast?.(`Updated ${m.en || form.en} · 已更新`);
} else {
const created = await window.BHCAC_API.addFamilyMember(form);
const m = created?.member || created || {};
setMembers(ms => [...(ms || []), m]);
showToast?.(`Added ${m.en || form.en} · 已加入`);
}
setEditing(null);
};
const handleDelete = async (m) => {
if (!window.confirm(`Remove ${m.en} from your family? · 確定移除？`)) return;
try {
await window.BHCAC_API.deleteFamilyMember(m.id);
setMembers(ms => (ms || []).filter(x => x.id !== m.id));
showToast?.(`${m.en} removed · 已移除`);
} catch (err) {
showToast?.(`Delete failed: ${err.message}`, 'error');
}
};
const list = members || [];
return (
Family · 家庭
Your family
您的家庭成員 — 任何家人帳戶都可以新增或編輯
{error && (
{error}
)}
{members === null ? (
Loading…
) : list.length === 0 ? (
No family members yet · 尚未有家人
Add a family member below to start checking them in together.
);
}
// Settings card: shared family management. Shows current co-managers
// (other accounts on the same family_id) + pending invites + a form to
// invite a spouse (or replace an outstanding one). Visible to every
// signed-in user — individual accounts see the same form and get
// auto-promoted to a family the moment they submit one.
function CoManagerCard({ userEmail, userFamilyId }) {
const [state, setState] = useState(null); // { isFamily, coManagers, pendingInvites }
const [email, setEmail] = useState('');
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState(null);
const [success, setSuccess] = useState(null);
const refresh = async () => {
try {
const r = await window.BHCAC_API.familyState();
setState(r);
} catch (err) {
// 401 etc. — fall back to a "not family" view so the form still works.
setState({ familyId: userFamilyId || null, isFamily: !!userFamilyId, coManagers: [], pendingInvites: [] });
}
};
useEffect(() => { refresh(); }, []);
const inputStyle = {
width: '100%', boxSizing: 'border-box',
padding: '12px 14px', borderRadius: 12,
border: '1px solid var(--border-strong)',
background: 'var(--bg-1)', fontSize: 14, fontFamily: 'Inter, sans-serif',
outline: 'none',
};
const submitInvite = async (e) => {
e?.preventDefault?.();
setError(null); setSuccess(null);
const target = email.trim().toLowerCase();
if (!target || !target.includes('@')) { setError('Enter a valid email.'); return; }
if (target === String(userEmail || '').toLowerCase()) { setError("You can't invite yourself."); return; }
setSubmitting(true);
try {
const r = await window.BHCAC_API.inviteSpouse(target);
if (r?.alreadyMember) {
setSuccess('They already belong to your family · 已是家人');
} else if (r?.emailSent === false) {
// Resend rejected or timed out. Tell the inviter honestly so they
// share the copy/share link below instead of waiting on a mail
// that won't arrive.
setError(`Email couldn't be delivered to ${target}. Use the copy/share link below to send it via WhatsApp/SMS. · 電郵未能送達，請使用下方連結分享。`);
} else {
setSuccess(`Invite sent to ${target} · 邀請已寄出`);
}
setEmail('');
await refresh();
} catch (err) {
setError(err.message);
} finally {
setSubmitting(false);
}
};
const revokeInvite = async (target) => {
if (!window.confirm) {
// confirm suppressed in some PWA contexts — proceed without prompting
} else if (!window.confirm(`Cancel the invite to ${target}?`)) {
return;
}
setError(null); setSuccess(null);
try {
await window.BHCAC_API.revokeSpouseInvite(target);
setSuccess(`Invite to ${target} cancelled · 已取消`);
await refresh();
} catch (err) {
setError(err.message);
}
};
const isFamily = state?.isFamily ?? !!userFamilyId;
const coManagers = state?.coManagers || [];
const pendingInvites = state?.pendingInvites || [];
// Existing pending invite (if any) — there's only ever one because the
// invite endpoint revokes prior ones for the same email.
const pending = pendingInvites[0];
return (
Family · 家庭
{isFamily
? 'You and your spouse can both manage attendance · 您與配偶共同管理'
: 'Invite your spouse so you both manage attendance · 邀請配偶共同管理'}
{/* Current co-managers — only shown when there's > 1 */}
{isFamily && coManagers.length > 0 && (
Co-managers · 管理人 ({coManagers.length}/2)
{coManagers.map(cm => (
{cm.en || cm.email}
{cm.isYou && (you)}
{cm.email}
))}
)}
{/* Pending invite — including the copyable link, because email
delivery is unreliable (spam folder, typos, etc.) and most
users will get it to their spouse faster via WhatsApp/SMS. */}
{pending && (
Pending invite · 待接受邀請
{pending.email}
{pending.link && (
We emailed them a link, but emails sometimes get lost. The fastest way is to copy this link below and send it via WhatsApp/SMS:
{/* Native share — if the browser supports it (most mobile do) */}
{typeof navigator !== 'undefined' && navigator.share && (
)}
)}
)}
{/* Invite / re-invite form — always shown unless family is full */}
{coManagers.length < 2 && (
)}
{coManagers.length >= 2 && (
Your family already has the maximum of 2 logins · 家庭已有最多 2 位管理人
)}
Invite link expires in 14 days. {isFamily ? `Family id: ${state?.familyId?.slice(0, 12) || ''}…` : 'A family will be created when you send the first invite.'}
