Proxy host modal basis, other improvements

Author: jc21

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/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

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/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/SSLOptionsFields.tsx

@@ -7,8 +7,9 @@ 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 }: Props) {
+export function SSLOptionsFields({ forHttp = true, forceDNSForNew, requireDomainNames, color = "bg-cyan" }: Props) {
 	const { values, setFieldValue } = useFormikContext();
 	const v: any = values || {};
 
@@ -31,7 +32,7 @@ export function SSLOptionsFields({ forHttp = true, forceDNSForNew, requireDomain
 	};
 
 	const toggleClasses = "form-check-input";
-	const toggleEnabled = cn(toggleClasses, "bg-cyan");
+	const toggleEnabled = cn(toggleClasses, color);
 
 	const getHttpOptions = () => (
 		<div>

frontend/src/hooks/index.ts

@@ -7,6 +7,7 @@ export * from "./useDeadHosts";
 export * from "./useDnsProviders";
 export * from "./useHealth";
 export * from "./useHostReport";
+export * from "./useProxyHost";
 export * from "./useProxyHosts";
 export * from "./useRedirectionHost";
 export * from "./useRedirectionHosts";

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/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",
@@ -88,9 +89,13 @@
   "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",
@@ -128,13 +133,14 @@
   "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",
-  "redirect-host.forward-domain": "Forward Domain",
-  "redirect-host.forward-scheme": "Scheme",
+  "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",
@@ -152,7 +158,6 @@
   "stream.delete.content": "Are you sure you want to delete this Stream?",
   "stream.delete.title": "Delete Stream",
   "stream.forward-host": "Forward Host",
-  "stream.forward-port": "Forward Port",
   "stream.incoming-port": "Incoming Port",
   "stream.new": "New Stream",
   "streams.actions-title": "Stream #{id}",

frontend/src/locale/src/en.json

@@ -71,6 +71,9 @@
 	"column.authorization": {
 		"defaultMessage": "Authorization"
 	},
+	"column.custom-locations": {
+		"defaultMessage": "Custom Locations"
+	},
 	"column.destination": {
 		"defaultMessage": "Destination"
 	},
@@ -266,6 +269,9 @@
 	"host.flags.block-exploits": {
 		"defaultMessage": "Block Common Exploits"
 	},
+	"host.flags.cache-assets": {
+		"defaultMessage": "Cache Assets"
+	},
 	"host.flags.preserve-path": {
 		"defaultMessage": "Preserve Path"
 	},
@@ -275,6 +281,15 @@
 	"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"
 	},
@@ -386,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}"
 	},
@@ -401,12 +422,9 @@
 	"proxy-hosts.title": {
 		"defaultMessage": "Proxy Hosts"
 	},
-	"redirect-host.forward-domain": {
+	"redirection-host.forward-domain": {
 		"defaultMessage": "Forward Domain"
 	},
-	"redirect-host.forward-scheme": {
-		"defaultMessage": "Scheme"
-	},
 	"redirection-host.new": {
 		"defaultMessage": "New Redirection Host"
 	},
@@ -458,9 +476,6 @@
 	"stream.forward-host": {
 		"defaultMessage": "Forward Host"
 	},
-	"stream.forward-port": {
-		"defaultMessage": "Forward Port"
-	},
 	"stream.incoming-port": {
 		"defaultMessage": "Incoming Port"
 	},

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}