User table polishing, user delete modal

Author: jc21

backend/models/token.js

@@ -13,7 +13,7 @@ import { global as logger } from "../logger.js";
 const ALGO = "RS256";
 
 export default () => {
-	let token_data = {};
+	let tokenData = {};
 
 	const self = {
 		/**
@@ -37,7 +37,7 @@ export default () => {
 					if (err) {
 						reject(err);
 					} else {
-						token_data = payload;
+						tokenData = payload;
 						resolve({
 							token: token,
 							payload: payload,
@@ -72,18 +72,18 @@ export default () => {
 										reject(err);
 									}
 								} else {
-									token_data = result;
+									tokenData = result;
 
 									// Hack: some tokens out in the wild have a scope of 'all' instead of 'user'.
 									// For 30 days at least, we need to replace 'all' with user.
 									if (
-										typeof token_data.scope !== "undefined" &&
-										_.indexOf(token_data.scope, "all") !== -1
+										typeof tokenData.scope !== "undefined" &&
+										_.indexOf(tokenData.scope, "all") !== -1
 									) {
-										token_data.scope = ["user"];
+										tokenData.scope = ["user"];
 									}
 
-									resolve(token_data);
+									resolve(tokenData);
 								}
 							},
 						);
@@ -100,15 +100,15 @@ export default () => {
 		 * @param   {String}  scope
 		 * @returns {Boolean}
 		 */
-		hasScope: (scope) => typeof token_data.scope !== "undefined" && _.indexOf(token_data.scope, scope) !== -1,
+		hasScope: (scope) => typeof tokenData.scope !== "undefined" && _.indexOf(tokenData.scope, scope) !== -1,
 
 		/**
 		 * @param  {String}  key
 		 * @return {*}
 		 */
 		get: (key) => {
-			if (typeof token_data[key] !== "undefined") {
-				return token_data[key];
+			if (typeof tokenData[key] !== "undefined") {
+				return tokenData[key];
 			}
 
 			return null;
@@ -119,7 +119,7 @@ export default () => {
 		 * @param  {*}       value
 		 */
 		set: (key, value) => {
-			token_data[key] = value;
+			tokenData[key] = value;
 		},
 
 		/**

frontend/src/components/SiteHeader.tsx

@@ -66,7 +66,9 @@ export function SiteHeader() {
 								<div className="d-none d-xl-block ps-2">
 									<div>{currentUser?.nickname}</div>
 									<div className="mt-1 small text-secondary">
-										{intl.formatMessage({ id: isAdmin ? "administrator" : "standard-user" })}
+										{intl.formatMessage({
+											id: isAdmin ? "role.admin" : "role.standard-user",
+										})}
 									</div>
 								</div>
 							</a>

frontend/src/components/Table/Formatter/DomainsFormatter.tsx

@@ -10,9 +10,9 @@ export function DomainsFormatter({ domains, createdOn }: Props) {
 		<div className="flex-fill">
 			<div className="font-weight-medium">
 				{domains.map((domain: string) => (
-					<span key={domain} className="badge badge-lg domain-name">
+					<a key={domain} href={`http://${domain}`} className="badge bg-yellow-lt domain-name">
 						{domain}
-					</span>
+					</a>
 				))}
 			</div>
 			{createdOn ? (

frontend/src/components/Table/Formatter/EmailFormatter.tsx

@@ -0,0 +1,10 @@
+interface Props {
+	email: string;
+}
+export function EmailFormatter({ email }: Props) {
+	return (
+		<a href={`mailto:${email}`} className="badge bg-yellow-lt">
+			{email}
+		</a>
+	);
+}

frontend/src/components/Table/Formatter/RolesFormatter.tsx

@@ -0,0 +1,20 @@
+import { intl } from "src/locale";
+
+interface Props {
+	roles: string[];
+}
+export function RolesFormatter({ roles }: Props) {
+	const r = roles || [];
+	if (r.length === 0) {
+		r[0] = "standard-user";
+	}
+	return (
+		<>
+			{r.map((role: string) => (
+				<span key={role} className="badge bg-yellow-lt me-1">
+					{intl.formatMessage({ id: `role.${role}` })}
+				</span>
+			))}
+		</>
+	);
+}

frontend/src/components/Table/Formatter/ValueWithDateFormatter.tsx

@@ -4,16 +4,19 @@ import { intl } from "src/locale";
 interface Props {
 	value: string;
 	createdOn?: string;
+	disabled?: boolean;
 }
-export function ValueWithDateFormatter({ value, createdOn }: Props) {
+export function ValueWithDateFormatter({ value, createdOn, disabled }: Props) {
 	return (
 		<div className="flex-fill">
 			<div className="font-weight-medium">
-				<div className="font-weight-medium">{value}</div>
+				<div className={`font-weight-medium ${disabled ? "text-red" : ""}`}>{value}</div>
 			</div>
 			{createdOn ? (
-				<div className="text-secondary mt-1">
-					{intl.formatMessage({ id: "created-on" }, { date: intlFormat(parseISO(createdOn)) })}
+				<div className={`text-secondary mt-1 ${disabled ? "text-red" : ""}`}>
+					{disabled
+						? intl.formatMessage({ id: "disabled" })
+						: intl.formatMessage({ id: "created-on" }, { date: intlFormat(parseISO(createdOn)) })}
 				</div>
 			) : null}
 		</div>

frontend/src/components/Table/Formatter/index.ts

@@ -1,5 +1,7 @@
 export * from "./CertificateFormatter";
 export * from "./DomainsFormatter";
+export * from "./EmailFormatter";
 export * from "./GravatarFormatter";
+export * from "./RolesFormatter";
 export * from "./StatusFormatter";
 export * from "./ValueWithDateFormatter";

frontend/src/locale/lang/en.json

@@ -12,7 +12,6 @@
   "action.edit": "Edit",
   "action.enable": "Enable",
   "action.permissions": "Permissions",
-  "administrator": "Administrator",
   "auditlog.title": "Audit Log",
   "cancel": "Cancel",
   "certificates.title": "SSL Certificates",
@@ -37,6 +36,7 @@
   "dead-hosts.count": "{count} 404 Hosts",
   "dead-hosts.empty": "There are no 404 Hosts",
   "dead-hosts.title": "404 Hosts",
+  "disabled": "Disabled",
   "email-address": "Email address",
   "empty-subtitle": "Why don't you create one?",
   "error.invalid-auth": "Invalid email or password",
@@ -53,6 +53,7 @@
   "notfound.title": "Oops… You just found an error page",
   "notification.error": "Error",
   "notification.success": "Success",
+  "notification.user-deleted": "User has been deleted",
   "notification.user-saved": "User has been saved",
   "offline": "Offline",
   "online": "Online",
@@ -67,10 +68,11 @@
   "redirection-hosts.count": "{count} Redirection Hosts",
   "redirection-hosts.empty": "There are no Redirection Hosts",
   "redirection-hosts.title": "Redirection Hosts",
+  "role.admin": "Administrator",
+  "role.standard-user": "Standard User",
   "save": "Save",
   "settings.title": "Settings",
   "sign-in": "Sign in",
-  "standard-user": "Apache Helicopter",
   "streams.actions-title": "Stream #{id}",
   "streams.add": "Add Stream",
   "streams.count": "{count} Streams",
@@ -81,8 +83,11 @@
   "user.change-password": "Change Password",
   "user.confirm-password": "Confirm Password",
   "user.current-password": "Current Password",
+  "user.delete.content": "Are you sure you want to delete this user?",
+  "user.delete.title": "Delete User",
   "user.edit": "Edit User",
   "user.edit-profile": "Edit Profile",
+  "user.flags.title": "Properties",
   "user.full-name": "Full Name",
   "user.logout": "Logout",
   "user.new": "New User",

frontend/src/locale/src/en.json

@@ -38,9 +38,6 @@
 	"action.permissions": {
 		"defaultMessage": "Permissions"
 	},
-	"administrator": {
-		"defaultMessage": "Administrator"
-	},
 	"auditlog.title": {
 		"defaultMessage": "Audit Log"
 	},
@@ -113,6 +110,9 @@
 	"dead-hosts.title": {
 		"defaultMessage": "404 Hosts"
 	},
+	"disabled": {
+		"defaultMessage": "Disabled"
+	},
 	"email-address": {
 		"defaultMessage": "Email address"
 	},
@@ -158,6 +158,9 @@
 	"notification.error": {
 		"defaultMessage": "Error"
 	},
+	"notification.user-deleted": {
+		"defaultMessage": "User has been deleted"
+	},
 	"notification.user-saved": {
 		"defaultMessage": "User has been saved"
 	},
@@ -203,6 +206,12 @@
 	"redirection-hosts.title": {
 		"defaultMessage": "Redirection Hosts"
 	},
+	"role.admin": {
+		"defaultMessage": "Administrator"
+	},
+	"role.standard-user": {
+		"defaultMessage": "Standard User"
+	},
 	"save": {
 		"defaultMessage": "Save"
 	},
@@ -212,9 +221,6 @@
 	"sign-in": {
 		"defaultMessage": "Sign in"
 	},
-	"standard-user": {
-		"defaultMessage": "Apache Helicopter"
-	},
 	"streams.actions-title": {
 		"defaultMessage": "Stream #{id}"
 	},
@@ -245,12 +251,21 @@
 	"user.current-password": {
 		"defaultMessage": "Current Password"
 	},
+	"user.delete.title": {
+		"defaultMessage": "Delete User"
+	},
+	"user.delete.content": {
+		"defaultMessage": "Are you sure you want to delete this user?"
+	},
 	"user.edit": {
 		"defaultMessage": "Edit User"
 	},
 	"user.edit-profile": {
 		"defaultMessage": "Edit Profile"
 	},
+	"user.flags.title": {
+		"defaultMessage": "Properties"
+	},
 	"user.full-name": {
 		"defaultMessage": "Full Name"
 	},

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>
+	);
+}