User table polishing, user delete modal

frontend/src/modals/DeleteConfirmModal.tsx

@@ -0,0 +1,65 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { type ReactNode, useState } from "react";
+import { Alert } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import { Button } from "src/components";
+import { intl } from "src/locale";
+
+interface Props {
+	title: string;
+	children: ReactNode;
+	onConfirm: () => Promise<void> | void;
+	onClose: () => void;
+	invalidations?: any[];
+}
+export function DeleteConfirmModal({ title, children, onConfirm, onClose, invalidations }: Props) {
+	const queryClient = useQueryClient();
+	const [error, setError] = useState<string | null>(null);
+	const [submitting, setSubmitting] = useState(false);
+
+	const onSubmit = async () => {
+		setSubmitting(true);
+		setError(null);
+		try {
+			await onConfirm();
+			onClose();
+			// invalidate caches as requested
+			invalidations?.forEach((inv) => {
+				queryClient.invalidateQueries({ queryKey: inv });
+			});
+		} catch (err: any) {
+			setError(intl.formatMessage({ id: err.message }));
+		}
+		setSubmitting(false);
+	};
+
+	return (
+		<Modal show onHide={onClose} animation={false}>
+			<Modal.Header closeButton>
+				<Modal.Title>{title}</Modal.Title>
+			</Modal.Header>
+			<Modal.Body>
+				<Alert variant="danger" show={!!error} onClose={() => setError(null)} dismissible>
+					{error}
+				</Alert>
+				{children}
+			</Modal.Body>
+			<Modal.Footer>
+				<Button data-bs-dismiss="modal" onClick={onClose} disabled={submitting}>
+					{intl.formatMessage({ id: "cancel" })}
+				</Button>
+				<Button
+					type="submit"
+					actionType="primary"
+					className="ms-auto btn-red"
+					data-bs-dismiss="modal"
+					isLoading={submitting}
+					disabled={submitting}
+					onClick={onSubmit}
+				>
+					{intl.formatMessage({ id: "action.delete" })}
+				</Button>
+			</Modal.Footer>
+		</Modal>
+	);
+}

frontend/src/modals/UserModal.tsx

@@ -18,11 +18,6 @@ export function UserModal({ userId, onClose }: Props) {
 	const { mutate: setUser } = useSetUser();
 	const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
-	if (data && currentUser) {
-		console.log("DATA:", data);
-		console.log("CURRENT:", currentUser);
-	}
-
 	const onSubmit = async (values: any, { setSubmitting }: any) => {
 		setErrorMsg(null);
 		const { ...payload } = {
@@ -161,12 +156,13 @@ export function UserModal({ userId, onClose }: Props) {
 								</div>
 								{currentUser && data && currentUser?.id !== data?.id ? (
 									<div className="my-3">
-										<h3 className="py-2">Properties</h3>
-
+										<h3 className="py-2">{intl.formatMessage({ id: "user.flags.title" })}</h3>
 										<div className="divide-y">
 											<div>
 												<label className="row" htmlFor="isAdmin">
-													<span className="col">Administrator</span>
+													<span className="col">
+														{intl.formatMessage({ id: "role.admin" })}
+													</span>
 													<span className="col-auto">
 														<Field name="isAdmin" type="checkbox">
 															{({ field }: any) => (
@@ -185,7 +181,9 @@ export function UserModal({ userId, onClose }: Props) {
 											</div>
 											<div>
 												<label className="row" htmlFor="isDisabled">
-													<span className="col">Disabled</span>
+													<span className="col">
+														{intl.formatMessage({ id: "disabled" })}
+													</span>
 													<span className="col-auto">
 														<Field name="isDisabled" type="checkbox">
 															{({ field }: any) => (

frontend/src/modals/index.ts

@@ -1,2 +1,3 @@
 export * from "./ChangePasswordModal";
+export * from "./DeleteConfirmModal";
 export * from "./UserModal";