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' 'use client'
import { useAuth } from '@/lib/auth/context'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation' import { useParams, useRouter } from 'next/navigation'
import { getSite, type Site } from '@/lib/api/sites' import { getSite, type Site } from '@/lib/api/sites'
@@ -17,6 +18,9 @@ import Chart from '@/components/dashboard/Chart'
import PerformanceStats from '@/components/dashboard/PerformanceStats' import PerformanceStats from '@/components/dashboard/PerformanceStats'
export default function SiteDashboardPage() { export default function SiteDashboardPage() {
const { user } = useAuth()
const canEdit = user?.role === 'owner' || user?.role === 'admin'
const params = useParams() const params = useParams()
const router = useRouter() const router = useRouter()
const siteId = params.id as string const siteId = params.id as string
@@ -221,12 +225,14 @@ export default function SiteDashboardPage() {
className="min-w-[100px]" className="min-w-[100px]"
/> />
)} )}
{canEdit && (
<button <button
onClick={() => router.push(`/sites/${siteId}/settings`)} onClick={() => router.push(`/sites/${siteId}/settings`)}
className="btn-secondary text-sm" className="btn-secondary text-sm"
> >
Settings Settings
</button> </button>
)}
</div> </div>
</div> </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 { APP_URL, API_URL } from '@/lib/api/client'
import { generatePrivacySnippet } from '@/lib/utils/privacySnippet' import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { useAuth } from '@/lib/auth/context'
import { import {
GearIcon, GearIcon,
GlobeIcon, GlobeIcon,
@@ -51,6 +52,9 @@ const TIMEZONES = [
] ]
export default function SiteSettingsPage() { export default function SiteSettingsPage() {
const { user } = useAuth()
const canEdit = user?.role === 'owner' || user?.role === 'admin'
const params = useParams() const params = useParams()
const router = useRouter() const router = useRouter()
const siteId = params.id as string const siteId = params.id as string
@@ -302,6 +306,13 @@ export default function SiteSettingsPage() {
{/* Content Area */} {/* Content Area */}
<div className="flex-1 relative"> <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 <motion.div
key={activeTab} key={activeTab}
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
@@ -398,28 +409,31 @@ export default function SiteSettingsPage() {
</div> </div>
</div> </div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end"> <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
<button {canEdit && (
type="submit" <button
disabled={saving} type="submit"
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 disabled={saving}
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200" 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" /> {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 <CheckIcon className="w-4 h-4" />
</> Save Changes
)} </>
</button> )}
</div> </button>
</form> )}
</div>
</form>
<div className="space-y-6"> {canEdit && (
<div> <div className="space-y-6">
<h2 className="text-xl font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2> <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> <p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for your site.</p>
</div> </div>
@@ -450,9 +464,9 @@ export default function SiteSettingsPage() {
</button> </button>
</div> </div>
</div> </div>
)}
</div> </div>
</div> )}
)}
{activeTab === 'visibility' && ( {activeTab === 'visibility' && (
<div className="space-y-12"> <div className="space-y-12">
@@ -566,21 +580,23 @@ export default function SiteSettingsPage() {
</div> </div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end"> <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
<button {canEdit && (
type="submit" <button
disabled={saving} type="submit"
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 disabled={saving}
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200" 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" /> {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 <CheckIcon className="w-4 h-4" />
</> Save Changes
)} </>
</button> )}
</button>
)}
</div> </div>
</form> </form>
</div> </div>
@@ -819,21 +835,23 @@ export default function SiteSettingsPage() {
</div> </div>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end"> <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
<button {canEdit && (
type="submit" <button
disabled={saving} type="submit"
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 disabled={saving}
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200" 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" /> {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 <CheckIcon className="w-4 h-4" />
</> Save Changes
)} </>
</button> )}
</button>
)}
</div> </div>
</form> </form>
</div> </div>
@@ -985,21 +1003,23 @@ export default function SiteSettingsPage() {
</AnimatePresence> </AnimatePresence>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end"> <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
<button {canEdit && (
type="submit" <button
disabled={saving} type="submit"
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 disabled={saving}
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200" 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" /> {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 <CheckIcon className="w-4 h-4" />
</> Save Changes
)} </>
</button> )}
</button>
)}
</div> </div>
</form> </form>
</div> </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 { listSites, deleteSite, type Site } from '@/lib/api/sites'
import { toast } from 'sonner' import { toast } from 'sonner'
import LoadingOverlay from '../LoadingOverlay' import LoadingOverlay from '../LoadingOverlay'
import { useAuth } from '@/lib/auth/context'
import { BarChartIcon } from '@radix-ui/react-icons' import { BarChartIcon } from '@radix-ui/react-icons'
export default function SiteList() { export default function SiteList() {
const { user } = useAuth()
const [sites, setSites] = useState<Site[]>([]) const [sites, setSites] = useState<Site[]>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
@@ -72,13 +74,15 @@ export default function SiteList() {
<BarChartIcon className="w-4 h-4" /> <BarChartIcon className="w-4 h-4" />
View Dashboard View Dashboard
</Link> </Link>
<button {(user?.role === 'owner' || user?.role === 'admin') && (
type="button" <button
onClick={() => handleDelete(site.id)} type="button"
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" 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> Delete
</button>
)}
</div> </div>
</div> </div>
))} ))}

12
lib/auth/context.tsx
View File

@@ -63,8 +63,16 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
const refresh = useCallback(async () => { const refresh = useCallback(async () => {
try { try {
const userData = await apiRequest<User>('/auth/user/me') 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) { } catch (e) {
console.error('Failed to refresh user data', e) console.error('Failed to refresh user data', e)
} }