HomeLab/ForgeBucket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

phase 3 bug repositories fixes

Browse Source
This commit is contained in:
erangel1
2026-05-07 01:15:32 +02:00
parent 200c4f43ea
commit 44359c1bb0
29 changed files with 1223 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/SettingsPage.tsx
+77 -20
View File
@@ -1,45 +1,102 @@
import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
export default function SettingsPage() {
const { user, logout } = useAuth()
const [currentPw, setCurrentPw] = useState('')
const [newPw, setNewPw] = useState('')
return (
<div className="max-w-2xl mx-auto px-4 md:px-6 py-6 space-y-8">
<h1 className="text-xl font-semibold text-[#172B4D]">Settings</h1>
{/* Account info */}
<section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
<div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC]">
<div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC] flex items-center justify-between">
<h2 className="text-sm font-semibold text-[#172B4D]">Account</h2>
<Link to="/profile" className="text-xs text-[#0052CC] hover:underline">Edit profile →</Link>
</div>
<div className="px-5 py-4 flex flex-col gap-3">
<div>
<p className="text-xs text-[#5E6C84]">Username</p>
<p className="text-sm font-medium text-[#172B4D]">{user?.username}</p>
</div>
<div>
<p className="text-xs text-[#5E6C84]">Email</p>
<p className="text-sm text-[#172B4D]">{user?.email}</p>
</div>
<div>
<p className="text-xs text-[#5E6C84]">Role</p>
<p className="text-sm text-[#172B4D]">{user?.isAdmin ? 'Administrator' : 'Member'}</p>
</div>
<Row label="Username" value={user?.username} />
<Row label="Email" value={user?.email} />
<Row label="Role" value={user?.isAdmin ? 'Administrator' : 'Member'} />
</div>
</section>
{/* Change password */}
<section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
<div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC]">
<h2 className="text-sm font-semibold text-[#172B4D]">Change password</h2>
</div>
<form
className="px-5 py-5 flex flex-col gap-4"
onSubmit={e => { e.preventDefault(); setCurrentPw(''); setNewPw('') }}
>
<div>
<label className="block text-xs font-semibold text-[#172B4D] mb-1">Current password</label>
<input
type="password" value={currentPw} onChange={e => setCurrentPw(e.target.value)}
className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
/>
</div>
<div>
<label className="block text-xs font-semibold text-[#172B4D] mb-1">New password</label>
<input
type="password" value={newPw} onChange={e => setNewPw(e.target.value)}
className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#4C9AFF]"
/>
</div>
<div>
<button
type="submit"
className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] min-h-[44px]"
>
Update password
</button>
</div>
</form>
</section>
{/* SSH keys placeholder */}
<section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
<div className="px-5 py-4 border-b border-[#DFE1E6] bg-[#FAFBFC]">
<h2 className="text-sm font-semibold text-[#172B4D]">SSH keys</h2>
</div>
<div className="px-5 py-5 text-sm text-[#5E6C84]">
SSH key management coming soon.
</div>
</section>
{/* Danger zone */}
<section className="border border-[#FFEBE6] rounded-lg overflow-hidden">
<div className="px-5 py-4 border-b border-[#FFEBE6] bg-[#FFEBE6]/50">
<h2 className="text-sm font-semibold text-[#BF2600]">Danger zone</h2>
</div>
<div className="px-5 py-4">
<button
onClick={logout}
className="px-4 py-2 rounded border border-[#DE350B] text-[#DE350B] text-sm font-medium hover:bg-[#FFEBE6] min-h-[44px]"
>
Sign out
</button>
<div className="px-5 py-4 flex flex-col gap-3">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-[#172B4D]">Sign out</p>
<p className="text-xs text-[#5E6C84]">End your current session on this device.</p>
</div>
<button
onClick={logout}
className="px-4 py-2 rounded border border-[#DE350B] text-[#DE350B] text-sm font-medium hover:bg-[#FFEBE6] min-h-[44px]"
>
Sign out
</button>
</div>
</div>
</section>
</div>
)
}
function Row({ label, value }: { label: string; value?: string }) {
return (
<div className="flex items-center justify-between py-1">
<span className="text-xs text-[#5E6C84] w-24 shrink-0">{label}</span>
<span className="text-sm text-[#172B4D] font-medium">{value}</span>
</div>
)
}