rick/rosterchirp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.12.51 updated "Mixed Age" login type.

Browse Source
This commit is contained in:
Ricky Stretch
2026-04-02 12:50:50 -04:00
parent 1d4116d1a3
commit 97b308e9f0
9 changed files with 398 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "rosterchirp-backend",
"version": "0.12.50",
"version": "0.12.51",
"description": "RosterChirp backend server",
"main": "src/index.js",
"scripts": {

28
backend/src/routes/groups.js
View File

@@ -190,10 +190,10 @@ router.post('/', authMiddleware, async (req, res) => {
await exec(req.schema, 'INSERT INTO group_members (group_id,user_id) VALUES ($1,$2) ON CONFLICT DO NOTHING', [groupId, userId]);
await exec(req.schema, 'INSERT INTO group_members (group_id,user_id) VALUES ($1,$2) ON CONFLICT DO NOTHING', [groupId, otherUserId]);
// Mixed Age: if the other user is a minor, auto-add their guardian
// Mixed Age: if initiator is not a minor and the other user is a minor, auto-add their guardian
let guardianAdded = false, guardianName = null;
const loginType = await getLoginType(req.schema);
if (loginType === 'mixed_age') {
if (loginType === 'mixed_age' && !req.user.is_minor) {
const otherUserFull = await queryOne(req.schema,
'SELECT is_minor, guardian_user_id FROM users WHERE id=$1', [otherUserId]);
if (otherUserFull?.is_minor && otherUserFull.guardian_user_id) {
@@ -234,6 +234,7 @@ router.post('/', authMiddleware, async (req, res) => {
[name, type||'private', req.user.id, !!isReadonly]
);
const groupId = r.rows[0].id;
const groupGuardianNames = [];
if (type === 'public') {
const allUsers = await query(req.schema, "SELECT id FROM users WHERE status='active'");
for (const u of allUsers) await exec(req.schema, 'INSERT INTO group_members (group_id,user_id) VALUES ($1,$2) ON CONFLICT DO NOTHING', [groupId, u.id]);
@@ -251,9 +252,30 @@ router.post('/', authMiddleware, async (req, res) => {
if (parseInt(totalCount.cnt) >= 3) {
await computeAndStoreComposite(req.schema, groupId);
}
// Mixed Age: auto-add guardians for any minor members (non-minor initiators only)
const groupLoginType = await getLoginType(req.schema);
if (groupLoginType === 'mixed_age' && !req.user.is_minor && memberIds?.length > 0) {
for (const uid of memberIds) {
const memberInfo = await queryOne(req.schema,
'SELECT is_minor, guardian_user_id FROM users WHERE id=$1', [uid]);
if (memberInfo?.is_minor && memberInfo.guardian_user_id && memberInfo.guardian_user_id !== req.user.id) {
await exec(req.schema,
'INSERT INTO group_members (group_id,user_id) VALUES ($1,$2) ON CONFLICT DO NOTHING',
[groupId, memberInfo.guardian_user_id]);
const g = await queryOne(req.schema,
'SELECT name,display_name FROM users WHERE id=$1', [memberInfo.guardian_user_id]);
const gName = g?.display_name || g?.name;
if (gName && !groupGuardianNames.includes(gName)) groupGuardianNames.push(gName);
}
}
}
}
await emitGroupNew(req.schema, io, groupId);
res.json({ group: await queryOne(req.schema, 'SELECT * FROM groups WHERE id=$1', [groupId]) });
res.json({
group: await queryOne(req.schema, 'SELECT * FROM groups WHERE id=$1', [groupId]),
...(groupGuardianNames.length ? { guardianAdded: true, guardianName: groupGuardianNames.join(', ') } : {}),
});
} catch (e) { res.status(500).json({ error: e.message }); }
});

64
backend/src/routes/users.js
View File

@@ -80,18 +80,18 @@ router.get('/search', authMiddleware, async (req, res) => {
const group = await queryOne(req.schema, 'SELECT type, is_direct FROM groups WHERE id = $1', [parseInt(groupId)]);
if (group && (group.type === 'private' || group.is_direct)) {
users = await query(req.schema,
`SELECT u.id,u.name,u.display_name,u.avatar,u.role,u.status,u.hide_admin_tag,u.allow_dm FROM users u JOIN group_members gm ON gm.user_id=u.id AND gm.group_id=$1 WHERE u.status='active' AND u.id!=$2 AND (u.name ILIKE $3 OR u.display_name ILIKE $3) ORDER BY u.name ASC${isTyped ? ' LIMIT 10' : ''}`,
`SELECT u.id,u.name,u.display_name,u.avatar,u.role,u.status,u.hide_admin_tag,u.allow_dm,u.is_minor FROM users u JOIN group_members gm ON gm.user_id=u.id AND gm.group_id=$1 WHERE u.status='active' AND u.id!=$2 AND (u.name ILIKE $3 OR u.display_name ILIKE $3) ORDER BY u.name ASC${isTyped ? ' LIMIT 10' : ''}`,
[parseInt(groupId), req.user.id, `%${q}%`]
);
} else {
users = await query(req.schema,
`SELECT id,name,display_name,avatar,role,status,hide_admin_tag,allow_dm FROM users WHERE status='active' AND id!=$1 AND (name ILIKE $2 OR display_name ILIKE $2) ORDER BY name ASC${isTyped ? ' LIMIT 10' : ''}`,
`SELECT id,name,display_name,avatar,role,status,hide_admin_tag,allow_dm,is_minor FROM users WHERE status='active' AND id!=$1 AND (name ILIKE $2 OR display_name ILIKE $2) ORDER BY name ASC${isTyped ? ' LIMIT 10' : ''}`,
[req.user.id, `%${q}%`]
);
}
} else {
users = await query(req.schema,
`SELECT id,name,display_name,avatar,role,status,hide_admin_tag,allow_dm FROM users WHERE status='active' AND (name ILIKE $1 OR display_name ILIKE $1) ORDER BY name ASC${isTyped ? ' LIMIT 10' : ''}`,
`SELECT id,name,display_name,avatar,role,status,hide_admin_tag,allow_dm,is_minor FROM users WHERE status='active' AND (name ILIKE $1 OR display_name ILIKE $1) ORDER BY name ASC${isTyped ? ' LIMIT 10' : ''}`,
[`%${q}%`]
);
}
@@ -695,6 +695,64 @@ router.patch('/:id/deny-guardian', authMiddleware, teamManagerMiddleware, async
} catch (e) { res.status(500).json({ error: e.message }); }
});
// List minor players available for this guardian to claim (Mixed Age — Family Manager)
// Returns minors in the players group who either have no guardian yet or are already linked to me.
router.get('/minor-players', authMiddleware, async (req, res) => {
try {
const playersRow = await queryOne(req.schema, "SELECT value FROM settings WHERE key='feature_players_group_id'");
const playersGroupId = parseInt(playersRow?.value);
if (!playersGroupId) return res.json({ users: [] });
const users = await query(req.schema,
`SELECT u.id,u.name,u.first_name,u.last_name,u.date_of_birth,u.avatar,u.status,u.guardian_user_id
FROM users u
JOIN user_group_members ugm ON ugm.user_id=u.id AND ugm.user_group_id=$1
WHERE u.is_minor=TRUE AND u.status!='deleted'
AND (u.guardian_user_id IS NULL OR u.guardian_user_id=$2)
ORDER BY u.first_name,u.last_name`,
[playersGroupId, req.user.id]
);
res.json({ users });
} catch (e) { res.status(500).json({ error: e.message }); }
});
// Claim minor as guardian (Mixed Age — Family Manager direct link, no approval needed)
router.post('/me/guardian-children/:minorId', authMiddleware, async (req, res) => {
const minorId = parseInt(req.params.minorId);
try {
const minor = await queryOne(req.schema, "SELECT * FROM users WHERE id=$1 AND status!='deleted'", [minorId]);
if (!minor) return res.status(404).json({ error: 'User not found' });
if (!minor.is_minor) return res.status(400).json({ error: 'User is not a minor' });
if (minor.guardian_user_id && minor.guardian_user_id !== req.user.id)
return res.status(409).json({ error: 'This minor already has a guardian' });
await exec(req.schema,
"UPDATE users SET guardian_user_id=$1,guardian_approval_required=FALSE,status='active',updated_at=NOW() WHERE id=$2",
[req.user.id, minorId]
);
await addUserToPublicGroups(req.schema, minorId);
const user = await queryOne(req.schema,
'SELECT id,name,first_name,last_name,date_of_birth,avatar,status,guardian_user_id FROM users WHERE id=$1',
[minorId]
);
res.json({ user });
} catch (e) { res.status(500).json({ error: e.message }); }
});
// Remove minor from guardian's list (Mixed Age — re-suspends the minor)
router.delete('/me/guardian-children/:minorId', authMiddleware, async (req, res) => {
const minorId = parseInt(req.params.minorId);
try {
const minor = await queryOne(req.schema, 'SELECT * FROM users WHERE id=$1', [minorId]);
if (!minor) return res.status(404).json({ error: 'User not found' });
if (minor.guardian_user_id !== req.user.id)
return res.status(403).json({ error: 'You are not the guardian of this user' });
await exec(req.schema,
"UPDATE users SET guardian_user_id=NULL,status='suspended',updated_at=NOW() WHERE id=$1",
[minorId]
);
res.json({ success: true });
} catch (e) { res.status(500).json({ error: e.message }); }
});
// Guardian self-link (Mixed Age — user links themselves as guardian of a minor, triggers approval)
router.patch('/me/link-minor/:minorId', authMiddleware, async (req, res) => {
const minorId = parseInt(req.params.minorId);

2
build.sh
View File

@@ -13,7 +13,7 @@
# ─────────────────────────────────────────────────────────────
set -euo pipefail
VERSION="${1:-0.12.50}"
VERSION="${1:-0.12.51}"
ACTION="${2:-}"
REGISTRY="${REGISTRY:-}"
IMAGE_NAME="rosterchirp"

2
frontend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "rosterchirp-frontend",
"version": "0.12.50",
"version": "0.12.51",
"private": true,
"scripts": {
"dev": "vite",

381
frontend/src/components/AddChildAliasModal.jsx
View File

@@ -3,16 +3,25 @@ import { useToast } from '../contexts/ToastContext.jsx';
import { useAuth } from '../contexts/AuthContext.jsx';
import { api } from '../utils/api.js';
export default function AddChildAliasModal({ onClose }) {
export default function AddChildAliasModal({ features = {}, onClose }) {
const toast = useToast();
const { user: currentUser } = useAuth();
const loginType = features.loginType || 'guardian_only';
const isMixedAge = loginType === 'mixed_age';
// ── Guardian-only state (alias form) ──────────────────────────────────────
const [aliases, setAliases] = useState([]);
const [editingAlias, setEditingAlias] = useState(null); // null = new entry
const [editingAlias, setEditingAlias] = useState(null);
const [form, setForm] = useState({ firstName: '', lastName: '', dob: '', phone: '', email: '' });
const [avatarFile, setAvatarFile] = useState(null);
const [saving, setSaving] = useState(false);
// Partner state
// ── Mixed-age state (real minor users) ────────────────────────────────────
const [minorPlayers, setMinorPlayers] = useState([]); // available + already-mine
const [selectedMinorId, setSelectedMinorId] = useState('');
const [addingMinor, setAddingMinor] = useState(false);
// ── Partner state (shared) ────────────────────────────────────────────────
const [partner, setPartner] = useState(null);
const [selectedPartnerId, setSelectedPartnerId] = useState('');
const [respondSeparately, setRespondSeparately] = useState(false);
@@ -20,20 +29,27 @@ export default function AddChildAliasModal({ onClose }) {
const [savingPartner, setSavingPartner] = useState(false);
useEffect(() => {
Promise.all([
api.getAliases(),
api.getPartner(),
api.searchUsers(''),
]).then(([aliasRes, partnerRes, usersRes]) => {
setAliases(aliasRes.aliases || []);
const loads = [api.getPartner(), api.searchUsers('')];
if (isMixedAge) {
loads.push(api.getMinorPlayers());
} else {
loads.push(api.getAliases());
}
Promise.all(loads).then(([partnerRes, usersRes, thirdRes]) => {
const p = partnerRes.partner || null;
setPartner(p);
setSelectedPartnerId(p?.id?.toString() || '');
setRespondSeparately(p?.respond_separately || false);
setAllUsers((usersRes.users || []).filter(u => u.id !== currentUser?.id));
if (isMixedAge) {
setMinorPlayers(thirdRes.users || []);
} else {
setAliases(thirdRes.aliases || []);
}
}).catch(() => {});
}, []);
}, [isMixedAge]);
// ── Helpers ───────────────────────────────────────────────────────────────
const set = k => e => setForm(p => ({ ...p, [k]: e.target.value }));
const resetForm = () => {
@@ -42,6 +58,47 @@ export default function AddChildAliasModal({ onClose }) {
setAvatarFile(null);
};
const lbl = (text, required) => (
<label className="text-sm" style={{ color: 'var(--text-secondary)', display: 'block', marginBottom: 4 }}>
{text}{required && <span style={{ color: 'var(--error)', marginLeft: 2 }}>*</span>}
</label>
);
// ── Partner handlers ──────────────────────────────────────────────────────
const handleSavePartner = async () => {
setSavingPartner(true);
try {
if (!selectedPartnerId) {
await api.removePartner();
setPartner(null);
setRespondSeparately(false);
if (!isMixedAge) {
const { aliases: fresh } = await api.getAliases();
setAliases(fresh || []);
resetForm();
} else {
const { users: fresh } = await api.getMinorPlayers();
setMinorPlayers(fresh || []);
}
toast('Spouse/Partner/Co-Parent removed', 'success');
} else {
const { partner: p } = await api.setPartner(parseInt(selectedPartnerId), respondSeparately);
setPartner(p);
setRespondSeparately(p?.respond_separately || false);
if (!isMixedAge) {
const { aliases: fresh } = await api.getAliases();
setAliases(fresh || []);
}
toast('Spouse/Partner/Co-Parent saved', 'success');
}
} catch (e) {
toast(e.message, 'error');
} finally {
setSavingPartner(false);
}
};
// ── Guardian-only alias handlers ──────────────────────────────────────────
const handleSelectAlias = (a) => {
if (editingAlias?.id === a.id) { resetForm(); return; }
setEditingAlias(a);
@@ -55,33 +112,7 @@ export default function AddChildAliasModal({ onClose }) {
setAvatarFile(null);
};
const handleSavePartner = async () => {
setSavingPartner(true);
try {
if (!selectedPartnerId) {
await api.removePartner();
setPartner(null);
setRespondSeparately(false);
const { aliases: fresh } = await api.getAliases();
setAliases(fresh || []);
resetForm();
toast('Spouse/Partner/Co-Parent removed', 'success');
} else {
const { partner: p } = await api.setPartner(parseInt(selectedPartnerId), respondSeparately);
setPartner(p);
setRespondSeparately(p?.respond_separately || false);
const { aliases: fresh } = await api.getAliases();
setAliases(fresh || []);
toast('Spouse/Partner/Co-Parent saved', 'success');
}
} catch (e) {
toast(e.message, 'error');
} finally {
setSavingPartner(false);
}
};
const handleSave = async () => {
const handleSaveAlias = async () => {
if (!form.firstName.trim() || !form.lastName.trim())
return toast('First and last name required', 'error');
setSaving(true);
@@ -117,7 +148,7 @@ export default function AddChildAliasModal({ onClose }) {
}
};
const handleDelete = async (e, aliasId) => {
const handleDeleteAlias = async (e, aliasId) => {
e.stopPropagation();
try {
await api.deleteAlias(aliasId);
@@ -127,11 +158,35 @@ export default function AddChildAliasModal({ onClose }) {
} catch (err) { toast(err.message, 'error'); }
};
const lbl = (text, required) => (
<label className="text-sm" style={{ color: 'var(--text-secondary)', display: 'block', marginBottom: 4 }}>
{text}{required && <span style={{ color: 'var(--error)', marginLeft: 2 }}>*</span>}
</label>
);
// ── Mixed-age minor handlers ──────────────────────────────────────────────
const myMinors = minorPlayers.filter(u => u.guardian_user_id === currentUser?.id);
const availableMinors = minorPlayers.filter(u => !u.guardian_user_id);
const handleAddMinor = async () => {
if (!selectedMinorId) return;
setAddingMinor(true);
try {
await api.addGuardianChild(parseInt(selectedMinorId));
const { users: fresh } = await api.getMinorPlayers();
setMinorPlayers(fresh || []);
setSelectedMinorId('');
toast('Child added and account activated', 'success');
} catch (e) {
toast(e.message, 'error');
} finally {
setAddingMinor(false);
}
};
const handleRemoveMinor = async (e, minorId) => {
e.stopPropagation();
try {
await api.removeGuardianChild(minorId);
const { users: fresh } = await api.getMinorPlayers();
setMinorPlayers(fresh || []);
toast('Child removed', 'success');
} catch (err) { toast(err.message, 'error'); }
};
return (
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
@@ -187,93 +242,169 @@ export default function AddChildAliasModal({ onClose }) {
)}
</div>
{/* Existing aliases list */}
{aliases.length > 0 && (
<div style={{ marginBottom: 16 }}>
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
Your Children — click to edit
</div>
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
{aliases.map((a, i) => (
<div
key={a.id}
onClick={() => handleSelectAlias(a)}
style={{
display: 'flex', alignItems: 'center', gap: 10,
padding: '9px 12px', cursor: 'pointer',
borderBottom: i < aliases.length - 1 ? '1px solid var(--border)' : 'none',
background: editingAlias?.id === a.id ? 'var(--primary-light)' : 'transparent',
}}
>
<span style={{ flex: 1, fontSize: 14, fontWeight: editingAlias?.id === a.id ? 600 : 400 }}>
{a.first_name} {a.last_name}
</span>
{a.date_of_birth && (
<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>
{a.date_of_birth.slice(0, 10)}
</span>
)}
<button
onClick={e => handleDelete(e, a.id)}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--error)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}
aria-label="Remove"
>×</button>
{/* ── Mixed Age: link real minor users ── */}
{isMixedAge && (
<>
{/* Current children list */}
{myMinors.length > 0 && (
<div style={{ marginBottom: 16 }}>
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
Your Children
</div>
))}
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
{myMinors.map((u, i) => (
<div
key={u.id}
style={{
display: 'flex', alignItems: 'center', gap: 10,
padding: '9px 12px',
borderBottom: i < myMinors.length - 1 ? '1px solid var(--border)' : 'none',
}}
>
<span style={{ flex: 1, fontSize: 14 }}>{u.first_name} {u.last_name}</span>
{u.date_of_birth && (
<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>
{u.date_of_birth.slice(0, 10)}
</span>
)}
<button
onClick={e => handleRemoveMinor(e, u.id)}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--error)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}
aria-label="Remove"
>×</button>
</div>
))}
</div>
</div>
)}
{/* Add minor from players group */}
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
Add Child
</div>
</div>
<div style={{ display: 'flex', gap: 8 }}>
<select
className="input"
style={{ flex: 1 }}
value={selectedMinorId}
onChange={e => setSelectedMinorId(e.target.value)}
>
<option value="">— Select a player —</option>
{availableMinors.map(u => (
<option key={u.id} value={u.id}>
{u.first_name} {u.last_name}{u.date_of_birth ? ` (${u.date_of_birth.slice(0, 10)})` : ''}
</option>
))}
</select>
<button
className="btn btn-primary"
onClick={handleAddMinor}
disabled={addingMinor || !selectedMinorId}
style={{ whiteSpace: 'nowrap' }}
>
{addingMinor ? 'Adding…' : 'Add'}
</button>
</div>
{availableMinors.length === 0 && myMinors.length === 0 && (
<p className="text-sm" style={{ color: 'var(--text-tertiary)', marginTop: 8 }}>
No minor players available to link.
</p>
)}
</>
)}
{/* Form section label */}
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>
{editingAlias
? `Editing: ${editingAlias.first_name} ${editingAlias.last_name}`
: 'Add Child'}
</div>
{/* Form */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
<div>
{lbl('First Name', true)}
<input className="input" value={form.firstName} onChange={set('firstName')}
autoComplete="off" autoCapitalize="words" />
</div>
<div>
{lbl('Last Name', true)}
<input className="input" value={form.lastName} onChange={set('lastName')}
autoComplete="off" autoCapitalize="words" />
</div>
<div>
{lbl('Date of Birth')}
<input className="input" placeholder="YYYY-MM-DD" value={form.dob} onChange={set('dob')}
autoComplete="off" />
</div>
<div>
{lbl('Phone')}
<input className="input" type="tel" value={form.phone} onChange={set('phone')}
autoComplete="off" />
</div>
</div>
<div>
{lbl('Email (optional)')}
<input className="input" type="email" value={form.email} onChange={set('email')}
autoComplete="off" />
</div>
<div>
{lbl('Avatar (optional)')}
<input type="file" accept="image/*"
onChange={e => setAvatarFile(e.target.files?.[0] || null)} />
</div>
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
{editingAlias && (
<button className="btn btn-secondary" onClick={resetForm}>Cancel Edit</button>
{/* ── Guardian Only: alias form ── */}
{!isMixedAge && (
<>
{/* Existing aliases list */}
{aliases.length > 0 && (
<div style={{ marginBottom: 16 }}>
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
Your Children — click to edit
</div>
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
{aliases.map((a, i) => (
<div
key={a.id}
onClick={() => handleSelectAlias(a)}
style={{
display: 'flex', alignItems: 'center', gap: 10,
padding: '9px 12px', cursor: 'pointer',
borderBottom: i < aliases.length - 1 ? '1px solid var(--border)' : 'none',
background: editingAlias?.id === a.id ? 'var(--primary-light)' : 'transparent',
}}
>
<span style={{ flex: 1, fontSize: 14, fontWeight: editingAlias?.id === a.id ? 600 : 400 }}>
{a.first_name} {a.last_name}
</span>
{a.date_of_birth && (
<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>
{a.date_of_birth.slice(0, 10)}
</span>
)}
<button
onClick={e => handleDeleteAlias(e, a.id)}
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--error)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}
aria-label="Remove"
>×</button>
</div>
))}
</div>
</div>
)}
<button className="btn btn-primary" onClick={handleSave} disabled={saving}>
{saving ? 'Saving…' : editingAlias ? 'Update Alias' : 'Add Alias'}
</button>
</div>
</div>
{/* Form section label */}
<div className="text-sm font-medium" style={{ color: 'var(--text-secondary)', marginBottom: 10 }}>
{editingAlias
? `Editing: ${editingAlias.first_name} ${editingAlias.last_name}`
: 'Add Child'}
</div>
{/* Form */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
<div>
{lbl('First Name', true)}
<input className="input" value={form.firstName} onChange={set('firstName')}
autoComplete="off" autoCapitalize="words" />
</div>
<div>
{lbl('Last Name', true)}
<input className="input" value={form.lastName} onChange={set('lastName')}
autoComplete="off" autoCapitalize="words" />
</div>
<div>
{lbl('Date of Birth')}
<input className="input" placeholder="YYYY-MM-DD" value={form.dob} onChange={set('dob')}
autoComplete="off" />
</div>
<div>
{lbl('Phone')}
<input className="input" type="tel" value={form.phone} onChange={set('phone')}
autoComplete="off" />
</div>
</div>
<div>
{lbl('Email (optional)')}
<input className="input" type="email" value={form.email} onChange={set('email')}
autoComplete="off" />
</div>
<div>
{lbl('Avatar (optional)')}
<input type="file" accept="image/*"
onChange={e => setAvatarFile(e.target.files?.[0] || null)} />
</div>
<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
{editingAlias && (
<button className="btn btn-secondary" onClick={resetForm}>Cancel Edit</button>
)}
<button className="btn btn-primary" onClick={handleSaveAlias} disabled={saving}>
{saving ? 'Saving…' : editingAlias ? 'Update Alias' : 'Add Alias'}
</button>
</div>
</div>
</>
)}
</div>
</div>

64
frontend/src/components/NewChatModal.jsx
View File

@@ -11,6 +11,7 @@ export default function NewChatModal({ onClose, onCreated, features = {} }) {
const msgPublic = features.msgPublic ?? true;
const msgU2U = features.msgU2U ?? true;
const msgPrivateGroup = features.msgPrivateGroup ?? true;
const loginType = features.loginType || 'all_ages';
// Default to private if available, otherwise public
const defaultTab = (msgU2U || msgPrivateGroup) ? 'private' : 'public';
@@ -21,9 +22,8 @@ export default function NewChatModal({ onClose, onCreated, features = {} }) {
const [users, setUsers] = useState([]);
const [selected, setSelected] = useState([]);
const [loading, setLoading] = useState(false);
// Mixed Age: guardian confirmation modal
const [guardianConfirm, setGuardianConfirm] = useState(null); // { group, guardianName }
const loginType = features.loginType || 'all_ages';
// Pre-confirmation for minor members (shown before creating the chat)
const [minorConfirm, setMinorConfirm] = useState(null); // { minorNames: [] } — pending create
// True when exactly 1 user selected on private tab AND U2U messages are enabled
const isDirect = tab === 'private' && selected.length === 1 && msgU2U;
@@ -48,16 +48,11 @@ export default function NewChatModal({ onClose, onCreated, features = {} }) {
});
};
const handleCreate = async () => {
if (tab === 'private' && selected.length === 0) return toast('Add at least one member', 'error');
if (tab === 'private' && !isDirect && !name.trim()) return toast('Name required', 'error');
if (tab === 'public' && !name.trim()) return toast('Name required', 'error');
const doCreate = async () => {
setLoading(true);
try {
let payload;
if (isDirect) {
// Direct message: no name, isDirect flag
payload = {
type: 'private',
memberIds: selected.map(u => u.id),
@@ -72,18 +67,16 @@ export default function NewChatModal({ onClose, onCreated, features = {} }) {
};
}
const { group, duplicate, guardianAdded, guardianName } = await api.createGroup(payload);
const { group, duplicate, guardianAdded } = await api.createGroup(payload);
if (duplicate) {
toast('A group with these members already exists — opening it now.', 'info');
onCreated(group);
} else {
toast(isDirect ? 'Direct message started!' : `${tab === 'public' ? 'Public message' : 'Group message'} created!`, 'success');
if (guardianAdded && guardianName) {
setGuardianConfirm({ group, guardianName });
} else {
onCreated(group);
if (guardianAdded) {
toast('A guardian has been added to this conversation.', 'info');
}
}
onCreated(group);
} catch (e) {
toast(e.message, 'error');
} finally {
@@ -91,6 +84,23 @@ export default function NewChatModal({ onClose, onCreated, features = {} }) {
}
};
const handleCreate = async () => {
if (tab === 'private' && selected.length === 0) return toast('Add at least one member', 'error');
if (tab === 'private' && !isDirect && !name.trim()) return toast('Name required', 'error');
if (tab === 'public' && !name.trim()) return toast('Name required', 'error');
// Mixed Age: warn if any selected member is a minor (and initiator is not a minor)
if (loginType === 'mixed_age' && !user.is_minor) {
const minors = selected.filter(u => u.is_minor);
if (minors.length > 0) {
setMinorConfirm({ minorNames: minors.map(u => u.display_name || u.name) });
return;
}
}
await doCreate();
};
// Placeholder for the name field
const namePlaceholder = isDirect
? selected[0]?.name || ''
@@ -181,15 +191,25 @@ export default function NewChatModal({ onClose, onCreated, features = {} }) {
</div>
</div>
{guardianConfirm && (
{/* Pre-confirmation modal: minor member warning */}
{minorConfirm && (
<div className="modal-overlay">
<div className="modal" style={{ maxWidth: 360 }}>
<h2 className="modal-title" style={{ marginBottom: 12 }}>Guardian Added</h2>
<p className="text-sm" style={{ color: 'var(--text-secondary)', marginBottom: 20 }}>
<strong>{guardianConfirm.guardianName}</strong> has been added to this conversation as the guardian of this minor.
<div className="modal" style={{ maxWidth: 380 }}>
<h2 className="modal-title" style={{ marginBottom: 12 }}>Guardian Notice</h2>
<p className="text-sm" style={{ color: 'var(--text-secondary)', marginBottom: 8 }}>
The following member{minorConfirm.minorNames.length > 1 ? 's are' : ' is'} a minor:
</p>
<div className="flex justify-end">
<button className="btn btn-primary" onClick={() => { setGuardianConfirm(null); onCreated(guardianConfirm.group); }}>OK</button>
<ul style={{ marginBottom: 16, paddingLeft: 20 }}>
{minorConfirm.minorNames.map(n => (
<li key={n} className="text-sm" style={{ color: 'var(--text-primary)' }}>{n}</li>
))}
</ul>
<p className="text-sm" style={{ color: 'var(--text-secondary)', marginBottom: 20 }}>
Their designated guardian(s) will be automatically added to this conversation. Do you want to proceed?
</p>
<div className="flex gap-2 justify-end">
<button className="btn btn-secondary" onClick={() => setMinorConfirm(null)}>Cancel</button>
<button className="btn btn-primary" onClick={() => { setMinorConfirm(null); doCreate(); }}>Proceed</button>
</div>
</div>
</div>

15
frontend/src/pages/Chat.jsx
View File

@@ -120,10 +120,11 @@ export default function Chat() {
// Keep modalRef in sync so async callbacks can read current modal without stale closure
useEffect(() => { modalRef.current = modal; }, [modal]);
// Auto-popup Add Child Alias modal when guardian_only user has no aliases yet
// Auto-popup Add Child Alias modal when guardian user has no children yet
useEffect(() => {
if (addChildCheckedRef.current) return;
if (features.loginType !== 'guardian_only' || !features.inGuardiansGroup) return;
if (!features.inGuardiansGroup) return;
if (features.loginType !== 'guardian_only' && features.loginType !== 'mixed_age') return;
addChildCheckedRef.current = true;
api.getAliases().then(({ aliases }) => {
if (!(aliases || []).length) {
@@ -644,7 +645,7 @@ export default function Chat() {
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
{modal === 'help' && <HelpModal onClose={handleHelpClose} dismissed={helpDismissed} />}
{modal === 'addchild' && <AddChildAliasModal onClose={() => setModal(null)} />}
{modal === 'addchild' && <AddChildAliasModal features={features} onClose={() => setModal(null)} />}
{modal === 'about' && <AboutModal onClose={() => setModal(null)} />}
</div>
@@ -675,7 +676,7 @@ export default function Chat() {
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
{modal === 'help' && <HelpModal onClose={handleHelpClose} dismissed={helpDismissed} />}
{modal === 'addchild' && <AddChildAliasModal onClose={() => setModal(null)} />}
{modal === 'addchild' && <AddChildAliasModal features={features} onClose={() => setModal(null)} />}
{modal === 'about' && <AboutModal onClose={() => setModal(null)} />}
</div>
@@ -736,7 +737,7 @@ export default function Chat() {
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
{modal === 'help' && <HelpModal onClose={handleHelpClose} dismissed={helpDismissed} />}
{modal === 'addchild' && <AddChildAliasModal onClose={() => setModal(null)} />}
{modal === 'addchild' && <AddChildAliasModal features={features} onClose={() => setModal(null)} />}
{modal === 'about' && <AboutModal onClose={() => setModal(null)} />}
{modal === 'newchat' && <NewChatModal features={features} onClose={() => setModal(null)} onCreated={(g) => { loadGroups(); setModal(null); setActiveGroupId(g.id); setPage('chat'); }} />}
@@ -772,7 +773,7 @@ export default function Chat() {
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
{modal === 'help' && <HelpModal onClose={handleHelpClose} dismissed={helpDismissed} />}
{modal === 'addchild' && <AddChildAliasModal onClose={() => setModal(null)} />}
{modal === 'addchild' && <AddChildAliasModal features={features} onClose={() => setModal(null)} />}
{modal === 'about' && <AboutModal onClose={() => setModal(null)} />}
</div>
@@ -890,7 +891,7 @@ export default function Chat() {
{modal === 'newchat' && <NewChatModal features={features} onClose={() => setModal(null)} onCreated={(g) => { loadGroups(); setModal(null); setActiveGroupId(g.id); }} />}
{modal === 'about' && <AboutModal onClose={() => setModal(null)} />}
{modal === 'help' && <HelpModal onClose={handleHelpClose} dismissed={helpDismissed} />}
{modal === 'addchild' && <AddChildAliasModal onClose={() => setModal(null)} />}
{modal === 'addchild' && <AddChildAliasModal features={features} onClose={() => setModal(null)} />}
</div>
);
}

3
frontend/src/utils/api.js
View File

@@ -70,6 +70,9 @@ export const api = {
return req('POST', '/users/me/avatar', form);
},
searchMinorUsers: (q) => req('GET', `/users/search-minors?q=${encodeURIComponent(q || '')}`),
getMinorPlayers: () => req('GET', '/users/minor-players'),
addGuardianChild: (minorId) => req('POST', `/users/me/guardian-children/${minorId}`),
removeGuardianChild: (minorId) => req('DELETE', `/users/me/guardian-children/${minorId}`),
approveGuardian: (id) => req('PATCH', `/users/${id}/approve-guardian`),
denyGuardian: (id) => req('PATCH', `/users/${id}/deny-guardian`),
linkMinor: (minorId) => req('PATCH', `/users/me/link-minor/${minorId}`),