168 lines
7.4 KiB
TypeScript
168 lines
7.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { useAuth } from '../contexts/AuthContext'
|
|
import { useSSHKeys, useAddSSHKey, useDeleteSSHKey } from '../api/queries/sshkeys'
|
|
|
|
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] 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">
|
|
<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>
|
|
|
|
<SSHKeySection />
|
|
|
|
{/* 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 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>
|
|
)
|
|
}
|
|
|
|
function SSHKeySection() {
|
|
const { data: keys } = useSSHKeys()
|
|
const addKey = useAddSSHKey()
|
|
const deleteKey = useDeleteSSHKey()
|
|
const [showAdd, setShowAdd] = useState(false)
|
|
const [title, setTitle] = useState('')
|
|
const [publicKey, setPublicKey] = useState('')
|
|
|
|
const handleAdd = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
await addKey.mutateAsync({ title, publicKey })
|
|
setTitle(''); setPublicKey(''); setShowAdd(false)
|
|
}
|
|
|
|
return (
|
|
<section className="border border-[#DFE1E6] rounded-lg overflow-hidden">
|
|
<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]">SSH keys</h2>
|
|
<button onClick={() => setShowAdd(s => !s)}
|
|
className="text-xs text-[#0052CC] hover:underline font-medium">
|
|
{showAdd ? 'Cancel' : '+ Add key'}
|
|
</button>
|
|
</div>
|
|
|
|
{showAdd && (
|
|
<form onSubmit={handleAdd} className="px-5 py-4 border-b border-[#DFE1E6] space-y-3 bg-[#FAFBFC]">
|
|
<div>
|
|
<label className="block text-xs font-semibold text-[#172B4D] mb-1">Title</label>
|
|
<input value={title} onChange={e => setTitle(e.target.value)} required placeholder="e.g. MacBook Pro"
|
|
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">Public key</label>
|
|
<textarea value={publicKey} onChange={e => setPublicKey(e.target.value)} required rows={3}
|
|
placeholder="ssh-ed25519 AAAA… or ssh-rsa AAAA…"
|
|
className="w-full border border-[#DFE1E6] rounded px-3 py-2 text-xs font-mono resize-none focus:outline-none focus:border-[#4C9AFF]" />
|
|
</div>
|
|
{addKey.isError && (
|
|
<p className="text-xs text-[#DE350B]">{addKey.error instanceof Error ? addKey.error.message : 'Error'}</p>
|
|
)}
|
|
<button type="submit" disabled={addKey.isPending}
|
|
className="px-4 py-2 rounded bg-[#0052CC] text-white text-sm font-medium hover:bg-[#0065FF] disabled:opacity-50 min-h-[44px]">
|
|
{addKey.isPending ? 'Adding…' : 'Add SSH key'}
|
|
</button>
|
|
</form>
|
|
)}
|
|
|
|
{!keys?.length ? (
|
|
<div className="px-5 py-5 text-sm text-[#5E6C84]">No SSH keys added yet.</div>
|
|
) : (
|
|
<ul>
|
|
{keys.map(key => (
|
|
<li key={key.id} className="flex items-center gap-3 px-5 py-3 border-b border-[#DFE1E6] last:border-0">
|
|
<svg width="16" height="16" fill="none" stroke="#5E6C84" strokeWidth="1.5" viewBox="0 0 24 24" className="shrink-0">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 0 1 21.75 8.25Z" />
|
|
</svg>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-[#172B4D] truncate">{key.title}</p>
|
|
<p className="text-xs font-mono text-[#5E6C84] truncate">{key.fingerprint}</p>
|
|
</div>
|
|
<button onClick={() => deleteKey.mutate(key.id)}
|
|
className="text-xs px-3 py-1.5 rounded border border-[#DE350B] text-[#DE350B] hover:bg-[#FFEBE6] shrink-0 min-h-[32px]">
|
|
Delete
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
)
|
|
}
|