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>

156
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 }}
@@ -398,28 +409,31 @@ export default function SiteSettingsPage() {
</div>
</div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
</div>
</form>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && (
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
)}
</div>
</form>
<div className="space-y-6">
<div>
<h2 className="text-xl font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
{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>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for your site.</p>
</div>
@@ -450,9 +464,9 @@ export default function SiteSettingsPage() {
</button>
</div>
</div>
)}
</div>
</div>
)}
)}
{activeTab === 'visibility' && (
<div className="space-y-12">
@@ -566,21 +580,23 @@ export default function SiteSettingsPage() {
</div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
{canEdit && (
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
)}
</div>
</form>
</div>
@@ -819,21 +835,23 @@ export default function SiteSettingsPage() {
</div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
{canEdit && (
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
)}
</div>
</form>
</div>
@@ -985,21 +1003,23 @@ export default function SiteSettingsPage() {
</AnimatePresence>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
{canEdit && (
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
)}
</div>
</form>
</div>

18
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,13 +74,15 @@ export default function SiteList() {
<BarChartIcon className="w-4 h-4" />
View Dashboard
</Link>
<button
type="button"
onClick={() => handleDelete(site.id)}
className="shrink-0 text-sm text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 py-2 px-2"
>
Delete
</button>
{(user?.role === 'owner' || user?.role === 'admin') && (
<button
type="button"
onClick={() => handleDelete(site.id)}
className="shrink-0 text-sm text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 py-2 px-2"
>
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)
}