feat(oberflaeche): Grundlayout, Navigation und Farbschema
Deutsche Oberfläche, Hell und Dunkel über next-themes, Navigation mit Rollenfilter und die shadcn-Primitiven, die M1 braucht. Der Farbschema-Knopf kommt ohne Effekt und ohne Zustand aus: welches Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes setzt sie schon vor der Hydratation, deshalb blitzt nichts auf — und die React-Compiler-Regel gegen setState im Effekt bleibt eingehalten. Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit halten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Florian Wilde
co-authored by
Claude Opus 5
Claude Opus 5
parent
19ca0826e6
commit
4ff67c15c2
@@ -0,0 +1,90 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
|
@import 'tw-animate-css';
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Farben als OKLCH, damit Hell und Dunkel dieselbe wahrgenommene Helligkeit
|
||||||
|
* halten. Die Bereichsfarben kommen aus der Datenbank und werden zur Laufzeit
|
||||||
|
* gesetzt, nicht hier.
|
||||||
|
*/
|
||||||
|
:root {
|
||||||
|
--radius: 0.625rem;
|
||||||
|
|
||||||
|
--hintergrund: oklch(0.99 0.002 250);
|
||||||
|
--vordergrund: oklch(0.21 0.02 260);
|
||||||
|
--karte: oklch(1 0 0);
|
||||||
|
--karte-vordergrund: oklch(0.21 0.02 260);
|
||||||
|
--gedaempft: oklch(0.96 0.004 250);
|
||||||
|
--gedaempft-vordergrund: oklch(0.5 0.015 260);
|
||||||
|
--rand: oklch(0.91 0.006 255);
|
||||||
|
--eingabe: oklch(0.91 0.006 255);
|
||||||
|
--ring: oklch(0.55 0.16 258);
|
||||||
|
|
||||||
|
--betont: oklch(0.52 0.17 258);
|
||||||
|
--betont-vordergrund: oklch(0.99 0.002 250);
|
||||||
|
--gefahr: oklch(0.55 0.21 27);
|
||||||
|
--gefahr-vordergrund: oklch(0.99 0.002 250);
|
||||||
|
--erfolg: oklch(0.6 0.13 155);
|
||||||
|
--warnung: oklch(0.7 0.15 75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--hintergrund: oklch(0.17 0.015 262);
|
||||||
|
--vordergrund: oklch(0.95 0.005 250);
|
||||||
|
--karte: oklch(0.21 0.018 262);
|
||||||
|
--karte-vordergrund: oklch(0.95 0.005 250);
|
||||||
|
--gedaempft: oklch(0.26 0.018 262);
|
||||||
|
--gedaempft-vordergrund: oklch(0.7 0.015 258);
|
||||||
|
--rand: oklch(0.31 0.018 262);
|
||||||
|
--eingabe: oklch(0.31 0.018 262);
|
||||||
|
--ring: oklch(0.62 0.15 258);
|
||||||
|
|
||||||
|
--betont: oklch(0.62 0.16 258);
|
||||||
|
--betont-vordergrund: oklch(0.17 0.015 262);
|
||||||
|
--gefahr: oklch(0.62 0.19 25);
|
||||||
|
--gefahr-vordergrund: oklch(0.98 0.002 250);
|
||||||
|
--erfolg: oklch(0.68 0.12 155);
|
||||||
|
--warnung: oklch(0.78 0.13 75);
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-hintergrund: var(--hintergrund);
|
||||||
|
--color-vordergrund: var(--vordergrund);
|
||||||
|
--color-karte: var(--karte);
|
||||||
|
--color-karte-vordergrund: var(--karte-vordergrund);
|
||||||
|
--color-gedaempft: var(--gedaempft);
|
||||||
|
--color-gedaempft-vordergrund: var(--gedaempft-vordergrund);
|
||||||
|
--color-rand: var(--rand);
|
||||||
|
--color-eingabe: var(--eingabe);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-betont: var(--betont);
|
||||||
|
--color-betont-vordergrund: var(--betont-vordergrund);
|
||||||
|
--color-gefahr: var(--gefahr);
|
||||||
|
--color-gefahr-vordergrund: var(--gefahr-vordergrund);
|
||||||
|
--color-erfolg: var(--erfolg);
|
||||||
|
--color-warnung: var(--warnung);
|
||||||
|
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-rand outline-ring/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-hintergrund text-vordergrund;
|
||||||
|
font-feature-settings:
|
||||||
|
'liga' 1,
|
||||||
|
'calt' 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Wer mit der Tastatur bedient, muss sehen, wo er ist. */
|
||||||
|
:focus-visible {
|
||||||
|
@apply outline-ring outline-2 outline-offset-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import type { Metadata } from 'next'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { ShieldAlert } from 'lucide-react'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
||||||
|
export const metadata: Metadata = { title: 'Keine Berechtigung' }
|
||||||
|
|
||||||
|
export default function KeineBerechtigungSeite() {
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-dvh flex-col items-center justify-center gap-4 px-4 text-center">
|
||||||
|
<ShieldAlert className="text-gedaempft-vordergrund size-10" aria-hidden />
|
||||||
|
<h1 className="text-xl font-semibold">Dazu fehlt dir die Berechtigung</h1>
|
||||||
|
<p className="text-gedaempft-vordergrund max-w-sm text-sm">
|
||||||
|
Diese Seite ist der Verwaltung vorbehalten. Wenn du meinst, dass das ein Versehen
|
||||||
|
ist, wende dich an die Verwaltung dieser Instanz.
|
||||||
|
</p>
|
||||||
|
<Button alsKind art="umriss">
|
||||||
|
<Link href="/">Zurück zum Start</Link>
|
||||||
|
</Button>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import type { Metadata, Viewport } from 'next'
|
||||||
|
import { Toaster } from 'sonner'
|
||||||
|
import { FarbschemaAnbieter } from '@/components/farbschema-anbieter'
|
||||||
|
import './globals.css'
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: {
|
||||||
|
default: 'Planer',
|
||||||
|
template: '%s – Planer',
|
||||||
|
},
|
||||||
|
description: 'Aufgaben, Ideen, Projekte und Zeitblöcke an einem Ort.',
|
||||||
|
applicationName: 'Planer',
|
||||||
|
robots: { index: false, follow: false },
|
||||||
|
}
|
||||||
|
|
||||||
|
export const viewport: Viewport = {
|
||||||
|
width: 'device-width',
|
||||||
|
initialScale: 1,
|
||||||
|
themeColor: [
|
||||||
|
{ media: '(prefers-color-scheme: light)', color: '#fbfbfd' },
|
||||||
|
{ media: '(prefers-color-scheme: dark)', color: '#1a1c22' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WurzelLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<html lang="de" suppressHydrationWarning>
|
||||||
|
<body className="min-h-dvh antialiased">
|
||||||
|
<FarbschemaAnbieter>
|
||||||
|
{children}
|
||||||
|
<Toaster position="bottom-right" richColors closeButton />
|
||||||
|
</FarbschemaAnbieter>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import type { Metadata } from 'next'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
||||||
|
export const metadata: Metadata = { title: 'Nicht gefunden' }
|
||||||
|
|
||||||
|
export default function NichtGefunden() {
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-dvh flex-col items-center justify-center gap-4 px-4 text-center">
|
||||||
|
<p className="text-gedaempft-vordergrund text-sm">Fehler 404</p>
|
||||||
|
<h1 className="text-xl font-semibold">Diese Seite gibt es nicht</h1>
|
||||||
|
<p className="text-gedaempft-vordergrund max-w-sm text-sm">
|
||||||
|
Möglicherweise ist sie in dieser Instanz auch gar nicht vorgesehen.
|
||||||
|
</p>
|
||||||
|
<Button alsKind art="umriss">
|
||||||
|
<Link href="/">Zurück zum Start</Link>
|
||||||
|
</Button>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { ThemeProvider } from 'next-themes'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hell, Dunkel oder nach Systemeinstellung. Die Wahl liegt im Browser des
|
||||||
|
* Benutzers, nicht in der Datenbank.
|
||||||
|
*/
|
||||||
|
export function FarbschemaAnbieter({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<ThemeProvider
|
||||||
|
attribute="class"
|
||||||
|
defaultTheme="system"
|
||||||
|
enableSystem
|
||||||
|
disableTransitionOnChange
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ThemeProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { usePathname } from 'next/navigation'
|
||||||
|
import { useTheme } from 'next-themes'
|
||||||
|
import { LogOut, Moon, Shield, Sun } from 'lucide-react'
|
||||||
|
import { signOut } from 'next-auth/react'
|
||||||
|
import type { Rolle } from '@/generated/prisma/enums'
|
||||||
|
import { ROLLEN_NAME, istAdmin } from '@/lib/rollen'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
||||||
|
type Eintrag = { pfad: string; name: string; nurAdmin?: boolean }
|
||||||
|
|
||||||
|
const EINTRAEGE: Eintrag[] = [
|
||||||
|
{ pfad: '/', name: 'Start' },
|
||||||
|
{ pfad: '/bereiche', name: 'Bereiche' },
|
||||||
|
{ pfad: '/einstellungen', name: 'Einstellungen' },
|
||||||
|
{ pfad: '/verwaltung/protokoll', name: 'Protokoll', nurAdmin: true },
|
||||||
|
]
|
||||||
|
|
||||||
|
export function Kopfleiste({
|
||||||
|
name,
|
||||||
|
email,
|
||||||
|
rolle,
|
||||||
|
instanzName,
|
||||||
|
}: {
|
||||||
|
name: string
|
||||||
|
email: string
|
||||||
|
rolle: Rolle
|
||||||
|
instanzName: string
|
||||||
|
}) {
|
||||||
|
const pfad = usePathname()
|
||||||
|
const sichtbar = EINTRAEGE.filter((e) => !e.nurAdmin || istAdmin(rolle))
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="border-rand bg-karte border-b">
|
||||||
|
<div className="mx-auto flex w-full max-w-5xl flex-wrap items-center gap-x-6 gap-y-3 px-4 py-3">
|
||||||
|
<Link href="/" className="text-base font-semibold tracking-tight">
|
||||||
|
Planer
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<nav aria-label="Hauptnavigation" className="flex flex-1 flex-wrap gap-1">
|
||||||
|
{sichtbar.map((eintrag) => {
|
||||||
|
const aktiv =
|
||||||
|
eintrag.pfad === '/' ? pfad === '/' : pfad.startsWith(eintrag.pfad)
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={eintrag.pfad}
|
||||||
|
href={eintrag.pfad}
|
||||||
|
aria-current={aktiv ? 'page' : undefined}
|
||||||
|
className={cn(
|
||||||
|
'rounded-md px-3 py-1.5 text-sm transition-colors',
|
||||||
|
aktiv
|
||||||
|
? 'bg-gedaempft text-vordergrund font-medium'
|
||||||
|
: 'text-gedaempft-vordergrund hover:bg-gedaempft hover:text-vordergrund',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{eintrag.nurAdmin && (
|
||||||
|
<Shield className="mr-1 inline size-3.5" aria-hidden />
|
||||||
|
)}
|
||||||
|
{eintrag.name}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<FarbschemaKnopf />
|
||||||
|
<span
|
||||||
|
className="text-gedaempft-vordergrund hidden text-xs sm:inline"
|
||||||
|
title={`${email} · ${ROLLEN_NAME[rolle]} · ${instanzName}`}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
art="leise"
|
||||||
|
groesse="quadrat"
|
||||||
|
title="Abmelden"
|
||||||
|
onClick={() => void signOut({ callbackUrl: '/anmelden' })}
|
||||||
|
>
|
||||||
|
<LogOut aria-hidden />
|
||||||
|
<span className="sr-only">Abmelden</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FarbschemaKnopf() {
|
||||||
|
const { resolvedTheme, setTheme } = useTheme()
|
||||||
|
|
||||||
|
// Welches Symbol gilt, entscheidet die dark-Klasse und damit CSS. next-themes
|
||||||
|
// setzt sie schon vor der Hydratation, deshalb braucht es hier weder einen
|
||||||
|
// Effekt noch einen Zustand – und es blitzt nichts auf.
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
art="leise"
|
||||||
|
groesse="quadrat"
|
||||||
|
title="Farbschema wechseln"
|
||||||
|
onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
|
||||||
|
>
|
||||||
|
<Moon className="dark:hidden" aria-hidden />
|
||||||
|
<Sun className="hidden dark:block" aria-hidden />
|
||||||
|
<span className="sr-only">Farbschema wechseln</span>
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import { Slot } from '@radix-ui/react-slot'
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const knopfStile = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
art: {
|
||||||
|
betont: 'bg-betont text-betont-vordergrund hover:bg-betont/90',
|
||||||
|
umriss: 'border border-rand bg-karte hover:bg-gedaempft',
|
||||||
|
leise: 'hover:bg-gedaempft',
|
||||||
|
gefahr: 'bg-gefahr text-gefahr-vordergrund hover:bg-gefahr/90',
|
||||||
|
verweis: 'text-betont underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
groesse: {
|
||||||
|
normal: 'h-9 px-4 py-2',
|
||||||
|
klein: 'h-8 rounded-md px-3 text-xs',
|
||||||
|
gross: 'h-11 rounded-md px-6',
|
||||||
|
quadrat: 'size-9',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
art: 'betont',
|
||||||
|
groesse: 'normal',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
export type KnopfEigenschaften = React.ComponentProps<'button'> &
|
||||||
|
VariantProps<typeof knopfStile> & {
|
||||||
|
/** Rendert stattdessen das Kindelement, z. B. einen Link. */
|
||||||
|
alsKind?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
art,
|
||||||
|
groesse,
|
||||||
|
alsKind = false,
|
||||||
|
...rest
|
||||||
|
}: KnopfEigenschaften) {
|
||||||
|
const Element = alsKind ? Slot : 'button'
|
||||||
|
return <Element className={cn(knopfStile({ art, groesse }), className)} {...rest} />
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, knopfStile }
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
function Card({ className, ...rest }: React.ComponentProps<'div'>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'bg-karte text-karte-vordergrund border-rand rounded-xl border shadow-sm',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardKopf({ className, ...rest }: React.ComponentProps<'div'>) {
|
||||||
|
return <div className={cn('flex flex-col gap-1 p-6 pb-4', className)} {...rest} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitel({ className, ...rest }: React.ComponentProps<'h2'>) {
|
||||||
|
return (
|
||||||
|
<h2
|
||||||
|
className={cn('text-lg leading-none font-semibold tracking-tight', className)}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardBeschreibung({ className, ...rest }: React.ComponentProps<'p'>) {
|
||||||
|
return <p className={cn('text-gedaempft-vordergrund text-sm', className)} {...rest} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardInhalt({ className, ...rest }: React.ComponentProps<'div'>) {
|
||||||
|
return <div className={cn('p-6 pt-0', className)} {...rest} />
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFuss({ className, ...rest }: React.ComponentProps<'div'>) {
|
||||||
|
return <div className={cn('flex items-center gap-2 p-6 pt-0', className)} {...rest} />
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Card, CardKopf, CardTitel, CardBeschreibung, CardInhalt, CardFuss }
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
function Input({ className, type, ...rest }: React.ComponentProps<'input'>) {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
'border-eingabe bg-karte flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs transition-colors outline-none',
|
||||||
|
'placeholder:text-gedaempft-vordergrund',
|
||||||
|
'focus-visible:border-ring focus-visible:ring-ring/40 focus-visible:ring-2',
|
||||||
|
'aria-invalid:border-gefahr aria-invalid:ring-gefahr/30',
|
||||||
|
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Input }
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import * as LabelPrimitive from '@radix-ui/react-label'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
function Label({ className, ...rest }: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
className={cn(
|
||||||
|
'text-sm leading-none font-medium select-none',
|
||||||
|
'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Label }
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import * as SeparatorPrimitive from '@radix-ui/react-separator'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
function Separator({
|
||||||
|
className,
|
||||||
|
orientation = 'horizontal',
|
||||||
|
decorative = true,
|
||||||
|
...rest
|
||||||
|
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||||
|
return (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
'bg-rand shrink-0',
|
||||||
|
orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Separator }
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { describe, expect, it } from 'vitest'
|
||||||
|
import { ROLLEN_NAME, istAdmin, rolleReichtAus } from './rollen'
|
||||||
|
|
||||||
|
describe('rolleReichtAus', () => {
|
||||||
|
it('laesst jede Rolle das, was sie selbst ist', () => {
|
||||||
|
expect(rolleReichtAus('BENUTZER', 'BENUTZER')).toBe(true)
|
||||||
|
expect(rolleReichtAus('ADMIN', 'ADMIN')).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('laesst die Verwaltung auch alles Niedrigere', () => {
|
||||||
|
expect(rolleReichtAus('ADMIN', 'BENUTZER')).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('laesst einen Benutzer nicht in die Verwaltung', () => {
|
||||||
|
expect(rolleReichtAus('BENUTZER', 'ADMIN')).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('istAdmin', () => {
|
||||||
|
it('erkennt nur die Verwaltung', () => {
|
||||||
|
expect(istAdmin('ADMIN')).toBe(true)
|
||||||
|
expect(istAdmin('BENUTZER')).toBe(false)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('ROLLEN_NAME', () => {
|
||||||
|
it('benennt jede Rolle deutsch', () => {
|
||||||
|
expect(ROLLEN_NAME.BENUTZER).toBe('Benutzer')
|
||||||
|
expect(ROLLEN_NAME.ADMIN).toBe('Verwaltung')
|
||||||
|
})
|
||||||
|
})
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import type { Rolle } from '@/generated/prisma/enums'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Rangfolge der Rollen. Reine Logik, damit Seite, Server Action und
|
||||||
|
* Oberflaeche dieselbe Antwort geben.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const RANG: Record<Rolle, number> = {
|
||||||
|
BENUTZER: 1,
|
||||||
|
ADMIN: 2,
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ROLLEN_NAME: Record<Rolle, string> = {
|
||||||
|
BENUTZER: 'Benutzer',
|
||||||
|
ADMIN: 'Verwaltung',
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Reicht die vorhandene Rolle fuer das Verlangte? */
|
||||||
|
export function rolleReichtAus(vorhanden: Rolle, verlangt: Rolle): boolean {
|
||||||
|
return RANG[vorhanden] >= RANG[verlangt]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function istAdmin(rolle: Rolle): boolean {
|
||||||
|
return rolleReichtAus(rolle, 'ADMIN')
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user