init_richi/schichtplanung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Persist guest session captcha verification and display guest's own name in navbar header and shift matrix table

Browse Source
This commit is contained in:
Richard
2026-07-31 11:34:49 +02:00
parent ca6652ad7c
commit 6ef74c7cf4
6 changed files with 154 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ShiftMatrixTable.jsx
+23 -8
View File
@@ -15,6 +15,17 @@ export default function ShiftMatrixTable({
onEditEvent,
onDeleteEvent
}) {
const [guestDisplayName, setGuestDisplayName] = React.useState(() => localStorage.getItem('guest_display_name') || '');
React.useEffect(() => {
const handleUpdate = () => setGuestDisplayName(localStorage.getItem('guest_display_name') || '');
window.addEventListener('guest_name_updated', handleUpdate);
window.addEventListener('storage', handleUpdate);
return () => {
window.removeEventListener('guest_name_updated', handleUpdate);
window.removeEventListener('storage', handleUpdate);
};
}, []);
if (!event || !event.task_areas || event.task_areas.length === 0) {
return (
<div className="hallmark-panel rounded-sm p-12 text-center border border-grid font-mono">
@@ -199,13 +210,16 @@ export default function ShiftMatrixTable({
{/* Attendees List */}
<div className="mt-2 space-y-1 font-sans">
{shift.signups.map((su) => (
<div key={su.id} className="text-[11px] text-muted flex items-center justify-between gap-2 p-1.5 rounded-sm bg-subtle border border-grid">
<div className="flex items-center gap-1.5 truncate">
<UserCheck className="w-3 h-3 text-muted shrink-0" />
<span className="truncate">{su.display_name}</span>
{su.is_guest && <span className="text-[9px] font-mono text-amber-500 px-1 rounded-sm bg-amber-500/10 border border-amber-500/20 font-bold">GAST</span>}
</div>
{shift.signups.map((su) => {
const isOwnGuest = isGuest && su.is_guest && guestDisplayName && su.display_name?.trim().toLowerCase() === guestDisplayName.trim().toLowerCase();
return (
<div key={su.id} className={`text-[11px] text-muted flex items-center justify-between gap-2 p-1.5 rounded-sm border ${isOwnGuest ? 'bg-amber-500/10 border-amber-500/30' : 'bg-subtle border-grid'}`}>
<div className="flex items-center gap-1.5 truncate">
<UserCheck className={`w-3 h-3 shrink-0 ${isOwnGuest ? 'text-amber-400' : 'text-muted'}`} />
<span className={`truncate ${isOwnGuest ? 'font-bold text-amber-300' : ''}`}>{su.display_name}</span>
{su.is_guest && <span className="text-[9px] font-mono text-amber-500 px-1 rounded-sm bg-amber-500/10 border border-amber-500/20 font-bold">GAST</span>}
{isOwnGuest && <span className="text-[9px] font-mono text-emerald-400 px-1 rounded-sm bg-emerald-500/10 border border-emerald-500/20 font-bold">DU</span>}
</div>
<div className="flex items-center gap-1 shrink-0">
{user && su.is_guest && onGenerateClaimLink && (
@@ -229,7 +243,8 @@ export default function ShiftMatrixTable({
)}
</div>
</div>
))}
);
})}
</div>
</td>