Proxy host modal basis, other improvements

backend/internal/proxy-host.js

@@ -422,7 +422,6 @@ const internalProxyHost = {
 	 */
 	getAll: async (access, expand, searchQuery) => {
 		const accessData = await access.can("proxy_hosts:list");
-
 		const query = proxyHostModel
 			.query()
 			.where("is_deleted", 0)
@@ -446,11 +445,9 @@ const internalProxyHost = {
 		}
 
 		const rows = await query.then(utils.omitRows(omissions()));
-
 		if (typeof expand !== "undefined" && expand !== null && expand.indexOf("certificate") !== -1) {
 			return internalHost.cleanAllRowsCertificateMeta(rows);
 		}
-
 		return rows;
 	},
 

backend/internal/stream.js

@@ -348,7 +348,7 @@ const internalStream = {
 						// Add to audit log
 						return internalAuditLog.add(access, {
 							action: "disabled",
-							object_type: "stream-host",
+							object_type: "stream",
 							object_id: row.id,
 							meta: _.omit(row, omissions()),
 						});

backend/lib/access.js

@@ -131,7 +131,7 @@ export default function (tokenString) {
 						const rows = await query;
 						objects = [];
 						_.forEach(rows, (ruleRow) => {
-							result.push(ruleRow.id);
+							objects.push(ruleRow.id);
 						});
 
 						// enum should not have less than 1 item

backend/schema/paths/nginx/streams/post.json

@@ -37,6 +37,9 @@
 						},
 						"meta": {
 							"$ref": "../../../components/stream-object.json#/properties/meta"
+						},
+						"domain_names": {
+							"$ref": "../../../components/dead-host-object.json#/properties/domain_names"
 						}
 					}
 				}

docker/dev/Dockerfile

@@ -15,7 +15,7 @@ ENV SUPPRESS_NO_CONFIG_WARNING=1 \
 
 RUN echo "fs.file-max = 65535" > /etc/sysctl.conf \
 	&& apt-get update \
-	&& apt-get install -y jq python3-pip logrotate \
+	&& apt-get install -y jq python3-pip logrotate moreutils \
 	&& apt-get clean \
 	&& rm -rf /var/lib/apt/lists/*
 

frontend/package.json

@@ -12,6 +12,7 @@
 		"prettier": "biome format --write ./src",
 		"locale-extract": "formatjs extract 'src/**/*.tsx'",
 		"locale-compile": "formatjs compile-folder src/locale/src src/locale/lang",
+		"locale-sort": "./src/locale/scripts/locale-sort.sh",
 		"test": "vitest"
 	},
 	"dependencies": {

frontend/src/App.css

@@ -70,3 +70,7 @@
 	font-family: 'Courier New', Courier, monospace !important;
 	resize: vertical;
 }
+
+label.row {
+	cursor: pointer;
+}

frontend/src/api/backend/getRedirectionHost.ts

@@ -1,8 +1,8 @@
 import * as api from "./base";
 import type { HostExpansion } from "./expansions";
-import type { ProxyHost } from "./models";
+import type { RedirectionHost } from "./models";
 
-export async function getRedirectionHost(id: number, expand?: HostExpansion[], params = {}): Promise<ProxyHost> {
+export async function getRedirectionHost(id: number, expand?: HostExpansion[], params = {}): Promise<RedirectionHost> {
 	return await api.get({
 		url: `/nginx/redirection-hosts/${id}`,
 		params: {

frontend/src/api/backend/models.ts

@@ -103,6 +103,7 @@ export interface ProxyHost {
 	modifiedOn: string;
 	ownerUserId: number;
 	domainNames: string[];
+	forwardScheme: string;
 	forwardHost: string;
 	forwardPort: number;
 	accessListId: number;
@@ -114,9 +115,8 @@ export interface ProxyHost {
 	meta: Record<string, any>;
 	allowWebsocketUpgrade: boolean;
 	http2Support: boolean;
-	forwardScheme: string;
 	enabled: boolean;
-	locations: string[]; // todo: string or object?
+	locations?: string[]; // todo: string or object?
 	hstsEnabled: boolean;
 	hstsSubdomains: boolean;
 	// Expansions:

frontend/src/components/Form/SSLCertificateField.tsx

@@ -31,6 +31,7 @@ interface Props {
 	label?: string;
 	required?: boolean;
 	allowNew?: boolean;
+	forHttp?: boolean; // the sslForced, http2Support, hstsEnabled, hstsSubdomains fields
 }
 export function SSLCertificateField({
 	name = "certificateId",
@@ -38,6 +39,7 @@ export function SSLCertificateField({
 	id = "certificateId",
 	required,
 	allowNew,
+	forHttp = true,
 }: Props) {
 	const { isLoading, isError, error, data } = useCertificates();
 	const { values, setFieldValue } = useFormikContext();
@@ -55,7 +57,7 @@ export function SSLCertificateField({
 			dnsProviderCredentials,
 			propagationSeconds,
 		} = v;
-		if (!newValue?.value) {
+		if (forHttp && !newValue?.value) {
 			sslForced && setFieldValue("sslForced", false);
 			http2Support && setFieldValue("http2Support", false);
 			hstsEnabled && setFieldValue("hstsEnabled", false);
@@ -94,7 +96,7 @@ export function SSLCertificateField({
 		options?.unshift({
 			value: 0,
 			label: "None",
-			subLabel: "This host will not use HTTPS",
+			subLabel: forHttp ? "This host will not use HTTPS" : "No certificate assigned",
 			icon: <IconShield size={14} className="text-red" />,
 		});
 	}

frontend/src/components/Form/SSLOptionsFields.tsx

@@ -1,9 +1,15 @@
 import cn from "classnames";
 import { Field, useFormikContext } from "formik";
-import { DNSProviderFields } from "src/components";
+import { DNSProviderFields, DomainNamesField } from "src/components";
 import { intl } from "src/locale";
 
-export function SSLOptionsFields() {
+interface Props {
+	forHttp?: boolean; // the sslForced, http2Support, hstsEnabled, hstsSubdomains fields
+	forceDNSForNew?: boolean;
+	requireDomainNames?: boolean; // used for streams
+	color?: string;
+}
+export function SSLOptionsFields({ forHttp = true, forceDNSForNew, requireDomainNames, color = "bg-cyan" }: Props) {
 	const { values, setFieldValue } = useFormikContext();
 	const v: any = values || {};
 
@@ -12,6 +18,10 @@ export function SSLOptionsFields() {
 	const { sslForced, http2Support, hstsEnabled, hstsSubdomains, meta } = v;
 	const { dnsChallenge } = meta || {};
 
+	if (forceDNSForNew && newCertificate && !dnsChallenge) {
+		setFieldValue("meta.dnsChallenge", true);
+	}
+
 	const handleToggleChange = (e: any, fieldName: string) => {
 		setFieldValue(fieldName, e.target.checked);
 		if (fieldName === "meta.dnsChallenge" && !e.target.checked) {
@@ -22,10 +32,10 @@ export function SSLOptionsFields() {
 	};
 
 	const toggleClasses = "form-check-input";
-	const toggleEnabled = cn(toggleClasses, "bg-cyan");
+	const toggleEnabled = cn(toggleClasses, color);
 
-	return (
+	const getHttpOptions = () => (
-		<>
+		<div>
 			<div className="row">
 				<div className="col-6">
 					<Field name="sslForced">
@@ -102,6 +112,12 @@ export function SSLOptionsFields() {
 					</Field>
 				</div>
 			</div>
+		</div>
+	);
+
+	return (
+		<div>
+			{forHttp ? getHttpOptions() : null}
 			{newCertificate ? (
 				<>
 					<Field name="meta.dnsChallenge">
@@ -110,7 +126,8 @@ export function SSLOptionsFields() {
 								<input
 									className={dnsChallenge ? toggleEnabled : toggleClasses}
 									type="checkbox"
-									checked={!!dnsChallenge}
+									checked={forceDNSForNew ? true : !!dnsChallenge}
+									disabled={forceDNSForNew}
 									onChange={(e) => handleToggleChange(e, field.name)}
 								/>
 								<span className="form-check-label">
@@ -119,10 +136,10 @@ export function SSLOptionsFields() {
 							</label>
 						)}
 					</Field>
-
+					{requireDomainNames ? <DomainNamesField /> : null}
 					{dnsChallenge ? <DNSProviderFields /> : null}
 				</>
 			) : null}
-		</>
+		</div>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { IconBoltOff, IconUser } from "@tabler/icons-react";
+import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc, IconUser } from "@tabler/icons-react";
 import type { AuditLog } from "src/api/backend";
 import { DateTimeFormat, intl } from "src/locale";
 
@@ -10,8 +10,12 @@ const getEventValue = (event: AuditLog) => {
 	switch (event.objectType) {
 		case "user":
 			return event.meta?.name;
+		case "proxy-host":
+		case "redirection-host":
 		case "dead-host":
 			return event.meta?.domainNames?.join(", ") || "N/A";
+		case "stream":
+			return event.meta?.incomingPort || "N/A";
 		default:
 			return `UNKNOWN EVENT TYPE: ${event.objectType}`;
 	}
@@ -35,9 +39,18 @@ const getIcon = (row: AuditLog) => {
 		case "user":
 			ico = <IconUser size={16} className={c} />;
 			break;
+		case "proxy-host":
+			ico = <IconBolt size={16} className={c} />;
+			break;
+		case "redirection-host":
+			ico = <IconArrowsCross size={16} className={c} />;
+			break;
 		case "dead-host":
 			ico = <IconBoltOff size={16} className={c} />;
 			break;
+		case "stream":
+			ico = <IconDisc size={16} className={c} />;
+			break;
 	}
 
 	return ico;

frontend/src/hooks/index.ts

@@ -7,8 +7,11 @@ export * from "./useDeadHosts";
 export * from "./useDnsProviders";
 export * from "./useHealth";
 export * from "./useHostReport";
+export * from "./useProxyHost";
 export * from "./useProxyHosts";
+export * from "./useRedirectionHost";
 export * from "./useRedirectionHosts";
+export * from "./useStream";
 export * from "./useStreams";
 export * from "./useTheme";
 export * from "./useUser";

frontend/src/hooks/useProxyHost.ts

@@ -0,0 +1,65 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createProxyHost, getProxyHost, type ProxyHost, updateProxyHost } from "src/api/backend";
+
+const fetchProxyHost = (id: number | "new") => {
+	if (id === "new") {
+		return Promise.resolve({
+			id: 0,
+			createdOn: "",
+			modifiedOn: "",
+			ownerUserId: 0,
+			domainNames: [],
+			forwardHost: "",
+			forwardPort: 0,
+			accessListId: 0,
+			certificateId: 0,
+			sslForced: false,
+			cachingEnabled: false,
+			blockExploits: false,
+			advancedConfig: "",
+			meta: {},
+			allowWebsocketUpgrade: false,
+			http2Support: false,
+			forwardScheme: "",
+			enabled: true,
+			hstsEnabled: false,
+			hstsSubdomains: false,
+		} as ProxyHost);
+	}
+	return getProxyHost(id, ["owner"]);
+};
+
+const useProxyHost = (id: number | "new", options = {}) => {
+	return useQuery<ProxyHost, Error>({
+		queryKey: ["proxy-host", id],
+		queryFn: () => fetchProxyHost(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
+};
+
+const useSetProxyHost = () => {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (values: ProxyHost) => (values.id ? updateProxyHost(values) : createProxyHost(values)),
+		onMutate: (values: ProxyHost) => {
+			if (!values.id) {
+				return;
+			}
+			const previousObject = queryClient.getQueryData(["proxy-host", values.id]);
+			queryClient.setQueryData(["proxy-host", values.id], (old: ProxyHost) => ({
+				...old,
+				...values,
+			}));
+			return () => queryClient.setQueryData(["proxy-host", values.id], previousObject);
+		},
+		onError: (_, __, rollback: any) => rollback(),
+		onSuccess: async ({ id }: ProxyHost) => {
+			queryClient.invalidateQueries({ queryKey: ["proxy-host", id] });
+			queryClient.invalidateQueries({ queryKey: ["proxy-hosts"] });
+			queryClient.invalidateQueries({ queryKey: ["audit-logs"] });
+		},
+	});
+};
+
+export { useProxyHost, useSetProxyHost };

frontend/src/hooks/useRedirectionHost.ts

@@ -0,0 +1,69 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	createRedirectionHost,
+	getRedirectionHost,
+	type RedirectionHost,
+	updateRedirectionHost,
+} from "src/api/backend";
+
+const fetchRedirectionHost = (id: number | "new") => {
+	if (id === "new") {
+		return Promise.resolve({
+			id: 0,
+			createdOn: "",
+			modifiedOn: "",
+			ownerUserId: 0,
+			domainNames: [],
+			forwardDomainName: "",
+			preservePath: false,
+			certificateId: 0,
+			sslForced: false,
+			advancedConfig: "",
+			meta: {},
+			http2Support: false,
+			forwardScheme: "auto",
+			forwardHttpCode: 301,
+			blockExploits: false,
+			enabled: true,
+			hstsEnabled: false,
+			hstsSubdomains: false,
+		} as RedirectionHost);
+	}
+	return getRedirectionHost(id, ["owner"]);
+};
+
+const useRedirectionHost = (id: number | "new", options = {}) => {
+	return useQuery<RedirectionHost, Error>({
+		queryKey: ["redirection-host", id],
+		queryFn: () => fetchRedirectionHost(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
+};
+
+const useSetRedirectionHost = () => {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (values: RedirectionHost) =>
+			values.id ? updateRedirectionHost(values) : createRedirectionHost(values),
+		onMutate: (values: RedirectionHost) => {
+			if (!values.id) {
+				return;
+			}
+			const previousObject = queryClient.getQueryData(["redirection-host", values.id]);
+			queryClient.setQueryData(["redirection-host", values.id], (old: RedirectionHost) => ({
+				...old,
+				...values,
+			}));
+			return () => queryClient.setQueryData(["redirection-host", values.id], previousObject);
+		},
+		onError: (_, __, rollback: any) => rollback(),
+		onSuccess: async ({ id }: RedirectionHost) => {
+			queryClient.invalidateQueries({ queryKey: ["redirection-host", id] });
+			queryClient.invalidateQueries({ queryKey: ["redirection-hosts"] });
+			queryClient.invalidateQueries({ queryKey: ["audit-logs"] });
+		},
+	});
+};
+
+export { useRedirectionHost, useSetRedirectionHost };

frontend/src/hooks/useStream.ts

@@ -0,0 +1,54 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createStream, getStream, type Stream, updateStream } from "src/api/backend";
+
+const fetchStream = (id: number | "new") => {
+	if (id === "new") {
+		return Promise.resolve({
+			id: 0,
+			createdOn: "",
+			modifiedOn: "",
+			ownerUserId: 0,
+			tcpForwarding: true,
+			udpForwarding: false,
+			meta: {},
+			enabled: true,
+			certificateId: 0,
+		} as Stream);
+	}
+	return getStream(id, ["owner"]);
+};
+
+const useStream = (id: number | "new", options = {}) => {
+	return useQuery<Stream, Error>({
+		queryKey: ["stream", id],
+		queryFn: () => fetchStream(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
+};
+
+const useSetStream = () => {
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: (values: Stream) => (values.id ? updateStream(values) : createStream(values)),
+		onMutate: (values: Stream) => {
+			if (!values.id) {
+				return;
+			}
+			const previousObject = queryClient.getQueryData(["stream", values.id]);
+			queryClient.setQueryData(["stream", values.id], (old: Stream) => ({
+				...old,
+				...values,
+			}));
+			return () => queryClient.setQueryData(["stream", values.id], previousObject);
+		},
+		onError: (_, __, rollback: any) => rollback(),
+		onSuccess: async ({ id }: Stream) => {
+			queryClient.invalidateQueries({ queryKey: ["stream", id] });
+			queryClient.invalidateQueries({ queryKey: ["streams"] });
+			queryClient.invalidateQueries({ queryKey: ["audit-logs"] });
+		},
+	});
+};
+
+export { useStream, useSetStream };

frontend/src/locale/lang/en.json

@@ -23,6 +23,7 @@
   "close": "Close",
   "column.access": "Access",
   "column.authorization": "Authorization",
+  "column.custom-locations": "Custom Locations",
   "column.destination": "Destination",
   "column.details": "Details",
   "column.email": "Email",
@@ -72,13 +73,29 @@
   "error.passwords-must-match": "Passwords must match",
   "error.required": "This is required",
   "event.created-dead-host": "Created 404 Host",
+  "event.created-redirection-host": "Created Redirection Host",
+  "event.created-stream": "Created Stream",
   "event.created-user": "Created User",
   "event.deleted-dead-host": "Deleted 404 Host",
+  "event.deleted-stream": "Deleted Stream",
   "event.deleted-user": "Deleted User",
   "event.disabled-dead-host": "Disabled 404 Host",
+  "event.disabled-redirection-host": "Disabled Redirection Host",
+  "event.disabled-stream": "Disabled Stream",
   "event.enabled-dead-host": "Enabled 404 Host",
+  "event.enabled-redirection-host": "Enabled Redirection Host",
+  "event.enabled-stream": "Enabled Stream",
+  "event.updated-redirection-host": "Updated Redirection Host",
   "event.updated-user": "Updated User",
   "footer.github-fork": "Fork me on Github",
+  "host.flags.block-exploits": "Block Common Exploits",
+  "host.flags.cache-assets": "Cache Assets",
+  "host.flags.preserve-path": "Preserve Path",
+  "host.flags.protocols": "Protocols",
+  "host.flags.title": "Options",
+  "host.flags.websockets-upgrade": "Websockets Support",
+  "host.forward-port": "Forward Port",
+  "host.forward-scheme": "Scheme",
   "hosts.title": "Hosts",
   "http-only": "HTTP Only",
   "lets-encrypt": "Let's Encrypt",
@@ -95,6 +112,10 @@
   "notification.host-deleted": "Host has been deleted",
   "notification.host-disabled": "Host has been disabled",
   "notification.host-enabled": "Host has been enabled",
+  "notification.redirection-host-saved": "Redirection Host has been saved",
+  "notification.stream-deleted": "Stream has been deleted",
+  "notification.stream-disabled": "Stream has been disabled",
+  "notification.stream-enabled": "Stream has been enabled",
   "notification.success": "Success",
   "notification.user-deleted": "User has been deleted",
   "notification.user-disabled": "User has been disabled",
@@ -112,11 +133,15 @@
   "permissions.visibility.all": "All Items",
   "permissions.visibility.title": "Item Visibility",
   "permissions.visibility.user": "Created Items Only",
+  "proxy-host.forward-host": "Forward Hostname / IP",
+  "proxy-host.new": "New Proxy Host",
   "proxy-hosts.actions-title": "Proxy Host #{id}",
   "proxy-hosts.add": "Add Proxy Host",
   "proxy-hosts.count": "{count} Proxy Hosts",
   "proxy-hosts.empty": "There are no Proxy Hosts",
   "proxy-hosts.title": "Proxy Hosts",
+  "redirection-host.forward-domain": "Forward Domain",
+  "redirection-host.new": "New Redirection Host",
   "redirection-hosts.actions-title": "Redirection Host #{id}",
   "redirection-hosts.add": "Add Redirection Host",
   "redirection-hosts.count": "{count} Redirection Hosts",
@@ -130,6 +155,11 @@
   "setup.title": "Welcome!",
   "sign-in": "Sign in",
   "ssl-certificate": "SSL Certificate",
+  "stream.delete.content": "Are you sure you want to delete this Stream?",
+  "stream.delete.title": "Delete Stream",
+  "stream.forward-host": "Forward Host",
+  "stream.incoming-port": "Incoming Port",
+  "stream.new": "New Stream",
   "streams.actions-title": "Stream #{id}",
   "streams.add": "Add Stream",
   "streams.count": "{count} Streams",

frontend/src/locale/scripts/locale-sort.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+set -e -o pipefail
+
+DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$DIR/../src" || exit 1
+
+if ! command -v jq &> /dev/null; then
+	echo "jq could not be found, please install it to sort JSON files."
+	exit 1
+fi
+
+# iterate over all json files in the current directory
+for file in *.json; do
+	if [[ -f "$file" ]]; then
+		if [[ ! -s "$file" ]]; then
+			echo "Skipping empty file $file"
+			continue
+		fi
+
+		if [ "$file" == "lang-list.json" ]; then
+			continue
+		fi
+
+		# get content of file before sorting
+		original_content=$(<"$file")
+		# compare with sorted content
+		sorted_content=$(jq --tab --sort-keys . "$file")
+		if [ "$original_content" == "$sorted_content" ]; then
+			echo "$file is already sorted"
+			continue
+		fi
+
+		echo "Sorting $file"
+		jq --tab --sort-keys . "$file" | sponge "$file"
+	fi
+done

frontend/src/locale/src/en.json

@@ -1,10 +1,10 @@
 {
-	"access.actions-title": {
-		"defaultMessage": "Access List #{id}"
-	},
 	"access.access-count": {
 		"defaultMessage": "{count} Rules"
 	},
+	"access.actions-title": {
+		"defaultMessage": "Access List #{id}"
+	},
 	"access.add": {
 		"defaultMessage": "Add Access List"
 	},
@@ -29,21 +29,21 @@
 	"action.disable": {
 		"defaultMessage": "Disable"
 	},
-	"action.enable": {
-		"defaultMessage": "Enable"
-	},
 	"action.edit": {
 		"defaultMessage": "Edit"
 	},
+	"action.enable": {
+		"defaultMessage": "Enable"
+	},
 	"action.permissions": {
 		"defaultMessage": "Permissions"
 	},
-	"auditlog.title": {
-		"defaultMessage": "Audit Log"
-	},
 	"action.view-details": {
 		"defaultMessage": "View Details"
 	},
+	"auditlog.title": {
+		"defaultMessage": "Audit Log"
+	},
 	"cancel": {
 		"defaultMessage": "Cancel"
 	},
@@ -65,15 +65,15 @@
 	"close": {
 		"defaultMessage": "Close"
 	},
-	"created-on": {
-		"defaultMessage": "Created: {date}"
-	},
 	"column.access": {
 		"defaultMessage": "Access"
 	},
 	"column.authorization": {
 		"defaultMessage": "Authorization"
 	},
+	"column.custom-locations": {
+		"defaultMessage": "Custom Locations"
+	},
 	"column.destination": {
 		"defaultMessage": "Destination"
 	},
@@ -113,30 +113,21 @@
 	"column.scheme": {
 		"defaultMessage": "Scheme"
 	},
-	"column.status": {
+	"column.source": {
-		"defaultMessage": "Status"
+		"defaultMessage": "Source"
 	},
 	"column.ssl": {
 		"defaultMessage": "SSL"
 	},
-	"column.source": {
+	"column.status": {
-		"defaultMessage": "Source"
+		"defaultMessage": "Status"
+	},
+	"created-on": {
+		"defaultMessage": "Created: {date}"
 	},
 	"dashboard.title": {
 		"defaultMessage": "Dashboard"
 	},
-	"dead-hosts.actions-title": {
-		"defaultMessage": "404 Host #{id}"
-	},
-	"dead-hosts.add": {
-		"defaultMessage": "Add 404 Host"
-	},
-	"dead-hosts.count": {
-		"defaultMessage": "{count} 404 Hosts"
-	},
-	"dead-hosts.empty": {
-		"defaultMessage": "There are no 404 Hosts"
-	},
 	"dead-host.delete.content": {
 		"defaultMessage": "Are you sure you want to delete this 404 host?"
 	},
@@ -149,6 +140,18 @@
 	"dead-host.new": {
 		"defaultMessage": "New 404 Host"
 	},
+	"dead-hosts.actions-title": {
+		"defaultMessage": "404 Host #{id}"
+	},
+	"dead-hosts.add": {
+		"defaultMessage": "Add 404 Host"
+	},
+	"dead-hosts.count": {
+		"defaultMessage": "{count} 404 Hosts"
+	},
+	"dead-hosts.empty": {
+		"defaultMessage": "There are no 404 Hosts"
+	},
 	"dead-hosts.title": {
 		"defaultMessage": "404 Hosts"
 	},
@@ -191,12 +194,12 @@
 	"empty-search": {
 		"defaultMessage": "No results found"
 	},
+	"empty-subtitle": {
+		"defaultMessage": "Why don't you create one?"
+	},
 	"enabled": {
 		"defaultMessage": "Enabled"
 	},
-	"error.passwords-must-match": {
-		"defaultMessage": "Passwords must match"
-	},
 	"error.invalid-auth": {
 		"defaultMessage": "Invalid email or password"
 	},
@@ -209,35 +212,83 @@
 	"error.max-domains": {
 		"defaultMessage": "Too many domains, max is {max}"
 	},
+	"error.passwords-must-match": {
+		"defaultMessage": "Passwords must match"
+	},
 	"error.required": {
 		"defaultMessage": "This is required"
 	},
 	"event.created-dead-host": {
 		"defaultMessage": "Created 404 Host"
 	},
+	"event.created-redirection-host": {
+		"defaultMessage": "Created Redirection Host"
+	},
+	"event.created-stream": {
+		"defaultMessage": "Created Stream"
+	},
 	"event.created-user": {
 		"defaultMessage": "Created User"
 	},
 	"event.deleted-dead-host": {
 		"defaultMessage": "Deleted 404 Host"
 	},
+	"event.deleted-stream": {
+		"defaultMessage": "Deleted Stream"
+	},
 	"event.deleted-user": {
 		"defaultMessage": "Deleted User"
 	},
 	"event.disabled-dead-host": {
 		"defaultMessage": "Disabled 404 Host"
 	},
+	"event.disabled-redirection-host": {
+		"defaultMessage": "Disabled Redirection Host"
+	},
+	"event.disabled-stream": {
+		"defaultMessage": "Disabled Stream"
+	},
 	"event.enabled-dead-host": {
 		"defaultMessage": "Enabled 404 Host"
 	},
+	"event.enabled-redirection-host": {
+		"defaultMessage": "Enabled Redirection Host"
+	},
+	"event.enabled-stream": {
+		"defaultMessage": "Enabled Stream"
+	},
+	"event.updated-redirection-host": {
+		"defaultMessage": "Updated Redirection Host"
+	},
 	"event.updated-user": {
 		"defaultMessage": "Updated User"
 	},
 	"footer.github-fork": {
 		"defaultMessage": "Fork me on Github"
 	},
-	"empty-subtitle": {
+	"host.flags.block-exploits": {
-		"defaultMessage": "Why don't you create one?"
+		"defaultMessage": "Block Common Exploits"
+	},
+	"host.flags.cache-assets": {
+		"defaultMessage": "Cache Assets"
+	},
+	"host.flags.preserve-path": {
+		"defaultMessage": "Preserve Path"
+	},
+	"host.flags.protocols": {
+		"defaultMessage": "Protocols"
+	},
+	"host.flags.title": {
+		"defaultMessage": "Options"
+	},
+	"host.flags.websockets-upgrade": {
+		"defaultMessage": "Websockets Support"
+	},
+	"host.forward-port": {
+		"defaultMessage": "Forward Port"
+	},
+	"host.forward-scheme": {
+		"defaultMessage": "Scheme"
 	},
 	"hosts.title": {
 		"defaultMessage": "Hosts"
@@ -281,15 +332,30 @@
 	"notification.host-deleted": {
 		"defaultMessage": "Host has been deleted"
 	},
-	"notification.user-deleted": {
-		"defaultMessage": "User has been deleted"
-	},
 	"notification.host-disabled": {
 		"defaultMessage": "Host has been disabled"
 	},
 	"notification.host-enabled": {
 		"defaultMessage": "Host has been enabled"
 	},
+	"notification.redirection-host-saved": {
+		"defaultMessage": "Redirection Host has been saved"
+	},
+	"notification.stream-deleted": {
+		"defaultMessage": "Stream has been deleted"
+	},
+	"notification.stream-disabled": {
+		"defaultMessage": "Stream has been disabled"
+	},
+	"notification.stream-enabled": {
+		"defaultMessage": "Stream has been enabled"
+	},
+	"notification.success": {
+		"defaultMessage": "Success"
+	},
+	"notification.user-deleted": {
+		"defaultMessage": "User has been deleted"
+	},
 	"notification.user-disabled": {
 		"defaultMessage": "User has been disabled"
 	},
@@ -299,9 +365,6 @@
 	"notification.user-saved": {
 		"defaultMessage": "User has been saved"
 	},
-	"notification.success": {
-		"defaultMessage": "Success"
-	},
 	"offline": {
 		"defaultMessage": "Offline"
 	},
@@ -338,6 +401,12 @@
 	"permissions.visibility.user": {
 		"defaultMessage": "Created Items Only"
 	},
+	"proxy-host.forward-host": {
+		"defaultMessage": "Forward Hostname / IP"
+	},
+	"proxy-host.new": {
+		"defaultMessage": "New Proxy Host"
+	},
 	"proxy-hosts.actions-title": {
 		"defaultMessage": "Proxy Host #{id}"
 	},
@@ -353,6 +422,12 @@
 	"proxy-hosts.title": {
 		"defaultMessage": "Proxy Hosts"
 	},
+	"redirection-host.forward-domain": {
+		"defaultMessage": "Forward Domain"
+	},
+	"redirection-host.new": {
+		"defaultMessage": "New Redirection Host"
+	},
 	"redirection-hosts.actions-title": {
 		"defaultMessage": "Redirection Host #{id}"
 	},
@@ -392,6 +467,21 @@
 	"ssl-certificate": {
 		"defaultMessage": "SSL Certificate"
 	},
+	"stream.delete.content": {
+		"defaultMessage": "Are you sure you want to delete this Stream?"
+	},
+	"stream.delete.title": {
+		"defaultMessage": "Delete Stream"
+	},
+	"stream.forward-host": {
+		"defaultMessage": "Forward Host"
+	},
+	"stream.incoming-port": {
+		"defaultMessage": "Incoming Port"
+	},
+	"stream.new": {
+		"defaultMessage": "New Stream"
+	},
 	"streams.actions-title": {
 		"defaultMessage": "Stream #{id}"
 	},
@@ -422,12 +512,12 @@
 	"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.delete.title": {
+		"defaultMessage": "Delete User"
+	},
 	"user.edit": {
 		"defaultMessage": "Edit User"
 	},

frontend/src/modals/DeadHostModal.tsx

@@ -136,7 +136,7 @@ export function DeadHostModal({ id, onClose }: Props) {
 													label="ssl-certificate"
 													allowNew
 												/>
-												<SSLOptionsFields />
+												<SSLOptionsFields color="bg-red" />
 											</div>
 											<div className="tab-pane" id="tab-advanced" role="tabpanel">
 												<NginxConfigField />
@@ -152,7 +152,7 @@ export function DeadHostModal({ id, onClose }: Props) {
 								<Button
 									type="submit"
 									actionType="primary"
-									className="ms-auto"
+									className="ms-auto bg-red"
 									data-bs-dismiss="modal"
 									isLoading={isSubmitting}
 									disabled={isSubmitting}

frontend/src/modals/ProxyHostModal.tsx

@@ -0,0 +1,377 @@
+import { IconSettings } from "@tabler/icons-react";
+import cn from "classnames";
+import { Field, Form, Formik } from "formik";
+import { useState } from "react";
+import { Alert } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import {
+	Button,
+	DomainNamesField,
+	Loading,
+	NginxConfigField,
+	SSLCertificateField,
+	SSLOptionsFields,
+} from "src/components";
+import { useProxyHost, useSetProxyHost } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
+import { showSuccess } from "src/notifications";
+
+interface Props {
+	id: number | "new";
+	onClose: () => void;
+}
+export function ProxyHostModal({ id, onClose }: Props) {
+	const { data, isLoading, error } = useProxyHost(id);
+	const { mutate: setProxyHost } = useSetProxyHost();
+	const [errorMsg, setErrorMsg] = useState<string | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const onSubmit = async (values: any, { setSubmitting }: any) => {
+		if (isSubmitting) return;
+		setIsSubmitting(true);
+		setErrorMsg(null);
+
+		const { ...payload } = {
+			id: id === "new" ? undefined : id,
+			...values,
+		};
+
+		setProxyHost(payload, {
+			onError: (err: any) => setErrorMsg(err.message),
+			onSuccess: () => {
+				showSuccess(intl.formatMessage({ id: "notification.proxy-host-saved" }));
+				onClose();
+			},
+			onSettled: () => {
+				setIsSubmitting(false);
+				setSubmitting(false);
+			},
+		});
+	};
+
+	return (
+		<Modal show onHide={onClose} animation={false}>
+			{!isLoading && error && (
+				<Alert variant="danger" className="m-3">
+					{error?.message || "Unknown error"}
+				</Alert>
+			)}
+			{isLoading && <Loading noLogo />}
+			{!isLoading && data && (
+				<Formik
+					initialValues={
+						{
+							// Details tab
+							domainNames: data?.domainNames || [],
+							forwardScheme: data?.forwardScheme || "http",
+							forwardHost: data?.forwardHost || "",
+							forwardPort: data?.forwardPort || undefined,
+							accessListId: data?.accessListId || 0,
+							cachingEnabled: data?.cachingEnabled || false,
+							blockExploits: data?.blockExploits || false,
+							allowWebsocketUpgrade: data?.allowWebsocketUpgrade || false,
+							// Locations tab
+							locations: data?.locations || [],
+							// SSL tab
+							certificateId: data?.certificateId || 0,
+							sslForced: data?.sslForced || false,
+							http2Support: data?.http2Support || false,
+							hstsEnabled: data?.hstsEnabled || false,
+							hstsSubdomains: data?.hstsSubdomains || false,
+							// Advanced tab
+							advancedConfig: data?.advancedConfig || "",
+							meta: data?.meta || {},
+						} as any
+					}
+					onSubmit={onSubmit}
+				>
+					{() => (
+						<Form>
+							<Modal.Header closeButton>
+								<Modal.Title>
+									{intl.formatMessage({
+										id: data?.id ? "proxy-host.edit" : "proxy-host.new",
+									})}
+								</Modal.Title>
+							</Modal.Header>
+							<Modal.Body className="p-0">
+								<Alert variant="danger" show={!!errorMsg} onClose={() => setErrorMsg(null)} dismissible>
+									{errorMsg}
+								</Alert>
+
+								<div className="card m-0 border-0">
+									<div className="card-header">
+										<ul className="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
+											<li className="nav-item" role="presentation">
+												<a
+													href="#tab-details"
+													className="nav-link active"
+													data-bs-toggle="tab"
+													aria-selected="true"
+													role="tab"
+												>
+													{intl.formatMessage({ id: "column.details" })}
+												</a>
+											</li>
+											<li className="nav-item" role="presentation">
+												<a
+													href="#tab-locations"
+													className="nav-link"
+													data-bs-toggle="tab"
+													aria-selected="false"
+													tabIndex={-1}
+													role="tab"
+												>
+													{intl.formatMessage({ id: "column.custom-locations" })}
+												</a>
+											</li>
+											<li className="nav-item" role="presentation">
+												<a
+													href="#tab-ssl"
+													className="nav-link"
+													data-bs-toggle="tab"
+													aria-selected="false"
+													tabIndex={-1}
+													role="tab"
+												>
+													{intl.formatMessage({ id: "column.ssl" })}
+												</a>
+											</li>
+											<li className="nav-item ms-auto" role="presentation">
+												<a
+													href="#tab-advanced"
+													className="nav-link"
+													title="Settings"
+													data-bs-toggle="tab"
+													aria-selected="false"
+													tabIndex={-1}
+													role="tab"
+												>
+													<IconSettings size={20} />
+												</a>
+											</li>
+										</ul>
+									</div>
+									<div className="card-body">
+										<div className="tab-content">
+											<div className="tab-pane active show" id="tab-details" role="tabpanel">
+												<DomainNamesField isWildcardPermitted />
+												<div className="row">
+													<div className="col-md-3">
+														<Field name="forwardScheme">
+															{({ field, form }: any) => (
+																<div className="mb-3">
+																	<label
+																		className="form-label"
+																		htmlFor="forwardScheme"
+																	>
+																		{intl.formatMessage({
+																			id: "host.forward-scheme",
+																		})}
+																	</label>
+																	<select
+																		id="forwardScheme"
+																		className={`form-control ${form.errors.forwardScheme && form.touched.forwardScheme ? "is-invalid" : ""}`}
+																		required
+																		{...field}
+																	>
+																		<option value="http">http</option>
+																		<option value="https">https</option>
+																	</select>
+																	{form.errors.forwardScheme ? (
+																		<div className="invalid-feedback">
+																			{form.errors.forwardScheme &&
+																			form.touched.forwardScheme
+																				? form.errors.forwardScheme
+																				: null}
+																		</div>
+																	) : null}
+																</div>
+															)}
+														</Field>
+													</div>
+													<div className="col-md-6">
+														<Field name="forwardHost" validate={validateString(1, 255)}>
+															{({ field, form }: any) => (
+																<div className="mb-3">
+																	<label className="form-label" htmlFor="forwardHost">
+																		{intl.formatMessage({
+																			id: "proxy-host.forward-host",
+																		})}
+																	</label>
+																	<input
+																		id="forwardHost"
+																		type="text"
+																		className={`form-control ${form.errors.forwardHost && form.touched.forwardHost ? "is-invalid" : ""}`}
+																		required
+																		placeholder="example.com"
+																		{...field}
+																	/>
+																	{form.errors.forwardHost ? (
+																		<div className="invalid-feedback">
+																			{form.errors.forwardHost &&
+																			form.touched.forwardHost
+																				? form.errors.forwardHost
+																				: null}
+																		</div>
+																	) : null}
+																</div>
+															)}
+														</Field>
+													</div>
+													<div className="col-md-3">
+														<Field name="forwardPort" validate={validateNumber(1, 65535)}>
+															{({ field, form }: any) => (
+																<div className="mb-3">
+																	<label className="form-label" htmlFor="forwardPort">
+																		{intl.formatMessage({
+																			id: "host.forward-port",
+																		})}
+																	</label>
+																	<input
+																		id="forwardPort"
+																		type="number"
+																		min={1}
+																		max={65535}
+																		className={`form-control ${form.errors.forwardPort && form.touched.forwardPort ? "is-invalid" : ""}`}
+																		required
+																		placeholder="eg: 8081"
+																		{...field}
+																	/>
+																	{form.errors.forwardPort ? (
+																		<div className="invalid-feedback">
+																			{form.errors.forwardPort &&
+																			form.touched.forwardPort
+																				? form.errors.forwardPort
+																				: null}
+																		</div>
+																	) : null}
+																</div>
+															)}
+														</Field>
+													</div>
+												</div>
+												<div className="my-3">
+													<h4 className="py-2">
+														{intl.formatMessage({ id: "host.flags.title" })}
+													</h4>
+													<div className="divide-y">
+														<div>
+															<label className="row" htmlFor="cachingEnabled">
+																<span className="col">
+																	{intl.formatMessage({
+																		id: "host.flags.cache-assets",
+																	})}
+																</span>
+																<span className="col-auto">
+																	<Field name="cachingEnabled" type="checkbox">
+																		{({ field }: any) => (
+																			<label className="form-check form-check-single form-switch">
+																				<input
+																					{...field}
+																					id="cachingEnabled"
+																					className={cn("form-check-input", {
+																						"bg-lime": field.checked,
+																					})}
+																					type="checkbox"
+																				/>
+																			</label>
+																		)}
+																	</Field>
+																</span>
+															</label>
+														</div>
+														<div>
+															<label className="row" htmlFor="blockExploits">
+																<span className="col">
+																	{intl.formatMessage({
+																		id: "host.flags.block-exploits",
+																	})}
+																</span>
+																<span className="col-auto">
+																	<Field name="blockExploits" type="checkbox">
+																		{({ field }: any) => (
+																			<label className="form-check form-check-single form-switch">
+																				<input
+																					{...field}
+																					id="blockExploits"
+																					className={cn("form-check-input", {
+																						"bg-lime": field.checked,
+																					})}
+																					type="checkbox"
+																				/>
+																			</label>
+																		)}
+																	</Field>
+																</span>
+															</label>
+														</div>
+														<div>
+															<label className="row" htmlFor="allowWebsocketUpgrade">
+																<span className="col">
+																	{intl.formatMessage({
+																		id: "host.flags.websockets-upgrade",
+																	})}
+																</span>
+																<span className="col-auto">
+																	<Field name="allowWebsocketUpgrade" type="checkbox">
+																		{({ field }: any) => (
+																			<label className="form-check form-check-single form-switch">
+																				<input
+																					{...field}
+																					id="allowWebsocketUpgrade"
+																					className={cn("form-check-input", {
+																						"bg-lime": field.checked,
+																					})}
+																					type="checkbox"
+																				/>
+																			</label>
+																		)}
+																	</Field>
+																</span>
+															</label>
+														</div>
+													</div>
+												</div>
+											</div>
+											<div className="tab-pane" id="tab-locations" role="tabpanel">
+												locations
+											</div>
+											<div className="tab-pane" id="tab-ssl" role="tabpanel">
+												<SSLCertificateField
+													name="certificateId"
+													label="ssl-certificate"
+													allowNew
+												/>
+												<SSLOptionsFields color="bg-lime" />
+											</div>
+											<div className="tab-pane" id="tab-advanced" role="tabpanel">
+												<NginxConfigField />
+											</div>
+										</div>
+									</div>
+								</div>
+							</Modal.Body>
+							<Modal.Footer>
+								<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
+									{intl.formatMessage({ id: "cancel" })}
+								</Button>
+								<Button
+									type="submit"
+									actionType="primary"
+									className="ms-auto bg-lime"
+									data-bs-dismiss="modal"
+									isLoading={isSubmitting}
+									disabled={isSubmitting}
+								>
+									{intl.formatMessage({ id: "save" })}
+								</Button>
+							</Modal.Footer>
+						</Form>
+					)}
+				</Formik>
+			)}
+		</Modal>
+	);
+}

frontend/src/modals/RedirectionHostModal.tsx

@@ -0,0 +1,309 @@
+import { IconSettings } from "@tabler/icons-react";
+import cn from "classnames";
+import { Field, Form, Formik } from "formik";
+import { useState } from "react";
+import { Alert } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import {
+	Button,
+	DomainNamesField,
+	Loading,
+	NginxConfigField,
+	SSLCertificateField,
+	SSLOptionsFields,
+} from "src/components";
+import { useRedirectionHost, useSetRedirectionHost } from "src/hooks";
+import { intl } from "src/locale";
+import { validateString } from "src/modules/Validations";
+import { showSuccess } from "src/notifications";
+
+interface Props {
+	id: number | "new";
+	onClose: () => void;
+}
+export function RedirectionHostModal({ id, onClose }: Props) {
+	const { data, isLoading, error } = useRedirectionHost(id);
+	const { mutate: setRedirectionHost } = useSetRedirectionHost();
+	const [errorMsg, setErrorMsg] = useState<string | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const onSubmit = async (values: any, { setSubmitting }: any) => {
+		if (isSubmitting) return;
+		setIsSubmitting(true);
+		setErrorMsg(null);
+
+		const { ...payload } = {
+			id: id === "new" ? undefined : id,
+			...values,
+		};
+
+		setRedirectionHost(payload, {
+			onError: (err: any) => setErrorMsg(err.message),
+			onSuccess: () => {
+				showSuccess(intl.formatMessage({ id: "notification.redirection-host-saved" }));
+				onClose();
+			},
+			onSettled: () => {
+				setIsSubmitting(false);
+				setSubmitting(false);
+			},
+		});
+	};
+
+	return (
+		<Modal show onHide={onClose} animation={false}>
+			{!isLoading && error && (
+				<Alert variant="danger" className="m-3">
+					{error?.message || "Unknown error"}
+				</Alert>
+			)}
+			{isLoading && <Loading noLogo />}
+			{!isLoading && data && (
+				<Formik
+					initialValues={
+						{
+							// Details tab
+							domainNames: data?.domainNames || [],
+							forwardDomainName: data?.forwardDomainName || "",
+							forwardScheme: data?.forwardScheme || "auto",
+							forwardHttpCode: data?.forwardHttpCode || 301,
+							preservePath: data?.preservePath || false,
+							blockExploits: data?.blockExploits || false,
+							// SSL tab
+							certificateId: data?.certificateId || 0,
+							sslForced: data?.sslForced || false,
+							http2Support: data?.http2Support || false,
+							hstsEnabled: data?.hstsEnabled || false,
+							hstsSubdomains: data?.hstsSubdomains || false,
+							// Advanced tab
+							advancedConfig: data?.advancedConfig || "",
+							meta: data?.meta || {},
+						} as any
+					}
+					onSubmit={onSubmit}
+				>
+					{() => (
+						<Form>
+							<Modal.Header closeButton>
+								<Modal.Title>
+									{intl.formatMessage({
+										id: data?.id ? "redirection-host.edit" : "redirection-host.new",
+									})}
+								</Modal.Title>
+							</Modal.Header>
+							<Modal.Body className="p-0">
+								<Alert variant="danger" show={!!errorMsg} onClose={() => setErrorMsg(null)} dismissible>
+									{errorMsg}
+								</Alert>
+
+								<div className="card m-0 border-0">
+									<div className="card-header">
+										<ul className="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
+											<li className="nav-item" role="presentation">
+												<a
+													href="#tab-details"
+													className="nav-link active"
+													data-bs-toggle="tab"
+													aria-selected="true"
+													role="tab"
+												>
+													{intl.formatMessage({ id: "column.details" })}
+												</a>
+											</li>
+											<li className="nav-item" role="presentation">
+												<a
+													href="#tab-ssl"
+													className="nav-link"
+													data-bs-toggle="tab"
+													aria-selected="false"
+													tabIndex={-1}
+													role="tab"
+												>
+													{intl.formatMessage({ id: "column.ssl" })}
+												</a>
+											</li>
+											<li className="nav-item ms-auto" role="presentation">
+												<a
+													href="#tab-advanced"
+													className="nav-link"
+													title="Settings"
+													data-bs-toggle="tab"
+													aria-selected="false"
+													tabIndex={-1}
+													role="tab"
+												>
+													<IconSettings size={20} />
+												</a>
+											</li>
+										</ul>
+									</div>
+									<div className="card-body">
+										<div className="tab-content">
+											<div className="tab-pane active show" id="tab-details" role="tabpanel">
+												<DomainNamesField isWildcardPermitted />
+												<div className="row">
+													<div className="col-md-4">
+														<Field name="forwardScheme">
+															{({ field, form }: any) => (
+																<div className="mb-3">
+																	<label
+																		className="form-label"
+																		htmlFor="forwardScheme"
+																	>
+																		{intl.formatMessage({
+																			id: "host.forward-scheme",
+																		})}
+																	</label>
+																	<select
+																		id="forwardScheme"
+																		className={`form-control ${form.errors.forwardScheme && form.touched.forwardScheme ? "is-invalid" : ""}`}
+																		required
+																		{...field}
+																	>
+																		<option value="$scheme">Auto</option>
+																		<option value="http">http</option>
+																		<option value="https">https</option>
+																	</select>
+																	{form.errors.forwardScheme ? (
+																		<div className="invalid-feedback">
+																			{form.errors.forwardScheme &&
+																			form.touched.forwardScheme
+																				? form.errors.forwardScheme
+																				: null}
+																		</div>
+																	) : null}
+																</div>
+															)}
+														</Field>
+													</div>
+													<div className="col-md-8">
+														<Field
+															name="forwardDomainName"
+															validate={validateString(1, 255)}
+														>
+															{({ field, form }: any) => (
+																<div className="mb-3">
+																	<label
+																		className="form-label"
+																		htmlFor="forwardDomainName"
+																	>
+																		{intl.formatMessage({
+																			id: "redirection-host.forward-domain",
+																		})}
+																	</label>
+																	<input
+																		id="forwardDomainName"
+																		type="text"
+																		className={`form-control ${form.errors.forwardDomainName && form.touched.forwardDomainName ? "is-invalid" : ""}`}
+																		required
+																		placeholder="example.com"
+																		{...field}
+																	/>
+																	{form.errors.forwardDomainName ? (
+																		<div className="invalid-feedback">
+																			{form.errors.forwardDomainName &&
+																			form.touched.forwardDomainName
+																				? form.errors.forwardDomainName
+																				: null}
+																		</div>
+																	) : null}
+																</div>
+															)}
+														</Field>
+													</div>
+												</div>
+												<div className="my-3">
+													<h4 className="py-2">
+														{intl.formatMessage({ id: "host.flags.title" })}
+													</h4>
+													<div className="divide-y">
+														<div>
+															<label className="row" htmlFor="preservePath">
+																<span className="col">
+																	{intl.formatMessage({
+																		id: "host.flags.preserve-path",
+																	})}
+																</span>
+																<span className="col-auto">
+																	<Field name="preservePath" type="checkbox">
+																		{({ field }: any) => (
+																			<label className="form-check form-check-single form-switch">
+																				<input
+																					{...field}
+																					id="preservePath"
+																					className={cn("form-check-input", {
+																						"bg-yellow": field.checked,
+																					})}
+																					type="checkbox"
+																				/>
+																			</label>
+																		)}
+																	</Field>
+																</span>
+															</label>
+														</div>
+														<div>
+															<label className="row" htmlFor="blockExploits">
+																<span className="col">
+																	{intl.formatMessage({
+																		id: "host.flags.block-exploits",
+																	})}
+																</span>
+																<span className="col-auto">
+																	<Field name="blockExploits" type="checkbox">
+																		{({ field }: any) => (
+																			<label className="form-check form-check-single form-switch">
+																				<input
+																					{...field}
+																					id="blockExploits"
+																					className={cn("form-check-input", {
+																						"bg-yellow": field.checked,
+																					})}
+																					type="checkbox"
+																				/>
+																			</label>
+																		)}
+																	</Field>
+																</span>
+															</label>
+														</div>
+													</div>
+												</div>
+											</div>
+											<div className="tab-pane" id="tab-ssl" role="tabpanel">
+												<SSLCertificateField
+													name="certificateId"
+													label="ssl-certificate"
+													allowNew
+												/>
+												<SSLOptionsFields color="bg-yellow" />
+											</div>
+											<div className="tab-pane" id="tab-advanced" role="tabpanel">
+												<NginxConfigField />
+											</div>
+										</div>
+									</div>
+								</div>
+							</Modal.Body>
+							<Modal.Footer>
+								<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
+									{intl.formatMessage({ id: "cancel" })}
+								</Button>
+								<Button
+									type="submit"
+									actionType="primary"
+									className="ms-auto bg-yellow"
+									data-bs-dismiss="modal"
+									isLoading={isSubmitting}
+									disabled={isSubmitting}
+								>
+									{intl.formatMessage({ id: "save" })}
+								</Button>
+							</Modal.Footer>
+						</Form>
+					)}
+				</Formik>
+			)}
+		</Modal>
+	);
+}

frontend/src/modals/StreamModal.tsx

@@ -0,0 +1,327 @@
+import { Field, Form, Formik } from "formik";
+import { useState } from "react";
+import { Alert } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import { Button, Loading, SSLCertificateField, SSLOptionsFields } from "src/components";
+import { useSetStream, useStream } from "src/hooks";
+import { intl } from "src/locale";
+import { validateNumber, validateString } from "src/modules/Validations";
+import { showSuccess } from "src/notifications";
+
+interface Props {
+	id: number | "new";
+	onClose: () => void;
+}
+export function StreamModal({ id, onClose }: Props) {
+	const { data, isLoading, error } = useStream(id);
+	const { mutate: setStream } = useSetStream();
+	const [errorMsg, setErrorMsg] = useState<string | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	const onSubmit = async (values: any, { setSubmitting }: any) => {
+		if (isSubmitting) return;
+		setIsSubmitting(true);
+		setErrorMsg(null);
+
+		const { ...payload } = {
+			id: id === "new" ? undefined : id,
+			...values,
+		};
+
+		setStream(payload, {
+			onError: (err: any) => setErrorMsg(err.message),
+			onSuccess: () => {
+				showSuccess(intl.formatMessage({ id: "notification.stream-saved" }));
+				onClose();
+			},
+			onSettled: () => {
+				setIsSubmitting(false);
+				setSubmitting(false);
+			},
+		});
+	};
+
+	return (
+		<Modal show onHide={onClose} animation={false}>
+			{!isLoading && error && (
+				<Alert variant="danger" className="m-3">
+					{error?.message || "Unknown error"}
+				</Alert>
+			)}
+			{isLoading && <Loading noLogo />}
+			{!isLoading && data && (
+				<Formik
+					initialValues={
+						{
+							incomingPort: data?.incomingPort,
+							forwardingHost: data?.forwardingHost,
+							forwardingPort: data?.forwardingPort,
+							tcpForwarding: data?.tcpForwarding,
+							udpForwarding: data?.udpForwarding,
+							certificateId: data?.certificateId,
+							meta: data?.meta || {},
+						} as any
+					}
+					onSubmit={onSubmit}
+				>
+					{({ setFieldValue }: any) => (
+						<Form>
+							<Modal.Header closeButton>
+								<Modal.Title>
+									{intl.formatMessage({ id: data?.id ? "stream.edit" : "stream.new" })}
+								</Modal.Title>
+							</Modal.Header>
+							<Modal.Body className="p-0">
+								<Alert variant="danger" show={!!errorMsg} onClose={() => setErrorMsg(null)} dismissible>
+									{errorMsg}
+								</Alert>
+
+								<div className="card m-0 border-0">
+									<div className="card-header">
+										<ul className="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
+											<li className="nav-item" role="presentation">
+												<a
+													href="#tab-details"
+													className="nav-link active"
+													data-bs-toggle="tab"
+													aria-selected="true"
+													role="tab"
+												>
+													{intl.formatMessage({ id: "column.details" })}
+												</a>
+											</li>
+											<li className="nav-item" role="presentation">
+												<a
+													href="#tab-ssl"
+													className="nav-link"
+													data-bs-toggle="tab"
+													aria-selected="false"
+													tabIndex={-1}
+													role="tab"
+												>
+													{intl.formatMessage({ id: "column.ssl" })}
+												</a>
+											</li>
+										</ul>
+									</div>
+									<div className="card-body">
+										<div className="tab-content">
+											<div className="tab-pane active show" id="tab-details" role="tabpanel">
+												<Field name="incomingPort" validate={validateNumber(1, 65535)}>
+													{({ field, form }: any) => (
+														<div className="mb-3">
+															<label className="form-label" htmlFor="incomingPort">
+																{intl.formatMessage({ id: "stream.incoming-port" })}
+															</label>
+															<input
+																id="incomingPort"
+																type="number"
+																min={1}
+																max={65535}
+																className={`form-control ${form.errors.incomingPort && form.touched.incomingPort ? "is-invalid" : ""}`}
+																required
+																placeholder="eg: 8080"
+																{...field}
+															/>
+															{form.errors.incomingPort ? (
+																<div className="invalid-feedback">
+																	{form.errors.incomingPort &&
+																	form.touched.incomingPort
+																		? form.errors.incomingPort
+																		: null}
+																</div>
+															) : null}
+														</div>
+													)}
+												</Field>
+												<div className="row">
+													<div className="col-md-8">
+														<Field name="forwardingHost" validate={validateString(1, 255)}>
+															{({ field, form }: any) => (
+																<div className="mb-3">
+																	<label
+																		className="form-label"
+																		htmlFor="forwardingHost"
+																	>
+																		{intl.formatMessage({
+																			id: "stream.forward-host",
+																		})}
+																	</label>
+																	<input
+																		id="forwardingHost"
+																		type="text"
+																		className={`form-control ${form.errors.forwardingHost && form.touched.forwardingHost ? "is-invalid" : ""}`}
+																		required
+																		placeholder="example.com or 10.0.0.1 or 2001:db8:3333:4444:5555:6666:7777:8888"
+																		{...field}
+																	/>
+																	{form.errors.forwardingHost ? (
+																		<div className="invalid-feedback">
+																			{form.errors.forwardingHost &&
+																			form.touched.forwardingHost
+																				? form.errors.forwardingHost
+																				: null}
+																		</div>
+																	) : null}
+																</div>
+															)}
+														</Field>
+													</div>
+													<div className="col-md-4">
+														<Field
+															name="forwardingPort"
+															validate={validateNumber(1, 65535)}
+														>
+															{({ field, form }: any) => (
+																<div className="mb-3">
+																	<label
+																		className="form-label"
+																		htmlFor="forwardingPort"
+																	>
+																		{intl.formatMessage({
+																			id: "host.forward-port",
+																		})}
+																	</label>
+																	<input
+																		id="forwardingPort"
+																		type="number"
+																		min={1}
+																		max={65535}
+																		className={`form-control ${form.errors.forwardingPort && form.touched.forwardingPort ? "is-invalid" : ""}`}
+																		required
+																		placeholder="eg: 8081"
+																		{...field}
+																	/>
+																	{form.errors.forwardingPort ? (
+																		<div className="invalid-feedback">
+																			{form.errors.forwardingPort &&
+																			form.touched.forwardingPort
+																				? form.errors.forwardingPort
+																				: null}
+																		</div>
+																	) : null}
+																</div>
+															)}
+														</Field>
+													</div>
+												</div>
+												<div className="my-3">
+													<h3 className="py-2">
+														{intl.formatMessage({ id: "host.flags.protocols" })}
+													</h3>
+													<div className="divide-y">
+														<div>
+															<label className="row" htmlFor="tcpForwarding">
+																<span className="col">
+																	{intl.formatMessage({
+																		id: "streams.tcp",
+																	})}
+																</span>
+																<span className="col-auto">
+																	<Field name="tcpForwarding" type="checkbox">
+																		{({ field }: any) => (
+																			<label className="form-check form-check-single form-switch">
+																				<input
+																					id="tcpForwarding"
+																					className="form-check-input"
+																					type="checkbox"
+																					name={field.name}
+																					checked={field.value}
+																					onChange={(e: any) => {
+																						setFieldValue(
+																							field.name,
+																							e.target.checked,
+																						);
+																						if (!e.target.checked) {
+																							setFieldValue(
+																								"udpForwarding",
+																								true,
+																							);
+																						}
+																					}}
+																				/>
+																			</label>
+																		)}
+																	</Field>
+																</span>
+															</label>
+														</div>
+														<div>
+															<label className="row" htmlFor="udpForwarding">
+																<span className="col">
+																	{intl.formatMessage({
+																		id: "streams.udp",
+																	})}
+																</span>
+																<span className="col-auto">
+																	<Field name="udpForwarding" type="checkbox">
+																		{({ field }: any) => (
+																			<label className="form-check form-check-single form-switch">
+																				<input
+																					id="udpForwarding"
+																					className="form-check-input"
+																					type="checkbox"
+																					name={field.name}
+																					checked={field.value}
+																					onChange={(e: any) => {
+																						setFieldValue(
+																							field.name,
+																							e.target.checked,
+																						);
+																						if (!e.target.checked) {
+																							setFieldValue(
+																								"tcpForwarding",
+																								true,
+																							);
+																						}
+																					}}
+																				/>
+																			</label>
+																		)}
+																	</Field>
+																</span>
+															</label>
+														</div>
+													</div>
+												</div>
+											</div>
+											<div className="tab-pane" id="tab-ssl" role="tabpanel">
+												<SSLCertificateField
+													name="certificateId"
+													label="ssl-certificate"
+													allowNew
+													forHttp={false}
+												/>
+												<SSLOptionsFields
+													color="bg-blue"
+													forHttp={false}
+													forceDNSForNew
+													requireDomainNames
+												/>
+											</div>
+										</div>
+									</div>
+								</div>
+							</Modal.Body>
+							<Modal.Footer>
+								<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
+									{intl.formatMessage({ id: "cancel" })}
+								</Button>
+								<Button
+									type="submit"
+									actionType="primary"
+									className="ms-auto"
+									data-bs-dismiss="modal"
+									isLoading={isSubmitting}
+									disabled={isSubmitting}
+								>
+									{intl.formatMessage({ id: "save" })}
+								</Button>
+							</Modal.Footer>
+						</Form>
+					)}
+				</Formik>
+			)}
+		</Modal>
+	);
+}

frontend/src/modals/UserModal.tsx

@@ -167,7 +167,7 @@ export function UserModal({ userId, onClose }: Props) {
 								</div>
 								{currentUser && data && currentUser?.id !== data?.id ? (
 									<div className="my-3">
-										<h3 className="py-2">{intl.formatMessage({ id: "user.flags.title" })}</h3>
+										<h4 className="py-2">{intl.formatMessage({ id: "user.flags.title" })}</h4>
 										<div className="divide-y">
 											<div>
 												<label className="row" htmlFor="isAdmin">

frontend/src/modals/index.ts

@@ -3,5 +3,8 @@ export * from "./DeadHostModal";
 export * from "./DeleteConfirmModal";
 export * from "./EventDetailsModal";
 export * from "./PermissionsModal";
+export * from "./ProxyHostModal";
+export * from "./RedirectionHostModal";
 export * from "./SetPasswordModal";
+export * from "./StreamModal";
 export * from "./UserModal";

frontend/src/modules/Validations.tsx

@@ -85,18 +85,18 @@ const validateDomain = (allowWildcards = false) => {
 const validateDomains = (allowWildcards = false, maxDomains?: number) => {
 	const vDom = validateDomain(allowWildcards);
 
-	return (value: string[]): string | undefined => {
+	return (value?: string[]): string | undefined => {
-		if (!value.length) {
+		if (!value?.length) {
 			return intl.formatMessage({ id: "error.required" });
 		}
 
 		// Deny if the list of domains is hit
-		if (maxDomains && value.length >= maxDomains) {
+		if (maxDomains && value?.length >= maxDomains) {
 			return intl.formatMessage({ id: "error.max-domains" }, { max: maxDomains });
 		}
 
 		// validate each domain
-		for (let i = 0; i < value.length; i++) {
+		for (let i = 0; i < value?.length; i++) {
 			if (!vDom(value[i])) {
 				return intl.formatMessage({ id: "error.invalid-domain" }, { domain: value[i] });
 			}

frontend/src/pages/Dashboard/index.tsx

@@ -122,14 +122,9 @@ const Dashboard = () => {
 			<pre>
 				<code>{`Todo:
 
-- Users: permissions modal and trigger after adding user
-- modal dialgs for everything
-- Tables
 - check mobile
-- fix bad jwt not refreshing entire page
 - add help docs for host types
 - REDO SCREENSHOTS in docs folder
-- Remove letsEncryptEmail field from new certificate requests, use current user email server side
 
 More for api, then implement here:
 - Properly implement refresh tokens

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

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

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

@@ -9,13 +9,14 @@ import Empty from "./Empty";
 
 interface Props {
 	data: DeadHost[];
+	isFiltered?: boolean;
 	isFetching?: boolean;
 	onEdit?: (id: number) => void;
 	onDelete?: (id: number) => void;
 	onDisableToggle?: (id: number, enabled: boolean) => void;
 	onNew?: () => void;
 }
-export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew }: Props) {
+export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
 	const columnHelper = createColumnHelper<DeadHost>();
 	const columns = useMemo(
 		() => [
@@ -133,6 +134,9 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 	});
 
 	return (
-		<TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} onNew={onNew} />} />
+		<TableLayout
+			tableInstance={tableInstance}
+			emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
+		/>
 	);
 }

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

@@ -56,9 +56,9 @@ export default function TableWrapper() {
 						<div className="col">
 							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "dead-hosts.title" })}</h2>
 						</div>
+						{data?.length ? (
 							<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} />
@@ -71,16 +71,18 @@ export default function TableWrapper() {
 											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>
 								</div>
 							</div>
+						) : null}
 					</div>
 				</div>
 				<Table
 					data={filtered ?? data ?? []}
+					isFiltered={!!search}
 					isFetching={isFetching}
 					onEdit={(id: number) => setEditId(id)}
 					onDelete={(id: number) => setDeleteId(id)}

frontend/src/pages/Nginx/ProxyHosts/Empty.tsx

@@ -2,22 +2,27 @@ import type { Table as ReactTable } from "@tanstack/react-table";
 import { Button } from "src/components";
 import { intl } from "src/locale";
 
-/**
- * This component should never render as there should always be 1 user minimum,
- * but I'm keeping it for consistency.
- */
-
 interface Props {
 	tableInstance: ReactTable<any>;
+	onNew?: () => void;
+	isFiltered?: boolean;
 }
-export default function Empty({ tableInstance }: Props) {
+export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
 				<div className="text-center my-4">
+					{isFiltered ? (
+						<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
+					) : (
+						<>
 							<h2>{intl.formatMessage({ id: "proxy-hosts.empty" })}</h2>
 							<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
-					<Button className="btn-lime my-3">{intl.formatMessage({ id: "proxy-hosts.add" })}</Button>
+							<Button className="btn-lime my-3" onClick={onNew}>
+								{intl.formatMessage({ id: "proxy-hosts.add" })}
+							</Button>
+						</>
+					)}
 				</div>
 			</td>
 		</tr>

frontend/src/pages/Nginx/ProxyHosts/Table.tsx

@@ -9,9 +9,14 @@ import Empty from "./Empty";
 
 interface Props {
 	data: ProxyHost[];
+	isFiltered?: boolean;
 	isFetching?: boolean;
+	onEdit?: (id: number) => void;
+	onDelete?: (id: number) => void;
+	onDisableToggle?: (id: number, enabled: boolean) => void;
+	onNew?: () => void;
 }
-export default function Table({ data, isFetching }: Props) {
+export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
 	const columnHelper = createColumnHelper<ProxyHost>();
 	const columns = useMemo(
 		() => [
@@ -64,7 +69,7 @@ export default function Table({ data, isFetching }: Props) {
 				},
 			}),
 			columnHelper.display({
-				id: "id", // todo: not needed for a display?
+				id: "id",
 				cell: (info: any) => {
 					return (
 						<span className="dropdown">
@@ -85,16 +90,39 @@ export default function Table({ data, isFetching }: Props) {
 										{ id: info.row.original.id },
 									)}
 								</span>
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onEdit?.(info.row.original.id);
+									}}
+								>
 									<IconEdit size={16} />
 									{intl.formatMessage({ id: "action.edit" })}
 								</a>
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDisableToggle?.(info.row.original.id, !info.row.original.enabled);
+									}}
+								>
 									<IconPower size={16} />
-									{intl.formatMessage({ id: "action.disable" })}
+									{intl.formatMessage({
+										id: info.row.original.enabled ? "action.disable" : "action.enable",
+									})}
 								</a>
 								<div className="dropdown-divider" />
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDelete?.(info.row.original.id);
+									}}
+								>
 									<IconTrash size={16} />
 									{intl.formatMessage({ id: "action.delete" })}
 								</a>
@@ -107,7 +135,7 @@ export default function Table({ data, isFetching }: Props) {
 				},
 			}),
 		],
-		[columnHelper],
+		[columnHelper, onEdit, onDisableToggle, onDelete],
 	);
 
 	const tableInstance = useReactTable<ProxyHost>({
@@ -121,5 +149,10 @@ export default function Table({ data, isFetching }: Props) {
 		enableSortingRemoval: false,
 	});
 
-	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+	return (
+		<TableLayout
+			tableInstance={tableInstance}
+			emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
+		/>
+	);
 }

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

@@ -1,11 +1,20 @@
 import { IconSearch } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
+import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useProxyHosts } from "src/hooks";
 import { intl } from "src/locale";
+import { DeleteConfirmModal, ProxyHostModal } from "src/modals";
+import { showSuccess } from "src/notifications";
 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 } = useProxyHosts(["owner", "access_list", "certificate"]);
 
 	if (isLoading) {
@@ -16,6 +25,31 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
+	const handleDelete = async () => {
+		await deleteProxyHost(deleteId);
+		showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
+	};
+
+	const handleDisableToggle = async (id: number, enabled: boolean) => {
+		await toggleProxyHost(id, enabled);
+		queryClient.invalidateQueries({ queryKey: ["proxy-hosts"] });
+		queryClient.invalidateQueries({ queryKey: ["proxy-host", id] });
+		showSuccess(intl.formatMessage({ id: enabled ? "notification.host-enabled" : "notification.host-disabled" }));
+	};
+
+	let filtered = null;
+	if (search && data) {
+		filtered = data?.filter((_item) => {
+			return true;
+			// item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
+			// item.forwardDomainName.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-lime" />
@@ -25,6 +59,7 @@ export default function TableWrapper() {
 						<div className="col">
 							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "proxy-hosts.title" })}</h2>
 						</div>
+						{data?.length ? (
 							<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">
@@ -43,9 +78,29 @@ export default function TableWrapper() {
 									</Button>
 								</div>
 							</div>
+						) : null}
 					</div>
 				</div>
-				<Table data={data ?? []} isFetching={isFetching} />
+				<Table
+					data={filtered ?? data ?? []}
+					isFiltered={!!search}
+					isFetching={isFetching}
+					onEdit={(id: number) => setEditId(id)}
+					onDelete={(id: number) => setDeleteId(id)}
+					onDisableToggle={handleDisableToggle}
+					onNew={() => setEditId("new")}
+				/>
+				{editId ? <ProxyHostModal id={editId} onClose={() => setEditId(0)} /> : null}
+				{deleteId ? (
+					<DeleteConfirmModal
+						title={intl.formatMessage({ id: "proxy-host.delete.title" })}
+						onConfirm={handleDelete}
+						onClose={() => setDeleteId(0)}
+						invalidations={[["proxy-hosts"], ["proxy-host", deleteId]]}
+					>
+						{intl.formatMessage({ id: "proxy-host.delete.content" })}
+					</DeleteConfirmModal>
+				) : null}
 			</div>
 		</div>
 	);

frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx

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

frontend/src/pages/Nginx/RedirectionHosts/Table.tsx

@@ -9,9 +9,14 @@ import Empty from "./Empty";
 
 interface Props {
 	data: RedirectionHost[];
+	isFiltered?: boolean;
 	isFetching?: boolean;
+	onEdit?: (id: number) => void;
+	onDelete?: (id: number) => void;
+	onDisableToggle?: (id: number, enabled: boolean) => void;
+	onNew?: () => void;
 }
-export default function Table({ data, isFetching }: Props) {
+export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
 	const columnHelper = createColumnHelper<RedirectionHost>();
 	const columns = useMemo(
 		() => [
@@ -69,7 +74,7 @@ export default function Table({ data, isFetching }: Props) {
 				},
 			}),
 			columnHelper.display({
-				id: "id", // todo: not needed for a display?
+				id: "id",
 				cell: (info: any) => {
 					return (
 						<span className="dropdown">
@@ -90,16 +95,39 @@ export default function Table({ data, isFetching }: Props) {
 										{ id: info.row.original.id },
 									)}
 								</span>
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onEdit?.(info.row.original.id);
+									}}
+								>
 									<IconEdit size={16} />
 									{intl.formatMessage({ id: "action.edit" })}
 								</a>
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDisableToggle?.(info.row.original.id, !info.row.original.enabled);
+									}}
+								>
 									<IconPower size={16} />
-									{intl.formatMessage({ id: "action.disable" })}
+									{intl.formatMessage({
+										id: info.row.original.enabled ? "action.disable" : "action.enable",
+									})}
 								</a>
 								<div className="dropdown-divider" />
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDelete?.(info.row.original.id);
+									}}
+								>
 									<IconTrash size={16} />
 									{intl.formatMessage({ id: "action.delete" })}
 								</a>
@@ -112,7 +140,7 @@ export default function Table({ data, isFetching }: Props) {
 				},
 			}),
 		],
-		[columnHelper],
+		[columnHelper, onEdit, onDisableToggle, onDelete],
 	);
 
 	const tableInstance = useReactTable<RedirectionHost>({
@@ -126,5 +154,10 @@ export default function Table({ data, isFetching }: Props) {
 		enableSortingRemoval: false,
 	});
 
-	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+	return (
+		<TableLayout
+			tableInstance={tableInstance}
+			emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
+		/>
+	);
 }

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

@@ -1,11 +1,20 @@
 import { IconSearch } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
+import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useRedirectionHosts } from "src/hooks";
 import { intl } from "src/locale";
+import { DeleteConfirmModal, RedirectionHostModal } from "src/modals";
+import { showSuccess } from "src/notifications";
 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 } = useRedirectionHosts(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -16,6 +25,31 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
+	const handleDelete = async () => {
+		await deleteRedirectionHost(deleteId);
+		showSuccess(intl.formatMessage({ id: "notification.host-deleted" }));
+	};
+
+	const handleDisableToggle = async (id: number, enabled: boolean) => {
+		await toggleRedirectionHost(id, enabled);
+		queryClient.invalidateQueries({ queryKey: ["redirection-hosts"] });
+		queryClient.invalidateQueries({ queryKey: ["redirection-host", id] });
+		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)) ||
+				item.forwardDomainName.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-yellow" />
@@ -25,6 +59,7 @@ export default function TableWrapper() {
 						<div className="col">
 							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "redirection-hosts.title" })}</h2>
 						</div>
+						{data?.length ? (
 							<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">
@@ -36,16 +71,38 @@ export default function TableWrapper() {
 											type="text"
 											className="form-control form-control-sm"
 											autoComplete="off"
+											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
-								<Button size="sm" className="btn-yellow">
+
+									<Button size="sm" className="btn-yellow" onClick={() => setEditId("new")}>
 										{intl.formatMessage({ id: "redirection-hosts.add" })}
 									</Button>
 								</div>
 							</div>
+						) : null}
 					</div>
 				</div>
-				<Table data={data ?? []} isFetching={isFetching} />
+				<Table
+					data={filtered ?? data ?? []}
+					isFiltered={!!search}
+					isFetching={isFetching}
+					onEdit={(id: number) => setEditId(id)}
+					onDelete={(id: number) => setDeleteId(id)}
+					onDisableToggle={handleDisableToggle}
+					onNew={() => setEditId("new")}
+				/>
+				{editId ? <RedirectionHostModal id={editId} onClose={() => setEditId(0)} /> : null}
+				{deleteId ? (
+					<DeleteConfirmModal
+						title={intl.formatMessage({ id: "redirection-host.delete.title" })}
+						onConfirm={handleDelete}
+						onClose={() => setDeleteId(0)}
+						invalidations={[["redirection-hosts"], ["redirection-host", deleteId]]}
+					>
+						{intl.formatMessage({ id: "redirection-host.delete.content" })}
+					</DeleteConfirmModal>
+				) : null}
 			</div>
 		</div>
 	);

frontend/src/pages/Nginx/Streams/Empty.tsx

@@ -4,15 +4,25 @@ import { intl } from "src/locale";
 
 interface Props {
 	tableInstance: ReactTable<any>;
+	onNew?: () => void;
+	isFiltered?: boolean;
 }
-export default function Empty({ tableInstance }: Props) {
+export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
 				<div className="text-center my-4">
+					{isFiltered ? (
+						<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
+					) : (
+						<>
 							<h2>{intl.formatMessage({ id: "streams.empty" })}</h2>
 							<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
-					<Button className="btn-blue my-3">{intl.formatMessage({ id: "streams.add" })}</Button>
+							<Button className="btn-blue my-3" onClick={onNew}>
+								{intl.formatMessage({ id: "streams.add" })}
+							</Button>
+						</>
+					)}
 				</div>
 			</td>
 		</tr>

frontend/src/pages/Nginx/Streams/Table.tsx

@@ -2,16 +2,21 @@ import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { Stream } from "src/api/backend";
-import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
+import { CertificateFormatter, GravatarFormatter, StatusFormatter, ValueWithDateFormatter } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl } from "src/locale";
 import Empty from "./Empty";
 
 interface Props {
 	data: Stream[];
+	isFiltered?: boolean;
 	isFetching?: boolean;
+	onEdit?: (id: number) => void;
+	onDelete?: (id: number) => void;
+	onDisableToggle?: (id: number, enabled: boolean) => void;
+	onNew?: () => void;
 }
-export default function Table({ data, isFetching }: Props) {
+export default function Table({ data, isFetching, isFiltered, onEdit, onDelete, onDisableToggle, onNew }: Props) {
 	const columnHelper = createColumnHelper<Stream>();
 	const columns = useMemo(
 		() => [
@@ -30,8 +35,7 @@ export default function Table({ data, isFetching }: Props) {
 				header: intl.formatMessage({ id: "column.incoming-port" }),
 				cell: (info: any) => {
 					const value = info.getValue();
-					// Bit of a hack to reuse the DomainsFormatter component
+					return <ValueWithDateFormatter value={value.incomingPort} createdOn={value.createdOn} />;
-					return <DomainsFormatter domains={[value.incomingPort]} createdOn={value.createdOn} />;
 				},
 			}),
 			columnHelper.accessor((row: any) => row, {
@@ -99,16 +103,37 @@ export default function Table({ data, isFetching }: Props) {
 										{ id: info.row.original.id },
 									)}
 								</span>
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onEdit?.(info.row.original.id);
+									}}
+								>
 									<IconEdit size={16} />
 									{intl.formatMessage({ id: "action.edit" })}
 								</a>
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDisableToggle?.(info.row.original.id, !info.row.original.enabled);
+									}}
+								>
 									<IconPower size={16} />
 									{intl.formatMessage({ id: "action.disable" })}
 								</a>
 								<div className="dropdown-divider" />
-								<a className="dropdown-item" href="#">
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDelete?.(info.row.original.id);
+									}}
+								>
 									<IconTrash size={16} />
 									{intl.formatMessage({ id: "action.delete" })}
 								</a>
@@ -121,7 +146,7 @@ export default function Table({ data, isFetching }: Props) {
 				},
 			}),
 		],
-		[columnHelper],
+		[columnHelper, onEdit, onDisableToggle, onDelete],
 	);
 
 	const tableInstance = useReactTable<Stream>({
@@ -135,5 +160,10 @@ export default function Table({ data, isFetching }: Props) {
 		enableSortingRemoval: false,
 	});
 
-	return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
+	return (
+		<TableLayout
+			tableInstance={tableInstance}
+			emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
+		/>
+	);
 }

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

@@ -1,11 +1,20 @@
 import { IconSearch } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
+import { deleteStream, toggleStream } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useStreams } from "src/hooks";
 import { intl } from "src/locale";
+import { DeleteConfirmModal, StreamModal } from "src/modals";
+import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
+	const queryClient = useQueryClient();
+	const [search, setSearch] = useState("");
+	const [editId, setEditId] = useState(0 as number | "new");
+	const [deleteId, setDeleteId] = useState(0);
 	const { isFetching, isLoading, isError, error, data } = useStreams(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -16,6 +25,34 @@ export default function TableWrapper() {
 		return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
 	}
 
+	const handleDelete = async () => {
+		await deleteStream(deleteId);
+		showSuccess(intl.formatMessage({ id: "notification.stream-deleted" }));
+	};
+
+	const handleDisableToggle = async (id: number, enabled: boolean) => {
+		await toggleStream(id, enabled);
+		queryClient.invalidateQueries({ queryKey: ["streams"] });
+		queryClient.invalidateQueries({ queryKey: ["stream", id] });
+		showSuccess(
+			intl.formatMessage({ id: enabled ? "notification.stream-enabled" : "notification.stream-disabled" }),
+		);
+	};
+
+	let filtered = null;
+	if (search && data) {
+		filtered = data?.filter((item) => {
+			return (
+				`${item.incomingPort}`.includes(search) ||
+				`${item.forwardingPort}`.includes(search) ||
+				item.forwardingHost.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-blue" />
@@ -25,6 +62,7 @@ export default function TableWrapper() {
 						<div className="col">
 							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "streams.title" })}</h2>
 						</div>
+						{data?.length ? (
 							<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">
@@ -36,16 +74,37 @@ export default function TableWrapper() {
 											type="text"
 											className="form-control form-control-sm"
 											autoComplete="off"
+											onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
 										/>
 									</div>
-								<Button size="sm" className="btn-blue">
+									<Button size="sm" className="btn-blue" onClick={() => setEditId("new")}>
 										{intl.formatMessage({ id: "streams.add" })}
 									</Button>
 								</div>
 							</div>
+						) : null}
 					</div>
 				</div>
-				<Table data={data ?? []} isFetching={isFetching} />
+				<Table
+					data={filtered ?? data ?? []}
+					isFetching={isFetching}
+					isFiltered={!!filtered}
+					onEdit={(id: number) => setEditId(id)}
+					onDelete={(id: number) => setDeleteId(id)}
+					onDisableToggle={handleDisableToggle}
+					onNew={() => setEditId("new")}
+				/>
+				{editId ? <StreamModal id={editId} onClose={() => setEditId(0)} /> : null}
+				{deleteId ? (
+					<DeleteConfirmModal
+						title={intl.formatMessage({ id: "stream.delete.title" })}
+						onConfirm={handleDelete}
+						onClose={() => setDeleteId(0)}
+						invalidations={[["streams"], ["stream", deleteId]]}
+					>
+						{intl.formatMessage({ id: "stream.delete.content" })}
+					</DeleteConfirmModal>
+				) : null}
 			</div>
 		</div>
 	);

frontend/src/pages/Users/Empty.tsx

@@ -8,9 +8,6 @@ interface Props {
 	isFiltered?: boolean;
 }
 export default function Empty({ tableInstance, onNewUser, isFiltered }: Props) {
-	if (isFiltered) {
-	}
-
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>

frontend/src/pages/Users/TableWrapper.tsx

@@ -63,9 +63,9 @@ export default function TableWrapper() {
 						<div className="col">
 							<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "users.title" })}</h2>
 						</div>
+						{data?.length ? (
 							<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} />
@@ -78,12 +78,13 @@ export default function TableWrapper() {
 											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>
 								</div>
 							</div>
+						) : null}
 					</div>
 				</div>
 				<Table

frontend/vite.config.ts

@@ -19,6 +19,12 @@ export default defineConfig({
 								throw error;
 							}
 							console.log(stdout);
+							execFile("yarn", ["locale-sort"], (error, stdout, _stderr) => {
+								if (error) {
+									throw error;
+								}
+								console.log(stdout);
+							});
 						});
 					}
 				});

scripts/buildx

@@ -5,7 +5,6 @@ DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 
 echo -e "${BLUE}❯ ${CYAN}Building docker multiarch: ${YELLOW}${*}${RESET}"
 
-DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 cd "${DIR}/.." || exit 1
 
 # determine commit if not already set