setia/ims
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): add users directly with admin-set password + phone field

Browse Source 
- POST /api/admin/users: if password supplied → createUser (instant, email_confirm:true); else inviteUserByEmail (existing flow)
- password validated ≥8 chars; never logged in audit_log
- profile update now also saves phone number
- UI: mode toggle (Invite by email / Add directly), phone input always visible, password input shown only in 'Add directly' mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CPf5Rc8QPx6V8KLEEgfKEQ
This commit is contained in:
admin
2026-07-13 16:36:20 +08:00
co-authored by Claude Sonnet 4.6
parent 690485f74e
commit e949016bd4
2 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/user-manager.tsx
+67 -19
View File
@@ -21,12 +21,15 @@ interface Props {
sites: SiteOption[]
}
const EMPTY_FORM = { email: '', name: '', phone: '', role: 'reporter' as UserRole, site_id: '', password: '' }
export function UserManager({ users, sites }: Props) {
const router = useRouter()
const [busyId, setBusyId] = useState<string | null>(null)
const [error, setError] = useState<string | null>(null)
const [invite, setInvite] = useState({ email: '', name: '', role: 'reporter' as UserRole, site_id: '' })
const [inviting, setInviting] = useState(false)
const [mode, setMode] = useState<'invite' | 'create'>('invite')
const [form, setForm] = useState(EMPTY_FORM)
const [submitting, setSubmitting] = useState(false)
const patchUser = async (id: string, update: Record<string, unknown>) => {
setBusyId(id)
@@ -45,22 +48,30 @@ export function UserManager({ users, sites }: Props) {
router.refresh()
}
const sendInvite = async (e: React.FormEvent) => {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setInviting(true)
setSubmitting(true)
setError(null)
const payload: Record<string, unknown> = {
email: form.email,
name: form.name || undefined,
phone: form.phone || undefined,
role: form.role,
site_id: form.site_id || undefined,
}
if (mode === 'create') payload.password = form.password
const res = await fetch('/ims/api/admin/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ...invite, site_id: invite.site_id || undefined }),
body: JSON.stringify(payload),
})
setInviting(false)
setSubmitting(false)
if (!res.ok) {
const data = await res.json().catch(() => ({}))
setError(data.error ?? 'Invite failed')
setError(data.error ?? `${mode === 'create' ? 'Add' : 'Invite'} failed`)
return
}
setInvite({ email: '', name: '', role: 'reporter', site_id: '' })
setForm(EMPTY_FORM)
router.refresh()
}
@@ -68,39 +79,76 @@ export function UserManager({ users, sites }: Props) {
<div className="bg-white rounded-xl shadow-sm p-5">
<h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Users</h2>
<form onSubmit={sendInvite} className="flex flex-wrap gap-2 mb-5 items-end">
{/* Mode toggle */}
<div className="flex gap-2 mb-4">
{(['invite', 'create'] as const).map(m => (
<button
key={m}
type="button"
onClick={() => { setMode(m); setError(null) }}
className={`text-xs font-medium px-3 py-1.5 rounded-full border transition-colors ${
mode === m
? 'bg-gray-800 text-white border-gray-800'
: 'border-gray-300 text-gray-600 hover:bg-gray-50'
}`}
>
{m === 'invite' ? 'Invite by email' : 'Add directly'}
</button>
))}
</div>
<form onSubmit={handleSubmit} className="flex flex-wrap gap-2 mb-5 items-end">
<input
type="email" required placeholder="email@company.com"
value={invite.email}
onChange={e => setInvite(v => ({ ...v, email: e.target.value }))}
value={form.email}
onChange={e => setForm(v => ({ ...v, email: e.target.value }))}
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-52"
/>
<input
type="text" placeholder="Full name"
value={invite.name}
onChange={e => setInvite(v => ({ ...v, name: e.target.value }))}
value={form.name}
onChange={e => setForm(v => ({ ...v, name: e.target.value }))}
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-40"
/>
<input
type="tel" placeholder="Phone (e.g. +60123456789)"
value={form.phone}
onChange={e => setForm(v => ({ ...v, phone: e.target.value }))}
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-44"
/>
<select
value={invite.role}
onChange={e => setInvite(v => ({ ...v, role: e.target.value as UserRole }))}
value={form.role}
onChange={e => setForm(v => ({ ...v, role: e.target.value as UserRole }))}
className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
>
{ALL_ROLES.map(r => <option key={r} value={r}>{r.replace(/_/g, ' ')}</option>)}
</select>
<select
value={invite.site_id}
onChange={e => setInvite(v => ({ ...v, site_id: e.target.value }))}
value={form.site_id}
onChange={e => setForm(v => ({ ...v, site_id: e.target.value }))}
className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
>
<option value="">No site</option>
{sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
</select>
{mode === 'create' && (
<input
type="password"
required
minLength={8}
placeholder="Password (min 8 chars)"
value={form.password}
onChange={e => setForm(v => ({ ...v, password: e.target.value }))}
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48"
/>
)}
<button
type="submit" disabled={inviting}
type="submit" disabled={submitting}
className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700 disabled:opacity-50"
>
{inviting ? 'Inviting…' : 'Invite User'}
{submitting
? (mode === 'create' ? 'Adding…' : 'Inviting…')
: (mode === 'create' ? 'Add User' : 'Invite User')}
</button>
</form>