Add password confirmation to team member creation form
All checks were successful
Deploy / deploy (push) Successful in 11s

Shows confirm password field when a password is entered. Validates
match before saving.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
fahed
2026-02-23 15:30:49 +03:00
parent bf084a85d7
commit 2c0152f176

View File

@@ -36,6 +36,8 @@ export default function TeamMemberPanel({ member, isEditingSelf, onClose, onSave
const [saving, setSaving] = useState(false)
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
const [showBrandsDropdown, setShowBrandsDropdown] = useState(false)
const [confirmPassword, setConfirmPassword] = useState('')
const [passwordError, setPasswordError] = useState('')
const brandsDropdownRef = useRef(null)
// Workload state (loaded internally)
@@ -59,6 +61,8 @@ export default function TeamMemberPanel({ member, isEditingSelf, onClose, onSave
team_ids: Array.isArray(member.teams) ? member.teams.map(t => t.id) : [],
})
setDirty(isCreateMode)
setConfirmPassword('')
setPasswordError('')
if (!isCreateMode) loadWorkload()
}
}, [member])
@@ -108,6 +112,11 @@ export default function TeamMemberPanel({ member, isEditingSelf, onClose, onSave
}
const handleSave = async () => {
setPasswordError('')
if (isCreateMode && form.password && form.password !== confirmPassword) {
setPasswordError('Passwords do not match')
return
}
setSaving(true)
try {
await onSave(isCreateMode ? null : memberId, {
@@ -204,6 +213,22 @@ export default function TeamMemberPanel({ member, isEditingSelf, onClose, onSave
)}
</div>
)}
{isCreateMode && form.password && (
<div>
<label className="block text-xs font-medium text-text-tertiary mb-1">Confirm Password</label>
<input
type="password"
value={confirmPassword}
onChange={e => { setConfirmPassword(e.target.value); setPasswordError('') }}
className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
placeholder="••••••••"
/>
{passwordError && (
<p className="text-xs text-red-500 mt-1">{passwordError}</p>
)}
</div>
)}
</>
)}