ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-11-01 16:23:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Wrap intl in span identifying translation

Browse Source
This commit is contained in:
Jamie Curnow
2025-10-02 23:06:51 +10:00
parent fcb08d3003
commit 227e818040
68 changed files with 1076 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
frontend/src/modals/AccessListModal.tsx Normal file
View File

@@ -0,0 +1,243 @@
import cn from "classnames";
import { Field, Form, Formik } from "formik";
import { type ReactNode, useState } from "react";
import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import { BasicAuthField, Button, Loading } from "src/components";
import { useAccessList, useSetAccessList } from "src/hooks";
import { intl, T } from "src/locale";
import { validateString } from "src/modules/Validations";
import { showSuccess } from "src/notifications";
interface Props {
id: number | "new";
onClose: () => void;
}
export function AccessListModal({ id, onClose }: Props) {
const { data, isLoading, error } = useAccessList(id);
const { mutate: setAccessList } = useSetAccessList();
const [errorMsg, setErrorMsg] = useState<ReactNode | 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,
};
setAccessList(payload, {
onError: (err: any) => setErrorMsg(<T id={err.message} />),
onSuccess: () => {
showSuccess(intl.formatMessage({ id: "notification.access-saved" }));
onClose();
},
onSettled: () => {
setIsSubmitting(false);
setSubmitting(false);
},
});
};
const toggleClasses = "form-check-input";
const toggleEnabled = cn(toggleClasses, "bg-cyan");
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={
{
name: data?.name,
satisfyAny: data?.satisfyAny,
passAuth: data?.passAuth,
// todo: more? there's stuff missing here?
meta: data?.meta || {},
} as any
}
onSubmit={onSubmit}
>
{({ setFieldValue }: any) => (
<Form>
<Modal.Header closeButton>
<Modal.Title>
<T id={data?.id ? "access.edit" : "access.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"
>
<T id="column.details" />
</a>
</li>
<li className="nav-item" role="presentation">
<a
href="#tab-auth"
className="nav-link"
data-bs-toggle="tab"
aria-selected="false"
tabIndex={-1}
role="tab"
>
<T id="column.authorizations" />
</a>
</li>
<li className="nav-item" role="presentation">
<a
href="#tab-access"
className="nav-link"
data-bs-toggle="tab"
aria-selected="false"
tabIndex={-1}
role="tab"
>
<T id="column.rules" />
</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="name" validate={validateString(8, 255)}>
{({ field }: any) => (
<div>
<label htmlFor="name" className="form-label">
<T id="column.name" />
</label>
<input
id="name"
type="text"
required
autoComplete="off"
className="form-control"
{...field}
/>
</div>
)}
</Field>
<div className="my-3">
<h3 className="py-2">
<T id="generic.flags.title" />
</h3>
<div className="divide-y">
<div>
<label className="row" htmlFor="satisfyAny">
<span className="col">
<T id="access.satisfy-any" />
</span>
<span className="col-auto">
<Field name="satisfyAny" type="checkbox">
{({ field }: any) => (
<label className="form-check form-check-single form-switch">
<input
id="satisfyAny"
className={
field.value
? toggleEnabled
: toggleClasses
}
type="checkbox"
name={field.name}
checked={field.value}
onChange={(e: any) => {
setFieldValue(
field.name,
e.target.checked,
);
}}
/>
</label>
)}
</Field>
</span>
</label>
</div>
<div>
<label className="row" htmlFor="passAuth">
<span className="col">
<T id="access.pass-auth" />
</span>
<span className="col-auto">
<Field name="passAuth" type="checkbox">
{({ field }: any) => (
<label className="form-check form-check-single form-switch">
<input
id="passAuth"
className={
field.value
? toggleEnabled
: toggleClasses
}
type="checkbox"
name={field.name}
checked={field.value}
onChange={(e: any) => {
setFieldValue(
field.name,
e.target.checked,
);
}}
/>
</label>
)}
</Field>
</span>
</label>
</div>
</div>
</div>
</div>
<div className="tab-pane" id="tab-auth" role="tabpanel">
<BasicAuthField />
</div>
<div className="tab-pane" id="tab-rules" role="tabpanel">
todo
</div>
</div>
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
<T id="cancel" />
</Button>
<Button
type="submit"
actionType="primary"
className="ms-auto bg-cyan"
data-bs-dismiss="modal"
isLoading={isSubmitting}
disabled={isSubmitting}
>
<T id="save" />
</Button>
</Modal.Footer>
</Form>
)}
</Formik>
)}
</Modal>
);
}

24
frontend/src/modals/ChangePasswordModal.tsx
View File

@@ -1,10 +1,10 @@
import { Field, Form, Formik } from "formik";
import { useState } from "react";
import { type ReactNode, useState } from "react";
import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import { updateAuth } from "src/api/backend";
import { Button } from "src/components";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { validateString } from "src/modules/Validations";
interface Props {
@@ -12,12 +12,12 @@ interface Props {
onClose: () => void;
}
export function ChangePasswordModal({ userId, onClose }: Props) {
const [error, setError] = useState<string | null>(null);
const [error, setError] = useState<ReactNode | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const onSubmit = async (values: any, { setSubmitting }: any) => {
if (values.new !== values.confirm) {
setError(intl.formatMessage({ id: "error.passwords-must-match" }));
setError(<T id="error.passwords-must-match" />);
setSubmitting(false);
return;
}
@@ -30,7 +30,7 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
await updateAuth(userId, values.new, values.current);
onClose();
} catch (err: any) {
setError(intl.formatMessage({ id: err.message }));
setError(<T id={err.message} />);
}
setIsSubmitting(false);
setSubmitting(false);
@@ -51,7 +51,9 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
{() => (
<Form>
<Modal.Header closeButton>
<Modal.Title>{intl.formatMessage({ id: "user.change-password" })}</Modal.Title>
<Modal.Title>
<T id="user.change-password" />
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Alert variant="danger" show={!!error} onClose={() => setError(null)} dismissible>
@@ -72,7 +74,7 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
{...field}
/>
<label htmlFor="current">
{intl.formatMessage({ id: "user.current-password" })}
<T id="user.current-password" />
</label>
{form.errors.name ? (
<div className="invalid-feedback">
@@ -98,7 +100,7 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
{...field}
/>
<label htmlFor="new">
{intl.formatMessage({ id: "user.new-password" })}
<T id="user.new-password" />
</label>
{form.errors.new ? (
<div className="invalid-feedback">
@@ -129,7 +131,7 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
</div>
) : null}
<label htmlFor="confirm">
{intl.formatMessage({ id: "user.confirm-password" })}
<T id="user.confirm-password" />
</label>
</div>
)}
@@ -138,7 +140,7 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -148,7 +150,7 @@ export function ChangePasswordModal({ userId, onClose }: Props) {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</Modal.Footer>
</Form>

19
frontend/src/modals/DeadHostModal.tsx
View File

@@ -1,6 +1,6 @@
import { IconSettings } from "@tabler/icons-react";
import { Form, Formik } from "formik";
import { useState } from "react";
import { type ReactNode, useState } from "react";
import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import {
@@ -12,7 +12,7 @@ import {
SSLOptionsFields,
} from "src/components";
import { useDeadHost, useSetDeadHost } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { showSuccess } from "src/notifications";
interface Props {
@@ -22,7 +22,7 @@ interface Props {
export function DeadHostModal({ id, onClose }: Props) {
const { data, isLoading, error } = useDeadHost(id);
const { mutate: setDeadHost } = useSetDeadHost();
const [errorMsg, setErrorMsg] = useState<string | null>(null);
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const onSubmit = async (values: any, { setSubmitting }: any) => {
@@ -36,7 +36,7 @@ export function DeadHostModal({ id, onClose }: Props) {
};
setDeadHost(payload, {
onError: (err: any) => setErrorMsg(err.message),
onError: (err: any) => setErrorMsg(<T id={err.message} />),
onSuccess: () => {
showSuccess(intl.formatMessage({ id: "notification.dead-host-saved" }));
onClose();
@@ -76,14 +76,13 @@ export function DeadHostModal({ id, onClose }: Props) {
<Form>
<Modal.Header closeButton>
<Modal.Title>
{intl.formatMessage({ id: data?.id ? "dead-host.edit" : "dead-host.new" })}
<T id={data?.id ? "dead-host.edit" : "dead-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">
@@ -95,7 +94,7 @@ export function DeadHostModal({ id, onClose }: Props) {
aria-selected="true"
role="tab"
>
{intl.formatMessage({ id: "column.details" })}
<T id="column.details" />
</a>
</li>
<li className="nav-item" role="presentation">
@@ -107,7 +106,7 @@ export function DeadHostModal({ id, onClose }: Props) {
tabIndex={-1}
role="tab"
>
{intl.formatMessage({ id: "column.ssl" })}
<T id="column.ssl" />
</a>
</li>
<li className="nav-item ms-auto" role="presentation">
@@ -147,7 +146,7 @@ export function DeadHostModal({ id, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -157,7 +156,7 @@ export function DeadHostModal({ id, onClose }: Props) {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</Modal.Footer>
</Form>

14
frontend/src/modals/DeleteConfirmModal.tsx
View File

@@ -3,7 +3,7 @@ import { type ReactNode, useState } from "react";
import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import { Button } from "src/components";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
title: string;
@@ -14,7 +14,7 @@ interface Props {
}
export function DeleteConfirmModal({ title, children, onConfirm, onClose, invalidations }: Props) {
const queryClient = useQueryClient();
const [error, setError] = useState<string | null>(null);
const [error, setError] = useState<ReactNode | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const onSubmit = async () => {
@@ -29,7 +29,7 @@ export function DeleteConfirmModal({ title, children, onConfirm, onClose, invali
queryClient.invalidateQueries({ queryKey: inv });
});
} catch (err: any) {
setError(intl.formatMessage({ id: err.message }));
setError(<T id={err.message} />);
}
setIsSubmitting(false);
};
@@ -37,7 +37,9 @@ export function DeleteConfirmModal({ title, children, onConfirm, onClose, invali
return (
<Modal show onHide={onClose} animation={false}>
<Modal.Header closeButton>
<Modal.Title>{title}</Modal.Title>
<Modal.Title>
<T id={title} />
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Alert variant="danger" show={!!error} onClose={() => setError(null)} dismissible>
@@ -47,7 +49,7 @@ export function DeleteConfirmModal({ title, children, onConfirm, onClose, invali
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -58,7 +60,7 @@ export function DeleteConfirmModal({ title, children, onConfirm, onClose, invali
disabled={isSubmitting}
onClick={onSubmit}
>
{intl.formatMessage({ id: "action.delete" })}
<T id="action.delete" />
</Button>
</Modal.Footer>
</Modal>

8
frontend/src/modals/EventDetailsModal.tsx
View File

@@ -2,7 +2,7 @@ import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import { Button, EventFormatter, GravatarFormatter, Loading } from "src/components";
import { useAuditLog } from "src/hooks";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
id: number;
@@ -22,7 +22,9 @@ export function EventDetailsModal({ id, onClose }: Props) {
{!isLoading && data && (
<>
<Modal.Header closeButton>
<Modal.Title>{intl.formatMessage({ id: "action.view-details" })}</Modal.Title>
<Modal.Title>
<T id="action.view-details" />
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="row">
@@ -40,7 +42,7 @@ export function EventDetailsModal({ id, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose}>
{intl.formatMessage({ id: "close" })}
<T id="close" />
</Button>
</Modal.Footer>
</>

38
frontend/src/modals/PermissionsModal.tsx
View File

@@ -1,13 +1,13 @@
import { useQueryClient } from "@tanstack/react-query";
import cn from "classnames";
import { Field, Form, Formik } from "formik";
import { useState } from "react";
import { type ReactNode, useState } from "react";
import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import { setPermissions } from "src/api/backend";
import { Button, Loading } from "src/components";
import { useUser } from "src/hooks";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
userId: number;
@@ -15,7 +15,7 @@ interface Props {
}
export function PermissionsModal({ userId, onClose }: Props) {
const queryClient = useQueryClient();
const [errorMsg, setErrorMsg] = useState<string | null>(null);
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
const { data, isLoading, error } = useUser(userId);
const [isSubmitting, setIsSubmitting] = useState(false);
@@ -29,7 +29,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
queryClient.invalidateQueries({ queryKey: ["users"] });
queryClient.invalidateQueries({ queryKey: ["user"] });
} catch (err: any) {
setErrorMsg(intl.formatMessage({ id: err.message }));
setErrorMsg(<T id={err.message} />);
}
setSubmitting(false);
setIsSubmitting(false);
@@ -50,7 +50,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
onChange={() => form.setFieldValue(field.name, "manage")}
/>
<label htmlFor={`${field.name}-manage`} className={cn("btn", { active: field.value === "manage" })}>
{intl.formatMessage({ id: "permissions.manage" })}
<T id="permissions.manage" />
</label>
<input
type="radio"
@@ -63,7 +63,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
onChange={() => form.setFieldValue(field.name, "view")}
/>
<label htmlFor={`${field.name}-view`} className={cn("btn", { active: field.value === "view" })}>
{intl.formatMessage({ id: "permissions.view" })}
<T id="permissions.view" />
</label>
<input
type="radio"
@@ -76,7 +76,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
onChange={() => form.setFieldValue(field.name, "hidden")}
/>
<label htmlFor={`${field.name}-hidden`} className={cn("btn", { active: field.value === "hidden" })}>
{intl.formatMessage({ id: "permissions.hidden" })}
<T id="permissions.hidden" />
</label>
</div>
</div>
@@ -112,7 +112,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
<Form>
<Modal.Header closeButton>
<Modal.Title>
{intl.formatMessage({ id: "user.set-permissions" }, { name: data?.name })}
<T id="user.set-permissions" data={{ name: data?.name }} />
</Modal.Title>
</Modal.Header>
<Modal.Body>
@@ -121,7 +121,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
</Alert>
<div className="mb-3">
<label htmlFor="asd" className="form-label">
{intl.formatMessage({ id: "permissions.visibility.title" })}
<T id="permissions.visibility.title" />
</label>
<Field name="visibility">
{({ field, form }: any) => (
@@ -140,7 +140,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
htmlFor={`${field.name}-user`}
className={cn("btn", { active: field.value === "user" })}
>
{intl.formatMessage({ id: "permissions.visibility.user" })}
<T id="permissions.visibility.user" />
</label>
<input
type="radio"
@@ -156,7 +156,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
htmlFor={`${field.name}-all`}
className={cn("btn", { active: field.value === "all" })}
>
{intl.formatMessage({ id: "permissions.visibility.all" })}
<T id="permissions.visibility.all" />
</label>
</div>
)}
@@ -166,7 +166,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
<>
<div className="mb-3">
<label htmlFor="ignored" className="form-label">
{intl.formatMessage({ id: "proxy-hosts.title" })}
<T id="proxy-hosts.title" />
</label>
<Field name="proxyHosts">
{({ field, form }: any) => getPermissionButtons(field, form)}
@@ -174,7 +174,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
</div>
<div className="mb-3">
<label htmlFor="ignored" className="form-label">
{intl.formatMessage({ id: "redirection-hosts.title" })}
<T id="redirection-hosts.title" />
</label>
<Field name="redirectionHosts">
{({ field, form }: any) => getPermissionButtons(field, form)}
@@ -182,7 +182,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
</div>
<div className="mb-3">
<label htmlFor="ignored" className="form-label">
{intl.formatMessage({ id: "dead-hosts.title" })}
<T id="dead-hosts.title" />
</label>
<Field name="deadHosts">
{({ field, form }: any) => getPermissionButtons(field, form)}
@@ -190,7 +190,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
</div>
<div className="mb-3">
<label htmlFor="ignored" className="form-label">
{intl.formatMessage({ id: "streams.title" })}
<T id="streams.title" />
</label>
<Field name="streams">
{({ field, form }: any) => getPermissionButtons(field, form)}
@@ -198,7 +198,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
</div>
<div className="mb-3">
<label htmlFor="ignored" className="form-label">
{intl.formatMessage({ id: "access.title" })}
<T id="access.title" />
</label>
<Field name="accessLists">
{({ field, form }: any) => getPermissionButtons(field, form)}
@@ -206,7 +206,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
</div>
<div className="mb-3">
<label htmlFor="ignored" className="form-label">
{intl.formatMessage({ id: "certificates.title" })}
<T id="certificates.title" />
</label>
<Field name="certificates">
{({ field, form }: any) => getPermissionButtons(field, form)}
@@ -217,7 +217,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -227,7 +227,7 @@ export function PermissionsModal({ userId, onClose }: Props) {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</Modal.Footer>
</Form>

53
frontend/src/modals/ProxyHostModal.tsx
View File

@@ -1,10 +1,11 @@
import { IconSettings } from "@tabler/icons-react";
import cn from "classnames";
import { Field, Form, Formik } from "formik";
import { useState } from "react";
import { type ReactNode, useState } from "react";
import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import {
AccessField,
Button,
DomainNamesField,
Loading,
@@ -13,7 +14,7 @@ import {
SSLOptionsFields,
} from "src/components";
import { useProxyHost, useSetProxyHost } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
import { showSuccess } from "src/notifications";
@@ -24,7 +25,7 @@ interface Props {
export function ProxyHostModal({ id, onClose }: Props) {
const { data, isLoading, error } = useProxyHost(id);
const { mutate: setProxyHost } = useSetProxyHost();
const [errorMsg, setErrorMsg] = useState<string | null>(null);
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const onSubmit = async (values: any, { setSubmitting }: any) => {
@@ -38,7 +39,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
};
setProxyHost(payload, {
onError: (err: any) => setErrorMsg(err.message),
onError: (err: any) => setErrorMsg(<T id={err.message} />),
onSuccess: () => {
showSuccess(intl.formatMessage({ id: "notification.proxy-host-saved" }));
onClose();
@@ -90,16 +91,13 @@ export function ProxyHostModal({ id, onClose }: Props) {
<Form>
<Modal.Header closeButton>
<Modal.Title>
{intl.formatMessage({
id: data?.id ? "proxy-host.edit" : "proxy-host.new",
})}
<T 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">
@@ -111,7 +109,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
aria-selected="true"
role="tab"
>
{intl.formatMessage({ id: "column.details" })}
<T id="column.details" />
</a>
</li>
<li className="nav-item" role="presentation">
@@ -123,7 +121,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
tabIndex={-1}
role="tab"
>
{intl.formatMessage({ id: "column.custom-locations" })}
<T id="column.custom-locations" />
</a>
</li>
<li className="nav-item" role="presentation">
@@ -135,7 +133,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
tabIndex={-1}
role="tab"
>
{intl.formatMessage({ id: "column.ssl" })}
<T id="column.ssl" />
</a>
</li>
<li className="nav-item ms-auto" role="presentation">
@@ -166,9 +164,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
className="form-label"
htmlFor="forwardScheme"
>
{intl.formatMessage({
id: "host.forward-scheme",
})}
<T id="host.forward-scheme" />
</label>
<select
id="forwardScheme"
@@ -196,9 +192,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
{({ field, form }: any) => (
<div className="mb-3">
<label className="form-label" htmlFor="forwardHost">
{intl.formatMessage({
id: "proxy-host.forward-host",
})}
<T id="proxy-host.forward-host" />
</label>
<input
id="forwardHost"
@@ -225,9 +219,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
{({ field, form }: any) => (
<div className="mb-3">
<label className="form-label" htmlFor="forwardPort">
{intl.formatMessage({
id: "host.forward-port",
})}
<T id="host.forward-port" />
</label>
<input
id="forwardPort"
@@ -252,17 +244,16 @@ export function ProxyHostModal({ id, onClose }: Props) {
</Field>
</div>
</div>
<AccessField />
<div className="my-3">
<h4 className="py-2">
{intl.formatMessage({ id: "host.flags.title" })}
<T id="generic.flags.title" />
</h4>
<div className="divide-y">
<div>
<label className="row" htmlFor="cachingEnabled">
<span className="col">
{intl.formatMessage({
id: "host.flags.cache-assets",
})}
<T id="host.flags.cache-assets" />
</span>
<span className="col-auto">
<Field name="cachingEnabled" type="checkbox">
@@ -285,9 +276,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
<div>
<label className="row" htmlFor="blockExploits">
<span className="col">
{intl.formatMessage({
id: "host.flags.block-exploits",
})}
<T id="host.flags.block-exploits" />
</span>
<span className="col-auto">
<Field name="blockExploits" type="checkbox">
@@ -310,9 +299,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
<div>
<label className="row" htmlFor="allowWebsocketUpgrade">
<span className="col">
{intl.formatMessage({
id: "host.flags.websockets-upgrade",
})}
<T id="host.flags.websockets-upgrade" />
</span>
<span className="col-auto">
<Field name="allowWebsocketUpgrade" type="checkbox">
@@ -336,7 +323,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
</div>
</div>
<div className="tab-pane" id="tab-locations" role="tabpanel">
locations
locations TODO
</div>
<div className="tab-pane" id="tab-ssl" role="tabpanel">
<SSLCertificateField
@@ -355,7 +342,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -365,7 +352,7 @@ export function ProxyHostModal({ id, onClose }: Props) {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</Modal.Footer>
</Form>

39
frontend/src/modals/RedirectionHostModal.tsx
View File

@@ -1,7 +1,7 @@
import { IconSettings } from "@tabler/icons-react";
import cn from "classnames";
import { Field, Form, Formik } from "formik";
import { useState } from "react";
import { type ReactNode, useState } from "react";
import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import {
@@ -13,7 +13,7 @@ import {
SSLOptionsFields,
} from "src/components";
import { useRedirectionHost, useSetRedirectionHost } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { validateString } from "src/modules/Validations";
import { showSuccess } from "src/notifications";
@@ -24,7 +24,7 @@ interface Props {
export function RedirectionHostModal({ id, onClose }: Props) {
const { data, isLoading, error } = useRedirectionHost(id);
const { mutate: setRedirectionHost } = useSetRedirectionHost();
const [errorMsg, setErrorMsg] = useState<string | null>(null);
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const onSubmit = async (values: any, { setSubmitting }: any) => {
@@ -38,7 +38,7 @@ export function RedirectionHostModal({ id, onClose }: Props) {
};
setRedirectionHost(payload, {
onError: (err: any) => setErrorMsg(err.message),
onError: (err: any) => setErrorMsg(<T id={err.message} />),
onSuccess: () => {
showSuccess(intl.formatMessage({ id: "notification.redirection-host-saved" }));
onClose();
@@ -86,16 +86,13 @@ export function RedirectionHostModal({ id, onClose }: Props) {
<Form>
<Modal.Header closeButton>
<Modal.Title>
{intl.formatMessage({
id: data?.id ? "redirection-host.edit" : "redirection-host.new",
})}
<T 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">
@@ -107,7 +104,7 @@ export function RedirectionHostModal({ id, onClose }: Props) {
aria-selected="true"
role="tab"
>
{intl.formatMessage({ id: "column.details" })}
<T id="column.details" />
</a>
</li>
<li className="nav-item" role="presentation">
@@ -119,7 +116,7 @@ export function RedirectionHostModal({ id, onClose }: Props) {
tabIndex={-1}
role="tab"
>
{intl.formatMessage({ id: "column.ssl" })}
<T id="column.ssl" />
</a>
</li>
<li className="nav-item ms-auto" role="presentation">
@@ -150,9 +147,7 @@ export function RedirectionHostModal({ id, onClose }: Props) {
className="form-label"
htmlFor="forwardScheme"
>
{intl.formatMessage({
id: "host.forward-scheme",
})}
<T id="host.forward-scheme" />
</label>
<select
id="forwardScheme"
@@ -187,9 +182,7 @@ export function RedirectionHostModal({ id, onClose }: Props) {
className="form-label"
htmlFor="forwardDomainName"
>
{intl.formatMessage({
id: "redirection-host.forward-domain",
})}
<T id="redirection-host.forward-domain" />
</label>
<input
id="forwardDomainName"
@@ -214,15 +207,13 @@ export function RedirectionHostModal({ id, onClose }: Props) {
</div>
<div className="my-3">
<h4 className="py-2">
{intl.formatMessage({ id: "host.flags.title" })}
<T id="generic.flags.title" />
</h4>
<div className="divide-y">
<div>
<label className="row" htmlFor="preservePath">
<span className="col">
{intl.formatMessage({
id: "host.flags.preserve-path",
})}
<T id="host.flags.preserve-path" />
</span>
<span className="col-auto">
<Field name="preservePath" type="checkbox">
@@ -245,9 +236,7 @@ export function RedirectionHostModal({ id, onClose }: Props) {
<div>
<label className="row" htmlFor="blockExploits">
<span className="col">
{intl.formatMessage({
id: "host.flags.block-exploits",
})}
<T id="host.flags.block-exploits" />
</span>
<span className="col-auto">
<Field name="blockExploits" type="checkbox">
@@ -287,7 +276,7 @@ export function RedirectionHostModal({ id, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -297,7 +286,7 @@ export function RedirectionHostModal({ id, onClose }: Props) {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</Modal.Footer>
</Form>

31
frontend/src/modals/SetPasswordModal.tsx
View File

@@ -1,11 +1,11 @@
import { Field, Form, Formik } from "formik";
import { generate } from "generate-password-browser";
import { useState } from "react";
import { type ReactNode, useState } from "react";
import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import { updateAuth } from "src/api/backend";
import { Button } from "src/components";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { validateString } from "src/modules/Validations";
interface Props {
@@ -13,18 +13,18 @@ interface Props {
onClose: () => void;
}
export function SetPasswordModal({ userId, onClose }: Props) {
const [error, setError] = useState<string | null>(null);
const [error, setError] = useState<ReactNode | null>(null);
const [showPassword, setShowPassword] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const onSubmit = async (values: any, { setSubmitting }: any) => {
const _onSubmit = async (values: any, { setSubmitting }: any) => {
if (isSubmitting) return;
setError(null);
try {
await updateAuth(userId, values.new);
onClose();
} catch (err: any) {
setError(intl.formatMessage({ id: err.message }));
setError(<T id={err.message} />);
}
setIsSubmitting(false);
setSubmitting(false);
@@ -38,12 +38,14 @@ export function SetPasswordModal({ userId, onClose }: Props) {
new: "",
} as any
}
onSubmit={onSubmit}
onSubmit={_onSubmit}
>
{() => (
<Form>
<Modal.Header closeButton>
<Modal.Title>{intl.formatMessage({ id: "user.set-password" })}</Modal.Title>
<Modal.Title>
<T id="user.set-password" />
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Alert variant="danger" show={!!error} onClose={() => setError(null)} dismissible>
@@ -69,9 +71,7 @@ export function SetPasswordModal({ userId, onClose }: Props) {
setShowPassword(true);
}}
>
{intl.formatMessage({
id: "password.generate",
})}
<T id="password.generate" />
</a>{" "}
&mdash;{" "}
<a
@@ -82,9 +82,7 @@ export function SetPasswordModal({ userId, onClose }: Props) {
setShowPassword(!showPassword);
}}
>
{intl.formatMessage({
id: showPassword ? "password.hide" : "password.show",
})}
<T id={showPassword ? "password.hide" : "password.show"} />
</a>
</small>
</p>
@@ -98,9 +96,8 @@ export function SetPasswordModal({ userId, onClose }: Props) {
{...field}
/>
<label htmlFor="new">
{intl.formatMessage({ id: "user.new-password" })}
<T id="user.new-password" />
</label>
{form.errors.new ? (
<div className="invalid-feedback">
{form.errors.new && form.touched.new ? form.errors.new : null}
@@ -114,7 +111,7 @@ export function SetPasswordModal({ userId, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -124,7 +121,7 @@ export function SetPasswordModal({ userId, onClose }: Props) {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</Modal.Footer>
</Form>

38
frontend/src/modals/StreamModal.tsx
View File

@@ -1,10 +1,10 @@
import { Field, Form, Formik } from "formik";
import { useState } from "react";
import { type ReactNode, 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 { intl, T } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
import { showSuccess } from "src/notifications";
@@ -15,7 +15,7 @@ interface Props {
export function StreamModal({ id, onClose }: Props) {
const { data, isLoading, error } = useStream(id);
const { mutate: setStream } = useSetStream();
const [errorMsg, setErrorMsg] = useState<string | null>(null);
const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const onSubmit = async (values: any, { setSubmitting }: any) => {
@@ -29,7 +29,7 @@ export function StreamModal({ id, onClose }: Props) {
};
setStream(payload, {
onError: (err: any) => setErrorMsg(err.message),
onError: (err: any) => setErrorMsg(<T id={err.message} />),
onSuccess: () => {
showSuccess(intl.formatMessage({ id: "notification.stream-saved" }));
onClose();
@@ -68,7 +68,7 @@ export function StreamModal({ id, onClose }: Props) {
<Form>
<Modal.Header closeButton>
<Modal.Title>
{intl.formatMessage({ id: data?.id ? "stream.edit" : "stream.new" })}
<T id={data?.id ? "stream.edit" : "stream.new"} />
</Modal.Title>
</Modal.Header>
<Modal.Body className="p-0">
@@ -87,7 +87,7 @@ export function StreamModal({ id, onClose }: Props) {
aria-selected="true"
role="tab"
>
{intl.formatMessage({ id: "column.details" })}
<T id="column.details" />
</a>
</li>
<li className="nav-item" role="presentation">
@@ -99,7 +99,7 @@ export function StreamModal({ id, onClose }: Props) {
tabIndex={-1}
role="tab"
>
{intl.formatMessage({ id: "column.ssl" })}
<T id="column.ssl" />
</a>
</li>
</ul>
@@ -111,7 +111,7 @@ export function StreamModal({ id, onClose }: Props) {
{({ field, form }: any) => (
<div className="mb-3">
<label className="form-label" htmlFor="incomingPort">
{intl.formatMessage({ id: "stream.incoming-port" })}
<T id="stream.incoming-port" />
</label>
<input
id="incomingPort"
@@ -143,9 +143,7 @@ export function StreamModal({ id, onClose }: Props) {
className="form-label"
htmlFor="forwardingHost"
>
{intl.formatMessage({
id: "stream.forward-host",
})}
<T id="stream.forward-host" />
</label>
<input
id="forwardingHost"
@@ -178,9 +176,7 @@ export function StreamModal({ id, onClose }: Props) {
className="form-label"
htmlFor="forwardingPort"
>
{intl.formatMessage({
id: "host.forward-port",
})}
<T id="stream.forward-port" />
</label>
<input
id="forwardingPort"
@@ -207,15 +203,13 @@ export function StreamModal({ id, onClose }: Props) {
</div>
<div className="my-3">
<h3 className="py-2">
{intl.formatMessage({ id: "host.flags.protocols" })}
<T id="host.flags.protocols" />
</h3>
<div className="divide-y">
<div>
<label className="row" htmlFor="tcpForwarding">
<span className="col">
{intl.formatMessage({
id: "streams.tcp",
})}
<T id="streams.tcp" />
</span>
<span className="col-auto">
<Field name="tcpForwarding" type="checkbox">
@@ -249,9 +243,7 @@ export function StreamModal({ id, onClose }: Props) {
<div>
<label className="row" htmlFor="udpForwarding">
<span className="col">
{intl.formatMessage({
id: "streams.udp",
})}
<T id="streams.udp" />
</span>
<span className="col-auto">
<Field name="udpForwarding" type="checkbox">
@@ -305,7 +297,7 @@ export function StreamModal({ id, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -315,7 +307,7 @@ export function StreamModal({ id, onClose }: Props) {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</Modal.Footer>
</Form>

22
frontend/src/modals/UserModal.tsx
View File

@@ -4,7 +4,7 @@ import { Alert } from "react-bootstrap";
import Modal from "react-bootstrap/Modal";
import { Button, Loading } from "src/components";
import { useSetUser, useUser } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { validateEmail, validateString } from "src/modules/Validations";
import { showSuccess } from "src/notifications";
@@ -79,7 +79,7 @@ export function UserModal({ userId, onClose }: Props) {
<Form>
<Modal.Header closeButton>
<Modal.Title>
{intl.formatMessage({ id: data?.id ? "user.edit" : "user.new" })}
<T id={data?.id ? "user.edit" : "user.new"} />
</Modal.Title>
</Modal.Header>
<Modal.Body>
@@ -99,7 +99,7 @@ export function UserModal({ userId, onClose }: Props) {
{...field}
/>
<label htmlFor="name">
{intl.formatMessage({ id: "user.full-name" })}
<T id="user.full-name" />
</label>
{form.errors.name ? (
<div className="invalid-feedback">
@@ -125,7 +125,7 @@ export function UserModal({ userId, onClose }: Props) {
{...field}
/>
<label htmlFor="nickname">
{intl.formatMessage({ id: "user.nickname" })}
<T id="user.nickname" />
</label>
{form.errors.nickname ? (
<div className="invalid-feedback">
@@ -152,7 +152,7 @@ export function UserModal({ userId, onClose }: Props) {
{...field}
/>
<label htmlFor="email">
{intl.formatMessage({ id: "email-address" })}
<T id="email-address" />
</label>
{form.errors.email ? (
<div className="invalid-feedback">
@@ -167,12 +167,14 @@ export function UserModal({ userId, onClose }: Props) {
</div>
{currentUser && data && currentUser?.id !== data?.id ? (
<div className="my-3">
<h4 className="py-2">{intl.formatMessage({ id: "user.flags.title" })}</h4>
<h4 className="py-2">
<T id="user.flags.title" />
</h4>
<div className="divide-y">
<div>
<label className="row" htmlFor="isAdmin">
<span className="col">
{intl.formatMessage({ id: "role.admin" })}
<T id="role.admin" />
</span>
<span className="col-auto">
<Field name="isAdmin" type="checkbox">
@@ -193,7 +195,7 @@ export function UserModal({ userId, onClose }: Props) {
<div>
<label className="row" htmlFor="isDisabled">
<span className="col">
{intl.formatMessage({ id: "disabled" })}
<T id="disabled" />
</span>
<span className="col-auto">
<Field name="isDisabled" type="checkbox">
@@ -217,7 +219,7 @@ export function UserModal({ userId, onClose }: Props) {
</Modal.Body>
<Modal.Footer>
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
{intl.formatMessage({ id: "cancel" })}
<T id="cancel" />
</Button>
<Button
type="submit"
@@ -227,7 +229,7 @@ export function UserModal({ userId, onClose }: Props) {
isLoading={isSubmitting}
disabled={isSubmitting}
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</Modal.Footer>
</Form>

1
frontend/src/modals/index.ts
View File

@@ -1,3 +1,4 @@
export * from "./AccessListModal";
export * from "./ChangePasswordModal";
export * from "./DeadHostModal";
export * from "./DeleteConfirmModal";