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

fix(settings): normalize Account tabs to design standards

Browse Source
This commit is contained in:
Usman Baig
2026-03-25 22:24:02 +01:00
parent a3b746deeb
commit 9893b283cf
1 changed files with 53 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
components/settings/unified/tabs/AccountProfileTab.tsx
View File

@@ -1,11 +1,12 @@
'use client'
import { useState, useEffect, useRef, useCallback } from 'react'
import { Input, Button, toast, Spinner } from '@ciphera-net/ui'
import { Input, toast, Spinner } from '@ciphera-net/ui'
import { useAuth } from '@/lib/auth/context'
import { updateDisplayName } from '@/lib/api/user'
import { deleteAccount } from '@/lib/api/user'
import { getAuthErrorMessage } from '@ciphera-net/ui'
import { DangerZone } from '@/components/settings/unified/DangerZone'
export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { onDirtyChange?: (dirty: boolean) => void; onRegisterSave?: (fn: () => Promise<void>) => void }) {
const { user, refresh, logout } = useAuth()
@@ -61,7 +62,7 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
if (!user) return <div className="flex items-center justify-center py-12"><Spinner className="w-6 h-6 text-neutral-500" /></div>
return (
<div className="space-y-8">
<div className="space-y-6">
<div>
<h3 className="text-base font-semibold text-white mb-1">Profile</h3>
<p className="text-sm text-neutral-400">Manage your personal account settings.</p>
@@ -87,66 +88,58 @@ export default function AccountProfileTab({ onDirtyChange, onRegisterSave }: { o
</div>
{/* Danger Zone */}
<div className="space-y-3 pt-4 border-t border-neutral-800">
<h3 className="text-base font-semibold text-red-500">Danger Zone</h3>
<div className="rounded-xl border border-red-900/30 bg-red-900/10 p-4">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-white">Delete Account</p>
<p className="text-xs text-neutral-400">Permanently delete your account and all associated data.</p>
</div>
<Button
variant="secondary"
className="text-red-400 border-red-900 hover:bg-red-900/20 text-sm"
onClick={() => setShowDeleteConfirm(prev => !prev)}
>
Delete
</Button>
<DangerZone
items={[
{
title: 'Delete Account',
description: 'Permanently delete your account and all associated data.',
buttonLabel: 'Delete',
variant: 'solid',
onClick: () => setShowDeleteConfirm(prev => !prev),
},
]}
/>
{showDeleteConfirm && (
<div className="p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
<p className="text-sm text-red-300">This will permanently delete:</p>
<ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
<li>Your account and all personal data</li>
<li>All sessions and trusted devices</li>
<li>You will be removed from all organizations</li>
</ul>
<div>
<label className="block text-xs text-neutral-400 mb-1">Your password</label>
<Input
type="password"
value={deletePassword}
onChange={e => setDeletePassword(e.target.value)}
placeholder="Enter your password"
/>
</div>
<div>
<label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
<Input
type="text"
value={deleteText}
onChange={e => setDeleteText(e.target.value)}
placeholder="DELETE"
/>
</div>
<div className="flex gap-2">
<button
onClick={handleDelete}
disabled={deleteText !== 'DELETE' || !deletePassword || deleting}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
>
{deleting ? 'Deleting...' : 'Delete Account'}
</button>
<button onClick={() => { setShowDeleteConfirm(false); setDeleteText(''); setDeletePassword('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
Cancel
</button>
</div>
{showDeleteConfirm && (
<div className="mt-4 p-4 border border-red-900/50 bg-red-900/10 rounded-xl space-y-3">
<p className="text-sm text-red-300">This will permanently delete:</p>
<ul className="text-xs text-neutral-400 list-disc list-inside space-y-1">
<li>Your account and all personal data</li>
<li>All sessions and trusted devices</li>
<li>You will be removed from all organizations</li>
</ul>
<div>
<label className="block text-xs text-neutral-400 mb-1">Your password</label>
<input
type="password"
value={deletePassword}
onChange={e => setDeletePassword(e.target.value)}
className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
placeholder="Enter your password"
/>
</div>
<div>
<label className="block text-xs text-neutral-400 mb-1">Type DELETE to confirm</label>
<input
type="text"
value={deleteText}
onChange={e => setDeleteText(e.target.value)}
className="w-full px-3 py-2 border border-neutral-700 rounded-lg bg-neutral-900 text-white text-sm"
placeholder="DELETE"
/>
</div>
<div className="flex gap-2">
<button
onClick={handleDelete}
disabled={deleteText !== 'DELETE' || !deletePassword || deleting}
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm font-medium disabled:opacity-50"
>
{deleting ? 'Deleting...' : 'Delete Account'}
</button>
<button onClick={() => { setShowDeleteConfirm(false); setDeleteText(''); setDeletePassword('') }} className="px-4 py-2 text-neutral-400 hover:text-white text-sm">
Cancel
</button>
</div>
</div>
)}
</div>
</div>
)}
</div>
)
}