404 hosts add update complete, fix certbot renewals

and remove the need for email and agreement on cert requests

frontend/src/modals/ChangePasswordModal.tsx

@@ -13,6 +13,7 @@ interface Props {
 }
 export function ChangePasswordModal({ userId, onClose }: Props) {
 	const [error, setError] = useState<string | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
 
 	const onSubmit = async (values: any, { setSubmitting }: any) => {
 		if (values.new !== values.confirm) {
@@ -20,13 +21,18 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
 			setSubmitting(false);
 			return;
 		}
+
+		if (isSubmitting) return;
+		setIsSubmitting(true);
 		setError(null);
+
 		try {
 			await updateAuth(userId, values.new, values.current);
 			onClose();
 		} catch (err: any) {
 			setError(intl.formatMessage({ id: err.message }));
 		}
+		setIsSubmitting(false);
 		setSubmitting(false);
 	};
 
@@ -42,7 +48,7 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
 				}
 				onSubmit={onSubmit}
 			>
-				{({ isSubmitting }) => (
+				{() => (
 					<Form>
 						<Modal.Header closeButton>
 							<Modal.Title>{intl.formatMessage({ id: "user.change-password" })}</Modal.Title>

frontend/src/modals/DeadHostModal.tsx

@@ -3,9 +3,17 @@ import { Form, Formik } from "formik";
 import { useState } from "react";
 import { Alert } from "react-bootstrap";
 import Modal from "react-bootstrap/Modal";
-import { Button, DomainNamesField, Loading, SSLCertificateField, SSLOptionsFields } from "src/components";
-import { useDeadHost } from "src/hooks";
+import {
+	Button,
+	DomainNamesField,
+	Loading,
+	NginxConfigField,
+	SSLCertificateField,
+	SSLOptionsFields,
+} from "src/components";
+import { useDeadHost, useSetDeadHost } from "src/hooks";
 import { intl } from "src/locale";
+import { showSuccess } from "src/notifications";
 
 interface Props {
 	id: number | "new";
@@ -13,28 +21,31 @@ interface Props {
 }
 export function DeadHostModal({ id, onClose }: Props) {
 	const { data, isLoading, error } = useDeadHost(id);
-	// const { mutate: setDeadHost } = useSetDeadHost();
+	const { mutate: setDeadHost } = useSetDeadHost();
 	const [errorMsg, setErrorMsg] = useState<string | null>(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
 
 	const onSubmit = async (values: any, { setSubmitting }: any) => {
-		setSubmitting(true);
+		if (isSubmitting) return;
+		setIsSubmitting(true);
 		setErrorMsg(null);
-		console.log("SUBMIT:", values);
-		setSubmitting(false);
-		// const { ...payload } = {
-		// 	id: id === "new" ? undefined : id,
-		// 	roles: [],
-		// 	...values,
-		// };
 
-		// setDeadHost(payload, {
-		// 	onError: (err: any) => setErrorMsg(err.message),
-		// 	onSuccess: () => {
-		// 		showSuccess(intl.formatMessage({ id: "notification.dead-host-saved" }));
-		// 		onClose();
-		// 	},
-		// 	onSettled: () => setSubmitting(false),
-		// });
+		const { ...payload } = {
+			id: id === "new" ? undefined : id,
+			...values,
+		};
+
+		setDeadHost(payload, {
+			onError: (err: any) => setErrorMsg(err.message),
+			onSuccess: () => {
+				showSuccess(intl.formatMessage({ id: "notification.dead-host-saved" }));
+				onClose();
+			},
+			onSettled: () => {
+				setIsSubmitting(false);
+				setSubmitting(false);
+			},
+		});
 	};
 
 	return (
@@ -56,11 +67,12 @@ export function DeadHostModal({ id, onClose }: Props) {
 							http2Support: data?.http2Support,
 							hstsEnabled: data?.hstsEnabled,
 							hstsSubdomains: data?.hstsSubdomains,
+							meta: data?.meta || {},
 						} as any
 					}
 					onSubmit={onSubmit}
 				>
-					{({ isSubmitting }) => (
+					{() => (
 						<Form>
 							<Modal.Header closeButton>
 								<Modal.Title>
@@ -127,140 +139,11 @@ export function DeadHostModal({ id, onClose }: Props) {
 												<SSLOptionsFields />
 											</div>
 											<div className="tab-pane" id="tab-advanced" role="tabpanel">
-												<h4>Advanced</h4>
+												<NginxConfigField />
 											</div>
 										</div>
 									</div>
 								</div>
-
-								{/* <div className="row">
-									<div className="col-lg-6">
-										<div className="mb-3">
-											<Field name="name" validate={validateString(1, 50)}>
-												{({ field, form }: any) => (
-													<div className="form-floating mb-3">
-														<input
-															id="name"
-															className={`form-control ${form.errors.name && form.touched.name ? "is-invalid" : ""}`}
-															placeholder={intl.formatMessage({ id: "user.full-name" })}
-															{...field}
-														/>
-														<label htmlFor="name">
-															{intl.formatMessage({ id: "user.full-name" })}
-														</label>
-														{form.errors.name ? (
-															<div className="invalid-feedback">
-																{form.errors.name && form.touched.name
-																	? form.errors.name
-																	: null}
-															</div>
-														) : null}
-													</div>
-												)}
-											</Field>
-										</div>
-									</div>
-									<div className="col-lg-6">
-										<div className="mb-3">
-											<Field name="nickname" validate={validateString(1, 30)}>
-												{({ field, form }: any) => (
-													<div className="form-floating mb-3">
-														<input
-															id="nickname"
-															className={`form-control ${form.errors.nickname && form.touched.nickname ? "is-invalid" : ""}`}
-															placeholder={intl.formatMessage({ id: "user.nickname" })}
-															{...field}
-														/>
-														<label htmlFor="nickname">
-															{intl.formatMessage({ id: "user.nickname" })}
-														</label>
-														{form.errors.nickname ? (
-															<div className="invalid-feedback">
-																{form.errors.nickname && form.touched.nickname
-																	? form.errors.nickname
-																	: null}
-															</div>
-														) : null}
-													</div>
-												)}
-											</Field>
-										</div>
-									</div>
-								</div>
-								<div className="mb-3">
-									<Field name="email" validate={validateEmail()}>
-										{({ field, form }: any) => (
-											<div className="form-floating mb-3">
-												<input
-													id="email"
-													type="email"
-													className={`form-control ${form.errors.email && form.touched.email ? "is-invalid" : ""}`}
-													placeholder={intl.formatMessage({ id: "email-address" })}
-													{...field}
-												/>
-												<label htmlFor="email">
-													{intl.formatMessage({ id: "email-address" })}
-												</label>
-												{form.errors.email ? (
-													<div className="invalid-feedback">
-														{form.errors.email && form.touched.email
-															? form.errors.email
-															: null}
-													</div>
-												) : null}
-											</div>
-										)}
-									</Field>
-								</div>
-								{currentUser && data && currentUser?.id !== data?.id ? (
-									<div className="my-3">
-										<h3 className="py-2">{intl.formatMessage({ id: "user.flags.title" })}</h3>
-										<div className="divide-y">
-											<div>
-												<label className="row" htmlFor="isAdmin">
-													<span className="col">
-														{intl.formatMessage({ id: "role.admin" })}
-													</span>
-													<span className="col-auto">
-														<Field name="isAdmin" type="checkbox">
-															{({ field }: any) => (
-																<label className="form-check form-check-single form-switch">
-																	<input
-																		{...field}
-																		id="isAdmin"
-																		className="form-check-input"
-																		type="checkbox"
-																	/>
-																</label>
-															)}
-														</Field>
-													</span>
-												</label>
-											</div>
-											<div>
-												<label className="row" htmlFor="isDisabled">
-													<span className="col">
-														{intl.formatMessage({ id: "disabled" })}
-													</span>
-													<span className="col-auto">
-														<Field name="isDisabled" type="checkbox">
-															{({ field }: any) => (
-																<label className="form-check form-check-single form-switch">
-																	<input
-																		{...field}
-																		id="isDisabled"
-																		className="form-check-input"
-																		type="checkbox"
-																	/>
-																</label>
-															)}
-														</Field>
-													</span>
-												</label>
-											</div>
-										</div>
-									</div>
-								) : null} */}
 							</Modal.Body>
 							<Modal.Footer>
 								<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>

frontend/src/modals/DeleteConfirmModal.tsx

@@ -15,10 +15,11 @@ interface Props {
 export function DeleteConfirmModal({ title, children, onConfirm, onClose, invalidations }: Props) {
 	const queryClient = useQueryClient();
 	const [error, setError] = useState<string | null>(null);
-	const [submitting, setSubmitting] = useState(false);
+	const [isSubmitting, setIsSubmitting] = useState(false);
 
 	const onSubmit = async () => {
-		setSubmitting(true);
+		if (isSubmitting) return;
+		setIsSubmitting(true);
 		setError(null);
 		try {
 			await onConfirm();
@@ -30,7 +31,7 @@ export function DeleteConfirmModal({ title, children, onConfirm, onClose, invali
 		} catch (err: any) {
 			setError(intl.formatMessage({ id: err.message }));
 		}
-		setSubmitting(false);
+		setIsSubmitting(false);
 	};
 
 	return (
@@ -45,7 +46,7 @@ export function DeleteConfirmModal({ title, children, onConfirm, onClose, invali
 				{children}
 			</Modal.Body>
 			<Modal.Footer>
-				<Button data-bs-dismiss="modal" onClick={onClose} disabled={submitting}>
+				<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
 					{intl.formatMessage({ id: "cancel" })}
 				</Button>
 				<Button
@@ -53,8 +54,8 @@ export function DeleteConfirmModal({ title, children, onConfirm, onClose, invali
 					actionType="primary"
 					className="ms-auto btn-red"
 					data-bs-dismiss="modal"
-					isLoading={submitting}
-					disabled={submitting}
+					isLoading={isSubmitting}
+					disabled={isSubmitting}
 					onClick={onSubmit}
 				>
 					{intl.formatMessage({ id: "action.delete" })}

frontend/src/modals/PermissionsModal.tsx

@@ -17,8 +17,11 @@ export function PermissionsModal({ userId, onClose }: Props) {
 	const queryClient = useQueryClient();
 	const [errorMsg, setErrorMsg] = useState<string | null>(null);
 	const { data, isLoading, error } = useUser(userId);
+	const [isSubmitting, setIsSubmitting] = useState(false);
 
 	const onSubmit = async (values: any, { setSubmitting }: any) => {
+		if (isSubmitting) return;
+		setIsSubmitting(true);
 		setErrorMsg(null);
 		try {
 			await setPermissions(userId, values);
@@ -29,6 +32,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
 			setErrorMsg(intl.formatMessage({ id: err.message }));
 		}
 		setSubmitting(false);
+		setIsSubmitting(false);
 	};
 
 	const getPermissionButtons = (field: any, form: any) => {
@@ -104,7 +108,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
 					}
 					onSubmit={onSubmit}
 				>
-					{({ isSubmitting }) => (
+					{() => (
 						<Form>
 							<Modal.Header closeButton>
 								<Modal.Title>

frontend/src/modals/SetPasswordModal.tsx

@@ -15,8 +15,10 @@ interface Props {
 export function SetPasswordModal({ userId, onClose }: Props) {
 	const [error, setError] = useState<string | null>(null);
 	const [showPassword, setShowPassword] = useState(false);
+	const [isSubmitting, setIsSubmitting] = useState(false);
 
 	const onSubmit = async (values: any, { setSubmitting }: any) => {
+		if (isSubmitting) return;
 		setError(null);
 		try {
 			await updateAuth(userId, values.new);
@@ -24,6 +26,7 @@ export function SetPasswordModal({ userId, onClose }: Props) {
 		} catch (err: any) {
 			setError(intl.formatMessage({ id: err.message }));
 		}
+		setIsSubmitting(false);
 		setSubmitting(false);
 	};
 
@@ -37,7 +40,7 @@ export function SetPasswordModal({ userId, onClose }: Props) {
 				}
 				onSubmit={onSubmit}
 			>
-				{({ isSubmitting }) => (
+				{() => (
 					<Form>
 						<Modal.Header closeButton>
 							<Modal.Title>{intl.formatMessage({ id: "user.set-password" })}</Modal.Title>

frontend/src/modals/UserModal.tsx

@@ -17,9 +17,13 @@ export function UserModal({ userId, onClose }: Props) {
 	const { data: currentUser, isLoading: currentIsLoading } = useUser("me");
 	const { mutate: setUser } = useSetUser();
 	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: userId === "new" ? undefined : userId,
 			roles: [],
@@ -43,7 +47,10 @@ export function UserModal({ userId, onClose }: Props) {
 				showSuccess(intl.formatMessage({ id: "notification.user-saved" }));
 				onClose();
 			},
-			onSettled: () => setSubmitting(false),
+			onSettled: () => {
+				setIsSubmitting(false);
+				setSubmitting(false);
+			},
 		});
 	};
 
@@ -68,7 +75,7 @@ export function UserModal({ userId, onClose }: Props) {
 					}
 					onSubmit={onSubmit}
 				>
-					{({ isSubmitting }) => (
+					{() => (
 						<Form>
 							<Modal.Header closeButton>
 								<Modal.Title>