TZ for dev db

backend/internal/user.js

@@ -131,7 +131,7 @@ const internalUser = {
 						action: "updated",
 						object_type: "user",
 						object_id: user.id,
-						meta: data,
+						meta: { ...data, id: user.id, name: user.name },
 					})
 					.then(() => {
 						return user;

docker/docker-compose.dev.yml

@@ -71,12 +71,14 @@ services:
     networks:
       - nginx_proxy_manager
     environment:
+      TZ: "${TZ:-Australia/Brisbane}"
       MYSQL_ROOT_PASSWORD: 'npm'
       MYSQL_DATABASE: 'npm'
       MYSQL_USER: 'npm'
       MYSQL_PASSWORD: 'npm'
     volumes:
       - db_data:/var/lib/mysql
+      - '/etc/localtime:/etc/localtime:ro'
 
   db-postgres:
     image: postgres:latest

frontend/src/api/backend/index.ts

@@ -47,6 +47,7 @@ export * from "./toggleDeadHost";
 export * from "./toggleProxyHost";
 export * from "./toggleRedirectionHost";
 export * from "./toggleStream";
+export * from "./toggleUser";
 export * from "./updateAccessList";
 export * from "./updateAuth";
 export * from "./updateDeadHost";

frontend/src/api/backend/toggleUser.ts

@@ -0,0 +1,10 @@
+import type { User } from "./models";
+import { updateUser } from "./updateUser";
+
+export async function toggleUser(id: number, enabled: boolean): Promise<boolean> {
+	await updateUser({
+		id,
+		isDisabled: !enabled,
+	} as User);
+	return true;
+}

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

@@ -0,0 +1,11 @@
+import { intl } from "src/locale";
+
+interface Props {
+	enabled: boolean;
+}
+export function EnabledFormatter({ enabled }: Props) {
+	if (enabled) {
+		return <span className="badge bg-lime-lt">{intl.formatMessage({ id: "enabled" })}</span>;
+	}
+	return <span className="badge bg-red-lt">{intl.formatMessage({ id: "disabled" })}</span>;
+}

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

@@ -1,4 +1,4 @@
-import { IconUser } from "@tabler/icons-react";
+import { IconBoltOff, IconUser } from "@tabler/icons-react";
 import type { AuditLog } from "src/api/backend";
 import { DateTimeFormat, intl } from "src/locale";
 
@@ -35,6 +35,9 @@ const getIcon = (row: AuditLog) => {
 		case "user":
 			ico = <IconUser size={16} className={c} />;
 			break;
+		case "dead-host":
+			ico = <IconBoltOff size={16} className={c} />;
+			break;
 	}
 
 	return ico;

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

@@ -1,6 +1,7 @@
 export * from "./CertificateFormatter";
 export * from "./DomainsFormatter";
 export * from "./EmailFormatter";
+export * from "./EnabledFormatter";
 export * from "./EventFormatter";
 export * from "./GravatarFormatter";
 export * from "./RolesFormatter";

frontend/src/hooks/useDeadHost.ts

@@ -50,6 +50,7 @@ const useSetDeadHost = () => {
 		onSuccess: async ({ id }: DeadHost) => {
 			queryClient.invalidateQueries({ queryKey: ["dead-host", id] });
 			queryClient.invalidateQueries({ queryKey: ["dead-hosts"] });
+			queryClient.invalidateQueries({ queryKey: ["audit-logs"] });
 		},
 	});
 };

frontend/src/hooks/useUser.ts

@@ -46,6 +46,7 @@ const useSetUser = () => {
 		onSuccess: async ({ id }: User) => {
 			queryClient.invalidateQueries({ queryKey: ["user", id] });
 			queryClient.invalidateQueries({ queryKey: ["users"] });
+			queryClient.invalidateQueries({ queryKey: ["audit-logs"] });
 		},
 	});
 };

frontend/src/locale/lang/en.json

@@ -62,7 +62,9 @@
   "domains.http2-support": "HTTP/2 Support",
   "domains.use-dns": "Use DNS Challenge",
   "email-address": "Email address",
+  "empty-search": "No results found",
   "empty-subtitle": "Why don't you create one?",
+  "enabled": "Enabled",
   "error.invalid-auth": "Invalid email or password",
   "error.invalid-domain": "Invalid domain: {domain}",
   "error.invalid-email": "Invalid email address",
@@ -71,6 +73,7 @@
   "error.required": "This is required",
   "event.created-dead-host": "Created 404 Host",
   "event.created-user": "Created User",
+  "event.deleted-dead-host": "Deleted 404 Host",
   "event.deleted-user": "Deleted User",
   "event.disabled-dead-host": "Disabled 404 Host",
   "event.enabled-dead-host": "Enabled 404 Host",
@@ -94,6 +97,8 @@
   "notification.host-enabled": "Host has been enabled",
   "notification.success": "Success",
   "notification.user-deleted": "User has been deleted",
+  "notification.user-disabled": "User has been disabled",
+  "notification.user-enabled": "User has been enabled",
   "notification.user-saved": "User has been saved",
   "offline": "Offline",
   "online": "Online",
@@ -151,5 +156,6 @@
   "user.switch-light": "Switch to Light mode",
   "users.actions-title": "User #{id}",
   "users.add": "Add User",
+  "users.empty": "There are no Users",
   "users.title": "Users"
 }

frontend/src/locale/src/en.json

@@ -188,6 +188,12 @@
 	"email-address": {
 		"defaultMessage": "Email address"
 	},
+	"empty-search": {
+		"defaultMessage": "No results found"
+	},
+	"enabled": {
+		"defaultMessage": "Enabled"
+	},
 	"error.passwords-must-match": {
 		"defaultMessage": "Passwords must match"
 	},
@@ -212,6 +218,9 @@
 	"event.created-user": {
 		"defaultMessage": "Created User"
 	},
+	"event.deleted-dead-host": {
+		"defaultMessage": "Deleted 404 Host"
+	},
 	"event.deleted-user": {
 		"defaultMessage": "Deleted User"
 	},
@@ -281,6 +290,12 @@
 	"notification.host-enabled": {
 		"defaultMessage": "Host has been enabled"
 	},
+	"notification.user-disabled": {
+		"defaultMessage": "User has been disabled"
+	},
+	"notification.user-enabled": {
+		"defaultMessage": "User has been enabled"
+	},
 	"notification.user-saved": {
 		"defaultMessage": "User has been saved"
 	},
@@ -455,6 +470,9 @@
 	"users.add": {
 		"defaultMessage": "Add User"
 	},
+	"users.empty": {
+		"defaultMessage": "There are no Users"
+	},
 	"users.title": {
 		"defaultMessage": "Users"
 	}

frontend/src/pages/AuditLog/AuditTable.tsx

@@ -1,128 +0,0 @@
-import { IconDotsVertical, IconEdit, IconPower, IconSearch, IconTrash } from "@tabler/icons-react";
-import { intl } from "src/locale";
-
-export default function AuditTable() {
-	return (
-		<div className="card mt-4">
-			<div className="card-status-top bg-purple" />
-			<div className="card-table">
-				<div className="card-header">
-					<div className="row w-full">
-						<div className="col">
-							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "auditlog.title" })}</h2>
-						</div>
-						<div className="col-md-auto col-sm-12">
-							<div className="ms-auto d-flex flex-wrap btn-list">
-								<div className="input-group input-group-flat w-auto">
-									<span className="input-group-text input-group-text-sm">
-										<IconSearch size={16} />
-									</span>
-									<input
-										id="advanced-table-search"
-										type="text"
-										className="form-control form-control-sm"
-										autoComplete="off"
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div id="advanced-table">
-					<div className="table-responsive">
-						<table className="table table-vcenter table-selectable">
-							<thead>
-								<tr>
-									<th className="w-1" />
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											Source
-										</button>
-									</th>
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											Destination
-										</button>
-									</th>
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											SSL
-										</button>
-									</th>
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											Access
-										</button>
-									</th>
-									<th>
-										<button type="button" className="table-sort d-flex justify-content-between">
-											Status
-										</button>
-									</th>
-									<th className="w-1" />
-								</tr>
-							</thead>
-							<tbody className="table-tbody">
-								<tr>
-									<td data-label="Owner">
-										<div className="d-flex py-1 align-items-center">
-											<span
-												className="avatar avatar-2 me-2"
-												style={{
-													backgroundImage:
-														"url(//www.gravatar.com/avatar/6193176330f8d38747f038c170ddb193?default=mm)",
-												}}
-											/>
-										</div>
-									</td>
-									<td data-label="Destination">
-										<div className="flex-fill">
-											<div className="font-weight-medium">
-												<span className="badge badge-lg domain-name">blog.jc21.com</span>
-											</div>
-											<div className="text-secondary mt-1">Created: 20th September 2024</div>
-										</div>
-									</td>
-									<td data-label="Source">http://172.17.0.1:3001</td>
-									<td data-label="SSL">Let's Encrypt</td>
-									<td data-label="Access">Public</td>
-									<td data-label="Status">
-										<span className="badge bg-lime-lt">Online</span>
-									</td>
-									<td data-label="Status" className="text-end">
-										<span className="dropdown">
-											<button
-												type="button"
-												className="btn dropdown-toggle btn-action btn-sm px-1"
-												data-bs-boundary="viewport"
-												data-bs-toggle="dropdown"
-											>
-												<IconDotsVertical />
-											</button>
-											<div className="dropdown-menu dropdown-menu-end">
-												<span className="dropdown-header">Proxy Host #2</span>
-												<a className="dropdown-item" href="#">
-													<IconEdit size={16} />
-													Edit
-												</a>
-												<a className="dropdown-item" href="#">
-													<IconPower size={16} />
-													Disable
-												</a>
-												<div className="dropdown-divider" />
-												<a className="dropdown-item" href="#">
-													<IconTrash size={16} />
-													Delete
-												</a>
-											</div>
-										</span>
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/pages/AuditLog/TableWrapper.tsx

@@ -1,4 +1,3 @@
-import { IconSearch } from "@tabler/icons-react";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { LoadingPage } from "src/components";
@@ -28,21 +27,6 @@ export default function TableWrapper() {
 						<div className="col">
 							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "auditlog.title" })}</h2>
 						</div>
-						<div className="col-md-auto col-sm-12">
-							<div className="ms-auto d-flex flex-wrap btn-list">
-								<div className="input-group input-group-flat w-auto">
-									<span className="input-group-text input-group-text-sm">
-										<IconSearch size={16} />
-									</span>
-									<input
-										id="advanced-table-search"
-										type="text"
-										className="form-control form-control-sm"
-										autoComplete="off"
-									/>
-								</div>
-							</div>
-						</div>
 					</div>
 				</div>
 				<Table data={data ?? []} isFetching={isFetching} onSelectItem={setEventId} />

frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx

@@ -12,6 +12,7 @@ import Table from "./Table";
 
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
+	const [search, setSearch] = useState("");
 	const [deleteId, setDeleteId] = useState(0);
 	const [editId, setEditId] = useState(0 as number | "new");
 	const { isFetching, isLoading, isError, error, data } = useDeadHosts(["owner", "certificate"]);
@@ -36,6 +37,16 @@ export default function TableWrapper() {
 		showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
 	};
 
+	let filtered = null;
+	if (search && data) {
+		filtered = data?.filter((item) => {
+			return item.domainNames.some((domain: string) => domain.toLowerCase().includes(search));
+		});
+	} else if (search !== "") {
+		// this can happen if someone deletes the last item while searching
+		setSearch("");
+	}
+
 	return (
 		<div className="card mt-4">
 			<div className="card-status-top bg-red" />
@@ -47,6 +58,7 @@ export default function TableWrapper() {
 						</div>
 						<div className="col-md-auto col-sm-12">
 							<div className="ms-auto d-flex flex-wrap btn-list">
+								{data?.length ? (
 									<div className="input-group input-group-flat w-auto">
 										<span className="input-group-text input-group-text-sm">
 											<IconSearch size={16} />
@@ -56,8 +68,10 @@ export default function TableWrapper() {
 											type="text"
 											className="form-control form-control-sm"
 											autoComplete="off"
+											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
+								) : null}
 								<Button size="sm" className="btn-red" onClick={() => setEditId("new")}>
 									{intl.formatMessage({ id: "dead-hosts.add" })}
 								</Button>
@@ -66,7 +80,7 @@ export default function TableWrapper() {
 					</div>
 				</div>
 				<Table
-					data={data ?? []}
+					data={filtered ?? data ?? []}
 					isFetching={isFetching}
 					onEdit={(id: number) => setEditId(id)}
 					onDelete={(id: number) => setDeleteId(id)}

frontend/src/pages/Settings/SettingTable.tsx

@@ -1,7 +1,7 @@
 import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
 import { intl } from "src/locale";
 
-export default function AuditTable() {
+export default function SettingTable() {
 	return (
 		<div className="card mt-4">
 			<div className="card-status-top bg-teal" />

frontend/src/pages/Users/Empty.tsx

@@ -5,17 +5,27 @@ import { intl } from "src/locale";
 interface Props {
 	tableInstance: ReactTable<any>;
 	onNewUser?: () => void;
+	isFiltered?: boolean;
 }
-export default function Empty({ tableInstance, onNewUser }: Props) {
+export default function Empty({ tableInstance, onNewUser, isFiltered }: Props) {
+	if (isFiltered) {
+	}
+
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
 				<div className="text-center my-4">
-					<h2>{intl.formatMessage({ id: "proxy-hosts.empty" })}</h2>
+					{isFiltered ? (
+						<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
+					) : (
+						<>
+							<h2>{intl.formatMessage({ id: "users.empty" })}</h2>
 							<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
-					<Button className="btn-lime my-3" onClick={onNewUser}>
-						{intl.formatMessage({ id: "proxy-hosts.add" })}
+							<Button className="btn-orange my-3" onClick={onNewUser}>
+								{intl.formatMessage({ id: "users.add" })}
 							</Button>
+						</>
+					)}
 				</div>
 			</td>
 		</tr>

frontend/src/pages/Users/Table.tsx

@@ -1,30 +1,40 @@
-import { IconDotsVertical, IconEdit, IconLock, IconShield, IconTrash } from "@tabler/icons-react";
+import { IconDotsVertical, IconEdit, IconLock, IconPower, IconShield, IconTrash } from "@tabler/icons-react";
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { User } from "src/api/backend";
-import { EmailFormatter, GravatarFormatter, RolesFormatter, ValueWithDateFormatter } from "src/components";
+import {
+	EmailFormatter,
+	EnabledFormatter,
+	GravatarFormatter,
+	RolesFormatter,
+	ValueWithDateFormatter,
+} from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl } from "src/locale";
 import Empty from "./Empty";
 
 interface Props {
 	data: User[];
+	isFiltered?: boolean;
 	isFetching?: boolean;
 	currentUserId?: number;
 	onEditUser?: (id: number) => void;
 	onEditPermissions?: (id: number) => void;
 	onSetPassword?: (id: number) => void;
 	onDeleteUser?: (id: number) => void;
+	onDisableToggle?: (id: number, enabled: boolean) => void;
 	onNewUser?: () => void;
 }
 export default function Table({
 	data,
+	isFiltered,
 	isFetching,
 	currentUserId,
 	onEditUser,
 	onEditPermissions,
 	onSetPassword,
 	onDeleteUser,
+	onDisableToggle,
 	onNewUser,
 }: Props) {
 	const columnHelper = createColumnHelper<User>();
@@ -62,7 +72,6 @@ export default function Table({
 					return <EmailFormatter email={info.getValue()} />;
 				},
 			}),
-			// TODO: formatter for roles
 			columnHelper.accessor((row: any) => row.roles, {
 				id: "roles",
 				header: intl.formatMessage({ id: "column.roles" }),
@@ -70,6 +79,13 @@ export default function Table({
 					return <RolesFormatter roles={info.getValue()} />;
 				},
 			}),
+			columnHelper.accessor((row: any) => row.isDisabled, {
+				id: "isDisabled",
+				header: intl.formatMessage({ id: "column.status" }),
+				cell: (info: any) => {
+					return <EnabledFormatter enabled={!info.getValue()} />;
+				},
+			}),
 			columnHelper.display({
 				id: "id", // todo: not needed for a display?
 				cell: (info: any) => {
@@ -127,6 +143,19 @@ export default function Table({
 											<IconLock size={16} />
 											{intl.formatMessage({ id: "user.set-password" })}
 										</a>
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												onDisableToggle?.(info.row.original.id, info.row.original.isDisabled);
+											}}
+										>
+											<IconPower size={16} />
+											{intl.formatMessage({
+												id: info.row.original.isDisabled ? "action.enable" : "action.disable",
+											})}
+										</a>
 										<div className="dropdown-divider" />
 										<a
 											className="dropdown-item"
@@ -150,7 +179,7 @@ export default function Table({
 				},
 			}),
 		],
-		[columnHelper, currentUserId, onEditUser, onDeleteUser, onEditPermissions, onSetPassword],
+		[columnHelper, currentUserId, onEditUser, onDisableToggle, onDeleteUser, onEditPermissions, onSetPassword],
 	);
 
 	const tableInstance = useReactTable<User>({
@@ -167,7 +196,7 @@ export default function Table({
 	return (
 		<TableLayout
 			tableInstance={tableInstance}
-			emptyState={<Empty tableInstance={tableInstance} onNewUser={onNewUser} />}
+			emptyState={<Empty tableInstance={tableInstance} onNewUser={onNewUser} isFiltered={isFiltered} />}
 		/>
 	);
 }

frontend/src/pages/Users/TableWrapper.tsx

@@ -1,7 +1,8 @@
 import { IconSearch } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
-import { deleteUser } from "src/api/backend";
+import { deleteUser, toggleUser } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useUser, useUsers } from "src/hooks";
 import { intl } from "src/locale";
@@ -10,6 +11,8 @@ import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
+	const queryClient = useQueryClient();
+	const [search, setSearch] = useState("");
 	const [editUserId, setEditUserId] = useState(0 as number | "new");
 	const [editUserPermissionsId, setEditUserPermissionsId] = useState(0);
 	const [editUserPasswordId, setEditUserPasswordId] = useState(0);
@@ -30,6 +33,27 @@ export default function TableWrapper() {
 		showSuccess(intl.formatMessage({ id: "notification.user-deleted" }));
 	};
 
+	const handleDisableToggle = async (id: number, enabled: boolean) => {
+		await toggleUser(id, enabled);
+		queryClient.invalidateQueries({ queryKey: ["users"] });
+		queryClient.invalidateQueries({ queryKey: ["user", id] });
+		showSuccess(intl.formatMessage({ id: enabled ? "notification.user-enabled" : "notification.user-disabled" }));
+	};
+
+	let filtered = null;
+	if (search && data) {
+		filtered = data?.filter((item) => {
+			return (
+				item.name.toLowerCase().includes(search) ||
+				item.nickname.toLowerCase().includes(search) ||
+				item.email.toLowerCase().includes(search)
+			);
+		});
+	} else if (search !== "") {
+		// this can happen if someone deletes the last item while searching
+		setSearch("");
+	}
+
 	return (
 		<div className="card mt-4">
 			<div className="card-status-top bg-orange" />
@@ -41,6 +65,7 @@ export default function TableWrapper() {
 						</div>
 						<div className="col-md-auto col-sm-12">
 							<div className="ms-auto d-flex flex-wrap btn-list">
+								{data?.length ? (
 									<div className="input-group input-group-flat w-auto">
 										<span className="input-group-text input-group-text-sm">
 											<IconSearch size={16} />
@@ -50,8 +75,10 @@ export default function TableWrapper() {
 											type="text"
 											className="form-control form-control-sm"
 											autoComplete="off"
+											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
+								) : null}
 								<Button size="sm" className="btn-orange" onClick={() => setEditUserId("new")}>
 									{intl.formatMessage({ id: "users.add" })}
 								</Button>
@@ -60,13 +87,15 @@ export default function TableWrapper() {
 					</div>
 				</div>
 				<Table
-					data={data ?? []}
+					data={filtered ?? data ?? []}
+					isFiltered={!!search}
 					isFetching={isFetching}
 					currentUserId={currentUser?.id}
 					onEditUser={(id: number) => setEditUserId(id)}
 					onEditPermissions={(id: number) => setEditUserPermissionsId(id)}
 					onSetPassword={(id: number) => setEditUserPasswordId(id)}
 					onDeleteUser={(id: number) => setDeleteUserId(id)}
+					onDisableToggle={handleDisableToggle}
 					onNewUser={() => setEditUserId("new")}
 				/>
 				{editUserId ? <UserModal userId={editUserId} onClose={() => setEditUserId(0)} /> : null}