Streams modal

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