fix(join): permit /v1/invites/** (not just /*) + match panel color to login

- SecurityConfig: /** covers /v1/invites/{code}/accept (two path segments);
  /* only matched one segment so the accept endpoint was returning 401
- HouseholdIdentityPanel + page: use --green-dark bg (matching BrandPanel
  on login) instead of --green-tint; text updated to white/--green-light

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-10 22:00:47 +02:00
parent c5ec3396b2
commit 6aed303627
4 changed files with 23 additions and 13 deletions

View File

@@ -26,7 +26,7 @@
<!-- Desktop layout (≥ 1024px): two-column side by side -->
<div class="flex min-h-screen flex-col lg:flex-row">
<!-- Left / top: green-tint panel -->
<div class="bg-[var(--green-tint)] p-6 lg:flex lg:w-[400px] lg:flex-shrink-0 lg:items-center lg:justify-center lg:p-12">
<div class="bg-[var(--green-dark)] p-6 lg:flex lg:w-[400px] lg:flex-shrink-0 lg:items-center lg:justify-center lg:p-12">
<HouseholdIdentityPanel
householdName={data.householdName ?? ''}
inviterName={data.inviterName ?? ''}

View File

@@ -2,38 +2,38 @@
let { householdName, inviterName }: { householdName: string; inviterName: string } = $props();
</script>
<div class="flex flex-col items-center gap-4 rounded-2xl bg-[var(--green-tint)] p-6 text-center">
<div class="flex flex-col items-center gap-4 rounded-2xl bg-[var(--green-dark)] p-6 text-center">
<!-- App logo -->
<span class="text-[48px]" aria-hidden="true">🥗</span>
<!-- Household name -->
<div>
<h2
class="font-[var(--font-display)] text-[22px] font-semibold tracking-[-0.02em] text-[var(--color-text)]"
class="font-[var(--font-display)] text-[22px] font-semibold tracking-[-0.02em] text-white"
>
{householdName}
</h2>
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">
<p class="mt-1 font-[var(--font-sans)] text-[12px] text-[var(--green-light)]">
Eingeladen von {inviterName}
</p>
</div>
<!-- Permissions info box -->
<div class="w-full rounded-xl bg-white/20 px-4 py-3 text-left">
<p class="mb-2 font-[var(--font-sans)] text-[11px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
<div class="w-full rounded-xl bg-white/10 px-4 py-3 text-left">
<p class="mb-2 font-[var(--font-sans)] text-[11px] font-medium uppercase tracking-wide text-[var(--green-light)]">
Als Mitglied kannst du
</p>
<ul class="flex flex-col gap-1.5">
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-[var(--color-text)]">
<span class="text-[var(--green)] font-semibold" aria-hidden="true"></span>
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-white">
<span class="font-semibold text-[var(--green-light)]" aria-hidden="true"></span>
Wochenplan einsehen
</li>
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-[var(--color-text)]">
<span class="text-[var(--green)] font-semibold" aria-hidden="true"></span>
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-white">
<span class="font-semibold text-[var(--green-light)]" aria-hidden="true"></span>
Einkaufsliste abhaken
</li>
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-[var(--color-text)]">
<span class="text-[var(--green)] font-semibold" aria-hidden="true"></span>
<li class="flex items-center gap-2 font-[var(--font-sans)] text-[13px] text-white">
<span class="font-semibold text-[var(--green-light)]" aria-hidden="true"></span>
Artikel zur Liste hinzufügen
</li>
</ul>