Overhauled lockout process

This commit is contained in:
2026-10-24 17:36:30 +02:00
parent a731c979bb
commit 25e251aa79
12 changed files with 574 additions and 527 deletions
@@ -290,18 +290,18 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
<Modal
isOpen={isOpen}
onClose={onClose}
title={`User Administration: ${effectiveUser.email || effectiveUser.id}`}
subtitle="Direct tenant-level user, role, claims, and session administration without database intervention."
title={`User Security: ${effectiveUser.email || effectiveUser.id}`}
subtitle="Manage account status, role assignment, permissions, and active sessions."
>
<div className="space-y-4 text-xs">
{/* Navigation Tabs */}
<div className="flex gap-2 border-b border-slate-800 pb-2">
<div className="flex gap-1.5 border-b border-slate-800 pb-2">
<button
type="button"
onClick={() => setActiveTab('overview')}
className={`px-3 py-1.5 rounded-lg font-semibold transition cursor-pointer ${
className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer ${
activeTab === 'overview'
? 'bg-blue-600 text-white'
? 'bg-blue-600 text-white font-semibold'
: 'text-slate-400 hover:text-white hover:bg-slate-800'
}`}
>
@@ -310,21 +310,21 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
<button
type="button"
onClick={() => setActiveTab('roles')}
className={`px-3 py-1.5 rounded-lg font-semibold transition cursor-pointer flex items-center gap-1.5 ${
className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
activeTab === 'roles'
? 'bg-blue-600 text-white'
? 'bg-blue-600 text-white font-semibold'
: 'text-slate-400 hover:text-white hover:bg-slate-800'
}`}
>
<Shield className="w-3.5 h-3.5" />
<span>Roles ({(Array.isArray(userRoles) ? userRoles : []).length})</span>
<span>Role ({(Array.isArray(userRoles) ? userRoles : []).length})</span>
</button>
<button
type="button"
onClick={() => setActiveTab('claims')}
className={`px-3 py-1.5 rounded-lg font-semibold transition cursor-pointer flex items-center gap-1.5 ${
className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
activeTab === 'claims'
? 'bg-blue-600 text-white'
? 'bg-blue-600 text-white font-semibold'
: 'text-slate-400 hover:text-white hover:bg-slate-800'
}`}
>
@@ -334,9 +334,9 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
<button
type="button"
onClick={() => setActiveTab('sessions')}
className={`px-3 py-1.5 rounded-lg font-semibold transition cursor-pointer flex items-center gap-1.5 ${
className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
activeTab === 'sessions'
? 'bg-blue-600 text-white'
? 'bg-blue-600 text-white font-semibold'
: 'text-slate-400 hover:text-white hover:bg-slate-800'
}`}
>
@@ -602,55 +602,43 @@ export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
</div>
)}
{/* TAB 4: Sessions & Direct Account Interventions */}
{/* TAB 4: Sessions & Security Interventions */}
{activeTab === 'sessions' && (
<div className="space-y-3">
<div className="p-4 bg-slate-900/60 rounded-xl border border-slate-800 space-y-4">
{/* Force Logout Action */}
<div className="flex items-center justify-between border-b border-slate-800/80 pb-3">
<div className="flex items-center justify-between border-b border-slate-800/80 pb-3 gap-3">
<div>
<h4 className="text-white font-semibold flex items-center gap-1.5">
<LogOut className="w-4 h-4 text-amber-400" />
<span>Revoke Active User Session</span>
<HelpTooltip
title="User Session Invalidation"
content="Enables a tenant self-service user to immediately logout a user if they are currently logged in, terminating their active token and session."
size="sm"
placement="top"
/>
</h4>
<p className="text-[11px] text-slate-400 mt-0.5">
Terminates all active JWT tokens and sessions immediately without direct database intervention.
Immediately invalidates active JWT tokens and logs the user out.
</p>
</div>
<button
type="button"
onClick={() => logoutMutation.mutate()}
disabled={logoutMutation.isPending || !canManageSessions}
className="px-3 py-1.5 bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border border-amber-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50"
className="px-3 py-1.5 bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border border-amber-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50 shrink-0"
>
{logoutMutation.isPending ? 'Revoking...' : 'Force Logout'}
</button>
</div>
{/* Lock / Unlock Account */}
<div className="flex items-center justify-between">
<div className="flex items-center justify-between gap-3">
<div>
<h4 className="text-white font-semibold flex items-center gap-1.5">
<Lock className="w-4 h-4 text-rose-400" />
<span>Account Lockout Control</span>
<HelpTooltip
title="Account Lockout Control"
content="Enables a tenant self-service user to change a user's lockout status. The system defaults to a lockout period of 100 years when locking a user account."
size="sm"
placement="top"
/>
<span>Account Lockout</span>
</h4>
<p className="text-[11px] text-slate-400 mt-0.5">
Temporarily lock out or re-enable the user from logging into this tenant. The system defaults to a lockout period of 100 years.
Control tenant login authorization for this account.
</p>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 shrink-0">
<button
type="button"
onClick={(e) => {