Moheeb Zara
df6951c323
Invites - migration 029: space_invites.role (member_role enum, default 'member' — legacy invites and the spaces.invite_code path keep granting member). schema.sql + types/database.ts mirrored - lib/invite-logic.ts (pure, tested): canAssignInviteRole — admin may grant any role; board may grant anything except admin; nobody else. Privilege-escalation guard on top of the existing admin/board gate - createInvite/updateInvite take + enforce role via that guard; createInviteSchema/updateInviteSchema validate the enum - joinSpace applies the invite's granted role (validated), default member; uses_count/max_uses/expiry already enforced - invites panel: role picker (filtered to what the creator may grant), one-click "single use", per-invite role badge - space-scoped invite link /join/<space>?code=… via a presentational app/join/[space] landing that hands off to the proven /signup?invite= flow; /join added to middleware PUBLIC_ROUTES Audit hardening (from this pass's review) - /login now honors a validated same-origin ?next= (was hardcoded to /dashboard) so the public_auth form sign-in round-trips; OAuth threads next through the callback (which already honored it) - submitForm requires formId; submitFormSchema drops the now-ambiguous slug path (form slugs are per-space after 028). Both callers already pass formId. Tests updated 337 tests; build verified (Compiled successfully, exit 0). No deploy.
90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { RolesPanel } from './panels/roles-panel'
|
|
import { PermissionsPanel } from './panels/permissions-panel'
|
|
import { TiersPanel } from './panels/tiers-panel'
|
|
import { AreasPanel } from './panels/areas-panel'
|
|
import { AreaLeadsPanel } from './panels/area-leads-panel'
|
|
import { InvitesPanel } from './panels/invites-panel'
|
|
import { OnboardingPanel } from './panels/onboarding-panel'
|
|
import type { RoleLabelRow, CustomRole, Tier, Invite, Step, Area, FormOption } from './panels/types'
|
|
|
|
type Section = 'roles' | 'permissions' | 'tiers' | 'areas' | 'area-leads' | 'invites' | 'onboarding'
|
|
|
|
const SECTIONS: { key: Section; label: string }[] = [
|
|
{ key: 'roles', label: 'Roles' },
|
|
{ key: 'permissions', label: 'Permissions' },
|
|
{ key: 'tiers', label: 'Membership tiers' },
|
|
{ key: 'areas', label: 'Areas' },
|
|
{ key: 'area-leads', label: 'Area leads' },
|
|
{ key: 'invites', label: 'Invite codes' },
|
|
{ key: 'onboarding', label: 'Onboarding' },
|
|
]
|
|
|
|
interface AreaLead {
|
|
id: string
|
|
area_code: string | null
|
|
area_name: string
|
|
lead_id: string | null
|
|
lead_handle: string | null
|
|
status: string
|
|
}
|
|
|
|
interface Props {
|
|
isAdmin: boolean
|
|
creatorRole: string
|
|
spaceSlug: string
|
|
roleLabels: RoleLabelRow[]
|
|
customRoles: CustomRole[]
|
|
tiers: Tier[]
|
|
invites: Invite[]
|
|
onboardingSteps: Step[]
|
|
forms: FormOption[]
|
|
areas: Area[]
|
|
rolePerms: Array<{ subject: string; permission: string }>
|
|
areaLeads: AreaLead[]
|
|
members: Array<{ id: string; display_name: string | null; handle: string | null }>
|
|
}
|
|
|
|
export function CustomizeClient(props: Props) {
|
|
const [section, setSection] = useState<Section>('roles')
|
|
|
|
return (
|
|
<div className="p-4 md:p-6 max-w-6xl">
|
|
<div className="mb-6">
|
|
<h1 className="font-mono text-sm tracking-widest uppercase text-muted-foreground mb-1">Customize</h1>
|
|
<p className="font-sans text-sm text-muted-foreground">
|
|
Make the space yours. Operational settings (identity, integrations, webhooks) live under Settings.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row gap-6">
|
|
<nav className="md:w-56 shrink-0 flex md:flex-col gap-1 overflow-x-auto md:overflow-visible">
|
|
{SECTIONS.map(s => (
|
|
<button
|
|
key={s.key}
|
|
onClick={() => setSection(s.key)}
|
|
className={`text-left px-3 py-2 rounded text-sm font-sans transition whitespace-nowrap ${
|
|
section === s.key ? 'bg-primary/10 text-primary' : 'text-foreground/70 hover:bg-muted hover:text-foreground'
|
|
}`}
|
|
>
|
|
{s.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
{section === 'roles' && <RolesPanel isAdmin={props.isAdmin} roleLabels={props.roleLabels} customRoles={props.customRoles} />}
|
|
{section === 'permissions' && <PermissionsPanel isAdmin={props.isAdmin} customRoles={props.customRoles} rolePerms={props.rolePerms} />}
|
|
{section === 'tiers' && <TiersPanel isAdmin={props.isAdmin} tiers={props.tiers} />}
|
|
{section === 'areas' && <AreasPanel isAdmin={props.isAdmin} areas={props.areas} />}
|
|
{section === 'area-leads' && <AreaLeadsPanel isAdmin={props.isAdmin} areaLeads={props.areaLeads} members={props.members} />}
|
|
{section === 'invites' && <InvitesPanel isAdmin={props.isAdmin} invites={props.invites} creatorRole={props.creatorRole} spaceSlug={props.spaceSlug} />}
|
|
{section === 'onboarding' && <OnboardingPanel isAdmin={props.isAdmin} steps={props.onboardingSteps} forms={props.forms} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|