Streams modal

Author: jc21

frontend/src/components/Form/SSLCertificateField.tsx

@@ -31,13 +31,15 @@ interface Props {
 	label?: string;
 	required?: boolean;
 	allowNew?: boolean;
+	forHttp?: boolean; // the sslForced, http2Support, hstsEnabled, hstsSubdomains fields
 }
 export function SSLCertificateField({
 	name = "certificateId",
 	label = "ssl-certificate",
 	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,14 @@
 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
+}
+export function SSLOptionsFields({ forHttp = true, forceDNSForNew, requireDomainNames }: Props) {
 	const { values, setFieldValue } = useFormikContext();
 	const v: any = values || {};
 
@@ -12,6 +17,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) {
@@ -24,8 +33,8 @@ export function SSLOptionsFields() {
 	const toggleClasses = "form-check-input";
 	const toggleEnabled = cn(toggleClasses, "bg-cyan");
 
-	return (
-		<>
+	const getHttpOptions = () => (
+		<div>
 			<div className="row">
 				<div className="col-6">
 					<Field name="sslForced">
@@ -102,6 +111,12 @@ export function SSLOptionsFields() {
 					</Field>
 				</div>
 			</div>
+		</div>
+	);
+
+	return (
+		<div>
+			{forHttp ? getHttpOptions() : null}
 			{newCertificate ? (
 				<>
 					<Field name="meta.dnsChallenge">
@@ -110,7 +125,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 +135,10 @@ export function SSLOptionsFields() {
 							</label>
 						)}
 					</Field>
-
+					{requireDomainNames ? <DomainNamesField /> : null}
 					{dnsChallenge ? <DNSProviderFields /> : null}
 				</>
 			) : null}
-		</>
+		</div>
 	);
 }

frontend/src/hooks/index.ts

@@ -9,6 +9,7 @@ export * from "./useHealth";
 export * from "./useHostReport";
 export * from "./useProxyHosts";
 export * from "./useRedirectionHosts";
+export * from "./useStream";
 export * from "./useStreams";
 export * from "./useTheme";
 export * from "./useUser";

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

@@ -130,6 +130,10 @@
   "setup.title": "Welcome!",
   "sign-in": "Sign in",
   "ssl-certificate": "SSL Certificate",
+  "stream.forward-host": "Forward Host",
+  "stream.forward-port": "Forward Port",
+  "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/src/en.json

@@ -392,6 +392,18 @@
 	"ssl-certificate": {
 		"defaultMessage": "SSL Certificate"
 	},
+	"stream.forward-host": {
+		"defaultMessage": "Forward Host"
+	},
+	"stream.forward-port": {
+		"defaultMessage": "Forward Port"
+	},
+	"stream.incoming-port": {
+		"defaultMessage": "Incoming Port"
+	},
+	"stream.new": {
+		"defaultMessage": "New Stream"
+	},
 	"streams.actions-title": {
 		"defaultMessage": "Stream #{id}"
 	},