ability to ban and unban users
This commit is contained in:
jackiettran
215
frontend/src/components/BanUserModal.tsx
Normal file
215
frontend/src/components/BanUserModal.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { userAPI } from "../services/api";
|
||||
import { User } from "../types";
|
||||
|
||||
interface BanUserModalProps {
|
||||
show: boolean;
|
||||
onHide: () => void;
|
||||
user: User;
|
||||
onBanComplete: (updatedUser: User) => void;
|
||||
}
|
||||
|
||||
const BanUserModal: React.FC<BanUserModalProps> = ({
|
||||
show,
|
||||
onHide,
|
||||
user,
|
||||
onBanComplete,
|
||||
}) => {
|
||||
const [processing, setProcessing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [reason, setReason] = useState("");
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [updatedUser, setUpdatedUser] = useState<User | null>(null);
|
||||
|
||||
const handleBan = async () => {
|
||||
if (!reason.trim()) {
|
||||
setError("Please provide a reason for banning this user");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setProcessing(true);
|
||||
setError(null);
|
||||
|
||||
const response = await userAPI.adminBanUser(user.id, reason.trim());
|
||||
|
||||
// Store updated user data for later callback
|
||||
setUpdatedUser(response.data.user);
|
||||
|
||||
// Show success confirmation
|
||||
setSuccess(true);
|
||||
} catch (error: any) {
|
||||
setError(error.response?.data?.error || "Failed to ban user");
|
||||
} finally {
|
||||
setProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
// Call parent callback with updated user data if we have it
|
||||
if (updatedUser) {
|
||||
onBanComplete(updatedUser);
|
||||
}
|
||||
|
||||
// Reset all states when closing
|
||||
setProcessing(false);
|
||||
setError(null);
|
||||
setReason("");
|
||||
setSuccess(false);
|
||||
setUpdatedUser(null);
|
||||
onHide();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = "unset";
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = "unset";
|
||||
};
|
||||
}, [show]);
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal d-block"
|
||||
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">
|
||||
{success
|
||||
? "User Banned"
|
||||
: `Ban User ${user.firstName} ${user.lastName}`}
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={handleClose}
|
||||
disabled={processing}
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{success ? (
|
||||
<div className="text-center py-4">
|
||||
<div className="mb-4">
|
||||
<i
|
||||
className="bi bi-check-circle-fill text-success"
|
||||
style={{ fontSize: "4rem" }}
|
||||
></i>
|
||||
</div>
|
||||
<h3 className="text-success mb-3">User Banned</h3>
|
||||
<div className="alert alert-info">
|
||||
<p className="mb-0">
|
||||
{user.firstName} {user.lastName} has been banned and logged
|
||||
out of all sessions. If they had listings, they are no
|
||||
longer available. They have been notified via email.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{error && (
|
||||
<div className="alert alert-danger mb-3" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
handleBan();
|
||||
}}
|
||||
>
|
||||
<div className="mb-3">
|
||||
<label className="form-label">
|
||||
Reason for Ban <span className="text-danger">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
rows={4}
|
||||
value={reason}
|
||||
onChange={(e) => {
|
||||
setReason(e.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder="Please explain why this user is being banned..."
|
||||
maxLength={1000}
|
||||
required
|
||||
disabled={processing}
|
||||
/>
|
||||
<div className="form-text text-muted">
|
||||
{reason.length}/1000 characters (Required)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="alert alert-warning">
|
||||
<i className="bi bi-exclamation-triangle-fill me-2"></i>
|
||||
<strong>Warning:</strong> Banning this user will:
|
||||
<ul className="mb-0 mt-2">
|
||||
<li>Immediately log them out of all sessions</li>
|
||||
<li>Prevent them from logging back in</li>
|
||||
<li>
|
||||
Send them an email notification with the ban reason
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
{success ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={handleClose}
|
||||
disabled={processing}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={handleBan}
|
||||
disabled={processing || !reason.trim()}
|
||||
>
|
||||
{processing ? (
|
||||
<>
|
||||
<div
|
||||
className="spinner-border spinner-border-sm me-2"
|
||||
role="status"
|
||||
>
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
Banning...
|
||||
</>
|
||||
) : (
|
||||
"Ban User"
|
||||
)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BanUserModal;
|
||||
@@ -6,6 +6,8 @@ import { getImageUrl } from '../services/uploadService';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import ChatWindow from '../components/ChatWindow';
|
||||
import Avatar from '../components/Avatar';
|
||||
import BanUserModal from '../components/BanUserModal';
|
||||
import ConfirmationModal from '../components/ConfirmationModal';
|
||||
|
||||
const PublicProfile: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
@@ -16,6 +18,9 @@ const PublicProfile: React.FC = () => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showChat, setShowChat] = useState(false);
|
||||
const [showBanModal, setShowBanModal] = useState(false);
|
||||
const [showUnbanModal, setShowUnbanModal] = useState(false);
|
||||
const [unbanning, setUnbanning] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile();
|
||||
@@ -44,6 +49,28 @@ const PublicProfile: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleBanComplete = (updatedUser: User) => {
|
||||
setUser(updatedUser);
|
||||
};
|
||||
|
||||
const handleUnban = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
setUnbanning(true);
|
||||
const response = await userAPI.adminUnbanUser(user.id);
|
||||
setUser(response.data.user);
|
||||
setShowUnbanModal(false);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.error || 'Failed to unban user');
|
||||
} finally {
|
||||
setUnbanning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isAdmin = currentUser?.role === 'admin';
|
||||
const canBanUser = isAdmin && user && currentUser?.id !== user.id && user.role !== 'admin';
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container mt-5">
|
||||
@@ -75,7 +102,21 @@ const PublicProfile: React.FC = () => {
|
||||
<div className="text-center mb-4">
|
||||
<Avatar user={user} size="xxxl" className="mb-3 mx-auto" />
|
||||
<h3>{user.firstName} {user.lastName}</h3>
|
||||
{currentUser && currentUser.id !== user.id && (
|
||||
|
||||
{/* Show ban status badge for admins */}
|
||||
{isAdmin && user.isBanned && (
|
||||
<div className="mt-2">
|
||||
<span className="badge bg-danger">Banned</span>
|
||||
{user.bannedAt && (
|
||||
<small className="text-muted d-block mt-1">
|
||||
Banned on {new Date(user.bannedAt).toLocaleDateString()}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Message button - hide for banned users */}
|
||||
{currentUser && currentUser.id !== user.id && !user.isBanned && (
|
||||
<button
|
||||
className="btn btn-primary mt-3"
|
||||
onClick={() => setShowChat(true)}
|
||||
@@ -83,6 +124,35 @@ const PublicProfile: React.FC = () => {
|
||||
<i className="bi bi-chat-dots-fill me-2"></i>Message
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Admin Ban/Unban buttons */}
|
||||
{canBanUser && (
|
||||
<div className="mt-3">
|
||||
{user.isBanned ? (
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={() => setShowUnbanModal(true)}
|
||||
>
|
||||
<i className="bi bi-person-check me-2"></i>Unban User
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
onClick={() => setShowBanModal(true)}
|
||||
>
|
||||
<i className="bi bi-person-x me-2"></i>Ban User
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show ban reason for admins */}
|
||||
{isAdmin && user.isBanned && user.banReason && (
|
||||
<div className="alert alert-warning mt-3 text-start">
|
||||
<strong>Ban Reason:</strong>
|
||||
<p className="mb-0 mt-1">{user.banReason}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -153,6 +223,31 @@ const PublicProfile: React.FC = () => {
|
||||
recipient={user}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* BanUserModal */}
|
||||
{user && (
|
||||
<BanUserModal
|
||||
show={showBanModal}
|
||||
onHide={() => setShowBanModal(false)}
|
||||
user={user}
|
||||
onBanComplete={handleBanComplete}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* UnbanModal */}
|
||||
{user && (
|
||||
<ConfirmationModal
|
||||
show={showUnbanModal}
|
||||
onClose={() => setShowUnbanModal(false)}
|
||||
onConfirm={handleUnban}
|
||||
title={`Unban ${user.firstName} ${user.lastName}`}
|
||||
message="Are you sure you want to unban this user? They will be able to log in and use the platform again."
|
||||
confirmText="Unban User"
|
||||
cancelText="Cancel"
|
||||
confirmButtonClass="btn-success"
|
||||
loading={unbanning}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -184,6 +184,10 @@ export const userAPI = {
|
||||
getPublicProfile: (id: string) => api.get(`/users/${id}`),
|
||||
getAvailability: () => api.get("/users/availability"),
|
||||
updateAvailability: (data: any) => api.put("/users/availability", data),
|
||||
// Admin endpoints
|
||||
adminBanUser: (id: string, reason: string) =>
|
||||
api.post(`/users/admin/${id}/ban`, { reason }),
|
||||
adminUnbanUser: (id: string) => api.post(`/users/admin/${id}/unban`),
|
||||
};
|
||||
|
||||
export const addressAPI = {
|
||||
|
||||
@@ -33,6 +33,11 @@ export interface User {
|
||||
stripeConnectedAccountId?: string;
|
||||
addresses?: Address[];
|
||||
itemRequestNotificationRadius?: number;
|
||||
// Ban-related fields (only visible to admins)
|
||||
isBanned?: boolean;
|
||||
bannedAt?: string;
|
||||
bannedBy?: string;
|
||||
banReason?: string;
|
||||
}
|
||||
|
||||
export interface Message {
|
||||
|
||||
Reference in New Issue
Block a user