ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat(auth): implement role-based access control in SiteDashboard and SiteSettings, enhancing user experience with edit permissions

Browse Source
This commit is contained in:
Usman Baig
2026-01-22 20:28:44 +01:00
parent c5d116b334
commit 3996c2550e
4 changed files with 115 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/sites/[id]/page.tsx
View File

@@ -1,5 +1,6 @@
'use client'
import { useAuth } from '@/lib/auth/context'
import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { getSite, type Site } from '@/lib/api/sites'
@@ -17,6 +18,9 @@ import Chart from '@/components/dashboard/Chart'
import PerformanceStats from '@/components/dashboard/PerformanceStats'
export default function SiteDashboardPage() {
const { user } = useAuth()
const canEdit = user?.role === 'owner' || user?.role === 'admin'
const params = useParams()
const router = useRouter()
const siteId = params.id as string
@@ -221,12 +225,14 @@ export default function SiteDashboardPage() {
className="min-w-[100px]"
/>
)}
{canEdit && (
<button
onClick={() => router.push(`/sites/${siteId}/settings`)}
className="btn-secondary text-sm"
>
Settings
</button>
)}
</div>
</div>
</div>

22
app/sites/[id]/settings/page.tsx
View File

@@ -12,6 +12,7 @@ import Select from '@/components/ui/Select'
import { APP_URL, API_URL } from '@/lib/api/client'
import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
import { motion, AnimatePresence } from 'framer-motion'
import { useAuth } from '@/lib/auth/context'
import {
GearIcon,
GlobeIcon,
@@ -51,6 +52,9 @@ const TIMEZONES = [
]
export default function SiteSettingsPage() {
const { user } = useAuth()
const canEdit = user?.role === 'owner' || user?.role === 'admin'
const params = useParams()
const router = useRouter()
const siteId = params.id as string
@@ -302,6 +306,13 @@ export default function SiteSettingsPage() {
{/* Content Area */}
<div className="flex-1 relative">
{!canEdit && (
<div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-xl border border-blue-200 dark:border-blue-800 flex items-center gap-3">
<ExclamationTriangleIcon className="w-5 h-5" />
<p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
</div>
)}
<motion.div
key={activeTab}
initial={{ opacity: 0, x: 20 }}
@@ -399,6 +410,7 @@ export default function SiteSettingsPage() {
</div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && (
<button
type="submit"
disabled={saving}
@@ -414,9 +426,11 @@ export default function SiteSettingsPage() {
</>
)}
</button>
)}
</div>
</form>
{canEdit && (
<div className="space-y-6">
<div>
<h2 className="text-xl font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
@@ -450,7 +464,7 @@ export default function SiteSettingsPage() {
</button>
</div>
</div>
</div>
)}
</div>
)}
@@ -566,6 +580,7 @@ export default function SiteSettingsPage() {
</div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && (
<button
type="submit"
disabled={saving}
@@ -581,6 +596,7 @@ export default function SiteSettingsPage() {
</>
)}
</button>
)}
</div>
</form>
</div>
@@ -819,6 +835,7 @@ export default function SiteSettingsPage() {
</div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && (
<button
type="submit"
disabled={saving}
@@ -834,6 +851,7 @@ export default function SiteSettingsPage() {
</>
)}
</button>
)}
</div>
</form>
</div>
@@ -985,6 +1003,7 @@ export default function SiteSettingsPage() {
</AnimatePresence>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && (
<button
type="submit"
disabled={saving}
@@ -1000,6 +1019,7 @@ export default function SiteSettingsPage() {
</>
)}
</button>
)}
</div>
</form>
</div>

4
components/sites/SiteList.tsx
View File

@@ -5,9 +5,11 @@ import Link from 'next/link'
import { listSites, deleteSite, type Site } from '@/lib/api/sites'
import { toast } from 'sonner'
import LoadingOverlay from '../LoadingOverlay'
import { useAuth } from '@/lib/auth/context'
import { BarChartIcon } from '@radix-ui/react-icons'
export default function SiteList() {
const { user } = useAuth()
const [sites, setSites] = useState<Site[]>([])
const [loading, setLoading] = useState(true)
@@ -72,6 +74,7 @@ export default function SiteList() {
<BarChartIcon className="w-4 h-4" />
View Dashboard
</Link>
{(user?.role === 'owner' || user?.role === 'admin') && (
<button
type="button"
onClick={() => handleDelete(site.id)}
@@ -79,6 +82,7 @@ export default function SiteList() {
>
Delete
</button>
)}
</div>
</div>
))}

12
lib/auth/context.tsx
View File

@@ -63,8 +63,16 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
const refresh = useCallback(async () => {
try {
const userData = await apiRequest<User>('/auth/user/me')
setUser(userData)
localStorage.setItem('user', JSON.stringify(userData))
setUser(prev => {
const merged = {
...userData,
org_id: prev?.org_id,
role: prev?.role
}
localStorage.setItem('user', JSON.stringify(merged))
return merged
})
} catch (e) {
console.error('Failed to refresh user data', e)
}