johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: F002 authentication & session layer

Browse Source 
Add permission matrix, ProtectedRoute, RoleGuard, PermissionGate,
DemoRoleSwitcher, OrganizationSwitcher, AccessDenied, SessionExpired,
and institutional LoginScreen. Wire workspace-level route protection
into App.tsx; sidebar filters tabs by allowedWorkspaces.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-15 12:01:46 +02:00
parent 9a2476c58a
commit 7bed2fec86
15 changed files with 852 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/auth/AccessDenied.tsx
+75
View File
@@ -0,0 +1,75 @@
import { Box, Button, Typography } from '@mui/material'
import type { SxProps, Theme } from '@mui/material'
import { ShieldOff } from 'lucide-react'
import { useNavigate } from 'react-router'
interface AccessDeniedProps {
title?: string
message?: string
onBack?: () => void
sx?: SxProps<Theme>
}
export function AccessDenied({
title = 'Kein Zugriff',
message = 'Sie haben keine Berechtigung, diesen Bereich zu öffnen.',
onBack,
sx,
}: AccessDeniedProps) {
const navigate = useNavigate()
function handleBack() {
if (onBack) {
onBack()
} else {
navigate(-1)
}
}
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: 400,
gap: 2,
p: 4,
...sx,
}}
>
<Box
sx={{
width: 56,
height: 56,
borderRadius: '50%',
bgcolor: 'rgba(239,68,68,0.08)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<ShieldOff size={28} color="#ef4444" />
</Box>
<Box sx={{ textAlign: 'center', maxWidth: 400 }}>
<Typography variant="h6" sx={{ fontWeight: 600, mb: 0.5 }}>
{title}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{message}
</Typography>
</Box>
<Button
variant="outlined"
size="small"
onClick={handleBack}
sx={{ mt: 1, textTransform: 'none' }}
>
Zurück
</Button>
</Box>
)
}
src/components/auth/DemoRoleSwitcher.tsx
+55
View File
@@ -0,0 +1,55 @@
import { Box, Chip, Typography } from '@mui/material'
import { UserRole } from '../../domain/enums'
import { authService } from '../../services/authService'
import { useSessionStore } from '../../stores/sessionStore'
const ROLE_LABELS: Record<UserRole, string> = {
[UserRole.SUPER_ADMIN]: 'Super Admin',
[UserRole.ORGANIZATION_ADMIN]: 'Org Admin',
[UserRole.PROPERTY_MANAGER]: 'Prop. Manager',
[UserRole.REVIEWER]: 'Reviewer',
[UserRole.OWNER_VIEWER]: 'Owner Viewer',
[UserRole.DEMAND_USER]: 'Demand User',
}
export function DemoRoleSwitcher() {
const { currentUser } = useSessionStore()
async function handleSwitch(role: UserRole) {
await authService.switchDemoRole(role)
}
return (
<Box sx={{ px: 1, py: 0.5 }}>
<Typography
variant="caption"
sx={{ color: 'text.secondary', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', mb: 0.75 }}
>
Demo-Modus
</Typography>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{Object.values(UserRole).map((role) => {
const active = currentUser?.role === role
return (
<Chip
key={role}
label={ROLE_LABELS[role]}
size="small"
clickable
onClick={() => handleSwitch(role)}
sx={{
fontSize: '0.7rem',
height: 22,
bgcolor: active ? '#1e3a5f' : 'transparent',
color: active ? '#fff' : 'text.secondary',
border: '1px solid',
borderColor: active ? '#1e3a5f' : 'divider',
'&:hover': { bgcolor: active ? '#162d4a' : 'rgba(0,0,0,0.04)' },
}}
/>
)
})}
</Box>
</Box>
)
}
src/components/auth/OrganizationSwitcher.tsx
+40
View File
@@ -0,0 +1,40 @@
import { FormControl, MenuItem, Select, Typography } from '@mui/material'
import type { SelectChangeEvent } from '@mui/material'
import { authService } from '../../services/authService'
import { useSessionStore } from '../../stores/sessionStore'
const MOCK_ORGANIZATIONS = [
{ id: 'org-wincasa', name: 'Wincasa AG' },
{ id: 'org-mobimo', name: 'Mobimo Management AG' },
{ id: 'org-ubs', name: 'UBS Asset Management RE' },
]
export function OrganizationSwitcher() {
const { activeOrganizationId } = useSessionStore()
async function handleChange(e: SelectChangeEvent<string>) {
await authService.switchOrganization(e.target.value)
}
return (
<FormControl size="small" fullWidth sx={{ mt: 0.5 }}>
<Typography
variant="caption"
sx={{ color: 'text.secondary', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, mb: 0.5, display: 'block' }}
>
Organisation
</Typography>
<Select
value={activeOrganizationId ?? ''}
onChange={handleChange}
sx={{ fontSize: '0.8rem' }}
>
{MOCK_ORGANIZATIONS.map((org) => (
<MenuItem key={org.id} value={org.id} sx={{ fontSize: '0.8rem' }}>
{org.name}
</MenuItem>
))}
</Select>
</FormControl>
)
}
src/components/auth/PermissionGate.tsx
+19
View File
@@ -0,0 +1,19 @@
import type { ReactNode } from 'react'
import type { MockUser } from '../../stores/sessionStore'
import { useSessionStore } from '../../stores/sessionStore'
interface PermissionGateProps {
check: (user: MockUser) => boolean
fallback?: ReactNode
children: ReactNode
}
export function PermissionGate({ check, fallback = null, children }: PermissionGateProps) {
const { currentUser } = useSessionStore()
if (!currentUser || !check(currentUser)) {
return <>{fallback}</>
}
return <>{children}</>
}
src/components/auth/ProtectedRoute.tsx
+38
View File
@@ -0,0 +1,38 @@
import { Navigate, Outlet } from 'react-router'
import type { WorkspaceType } from '../../domain/enums'
import { useSessionStore } from '../../stores/sessionStore'
import { SessionStatus } from '../../stores/sessionStore'
import { canAccessWorkspace } from '../../lib/permissions'
import { AccessDenied } from './AccessDenied'
import { SessionExpired } from './SessionExpired'
interface ProtectedRouteProps {
workspace?: WorkspaceType
}
export function ProtectedRoute({ workspace }: ProtectedRouteProps) {
const { isAuthenticated, currentUser, sessionStatus } = useSessionStore()
if (!isAuthenticated || sessionStatus === SessionStatus.UNAUTHENTICATED) {
return <Navigate to="/auth/login" replace />
}
if (sessionStatus === SessionStatus.EXPIRED) {
return <SessionExpired />
}
if (workspace && currentUser && !canAccessWorkspace(currentUser, workspace)) {
const workspaceLabel: Record<string, string> = {
SUPPLY: 'Supply',
DEMAND: 'Demand',
OPERATIONS: 'Operations',
}
return (
<AccessDenied
message={`Sie haben keine Berechtigung für den ${workspaceLabel[workspace] ?? workspace}-Bereich.`}
/>
)
}
return <Outlet />
}
src/components/auth/RoleGuard.tsx
+20
View File
@@ -0,0 +1,20 @@
import type { ReactNode } from 'react'
import type { UserRole } from '../../domain/enums'
import { useSessionStore } from '../../stores/sessionStore'
import { AccessDenied } from './AccessDenied'
interface RoleGuardProps {
roles: UserRole[]
fallback?: ReactNode
children: ReactNode
}
export function RoleGuard({ roles, fallback, children }: RoleGuardProps) {
const { currentUser } = useSessionStore()
if (!currentUser || !roles.includes(currentUser.role)) {
return <>{fallback ?? <AccessDenied />}</>
}
return <>{children}</>
}
src/components/auth/SessionExpired.tsx
+60
View File
@@ -0,0 +1,60 @@
import { Box, Button, Typography } from '@mui/material'
import { Clock } from 'lucide-react'
import { useNavigate } from 'react-router'
import { useSessionStore } from '../../stores/sessionStore'
export function SessionExpired() {
const { logout } = useSessionStore()
const navigate = useNavigate()
function handleRelogin() {
logout()
navigate('/auth/login')
}
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
minHeight: '100vh',
gap: 2,
bgcolor: '#f8fafc',
p: 4,
}}
>
<Box
sx={{
width: 56,
height: 56,
borderRadius: '50%',
bgcolor: 'rgba(245,158,11,0.1)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Clock size={28} color="#f59e0b" />
</Box>
<Box sx={{ textAlign: 'center', maxWidth: 380 }}>
<Typography variant="h6" sx={{ fontWeight: 600, mb: 0.5 }}>
Sitzung abgelaufen
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
Ihre Sitzung ist abgelaufen. Bitte melden Sie sich erneut an.
</Typography>
</Box>
<Button
variant="contained"
onClick={handleRelogin}
sx={{ mt: 1, bgcolor: '#1e3a5f', textTransform: 'none' }}
>
Erneut anmelden
</Button>
</Box>
)
}
src/components/auth/index.ts
+7
View File
@@ -0,0 +1,7 @@
export { AccessDenied } from './AccessDenied'
export { SessionExpired } from './SessionExpired'
export { PermissionGate } from './PermissionGate'
export { RoleGuard } from './RoleGuard'
export { ProtectedRoute } from './ProtectedRoute'
export { DemoRoleSwitcher } from './DemoRoleSwitcher'
export { OrganizationSwitcher } from './OrganizationSwitcher'
src/components/layout/AppShell.tsx
+6 -1
View File
@@ -156,6 +156,7 @@ const NAV_HOVER_BG = 'rgba(255,255,255,0.06)'
interface SidebarProps {
collapsed: boolean
activeWorkspace: WorkspaceType
allowedWorkspaces: WorkspaceType[]
onWorkspaceClick: (workspace: WorkspaceType) => void
onToggle: () => void
userName: string
@@ -165,6 +166,7 @@ interface SidebarProps {
function Sidebar({
collapsed,
activeWorkspace,
allowedWorkspaces,
onWorkspaceClick,
onToggle,
userName,
@@ -172,6 +174,7 @@ function Sidebar({
}: SidebarProps) {
const config = WORKSPACE_CONFIG[activeWorkspace]
const width = collapsed ? 60 : 240
const visibleWorkspaces = WORKSPACE_ORDER.filter((ws) => allowedWorkspaces.includes(ws))
return (
<Box
@@ -240,7 +243,7 @@ function Sidebar({
flexShrink: 0,
}}
>
{WORKSPACE_ORDER.map((ws) => {
{visibleWorkspaces.map((ws) => {
const wsConfig = WORKSPACE_CONFIG[ws]
const Icon = wsConfig.icon
const isActive = ws === activeWorkspace
@@ -506,12 +509,14 @@ export function AppShell() {
const userName = currentUser?.name ?? 'User'
const orgName = currentUser?.organizationName ?? ''
const allowedWorkspaces = currentUser?.allowedWorkspaces ?? WORKSPACE_ORDER
return (
<Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
<Sidebar
collapsed={sidebarCollapsed}
activeWorkspace={activeWorkspace}
allowedWorkspaces={allowedWorkspaces}
onWorkspaceClick={handleWorkspaceClick}
onToggle={toggleSidebar}
userName={userName}
src/components/layout/UserMenu.tsx
+34 -5
View File
@@ -1,8 +1,18 @@
import { useState } from 'react'
import { useNavigate } from 'react-router'
import { Avatar, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
import { Avatar, Box, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
import { LogOut, Settings, User } from 'lucide-react'
import { useSessionStore } from '../../stores/sessionStore'
import { DemoRoleSwitcher } from '../auth/DemoRoleSwitcher'
const ROLE_LABELS: Record<string, string> = {
SUPER_ADMIN: 'Super Admin',
ORGANIZATION_ADMIN: 'Org Admin',
PROPERTY_MANAGER: 'Property Manager',
REVIEWER: 'Reviewer',
OWNER_VIEWER: 'Owner Viewer',
DEMAND_USER: 'Demand User',
}
function getUserInitials(name: string): string {
return name
@@ -29,7 +39,7 @@ export function UserMenu() {
function handleLogout() {
handleClose()
logout()
navigate('/')
navigate('/auth/login')
}
const initials = getUserInitials(currentUser?.name ?? 'U')
@@ -46,15 +56,25 @@ export function UserMenu() {
anchorEl={anchorEl}
open={!!anchorEl}
onClose={handleClose}
slotProps={{ paper: { sx: { width: 200, mt: 1 } } }}
slotProps={{ paper: { sx: { width: 300, mt: 1 } } }}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
>
{/* User info header */}
{currentUser && (
<MenuItem disabled sx={{ opacity: '1 !important' }}>
<Box sx={{ px: 2, py: 1.5 }}>
<Typography variant="body2" sx={{ fontWeight: 600 }}>{currentUser.name}</Typography>
</MenuItem>
<Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
{ROLE_LABELS[currentUser.role] ?? currentUser.role}
</Typography>
<Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
{currentUser.organizationName}
</Typography>
</Box>
)}
<Divider />
<MenuItem onClick={handleClose}>
<ListItemIcon><User size={16} /></ListItemIcon>
Profil
@@ -63,7 +83,16 @@ export function UserMenu() {
<ListItemIcon><Settings size={16} /></ListItemIcon>
Einstellungen
</MenuItem>
<Divider />
{/* Demo role switcher */}
<Box sx={{ px: 1, py: 1 }}>
<DemoRoleSwitcher />
</Box>
<Divider />
<MenuItem onClick={handleLogout}>
<ListItemIcon><LogOut size={16} /></ListItemIcon>
Abmelden