Janady13/missionmatch / frontend/src/screens/Settings.tsx

1import { useState } from 'react' 2import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' 3import { KeyRound, LogOut, ShieldCheck, UserPlus } from 'lucide-react' 4import { adminApi, ROLES, type UserSummary } from '../lib/admin' 5import { authApi } from '../lib/auth' 6import { useAuth } from '../lib/useAuth' 7import { Badge, Panel } from '../components/ui' 8 9const isAdmin = (role: string) => role === 'owner' || role === 'admin' 10 11export function Settings() { 12 const { principal, logout } = useAuth() 13 return ( 14 <div className="space-y-4"> 15 <AccountPanel onLogout={logout} role={principal?.role ?? ''} orgID={principal?.org_id ?? ''} /> 16 {principal && isAdmin(principal.role) && <TeamPanel meRole={principal.role} />} 17 <p className="px-1 text-[11px] text-faint"> 18 Federated SSO (Login.gov, Entra Gov, PIV CAC) and public signup are a later sub phase. Invites are 19 delivered manually at pilot, the link is shown after you invite a teammate. 20 </p> 21 </div> 22 ) 23} 24 25function AccountPanel({ onLogout, role, orgID }: { onLogout: () => void; role: string; orgID: string }) { 26 const [oldPw, setOldPw] = useState('') 27 const [newPw, setNewPw] = useState('') 28 const [msg, setMsg] = useState('') 29 const change = useMutation({ 30 mutationFn: () => authApi.changePassword(oldPw, newPw), 31 onSuccess: () => { 32 setMsg('Password changed.') 33 setOldPw('') 34 setNewPw('') 35 }, 36 onError: () => setMsg('Could not change the password. Check the current one.'), 37 }) 38 const logoutAll = useMutation({ mutationFn: () => authApi.logoutAll() }) 39 40 return ( 41 <Panel title="Your account"> 42 <div className="flex flex-wrap items-center gap-2 text-sm"> 43 <Badge color="var(--color-blue)" subtle> 44 {role || 'unknown role'} 45 </Badge> 46 <span className="text-[11px] text-faint">org {orgID.slice(0, 8)}</span> 47 </div> 48 49 <form 50 className="mt-3 max-w-sm space-y-2" 51 onSubmit={(e) => { 52 e.preventDefault() 53 setMsg('') 54 if (newPw.length < 8) { 55 setMsg('Use at least 8 characters.') 56 return 57 } 58 change.mutate() 59 }} 60 > 61 <div className="text-[11px] font-bold uppercase tracking-wider text-muted">Change password</div> 62 <label className="block"> 63 <span className="sr-only">Current password</span> 64 <input 65 type="password" 66 placeholder="Current password" 67 value={oldPw} 68 maxLength={64} 69 onChange={(e) => setOldPw(e.target.value)} 70 className="w-full rounded-md border border-line/70 bg-navy-950/60 px-3 py-1.5 text-sm outline-none focus:border-blue/60" 71 /> 72 </label> 73 <label className="block"> 74 <span className="sr-only">New password</span> 75 <input 76 type="password" 77 placeholder="New password" 78 value={newPw} 79 maxLength={64} 80 onChange={(e) => setNewPw(e.target.value)} 81 className="w-full rounded-md border border-line/70 bg-navy-950/60 px-3 py-1.5 text-sm outline-none focus:border-blue/60" 82 /> 83 </label> 84 {msg && <p className="text-[11px] text-muted">{msg}</p>} 85 <button 86 type="submit" 87 disabled={change.isPending} 88 className="flex items-center gap-1.5 rounded-md bg-blue/20 px-3 py-1.5 text-sm font-semibold text-blue-soft hover:bg-blue/30 disabled:opacity-50" 89 > 90 <KeyRound size={14} /> Update password 91 </button> 92 </form> 93 94 <div className="mt-4 flex flex-wrap gap-2"> 95 <button 96 onClick={() => logoutAll.mutate()} 97 className="flex items-center gap-1.5 rounded-md border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:text-ink" 98 > 99 <ShieldCheck size={13} /> {logoutAll.isSuccess ? 'All sessions revoked' : 'Sign out all sessions'} 100 </button> 101 <button 102 onClick={onLogout} 103 className="flex items-center gap-1.5 rounded-md border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:border-risk/60 hover:text-risk" 104 > 105 <LogOut size={13} /> Sign out 106 </button> 107 </div> 108 </Panel> 109 ) 110} 111 112function TeamPanel({ meRole }: { meRole: string }) { 113 const qc = useQueryClient() 114 const users = useQuery({ queryKey: ['users'], queryFn: adminApi.listUsers }) 115 const invalidate = () => qc.invalidateQueries({ queryKey: ['users'] }) 116 117 const [email, setEmail] = useState('') 118 const [name, setName] = useState('') 119 const [role, setRole] = useState('member') 120 const [inviteLink, setInviteLink] = useState('') 121 122 const invite = useMutation({ 123 mutationFn: () => adminApi.invite(email.trim(), name.trim(), role), 124 onSuccess: (r) => { 125 setInviteLink(`${window.location.origin}/accept?token=${r.token}`) 126 setEmail('') 127 setName('') 128 invalidate() 129 }, 130 }) 131 132 return ( 133 <Panel title="Team" hint="owner and admin only"> 134 <form 135 className="flex flex-wrap items-end gap-2" 136 onSubmit={(e) => { 137 e.preventDefault() 138 if (email.trim() && name.trim()) { 139 invite.mutate() 140 } 141 }} 142 > 143 <LabeledInput label="Email" value={email} onChange={setEmail} type="email" /> 144 <LabeledInput label="Full name" value={name} onChange={setName} /> 145 <div> 146 <div className="mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted">Role</div> 147 <select 148 value={role} 149 onChange={(e) => setRole(e.target.value)} 150 className="rounded-md border border-line/70 bg-navy-950/60 px-2 py-1.5 text-sm outline-none" 151 > 152 {ROLES.filter((r) => meRole === 'owner' || r !== 'admin').map((r) => ( 153 <option key={r} value={r}> 154 {r} 155 </option> 156 ))} 157 </select> 158 </div> 159 <button 160 type="submit" 161 disabled={invite.isPending} 162 className="flex items-center gap-1.5 rounded-md bg-blue/20 px-3 py-1.5 text-sm font-semibold text-blue-soft hover:bg-blue/30 disabled:opacity-50" 163 > 164 <UserPlus size={14} /> Invite 165 </button> 166 </form> 167 {inviteLink && ( 168 <div className="mt-2 rounded-md bg-navy-950/60 p-2 text-[11px]"> 169 <span className="text-faint">Send this invite link to the new teammate: </span> 170 <span className="break-all font-mono text-blue-soft">{inviteLink}</span> 171 </div> 172 )} 173 174 <div className="mt-4 overflow-x-auto"> 175 <table className="w-full min-w-[44rem] text-sm"> 176 <thead> 177 <tr className="text-left text-[11px] uppercase tracking-wider text-faint"> 178 <th className="pb-2 font-semibold">User</th> 179 <th className="pb-2 font-semibold">Role</th> 180 <th className="pb-2 font-semibold">Status</th> 181 <th className="pb-2 font-semibold">MFA</th> 182 <th className="pb-2" /> 183 </tr> 184 </thead> 185 <tbody className="divide-y divide-line/50"> 186 {(users.data ?? []).map((u) => ( 187 <UserRow key={u.id} u={u} meRole={meRole} onChanged={invalidate} /> 188 ))} 189 </tbody> 190 </table> 191 {users.isLoading && <p className="py-3 text-sm text-muted">Loading team…</p>} 192 </div> 193 </Panel> 194 ) 195} 196 197function UserRow({ u, meRole, onChanged }: { u: UserSummary; meRole: string; onChanged: () => void }) { 198 const setRole = useMutation({ mutationFn: (role: string) => adminApi.changeRole(u.id, role), onSuccess: onChanged }) 199 const setStatus = useMutation({ 200 mutationFn: (status: 'active' | 'disabled') => adminApi.changeStatus(u.id, status), 201 onSuccess: onChanged, 202 }) 203 const resetMfa = useMutation({ mutationFn: () => adminApi.resetMFA(u.id), onSuccess: onChanged }) 204 const disabled = u.status === 'disabled' 205 206 return ( 207 <tr className="align-middle"> 208 <td className="py-2.5 pr-3"> 209 <div className="font-semibold">{u.full_name}</div> 210 <div className="text-[11px] text-faint">{u.email}</div> 211 </td> 212 <td className="py-2.5 pr-3"> 213 {u.role === 'owner' ? ( 214 <Badge color="var(--color-gold)" subtle> 215 owner 216 </Badge> 217 ) : ( 218 <select 219 value={u.role} 220 onChange={(e) => setRole.mutate(e.target.value)} 221 disabled={setRole.isPending} 222 className="rounded-md border border-line/70 bg-navy-950/60 px-2 py-1 text-xs outline-none" 223 > 224 {ROLES.filter((r) => meRole === 'owner' || r !== 'admin').map((r) => ( 225 <option key={r} value={r}> 226 {r} 227 </option> 228 ))} 229 </select> 230 )} 231 </td> 232 <td className="py-2.5 pr-3"> 233 <Badge color={disabled ? 'var(--color-risk)' : 'var(--color-ok)'} subtle> 234 {u.status} 235 </Badge> 236 </td> 237 <td className="py-2.5 pr-3 text-[11px] text-muted">{u.mfa_enrolled ? 'enrolled' : 'not enrolled'}</td> 238 <td className="py-2.5 text-right"> 239 {u.role !== 'owner' && ( 240 <div className="inline-flex items-center gap-1.5"> 241 <button 242 onClick={() => setStatus.mutate(disabled ? 'active' : 'disabled')} 243 disabled={setStatus.isPending} 244 className="rounded-md border border-line/70 px-2 py-1 text-[11px] font-semibold text-muted hover:text-ink disabled:opacity-50" 245 > 246 {disabled ? 'Enable' : 'Disable'} 247 </button> 248 <button 249 onClick={() => resetMfa.mutate()} 250 disabled={resetMfa.isPending} 251 title="Reset MFA so the user re enrolls at next login" 252 className="rounded-md border border-line/70 px-2 py-1 text-[11px] font-semibold text-muted hover:text-ink disabled:opacity-50" 253 > 254 {resetMfa.isSuccess ? 'MFA reset' : 'Reset MFA'} 255 </button> 256 </div> 257 )} 258 </td> 259 </tr> 260 ) 261} 262 263function LabeledInput({ 264 label, 265 value, 266 onChange, 267 type = 'text', 268}: { 269 label: string 270 value: string 271 onChange: (v: string) => void 272 type?: string 273}) { 274 return ( 275 <label className="block"> 276 <span className="mb-1 block text-[11px] font-semibold uppercase tracking-wider text-muted">{label}</span> 277 <input 278 type={type} 279 value={value} 280 onChange={(e) => onChange(e.target.value)} 281 className="rounded-md border border-line/70 bg-navy-950/60 px-3 py-1.5 text-sm outline-none focus:border-blue/60" 282 /> 283 </label> 284 ) 285} 286