Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | 107x 107x 107x 107x 107x 4x 4x 4x 4x 4x 4x 3x 3x 1x 4x 107x 17x 1x 9x 3x 3x 3x | import { useState } from "react";
import { Link } from "@tanstack/react-router";
import {
ArrowLeft,
Save,
Trash2,
Key,
Ban,
CheckCircle,
X,
} from "lucide-react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import type { AdminUser } from "../../lib/api";
interface UserActionsCardProps {
user: AdminUser;
isSaving: boolean;
hasChanges?: boolean;
onSave: () => void;
onDelete: () => void;
onToggleBan: () => void;
onResetPassword: (password: string) => Promise<void>;
}
export function UserActionsCard({
user,
isSaving,
hasChanges = true,
onSave,
onDelete,
onToggleBan,
onResetPassword,
}: UserActionsCardProps) {
const [showPasswordReset, setShowPasswordReset] = useState(false);
const [newPassword, setNewPassword] = useState("");
const [isResettingPassword, setIsResettingPassword] = useState(false);
const [passwordError, setPasswordError] = useState<string | null>(null);
const handlePasswordReset = async () => {
Iif (!newPassword) return;
Iif (newPassword.length < 8) {
setPasswordError("Password must be at least 8 characters");
return;
}
setIsResettingPassword(true);
setPasswordError(null);
try {
await onResetPassword(newPassword);
setShowPasswordReset(false);
setNewPassword("");
} catch (_err) {
setPasswordError("Failed to reset password");
} finally {
setIsResettingPassword(false);
}
};
return (
<>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-4">
<Link
to="/admin/users"
className="p-2 hover:bg-background-subtle rounded-md"
>
<ArrowLeft className="h-5 w-5" />
</Link>
<div>
<h1 className="text-2xl font-bold text-foreground-default">
{user.name}
</h1>
<p className="text-foreground-muted">{user.email}</p>
</div>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => setShowPasswordReset(true)}>
<Key className="h-4 w-4 mr-2" />
Reset Password
</Button>
<Button
variant={user.banned ? "outline" : "destructive"}
onClick={onToggleBan}
>
{user.banned ? (
<>
<CheckCircle className="h-4 w-4 mr-2" />
Unban
</>
) : (
<>
<Ban className="h-4 w-4 mr-2" />
Ban
</>
)}
</Button>
<Button variant="destructive" onClick={onDelete}>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
<Button onClick={onSave} isLoading={isSaving} disabled={!hasChanges}>
<Save className="h-4 w-4 mr-2" />
Save Changes
</Button>
</div>
</div>
{/* Password Reset Modal */}
{showPasswordReset && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-overlay-dark">
<div className="bg-background-elevated rounded-lg shadow-xl w-full max-w-md mx-4">
<div className="flex items-center justify-between p-4 border-b">
<h3 className="text-lg font-semibold">Reset Password</h3>
<button
type="button"
onClick={() => setShowPasswordReset(false)}
className="p-1 hover:bg-background-subtle rounded"
>
<X className="h-5 w-5" />
</button>
</div>
<div className="p-4 space-y-4">
<p className="text-sm text-foreground-muted">
Enter a new password for {user.name}. The password must be at
least 8 characters long.
</p>
<div>
<label
htmlFor="new-password"
className="block text-sm font-medium text-foreground-default mb-1"
>
New Password
</label>
<Input
id="new-password"
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
placeholder="Enter new password"
/>
{passwordError && (
<p className="text-sm text-error mt-1">{passwordError}</p>
)}
</div>
</div>
<div className="flex justify-end gap-2 p-4 border-t">
<Button
variant="outline"
onClick={() => {
setShowPasswordReset(false);
setNewPassword("");
setPasswordError(null);
}}
>
Cancel
</Button>
<Button
onClick={handlePasswordReset}
isLoading={isResettingPassword}
disabled={!newPassword || newPassword.length < 8}
>
Reset Password
</Button>
</div>
</div>
</div>
)}
</>
);
}
|