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

v0.9.35 settings redesign

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-16 17:23:13 -04:00
parent 28ae533b0e
commit 7d9d86d5cc
10 changed files with 342 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@@ -10,7 +10,7 @@
PROJECT_NAME=jama
# Image version to run (set by build.sh, or use 'latest')
JAMA_VERSION=0.9.34
JAMA_VERSION=0.9.35
# App port — the host port Docker maps to the container
PORT=3000

2
backend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "jama-backend",
"version": "0.9.34",
"version": "0.9.35",
"description": "TeamChat backend server",
"main": "src/index.js",
"scripts": {

4
backend/src/models/db.js
View File

@@ -216,6 +216,10 @@ function initDb() {
insertSetting.run('registration_code', '');
insertSetting.run('feature_branding', 'false');
insertSetting.run('feature_group_manager', 'false');
insertSetting.run('feature_schedule_manager', 'false');
insertSetting.run('app_type', 'JAMA-Chat');
insertSetting.run('team_group_managers', ''); -- JSON array of user_group IDs
insertSetting.run('team_schedule_managers', ''); -- JSON array of user_group IDs
// Migration: add hide_admin_tag if upgrading from older version
try {

30
backend/src/routes/settings.js
View File

@@ -137,8 +137,12 @@ router.post('/reset', authMiddleware, adminMiddleware, (req, res) => {
// ── Registration code ─────────────────────────────────────────────────────────
// Valid codes — in production these would be stored/validated server-side
const VALID_CODES = {
'JAMA-FULL-2024': { branding: true, groupManager: true },
'JAMA-BRAND-2024': { branding: true, groupManager: false },
// JAMA-Team: full access — chat, branding, group manager, schedule manager
'JAMA-TEAM-2024': { appType: 'JAMA-Team', branding: true, groupManager: true, scheduleManager: true },
// JAMA-Brand: chat + branding only
'JAMA-BRAND-2024': { appType: 'JAMA-Brand', branding: true, groupManager: false, scheduleManager: false },
// Legacy codes — map to new tiers
'JAMA-FULL-2024': { appType: 'JAMA-Team', branding: true, groupManager: true, scheduleManager: true },
};
router.post('/register', authMiddleware, adminMiddleware, (req, res) => {
@@ -149,19 +153,33 @@ router.post('/register', authMiddleware, adminMiddleware, (req, res) => {
if (!code?.trim()) {
// Clear registration
upd.run('registration_code', '', '');
upd.run('app_type', 'JAMA-Chat', 'JAMA-Chat');
upd.run('feature_branding', 'false', 'false');
upd.run('feature_group_manager', 'false', 'false');
return res.json({ success: true, features: { branding: false, groupManager: false } });
upd.run('feature_schedule_manager', 'false', 'false');
return res.json({ success: true, features: { branding: false, groupManager: false, scheduleManager: false, appType: 'JAMA-Chat' } });
}
const match = VALID_CODES[code.trim().toUpperCase()];
if (!match) return res.status(400).json({ error: 'Invalid registration code' });
upd.run('registration_code', code.trim(), code.trim());
upd.run('feature_branding', match.branding ? 'true' : 'false', match.branding ? 'true' : 'false');
upd.run('feature_group_manager', match.groupManager ? 'true' : 'false', match.groupManager ? 'true' : 'false');
upd.run('app_type', match.appType || 'JAMA-Chat', match.appType || 'JAMA-Chat');
upd.run('feature_branding', match.branding ? 'true' : 'false', match.branding ? 'true' : 'false');
upd.run('feature_group_manager', match.groupManager ? 'true' : 'false', match.groupManager ? 'true' : 'false');
upd.run('feature_schedule_manager', match.scheduleManager ? 'true' : 'false', match.scheduleManager ? 'true' : 'false');
res.json({ success: true, features: { branding: match.branding, groupManager: match.groupManager } });
res.json({ success: true, features: { branding: match.branding, groupManager: match.groupManager, scheduleManager: match.scheduleManager, appType: match.appType } });
});
// Save team management group assignments
router.patch('/team', authMiddleware, adminMiddleware, (req, res) => {
const { groupManagers, scheduleManagers } = req.body;
const db = getDb();
const upd = db.prepare("INSERT INTO settings (key, value) VALUES (?, ?) ON CONFLICT(key) DO UPDATE SET value = ?, updated_at = datetime('now')");
if (groupManagers !== undefined) upd.run('team_group_managers', JSON.stringify(groupManagers || []), JSON.stringify(groupManagers || []));
if (scheduleManagers !== undefined) upd.run('team_schedule_managers', JSON.stringify(scheduleManagers || []), JSON.stringify(scheduleManagers || []));
res.json({ success: true });
});
module.exports = router;

2
build.sh
View File

@@ -13,7 +13,7 @@
# ─────────────────────────────────────────────────────────────
set -euo pipefail
VERSION="${1:-0.9.34}"
VERSION="${1:-0.9.35}"
ACTION="${2:-}"
REGISTRY="${REGISTRY:-}"
IMAGE_NAME="jama"

2
frontend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "jama-frontend",
"version": "0.9.34",
"version": "0.9.35",
"private": true,
"scripts": {
"dev": "vite",

16
frontend/src/components/NavDrawer.jsx
View File

@@ -11,12 +11,18 @@ const NAV_ICON = {
settings: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2"/></svg>,
};
export default function NavDrawer({ open, onClose, onMessages, onGroupManager, onBranding, onSettings, onUsers, features = {} }) {
export default function NavDrawer({ open, onClose, onMessages, onGroupManager, onScheduleManager, onBranding, onSettings, onUsers, features = {} }) {
const { user } = useAuth();
const drawerRef = useRef(null);
const isAdmin = user?.role === 'admin';
const isMobile = window.matchMedia('(pointer: coarse)').matches || window.innerWidth < 768;
// Team-managed access: check if user is in any of the designated manager groups
// (frontend-only — no API enforcement yet)
const userGroupIds = features.userGroupMemberships || [];
const canAccessGroupManager = isAdmin || (features.teamGroupManagers || []).some(gid => userGroupIds.includes(gid));
const canAccessScheduleManager = isAdmin || (features.teamScheduleManagers || []).some(gid => userGroupIds.includes(gid));
// Close on outside click
useEffect(() => {
if (!open) return;
@@ -72,10 +78,10 @@ export default function NavDrawer({ open, onClose, onMessages, onGroupManager, o
<>
<div className="nav-drawer-section-label admin">Admin</div>
{item(NAV_ICON.users, 'User Manager', onUsers)}
{features.groupManager && !isMobile && item(NAV_ICON.groups, 'Group Manager', onGroupManager)}
{features.branding && item(NAV_ICON.branding, 'Branding', onBranding)}
{!isMobile && item(NAV_ICON.schedules, 'Schedule Manager', () => {}, true)}
{item(NAV_ICON.settings, 'Settings', onSettings)}
{features.groupManager && !isMobile && canAccessGroupManager && item(NAV_ICON.groups, 'Group Manager', onGroupManager)}
{features.scheduleManager && !isMobile && canAccessScheduleManager && item(NAV_ICON.schedules, 'Schedule Manager', onScheduleManager || (() => {}))}
{features.branding && item(NAV_ICON.branding, 'Branding', onBranding)}
{isAdmin && item(NAV_ICON.settings, 'Settings', onSettings)}
</>
)}
</div>

397
frontend/src/components/SettingsModal.jsx
View File

@@ -2,27 +2,224 @@ import { useState, useEffect } from 'react';
import { api } from '../utils/api.js';
import { useToast } from '../contexts/ToastContext.jsx';
export default function SettingsModal({ onClose, onFeaturesChanged }) {
// ── Helpers ───────────────────────────────────────────────────────────────────
const APP_TYPES = {
'JAMA-Chat': { label: 'JAMA-Chat', desc: 'Chat only. No Branding, Group Manager or Schedule Manager.' },
'JAMA-Brand': { label: 'JAMA-Brand', desc: 'Chat and Branding.' },
'JAMA-Team': { label: 'JAMA-Team', desc: 'Chat, Branding, Group Manager and Schedule Manager.' },
};
// ── Team Management Tab ───────────────────────────────────────────────────────
function TeamManagementTab({ features }) {
const toast = useToast();
const [userGroups, setUserGroups] = useState([]);
const [groupManagers, setGroupManagers] = useState([]);
const [scheduleManagers, setScheduleManagers] = useState([]);
const [saving, setSaving] = useState(false);
useEffect(() => {
api.getUserGroups().then(({ groups }) => setUserGroups(groups || [])).catch(() => {});
api.getSettings().then(({ settings }) => {
setGroupManagers(JSON.parse(settings.team_group_managers || '[]'));
setScheduleManagers(JSON.parse(settings.team_schedule_managers || '[]'));
}).catch(() => {});
}, []);
const toggle = (id, list, setList) => {
setList(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
};
const handleSave = async () => {
setSaving(true);
try {
await api.updateTeamSettings({ groupManagers, scheduleManagers });
toast('Team settings saved', 'success');
window.dispatchEvent(new Event('jama:settings-changed'));
} catch (e) { toast(e.message, 'error'); }
finally { setSaving(false); }
};
const GroupSelectList = ({ title, description, selected, onToggle }) => (
<div style={{ marginBottom: 24 }}>
<div className="settings-section-label">{title}</div>
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginBottom: 10 }}>{description}</p>
{userGroups.length === 0 ? (
<p style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>No user groups created yet. Create groups in the Group Manager first.</p>
) : (
<div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
{userGroups.map(g => (
<label key={g.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px', borderBottom: '1px solid var(--border)', cursor: 'pointer' }}>
<input type="checkbox" checked={selected.includes(g.id)} onChange={() => onToggle(g.id)}
style={{ accentColor: 'var(--primary)', width: 15, height: 15 }} />
<div style={{ width: 24, height: 24, borderRadius: 5, background: 'var(--primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 9, fontWeight: 700, flexShrink: 0 }}>UG</div>
<span style={{ flex: 1, fontSize: 14 }}>{g.name}</span>
<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{g.member_count} member{g.member_count !== 1 ? 's' : ''}</span>
</label>
))}
</div>
)}
{selected.length === 0 && (
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 6 }}>No groups selected — admins only.</p>
)}
</div>
);
return (
<div>
<GroupSelectList
title="Group Managers"
description="Members of selected groups can access the Group Manager tool."
selected={groupManagers}
onToggle={id => toggle(id, groupManagers, setGroupManagers)}
/>
<GroupSelectList
title="Schedule Managers"
description="Members of selected groups can access the Schedule Manager tool."
selected={scheduleManagers}
onToggle={id => toggle(id, scheduleManagers, setScheduleManagers)}
/>
<button className="btn btn-primary" onClick={handleSave} disabled={saving}>
{saving ? 'Saving…' : 'Save Team Settings'}
</button>
</div>
);
}
// ── Registration Tab ──────────────────────────────────────────────────────────
function RegistrationTab({ onFeaturesChanged }) {
const toast = useToast();
const [settings, setSettings] = useState({});
const [regCode, setRegCode] = useState('');
const [regLoading, setRegLoading] = useState(false);
const [copied, setCopied] = useState(false);
useEffect(() => {
api.getSettings().then(({ settings }) => setSettings(settings)).catch(() => {});
}, []);
const appType = settings.app_type || 'JAMA-Chat';
const activeCode = settings.registration_code || '';
const adminEmail = settings.admin_email || '—';
// Placeholder serial number derived from hostname
const serialNumber = btoa(window.location.hostname).replace(/[^A-Z0-9]/gi, '').toUpperCase().slice(0, 16).padEnd(16, '0');
const handleCopySerial = async () => {
await navigator.clipboard.writeText(serialNumber).catch(() => {});
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
const handleRegister = async () => {
if (!regCode.trim()) return toast('Enter a registration code', 'error');
setRegLoading(true);
try {
const { features: f } = await api.registerCode(regCode.trim());
setRegCode('');
const fresh = await api.getSettings();
setSettings(fresh.settings);
toast('Registration applied successfully.', 'success');
window.dispatchEvent(new Event('jama:settings-changed'));
onFeaturesChanged && onFeaturesChanged(f);
} catch (e) { toast(e.message || 'Invalid registration code', 'error'); }
finally { setRegLoading(false); }
};
const handleClear = async () => {
try {
const { features: f } = await api.registerCode('');
const fresh = await api.getSettings();
setSettings(fresh.settings);
toast('Registration cleared.', 'success');
window.dispatchEvent(new Event('jama:settings-changed'));
onFeaturesChanged && onFeaturesChanged(f);
} catch (e) { toast(e.message, 'error'); }
};
const typeInfo = APP_TYPES[appType] || APP_TYPES['JAMA-Chat'];
const siteUrl = window.location.origin;
return (
<div>
{/* Info box */}
<div style={{ background: 'var(--surface-variant)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '14px 16px', marginBottom: 24 }}>
<p style={{ fontSize: 13, fontWeight: 600, marginBottom: 6 }}>
Registration {activeCode ? 'is' : 'required:'}
</p>
<p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6 }}>
JAMA {activeCode ? 'is' : 'will be'} registered to:<br />
<strong>Type:</strong> {typeInfo.label}<br />
<strong>URL:</strong> {siteUrl}
</p>
</div>
{/* Type */}
<div style={{ marginBottom: 16 }}>
<div className="settings-section-label">Application Type</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 6 }}>
<div style={{ padding: '7px 14px', borderRadius: 'var(--radius)', border: '1px solid var(--border)', background: 'var(--surface-variant)', fontSize: 14, fontWeight: 600, color: 'var(--primary)' }}>
{typeInfo.label}
</div>
<span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{typeInfo.desc}</span>
</div>
</div>
{/* Serial Number */}
<div style={{ marginBottom: 16 }}>
<div className="settings-section-label">Serial Number</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
<input className="input flex-1" value={serialNumber} readOnly style={{ fontFamily: 'monospace', letterSpacing: 1 }} />
<button className="btn btn-secondary btn-sm" onClick={handleCopySerial} style={{ flexShrink: 0 }}>
{copied ? '✓ Copied' : (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
)}
</button>
</div>
</div>
{/* Registration Code */}
<div style={{ marginBottom: 20 }}>
<div className="settings-section-label">Registration Code</div>
<div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
<input className="input flex-1" placeholder="Enter registration code" value={regCode}
onChange={e => setRegCode(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleRegister()} />
<button className="btn btn-primary btn-sm" onClick={handleRegister} disabled={regLoading}>
{regLoading ? '…' : 'Register'}
</button>
</div>
</div>
{activeCode && (
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<span style={{ fontSize: 13, color: 'var(--success)', display: 'flex', alignItems: 'center', gap: 5 }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
Registered — {typeInfo.label}
</span>
<button className="btn btn-secondary btn-sm" onClick={handleClear}>Clear</button>
</div>
)}
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 16, lineHeight: 1.5 }}>
Registration codes unlock application features. Contact your JAMA provider for a code.<br />
<strong>JAMA-Brand</strong> — unlocks Branding.&nbsp;
<strong>JAMA-Team</strong> — unlocks Branding, Group Manager and Schedule Manager.
</p>
</div>
);
}
// ── Web Push Tab ──────────────────────────────────────────────────────────────
function WebPushTab() {
const toast = useToast();
const [vapidPublic, setVapidPublic] = useState('');
const [loading, setLoading] = useState(true);
const [generating, setGenerating] = useState(false);
const [showRegenWarning, setShowRegenWarning] = useState(false);
// Registration
const [regCode, setRegCode] = useState('');
const [activeCode, setActiveCode] = useState('');
const [features, setFeatures] = useState({ branding: false, groupManager: false });
const [regLoading, setRegLoading] = useState(false);
useEffect(() => {
api.getSettings().then(({ settings }) => {
setVapidPublic(settings.vapid_public || '');
setActiveCode(settings.registration_code || '');
setFeatures({
branding: settings.feature_branding === 'true',
groupManager: settings.feature_group_manager === 'true',
});
setLoading(false);
}).catch(() => setLoading(false));
}, []);
@@ -36,41 +233,81 @@ export default function SettingsModal({ onClose, onFeaturesChanged }) {
toast('VAPID keys generated. Push notifications are now active.', 'success');
} catch (e) {
toast(e.message || 'Failed to generate keys', 'error');
} finally {
setGenerating(false);
}
} finally { setGenerating(false); }
};
const handleGenerateClick = () => {
if (vapidPublic) setShowRegenWarning(true);
else doGenerate();
};
if (loading) return <p style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Loading…</p>;
const handleRegister = async () => {
setRegLoading(true);
try {
const { features: f } = await api.registerCode(regCode.trim());
setFeatures(f);
setActiveCode(regCode.trim());
setRegCode('');
toast(regCode.trim() ? 'Registration code applied.' : 'Registration cleared.', 'success');
window.dispatchEvent(new Event('jama:settings-changed'));
onFeaturesChanged && onFeaturesChanged(f);
} catch (e) {
toast(e.message || 'Invalid code', 'error');
} finally {
setRegLoading(false);
}
};
return (
<div>
<div className="settings-section-label" style={{ marginBottom: 12 }}>Web Push Notifications (VAPID)</div>
const featureList = [
features.branding && 'Branding',
features.groupManager && 'Group Manager',
{vapidPublic ? (
<div style={{ marginBottom: 16 }}>
<div style={{ background: 'var(--surface-variant)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '10px 12px', marginBottom: 10 }}>
<div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 4, textTransform: 'uppercase', letterSpacing: '0.5px' }}>Public Key</div>
<code style={{ fontSize: 11, color: 'var(--text-primary)', wordBreak: 'break-all', lineHeight: 1.5, display: 'block' }}>{vapidPublic}</code>
</div>
<span style={{ fontSize: 13, color: 'var(--success)', display: 'flex', alignItems: 'center', gap: 5 }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
Push notifications active
</span>
</div>
) : (
<p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12 }}>
No VAPID keys found. Generate keys to enable Web Push notifications.
</p>
)}
{showRegenWarning && (
<div style={{ background: '#fce8e6', border: '1px solid #f5c6c2', borderRadius: 'var(--radius)', padding: '14px 16px', marginBottom: 16 }}>
<p style={{ fontSize: 13, fontWeight: 600, color: 'var(--error)', marginBottom: 8 }}>⚠️ Regenerate VAPID keys?</p>
<p style={{ fontSize: 13, color: '#5c2c28', marginBottom: 12, lineHeight: 1.5 }}>
Generating new keys will <strong>invalidate all existing push subscriptions</strong>. Users will need to re-enable notifications.
</p>
<div style={{ display: 'flex', gap: 8 }}>
<button className="btn btn-sm" style={{ background: 'var(--error)', color: 'white' }} onClick={doGenerate} disabled={generating}>{generating ? 'Generating…' : 'Yes, regenerate keys'}</button>
<button className="btn btn-secondary btn-sm" onClick={() => setShowRegenWarning(false)}>Cancel</button>
</div>
</div>
)}
{!showRegenWarning && (
<button className="btn btn-primary btn-sm" onClick={() => vapidPublic ? setShowRegenWarning(true) : doGenerate()} disabled={generating}>
{generating ? 'Generating…' : vapidPublic ? 'Regenerate Keys' : 'Generate Keys'}
</button>
)}
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 12, lineHeight: 1.5 }}>
Requires HTTPS. On iOS, the app must be installed to the home screen first.
</p>
</div>
);
}
// ── Main modal ────────────────────────────────────────────────────────────────
export default function SettingsModal({ onClose, onFeaturesChanged }) {
const [tab, setTab] = useState('registration');
const [appType, setAppType] = useState('JAMA-Chat');
useEffect(() => {
api.getSettings().then(({ settings }) => {
setAppType(settings.app_type || 'JAMA-Chat');
}).catch(() => {});
const handler = () => api.getSettings().then(({ settings }) => setAppType(settings.app_type || 'JAMA-Chat')).catch(() => {});
window.addEventListener('jama:settings-changed', handler);
return () => window.removeEventListener('jama:settings-changed', handler);
}, []);
const isTeam = appType === 'JAMA-Team';
const tabs = [
isTeam && { id: 'team', label: 'Team Management' },
{ id: 'registration', label: 'Registration' },
{ id: 'webpush', label: 'Web Push' },
].filter(Boolean);
return (
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
<div className="modal" style={{ maxWidth: 480 }}>
<div className="modal" style={{ maxWidth: 520 }}>
<div className="flex items-center justify-between" style={{ marginBottom: 20 }}>
<h2 className="modal-title" style={{ margin: 0 }}>Settings</h2>
<button className="btn-icon" onClick={onClose}>
@@ -78,82 +315,18 @@ export default function SettingsModal({ onClose, onFeaturesChanged }) {
</button>
</div>
{/* Registration Code */}
<div style={{ marginBottom: 28 }}>
<div className="settings-section-label">Feature Registration</div>
{activeCode && featureList.length > 0 && (
<div style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--success)' }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
Active — unlocks: {featureList.join(', ')}
</div>
)}
<div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
<input
className="input flex-1"
placeholder="Enter registration code"
value={regCode}
onChange={e => setRegCode(e.target.value)}
onKeyDown={e => e.key === 'Enter' && handleRegister()}
/>
<button className="btn btn-primary btn-sm" onClick={handleRegister} disabled={regLoading}>
{regLoading ? '…' : 'Apply'}
{/* Tab buttons */}
<div className="flex gap-2" style={{ marginBottom: 24 }}>
{tabs.map(t => (
<button key={t.id} className={`btn btn-sm ${tab === t.id ? 'btn-primary' : 'btn-secondary'}`} onClick={() => setTab(t.id)}>
{t.label}
</button>
</div>
{activeCode && (
<button className="btn btn-secondary btn-sm" onClick={() => { setRegCode(''); api.registerCode('').then(() => { setFeatures({ branding: false, groupManager: false }); setActiveCode(''); window.dispatchEvent(new Event('jama:settings-changed')); onFeaturesChanged && onFeaturesChanged({ branding: false, groupManager: false }); }); }}>
Clear Registration
</button>
)}
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 8 }}>
A registration code unlocks Branding and Group Manager features. Contact your jama provider for a code.
</p>
))}
</div>
<div style={{ borderTop: '1px solid var(--border)', paddingTop: 20 }}>
<div className="settings-section-label">Web Push Notifications (VAPID)</div>
{loading ? (
<p style={{ fontSize: 13, color: 'var(--text-secondary)' }}>Loading…</p>
) : (
<>
{vapidPublic ? (
<div style={{ marginBottom: 16 }}>
<div style={{ background: 'var(--surface-variant)', border: '1px solid var(--border)', borderRadius: 'var(--radius)', padding: '10px 12px', marginBottom: 10 }}>
<div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 4, textTransform: 'uppercase', letterSpacing: '0.5px' }}>Public Key</div>
<code style={{ fontSize: 11, color: 'var(--text-primary)', wordBreak: 'break-all', lineHeight: 1.5, display: 'block' }}>{vapidPublic}</code>
</div>
<span style={{ fontSize: 13, color: 'var(--success)', display: 'flex', alignItems: 'center', gap: 5 }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
Push notifications active
</span>
</div>
) : (
<p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12 }}>
No VAPID keys found. Generate keys to enable Web Push notifications.
</p>
)}
{showRegenWarning && (
<div style={{ background: '#fce8e6', border: '1px solid #f5c6c2', borderRadius: 'var(--radius)', padding: '14px 16px', marginBottom: 16 }}>
<p style={{ fontSize: 13, fontWeight: 600, color: 'var(--error)', marginBottom: 8 }}>⚠️ Regenerate VAPID keys?</p>
<p style={{ fontSize: 13, color: '#5c2c28', marginBottom: 12, lineHeight: 1.5 }}>
Generating new keys will <strong>invalidate all existing push subscriptions</strong>. Users will need to re-enable notifications.
</p>
<div style={{ display: 'flex', gap: 8 }}>
<button className="btn btn-sm" style={{ background: 'var(--error)', color: 'white' }} onClick={doGenerate} disabled={generating}>{generating ? 'Generating…' : 'Yes, regenerate keys'}</button>
<button className="btn btn-secondary btn-sm" onClick={() => setShowRegenWarning(false)}>Cancel</button>
</div>
</div>
)}
{!showRegenWarning && (
<button className="btn btn-primary btn-sm" onClick={handleGenerateClick} disabled={generating}>
{generating ? 'Generating…' : vapidPublic ? 'Regenerate Keys' : 'Generate Keys'}
</button>
)}
<p style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 12, lineHeight: 1.5 }}>
Requires HTTPS. On iOS, the app must be installed to the home screen first.
</p>
</>
)}
</div>
{tab === 'team' && <TeamManagementTab features={{ appType }} />}
{tab === 'registration' && <RegistrationTab onFeaturesChanged={onFeaturesChanged} />}
{tab === 'webpush' && <WebPushTab />}
</div>
</div>
);

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

@@ -38,7 +38,7 @@ export default function Chat() {
const [unreadGroups, setUnreadGroups] = useState(new Map());
const [modal, setModal] = useState(null); // 'profile' | 'users' | 'settings' | 'newchat' | 'help' | 'groupmanager'
const [drawerOpen, setDrawerOpen] = useState(false);
const [features, setFeatures] = useState({ branding: false, groupManager: false });
const [features, setFeatures] = useState({ branding: false, groupManager: false, scheduleManager: false, appType: 'JAMA-Chat', teamGroupManagers: [], teamScheduleManagers: [] });
const [helpDismissed, setHelpDismissed] = useState(true); // true until status loaded
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
const [showSidebar, setShowSidebar] = useState(true);
@@ -73,14 +73,22 @@ export default function Chat() {
useEffect(() => {
api.getSettings().then(({ settings }) => {
setFeatures({
branding: settings.feature_branding === 'true',
groupManager: settings.feature_group_manager === 'true',
branding: settings.feature_branding === 'true',
groupManager: settings.feature_group_manager === 'true',
scheduleManager: settings.feature_schedule_manager === 'true',
appType: settings.app_type || 'JAMA-Chat',
teamGroupManagers: JSON.parse(settings.team_group_managers || '[]'),
teamScheduleManagers: JSON.parse(settings.team_schedule_managers || '[]'),
});
}).catch(() => {});
const handler = () => api.getSettings().then(({ settings }) => {
setFeatures({
branding: settings.feature_branding === 'true',
groupManager: settings.feature_group_manager === 'true',
branding: settings.feature_branding === 'true',
groupManager: settings.feature_group_manager === 'true',
scheduleManager: settings.feature_schedule_manager === 'true',
appType: settings.app_type || 'JAMA-Chat',
teamGroupManagers: JSON.parse(settings.team_group_managers || '[]'),
teamScheduleManagers: JSON.parse(settings.team_schedule_managers || '[]'),
});
}).catch(() => {});
window.addEventListener('jama:settings-changed', handler);

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

@@ -102,6 +102,7 @@ export const api = {
updateAppName: (name) => req('PATCH', '/settings/app-name', { name }),
updateColors: (body) => req('PATCH', '/settings/colors', body),
registerCode: (code) => req('POST', '/settings/register', { code }),
updateTeamSettings: (body) => req('PATCH', '/settings/team', body),
// User groups (Group Manager)
getUserGroups: () => req('GET', '/usergroups'),