feat(employees): self-service profile + change-own-password; phone/title fields (Phase 4, D18 WS-E)
- GET/PATCH /me (self-scoped whitelist — role/email untouchable) + POST /me/password - changeOwnPassword: current password required; every OTHER session dies in the same txn, the changing session survives; audited without hashes - staff_user.phone/title additive columns, surfaced on Employees (columns + edit dialog) and the new Profile page; user chip in the shell opens /profile - 7 tests; suite 331/331 across 64 files Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>feat/client-detail-redesign
Thomas Joise
5 days ago
parent
1a8a3faf5d
commit
d95bf6d467
@ -0,0 +1,92 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { Badge, Button, FormField, FormGrid, Notice, PageHeader, Skeleton, ErrorState, useToast } from '@sims/ui'
|
||||||
|
import { changeMyPassword, getMe, patchMe } from '../api'
|
||||||
|
import { useData } from './Clients'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Self-service profile (D18 WS-E): email/role read-only, edit own name + phone,
|
||||||
|
* change own password (current password required; other sessions die, this one
|
||||||
|
* survives — server-enforced).
|
||||||
|
*/
|
||||||
|
export function Profile() {
|
||||||
|
const toast = useToast()
|
||||||
|
const me = useData(getMe, [])
|
||||||
|
|
||||||
|
const [name, setName] = useState<string | undefined>()
|
||||||
|
const [phone, setPhone] = useState<string | undefined>()
|
||||||
|
const [savingProfile, setSavingProfile] = useState(false)
|
||||||
|
const [profileErr, setProfileErr] = useState<string | undefined>()
|
||||||
|
|
||||||
|
const [pw, setPw] = useState({ current: '', next: '', confirm: '' })
|
||||||
|
const [savingPw, setSavingPw] = useState(false)
|
||||||
|
const [pwErr, setPwErr] = useState<string | undefined>()
|
||||||
|
|
||||||
|
if (me.error !== undefined) return <div className="wf-page"><ErrorState message={me.error} onRetry={me.reload} /></div>
|
||||||
|
if (me.data === undefined) return <div className="wf-page"><Skeleton rows={5} /></div>
|
||||||
|
const e = me.data
|
||||||
|
const nameVal = name ?? e.displayName
|
||||||
|
const phoneVal = phone ?? (e.phone ?? '')
|
||||||
|
|
||||||
|
const saveProfile = () => {
|
||||||
|
if (savingProfile) return
|
||||||
|
if (nameVal.trim() === '') { setProfileErr('Name is required'); return }
|
||||||
|
setProfileErr(undefined); setSavingProfile(true)
|
||||||
|
patchMe({ displayName: nameVal.trim(), phone: phoneVal })
|
||||||
|
.then(() => { toast.ok('Profile updated'); me.reload() })
|
||||||
|
.catch((err: Error) => setProfileErr(err.message))
|
||||||
|
.finally(() => setSavingProfile(false))
|
||||||
|
}
|
||||||
|
|
||||||
|
const savePassword = () => {
|
||||||
|
if (savingPw) return
|
||||||
|
if (pw.next.length < 8) { setPwErr('New password must be at least 8 characters'); return }
|
||||||
|
if (pw.next !== pw.confirm) { setPwErr('New passwords do not match'); return }
|
||||||
|
setPwErr(undefined); setSavingPw(true)
|
||||||
|
changeMyPassword(pw.current, pw.next)
|
||||||
|
.then(() => { toast.ok('Password changed — other sessions were signed out'); setPw({ current: '', next: '', confirm: '' }) })
|
||||||
|
.catch((err: Error) => setPwErr(err.message))
|
||||||
|
.finally(() => setSavingPw(false))
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="wf-page">
|
||||||
|
<PageHeader title="My profile" desc="Your account — name and phone are yours to edit; role and email are set by the owner." />
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Details</h2>
|
||||||
|
<FormGrid>
|
||||||
|
<FormField label="Email (login id)"><input className="wf" value={e.email} disabled /></FormField>
|
||||||
|
<FormField label="Role"><div style={{ paddingTop: 6 }}><Badge tone={e.role === 'owner' ? 'accent' : undefined}>{e.role}</Badge>{e.title !== null ? <span style={{ marginLeft: 8, opacity: 0.75 }}>{e.title}</span> : null}</div></FormField>
|
||||||
|
<FormField label="Name">
|
||||||
|
<input className="wf" value={nameVal} onChange={(ev) => setName(ev.target.value)} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Phone">
|
||||||
|
<input className="wf" value={phoneVal} onChange={(ev) => setPhone(ev.target.value)} />
|
||||||
|
</FormField>
|
||||||
|
</FormGrid>
|
||||||
|
{profileErr !== undefined && <Notice tone="err">{profileErr}</Notice>}
|
||||||
|
<Button tone="primary" onClick={saveProfile}>{savingProfile ? 'Saving…' : 'Save profile'}</Button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Change password</h2>
|
||||||
|
<FormGrid>
|
||||||
|
<FormField label="Current password">
|
||||||
|
<input className="wf" type="password" value={pw.current} onChange={(ev) => setPw((p) => ({ ...p, current: ev.target.value }))} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="New password (min 8)">
|
||||||
|
<input className="wf" type="password" value={pw.next} onChange={(ev) => setPw((p) => ({ ...p, next: ev.target.value }))} />
|
||||||
|
</FormField>
|
||||||
|
<FormField label="Confirm new password">
|
||||||
|
<input className="wf" type="password" value={pw.confirm} onChange={(ev) => setPw((p) => ({ ...p, confirm: ev.target.value }))} />
|
||||||
|
</FormField>
|
||||||
|
</FormGrid>
|
||||||
|
{pwErr !== undefined && <Notice tone="err">{pwErr}</Notice>}
|
||||||
|
<Button tone="primary" onClick={savePassword}>{savingPw ? 'Changing…' : 'Change password'}</Button>
|
||||||
|
<p style={{ fontSize: 12, opacity: 0.7, marginTop: 6 }}>
|
||||||
|
Changing your password signs out every other device; this session stays signed in.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
// apps/hq/test/profile-me.test.ts — go-live cluster WS-E: self-service profile + own password (D18)
|
||||||
|
import express from 'express'
|
||||||
|
import { describe, it, expect, afterAll } from 'vitest'
|
||||||
|
import { openDb, type DB } from '../src/db'
|
||||||
|
import { seedIfEmpty } from '../src/seed'
|
||||||
|
import { createStaff, verifySession } from '../src/auth'
|
||||||
|
import { changeOwnPassword, getEmployee, updateEmployee } from '../src/repos-employees'
|
||||||
|
import { listAudit } from '../src/audit'
|
||||||
|
import { apiRouter } from '../src/api'
|
||||||
|
|
||||||
|
function appWith() {
|
||||||
|
const db = openDb(':memory:'); seedIfEmpty(db)
|
||||||
|
createStaff(db, { email: 'staff@test.in', displayName: 'Priya', role: 'staff', password: 'first-pass-9' })
|
||||||
|
const app = express(); app.use(express.json()); app.locals['db'] = db
|
||||||
|
app.use('/api', apiRouter(db))
|
||||||
|
const server = app.listen(0)
|
||||||
|
const baseUrl = `http://localhost:${(server.address() as { port: number }).port}/api`
|
||||||
|
return { db, server, baseUrl }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function login(baseUrl: string, email: string, password: string): Promise<string | null> {
|
||||||
|
const res = await fetch(`${baseUrl}/auth/login`, {
|
||||||
|
method: 'POST', headers: { 'content-type': 'application/json' },
|
||||||
|
body: JSON.stringify({ email, password }),
|
||||||
|
})
|
||||||
|
if (!res.ok) return null
|
||||||
|
return ((await res.json()) as { token: string }).token
|
||||||
|
}
|
||||||
|
|
||||||
|
const H = (token: string) => ({ 'content-type': 'application/json', authorization: `Bearer ${token}` })
|
||||||
|
|
||||||
|
describe('self-service profile (/me)', () => {
|
||||||
|
const servers: { close: () => void }[] = []
|
||||||
|
afterAll(() => { for (const s of servers) s.close() })
|
||||||
|
|
||||||
|
it('GET /me returns the caller, without password columns', async () => {
|
||||||
|
const ctx = appWith(); servers.push(ctx.server)
|
||||||
|
const token = (await login(ctx.baseUrl, 'staff@test.in', 'first-pass-9'))!
|
||||||
|
const res = await fetch(`${ctx.baseUrl}/me`, { headers: H(token) })
|
||||||
|
const json = await res.json() as { employee: Record<string, unknown> }
|
||||||
|
expect(res.status).toBe(200)
|
||||||
|
expect(json.employee).toMatchObject({ email: 'staff@test.in', displayName: 'Priya', role: 'staff' })
|
||||||
|
expect(json.employee).not.toHaveProperty('pw_salt')
|
||||||
|
expect(json.employee).not.toHaveProperty('pw_hash')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('PATCH /me updates name + phone (audited); role/email in the body are ignored', async () => {
|
||||||
|
const ctx = appWith(); servers.push(ctx.server)
|
||||||
|
const token = (await login(ctx.baseUrl, 'staff@test.in', 'first-pass-9'))!
|
||||||
|
const res = await fetch(`${ctx.baseUrl}/me`, {
|
||||||
|
method: 'PATCH', headers: H(token),
|
||||||
|
body: JSON.stringify({ displayName: 'Priya N', phone: '+91 98765', role: 'owner', email: 'evil@x.co' }),
|
||||||
|
})
|
||||||
|
const json = await res.json() as { employee: { displayName: string; phone: string | null; role: string; email: string } }
|
||||||
|
expect(res.status).toBe(200)
|
||||||
|
expect(json.employee).toMatchObject({
|
||||||
|
displayName: 'Priya N', phone: '+91 98765',
|
||||||
|
role: 'staff', email: 'staff@test.in', // untouchable via /me
|
||||||
|
})
|
||||||
|
const audit = listAudit(ctx.db).find((a) => a.action === 'update' && a.entity === 'staff_user')
|
||||||
|
expect(audit).toBeDefined()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('PATCH /me with an empty patch is rejected', async () => {
|
||||||
|
const ctx = appWith(); servers.push(ctx.server)
|
||||||
|
const token = (await login(ctx.baseUrl, 'staff@test.in', 'first-pass-9'))!
|
||||||
|
const res = await fetch(`${ctx.baseUrl}/me`, { method: 'PATCH', headers: H(token), body: '{}' })
|
||||||
|
expect(res.status).toBe(400)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('POST /me/password rejects a wrong current password and leaves sessions alive', async () => {
|
||||||
|
const ctx = appWith(); servers.push(ctx.server)
|
||||||
|
const token = (await login(ctx.baseUrl, 'staff@test.in', 'first-pass-9'))!
|
||||||
|
const res = await fetch(`${ctx.baseUrl}/me/password`, {
|
||||||
|
method: 'POST', headers: H(token),
|
||||||
|
body: JSON.stringify({ currentPassword: 'wrong-guess', newPassword: 'brand-new-pw-9' }),
|
||||||
|
})
|
||||||
|
expect(res.status).toBe(400)
|
||||||
|
expect(verifySession(ctx.db, token)).not.toBeNull() // unchanged
|
||||||
|
expect(await login(ctx.baseUrl, 'staff@test.in', 'first-pass-9')).not.toBeNull() // old pw still works
|
||||||
|
})
|
||||||
|
|
||||||
|
it('POST /me/password with the right current password: other sessions die, THIS one survives', async () => {
|
||||||
|
const ctx = appWith(); servers.push(ctx.server)
|
||||||
|
const other = (await login(ctx.baseUrl, 'staff@test.in', 'first-pass-9'))! // e.g. old laptop
|
||||||
|
const current = (await login(ctx.baseUrl, 'staff@test.in', 'first-pass-9'))! // the one changing it
|
||||||
|
const res = await fetch(`${ctx.baseUrl}/me/password`, {
|
||||||
|
method: 'POST', headers: H(current),
|
||||||
|
body: JSON.stringify({ currentPassword: 'first-pass-9', newPassword: 'brand-new-pw-9' }),
|
||||||
|
})
|
||||||
|
expect(res.status).toBe(200)
|
||||||
|
expect(verifySession(ctx.db, current)).not.toBeNull() // survives
|
||||||
|
expect(verifySession(ctx.db, other)).toBeNull() // dead with the old credential
|
||||||
|
expect(await login(ctx.baseUrl, 'staff@test.in', 'first-pass-9')).toBeNull()
|
||||||
|
expect(await login(ctx.baseUrl, 'staff@test.in', 'brand-new-pw-9')).not.toBeNull()
|
||||||
|
const audit = listAudit(ctx.db).find((a) => a.action === 'change_own_password')
|
||||||
|
expect(audit).toBeDefined()
|
||||||
|
expect(audit!.after_json ?? '').not.toMatch(/hash/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('short new passwords are rejected in the repo', () => {
|
||||||
|
const db = openDb(':memory:'); seedIfEmpty(db)
|
||||||
|
const { id } = createStaff(db, { email: 's@x.co', displayName: 'S', role: 'staff', password: 'first-pass-9' })
|
||||||
|
expect(() => changeOwnPassword(db, id, 'first-pass-9', 'short', 'tok')).toThrow(/8/)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('phone/title round-trip through updateEmployee, and emptying stores NULL', () => {
|
||||||
|
const db = openDb(':memory:'); seedIfEmpty(db)
|
||||||
|
const { id } = createStaff(db, { email: 's@x.co', displayName: 'S', role: 'staff', password: 'first-pass-9' })
|
||||||
|
updateEmployee(db, id, id, { phone: '+91 12345', title: 'Field Engineer' })
|
||||||
|
expect(getEmployee(db, id)).toMatchObject({ phone: '+91 12345', title: 'Field Engineer' })
|
||||||
|
updateEmployee(db, id, id, { phone: '', title: ' ' })
|
||||||
|
expect(getEmployee(db, id)).toMatchObject({ phone: null, title: null })
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue