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

26
frontend/src/pages/Access/Empty.tsx
View File

@@ -1,18 +1,34 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance }: Props) {
export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
<h2>{intl.formatMessage({ id: "access.empty" })}</h2>
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
<Button className="btn-cyan my-3">{intl.formatMessage({ id: "access.add" })}</Button>
{isFiltered ? (
<h2>
<T id="empty.search" />
</h2>
) : (
<>
<h2>
<T id="access.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-cyan my-3" onClick={onNew}>
<T id="access.add" />
</Button>
</>
)}
</div>
</td>
</tr>

78
frontend/src/pages/Access/Table.tsx
View File

@@ -4,23 +4,24 @@ import { useMemo } from "react";
import type { AccessList } from "src/api/backend";
import { GravatarFormatter, ValueWithDateFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
data: AccessList[];
isFiltered?: boolean;
isFetching?: boolean;
onEdit?: (id: number) => void;
onDelete?: (id: number) => void;
onNew?: () => void;
}
export default function Table({ data, isFetching }: Props) {
export default function Table({ data, isFetching, isFiltered, onEdit, onDelete, onNew }: Props) {
const columnHelper = createColumnHelper<AccessList>();
const columns = useMemo(
() => [
columnHelper.accessor((row: any) => row.owner, {
id: "owner",
cell: (info: any) => {
const value = info.getValue();
return <GravatarFormatter url={value.avatar} name={value.name} />;
},
cell: (info: any) => <GravatarFormatter url={info.getValue().avatar} name={info.getValue().name} />,
meta: {
className: "w-1",
},
@@ -28,42 +29,29 @@ export default function Table({ data, isFetching }: Props) {
columnHelper.accessor((row: any) => row, {
id: "name",
header: intl.formatMessage({ id: "column.name" }),
cell: (info: any) => {
const value = info.getValue();
// Bit of a hack to reuse the DomainsFormatter component
return <ValueWithDateFormatter value={value.name} createdOn={value.createdOn} />;
},
cell: (info: any) => (
<ValueWithDateFormatter value={info.getValue().name} createdOn={info.getValue().createdOn} />
),
}),
columnHelper.accessor((row: any) => row.items, {
id: "items",
header: intl.formatMessage({ id: "column.authorization" }),
cell: (info: any) => {
const value = info.getValue();
return intl.formatMessage({ id: "access.auth-count" }, { count: value.length });
},
cell: (info: any) => <T id="access.auth-count" data={{ count: info.getValue().length }} />,
}),
columnHelper.accessor((row: any) => row.clients, {
id: "clients",
header: intl.formatMessage({ id: "column.access" }),
cell: (info: any) => {
const value = info.getValue();
return intl.formatMessage({ id: "access.access-count" }, { count: value.length });
},
cell: (info: any) => <T id="access.access-count" data={{ count: info.getValue().length }} />,
}),
columnHelper.accessor((row: any) => row.satisfyAny, {
id: "satisfyAny",
header: intl.formatMessage({ id: "column.satisfy" }),
cell: (info: any) => {
const t = info.getValue() ? "access.satisfy-any" : "access.satisfy-all";
return intl.formatMessage({ id: t });
},
cell: (info: any) => <T id={info.getValue() ? "column.satisfy-any" : "column.satisfy-all"} />,
}),
columnHelper.accessor((row: any) => row.proxyHostCount, {
id: "proxyHostCount",
header: intl.formatMessage({ id: "proxy-hosts.title" }),
cell: (info: any) => {
return intl.formatMessage({ id: "proxy-hosts.count" }, { count: info.getValue() });
},
cell: (info: any) => <T id="proxy-hosts.count" data={{ count: info.getValue() }} />,
}),
columnHelper.display({
id: "id", // todo: not needed for a display?
@@ -80,21 +68,30 @@ export default function Table({ data, isFetching }: Props) {
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
{intl.formatMessage(
{
id: "access.actions-title",
},
{ id: info.row.original.id },
)}
<T id="access.actions-title" data={{ id: info.row.original.id }} />
</span>
<a className="dropdown-item" href="#">
<a
className="dropdown-item"
href="#"
onClick={(e) => {
e.preventDefault();
onEdit?.(info.row.original.id);
}}
>
<IconEdit size={16} />
{intl.formatMessage({ id: "action.edit" })}
<T id="action.edit" />
</a>
<div className="dropdown-divider" />
<a className="dropdown-item" href="#">
<a
className="dropdown-item"
href="#"
onClick={(e) => {
e.preventDefault();
onDelete?.(info.row.original.id);
}}
>
<IconTrash size={16} />
{intl.formatMessage({ id: "action.delete" })}
<T id="action.delete" />
</a>
</div>
</span>
@@ -105,7 +102,7 @@ export default function Table({ data, isFetching }: Props) {
},
}),
],
[columnHelper],
[columnHelper, onEdit, onDelete],
);
const tableInstance = useReactTable<AccessList>({
@@ -119,5 +116,10 @@ export default function Table({ data, isFetching }: Props) {
enableSortingRemoval: false,
});
return <TableLayout tableInstance={tableInstance} emptyState={<Empty tableInstance={tableInstance} />} />;
return (
<TableLayout
tableInstance={tableInstance}
emptyState={<Empty tableInstance={tableInstance} onNew={onNew} isFiltered={isFiltered} />}
/>
);
}

89
frontend/src/pages/Access/TableWrapper.tsx
View File

@@ -1,11 +1,18 @@
import { IconSearch } from "@tabler/icons-react";
import { useState } from "react";
import Alert from "react-bootstrap/Alert";
import { deleteAccessList } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useAccessLists } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { AccessListModal, DeleteConfirmModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
export default function TableWrapper() {
const [search, setSearch] = useState("");
const [editId, setEditId] = useState(0 as number | "new");
const [deleteId, setDeleteId] = useState(0);
const { isFetching, isLoading, isError, error, data } = useAccessLists(["owner", "items", "clients"]);
if (isLoading) {
@@ -16,6 +23,27 @@ export default function TableWrapper() {
return <Alert variant="danger">{error?.message || "Unknown error"}</Alert>;
}
const handleDelete = async () => {
await deleteAccessList(deleteId);
showSuccess(intl.formatMessage({ id: "notification.access-deleted" }));
};
let filtered = null;
if (search && data) {
filtered = data?.filter((_item) => {
return true;
// TODO
// return (
// `${item.incomingPort}`.includes(search) ||
// `${item.forwardingPort}`.includes(search) ||
// item.forwardingHost.includes(search)
// );
});
} else if (search !== "") {
// this can happen if someone deletes the last item while searching
setSearch("");
}
return (
<div className="card mt-4">
<div className="card-status-top bg-cyan" />
@@ -23,29 +51,52 @@ export default function TableWrapper() {
<div className="card-header">
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "access.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="access.title" />
</h2>
</div>
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
<div className="input-group input-group-flat w-auto">
<span className="input-group-text input-group-text-sm">
<IconSearch size={16} />
</span>
<input
id="advanced-table-search"
type="text"
className="form-control form-control-sm"
autoComplete="off"
/>
{data?.length ? (
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
<div className="input-group input-group-flat w-auto">
<span className="input-group-text input-group-text-sm">
<IconSearch size={16} />
</span>
<input
id="advanced-table-search"
type="text"
className="form-control form-control-sm"
autoComplete="off"
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
<Button size="sm" className="btn-cyan" onClick={() => setEditId("new")}>
<T id="access.add" />
</Button>
</div>
<Button size="sm" className="btn-cyan">
{intl.formatMessage({ id: "access.add" })}
</Button>
</div>
</div>
) : null}
</div>
</div>
<Table data={data ?? []} isFetching={isFetching} />
<Table
data={filtered ?? data ?? []}
isFetching={isFetching}
isFiltered={!!filtered}
onEdit={(id: number) => setEditId(id)}
onDelete={(id: number) => setDeleteId(id)}
onNew={() => setEditId("new")}
/>
{editId ? <AccessListModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title="access.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["access-lists"], ["access-list", deleteId]]}
>
<T id="access.delete.content" />
</DeleteConfirmModal>
) : null}
</div>
</div>
);

4
frontend/src/pages/AuditLog/Table.tsx
View File

@@ -3,7 +3,7 @@ import { useMemo } from "react";
import type { AuditLog } from "src/api/backend";
import { EventFormatter, GravatarFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
interface Props {
data: AuditLog[];
@@ -47,7 +47,7 @@ export default function Table({ data, isFetching, onSelectItem }: Props) {
onSelectItem?.(info.row.original.id);
}}
>
{intl.formatMessage({ id: "action.view-details" })}
<T id="action.view-details" />
</button>
);
},

6
frontend/src/pages/AuditLog/TableWrapper.tsx
View File

@@ -2,7 +2,7 @@ import { useState } from "react";
import Alert from "react-bootstrap/Alert";
import { LoadingPage } from "src/components";
import { useAuditLogs } from "src/hooks";
import { intl } from "src/locale";
import { T } from "src/locale";
import { EventDetailsModal } from "src/modals";
import Table from "./Table";
@@ -25,7 +25,9 @@ export default function TableWrapper() {
<div className="card-header">
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "auditlog.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="auditlog.title" />
</h2>
</div>
</div>
</div>

72
frontend/src/pages/Certificates/Empty.tsx
View File

@@ -1,34 +1,62 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { intl } from "src/locale";
/**
* This component should never render as there should always be 1 user minimum,
* but I'm keeping it for consistency.
*/
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
onNew?: () => void;
onNewCustom?: () => void;
isFiltered?: boolean;
}
export default function Empty({ tableInstance }: Props) {
export default function Empty({ tableInstance, onNew, onNewCustom, isFiltered }: Props) {
return (
<tr>
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
<h2>{intl.formatMessage({ id: "certificates.empty" })}</h2>
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
<div className="dropdown">
<button type="button" className="btn dropdown-toggle btn-pink my-3" data-bs-toggle="dropdown">
{intl.formatMessage({ id: "certificates.add" })}
</button>
<div className="dropdown-menu">
<a className="dropdown-item" href="#">
{intl.formatMessage({ id: "lets-encrypt" })}
</a>
<a className="dropdown-item" href="#">
{intl.formatMessage({ id: "certificates.custom" })}
</a>
</div>
</div>
{isFiltered ? (
<h2>
<T id="empty.search" />
</h2>
) : (
<>
<h2>
<T id="certificates.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<div className="dropdown">
<button
type="button"
className="btn dropdown-toggle btn-pink my-3"
data-bs-toggle="dropdown"
>
<T id="certificates.add" />
</button>
<div className="dropdown-menu">
<a
className="dropdown-item"
href="#"
onClick={(e) => {
e.preventDefault();
onNew?.();
}}
>
<T id="lets-encrypt" />
</a>
<a
className="dropdown-item"
href="#"
onClick={(e) => {
e.preventDefault();
onNewCustom?.();
}}
>
<T id="certificates.custom" />
</a>
</div>
</div>
</>
)}
</div>
</td>
</tr>

15
frontend/src/pages/Certificates/Table.tsx
View File

@@ -4,7 +4,7 @@ import { useMemo } from "react";
import type { Certificate } from "src/api/backend";
import { DomainsFormatter, GravatarFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
@@ -69,25 +69,20 @@ export default function Table({ data, isFetching }: Props) {
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
{intl.formatMessage(
{
id: "certificates.actions-title",
},
{ id: info.row.original.id },
)}
<T id="certificates.actions-title" data={{ id: info.row.original.id }} />
</span>
<a className="dropdown-item" href="#">
<IconEdit size={16} />
{intl.formatMessage({ id: "action.edit" })}
<T id="action.edit" />
</a>
<a className="dropdown-item" href="#">
<IconPower size={16} />
{intl.formatMessage({ id: "action.disable" })}
<T id="action.disable" />
</a>
<div className="dropdown-divider" />
<a className="dropdown-item" href="#">
<IconTrash size={16} />
{intl.formatMessage({ id: "action.delete" })}
<T id="action.delete" />
</a>
</div>
</span>

12
frontend/src/pages/Certificates/TableWrapper.tsx
View File

@@ -2,7 +2,7 @@ import { IconSearch } from "@tabler/icons-react";
import Alert from "react-bootstrap/Alert";
import { LoadingPage } from "src/components";
import { useCertificates } from "src/hooks";
import { intl } from "src/locale";
import { T } from "src/locale";
import Table from "./Table";
export default function TableWrapper() {
@@ -28,7 +28,9 @@ export default function TableWrapper() {
<div className="card-header">
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "certificates.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="certificates.title" />
</h2>
</div>
<div className="col-md-auto col-sm-12">
<div className="ms-auto d-flex flex-wrap btn-list">
@@ -49,14 +51,14 @@ export default function TableWrapper() {
className="btn btn-sm dropdown-toggle btn-pink mt-1"
data-bs-toggle="dropdown"
>
{intl.formatMessage({ id: "certificates.add" })}
<T id="certificates.add" />
</button>
<div className="dropdown-menu">
<a className="dropdown-item" href="#">
{intl.formatMessage({ id: "lets-encrypt" })}
<T id="lets-encrypt" />
</a>
<a className="dropdown-item" href="#">
{intl.formatMessage({ id: "certificates.custom" })}
<T id="certificates.custom" />
</a>
</div>
</div>

33
frontend/src/pages/Dashboard/index.tsx
View File

@@ -1,7 +1,7 @@
import { IconArrowsCross, IconBolt, IconBoltOff, IconDisc } from "@tabler/icons-react";
import { useNavigate } from "react-router-dom";
import { useHostReport } from "src/hooks";
import { intl } from "src/locale";
import { T } from "src/locale";
const Dashboard = () => {
const { data: hostReport } = useHostReport();
@@ -9,7 +9,9 @@ const Dashboard = () => {
return (
<div>
<h2>{intl.formatMessage({ id: "dashboard.title" })}</h2>
<h2>
<T id="dashboard.title" />
</h2>
<div className="row row-deck row-cards">
<div className="col-12 my-4">
<div className="row row-cards">
@@ -31,10 +33,7 @@ const Dashboard = () => {
</div>
<div className="col">
<div className="font-weight-medium">
{intl.formatMessage(
{ id: "proxy-hosts.count" },
{ count: hostReport?.proxy },
)}
<T id="proxy-hosts.count" data={{ count: hostReport?.proxy }} />
</div>
</div>
</div>
@@ -58,10 +57,7 @@ const Dashboard = () => {
</span>
</div>
<div className="col">
{intl.formatMessage(
{ id: "redirection-hosts.count" },
{ count: hostReport?.redirection },
)}
<T id="redirection-hosts.count" data={{ count: hostReport?.redirection }} />
</div>
</div>
</div>
@@ -84,7 +80,7 @@ const Dashboard = () => {
</span>
</div>
<div className="col">
{intl.formatMessage({ id: "streams.count" }, { count: hostReport?.stream })}
<T id="streams.count" data={{ count: hostReport?.stream }} />
</div>
</div>
</div>
@@ -107,10 +103,7 @@ const Dashboard = () => {
</span>
</div>
<div className="col">
{intl.formatMessage(
{ id: "dead-hosts.count" },
{ count: hostReport?.dead },
)}
<T id="dead-hosts.count" data={{ count: hostReport?.dead }} />
</div>
</div>
</div>
@@ -125,12 +118,22 @@ const Dashboard = () => {
- check mobile
- add help docs for host types
- REDO SCREENSHOTS in docs folder
- translations for:
- src/components/Form/AccessField.tsx
- src/components/Form/SSLCertificateField.tsx
- src/components/Form/DNSProviderFields.tsx
- search codebase for "TODO"
- update documentation to add development notes for translations
- use syntax highligting for audit logs json output
- double check output of access field selection on proxy host dialog, after access lists are completed
- proxy host custom locations dialog
More for api, then implement here:
- Properly implement refresh tokens
- Add error message_18n for all backend errors
- minor: certificates expand with hosts needs to omit 'is_deleted'
- properly wrap all logger.debug called in isDebug check
- add new api endpoint changes to swagger docs
`}</code>
</pre>

12
frontend/src/pages/Login/index.tsx
View File

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
import { Button, LocalePicker, Page, ThemeSwitcher } from "src/components";
import { useAuthState } from "src/context";
import { useHealth } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { validateEmail, validateString } from "src/modules/Validations";
import styles from "./index.module.css";
@@ -57,7 +57,9 @@ export default function Login() {
</div>
<div className="card card-md">
<div className="card-body">
<h2 className="h2 text-center mb-4">{intl.formatMessage({ id: "login.title" })}</h2>
<h2 className="h2 text-center mb-4">
<T id="login.title" />
</h2>
{formErr !== "" && <Alert variant="danger">{formErr}</Alert>}
<Formik
initialValues={
@@ -74,7 +76,7 @@ export default function Login() {
<Field name="email" validate={validateEmail()}>
{({ field, form }: any) => (
<label className="form-label">
{intl.formatMessage({ id: "email-address" })}
<T id="email-address" />
<input
{...field}
ref={emailRef}
@@ -93,7 +95,7 @@ export default function Login() {
{({ field, form }: any) => (
<>
<label className="form-label">
{intl.formatMessage({ id: "password" })}
<T id="password" />
<input
{...field}
type="password"
@@ -111,7 +113,7 @@ export default function Login() {
</div>
<div className="form-footer">
<Button type="submit" fullWidth color="azure" isLoading={isSubmitting}>
{intl.formatMessage({ id: "sign-in" })}
<T id="sign-in" />
</Button>
</div>
</Form>

16
frontend/src/pages/Nginx/DeadHosts/Empty.tsx
View File

@@ -1,6 +1,6 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
@@ -13,13 +13,19 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
<h2>
<T id="empty.search" />
</h2>
) : (
<>
<h2>{intl.formatMessage({ id: "dead-hosts.empty" })}</h2>
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
<h2>
<T id="dead-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-red my-3" onClick={onNew}>
{intl.formatMessage({ id: "dead-hosts.add" })}
<T id="dead-hosts.add" />
</Button>
</>
)}

17
frontend/src/pages/Nginx/DeadHosts/Table.tsx
View File

@@ -4,7 +4,7 @@ import { useMemo } from "react";
import type { DeadHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
@@ -67,12 +67,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
{intl.formatMessage(
{
id: "dead-hosts.actions-title",
},
{ id: info.row.original.id },
)}
<T id="dead-hosts.actions-title" data={{ id: info.row.original.id }} />
</span>
<a
className="dropdown-item"
@@ -83,7 +78,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconEdit size={16} />
{intl.formatMessage({ id: "action.edit" })}
<T id="action.edit" />
</a>
<a
className="dropdown-item"
@@ -94,9 +89,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconPower size={16} />
{intl.formatMessage({
id: info.row.original.enabled ? "action.disable" : "action.enable",
})}
<T id={info.row.original.enabled ? "action.disable" : "action.enable"} />
</a>
<div className="dropdown-divider" />
<a
@@ -108,7 +101,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconTrash size={16} />
{intl.formatMessage({ id: "action.delete" })}
<T id="action.delete" />
</a>
</div>
</span>

13
frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
View File

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useDeadHosts } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { DeadHostModal, DeleteConfirmModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
@@ -54,7 +54,9 @@ export default function TableWrapper() {
<div className="card-header">
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "dead-hosts.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="dead-hosts.title" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
@@ -71,9 +73,8 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
<Button size="sm" className="btn-red" onClick={() => setEditId("new")}>
{intl.formatMessage({ id: "dead-hosts.add" })}
<T id="dead-hosts.add" />
</Button>
</div>
</div>
@@ -92,12 +93,12 @@ export default function TableWrapper() {
{editId ? <DeadHostModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title={intl.formatMessage({ id: "dead-host.delete.title" })}
title="dead-host.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["dead-hosts"], ["dead-host", deleteId]]}
>
{intl.formatMessage({ id: "dead-host.delete.content" })}
<T id="dead-host.delete.content" />
</DeleteConfirmModal>
) : null}
</div>

16
frontend/src/pages/Nginx/ProxyHosts/Empty.tsx
View File

@@ -1,6 +1,6 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
@@ -13,13 +13,19 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
<h2>
<T id="empty.search" />
</h2>
) : (
<>
<h2>{intl.formatMessage({ id: "proxy-hosts.empty" })}</h2>
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
<h2>
<T id="proxy-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-lime my-3" onClick={onNew}>
{intl.formatMessage({ id: "proxy-hosts.add" })}
<T id="proxy-hosts.add" />
</Button>
</>
)}

17
frontend/src/pages/Nginx/ProxyHosts/Table.tsx
View File

@@ -4,7 +4,7 @@ import { useMemo } from "react";
import type { ProxyHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
@@ -83,12 +83,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
{intl.formatMessage(
{
id: "proxy-hosts.actions-title",
},
{ id: info.row.original.id },
)}
<T id="proxy-hosts.actions-title" data={{ id: info.row.original.id }} />
</span>
<a
className="dropdown-item"
@@ -99,7 +94,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconEdit size={16} />
{intl.formatMessage({ id: "action.edit" })}
<T id="action.edit" />
</a>
<a
className="dropdown-item"
@@ -110,9 +105,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconPower size={16} />
{intl.formatMessage({
id: info.row.original.enabled ? "action.disable" : "action.enable",
})}
<T id={info.row.original.enabled ? "action.disable" : "action.enable"} />
</a>
<div className="dropdown-divider" />
<a
@@ -124,7 +117,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconTrash size={16} />
{intl.formatMessage({ id: "action.delete" })}
<T id="action.delete" />
</a>
</div>
</span>

13
frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
View File

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useProxyHosts } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { DeleteConfirmModal, ProxyHostModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
@@ -41,6 +41,7 @@ export default function TableWrapper() {
if (search && data) {
filtered = data?.filter((_item) => {
return true;
// TODO
// item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
// item.forwardDomainName.toLowerCase().includes(search)
// );
@@ -57,7 +58,9 @@ export default function TableWrapper() {
<div className="card-header">
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "proxy-hosts.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="proxy-hosts.title" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
@@ -74,7 +77,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-lime">
{intl.formatMessage({ id: "proxy-hosts.add" })}
<T id="proxy-hosts.add" />
</Button>
</div>
</div>
@@ -93,12 +96,12 @@ export default function TableWrapper() {
{editId ? <ProxyHostModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title={intl.formatMessage({ id: "proxy-host.delete.title" })}
title="proxy-host.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["proxy-hosts"], ["proxy-host", deleteId]]}
>
{intl.formatMessage({ id: "proxy-host.delete.content" })}
<T id="proxy-host.delete.content" />
</DeleteConfirmModal>
) : null}
</div>

16
frontend/src/pages/Nginx/RedirectionHosts/Empty.tsx
View File

@@ -1,6 +1,6 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
@@ -13,13 +13,19 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
<h2>
<T id="empty.search" />
</h2>
) : (
<>
<h2>{intl.formatMessage({ id: "redirection-hosts.empty" })}</h2>
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
<h2>
<T id="redirection-hosts.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-yellow my-3" onClick={onNew}>
{intl.formatMessage({ id: "redirection-hosts.add" })}
<T id="redirection-hosts.add" />
</Button>
</>
)}

17
frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
View File

@@ -4,7 +4,7 @@ import { useMemo } from "react";
import type { RedirectionHost } from "src/api/backend";
import { CertificateFormatter, DomainsFormatter, GravatarFormatter, StatusFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
@@ -88,12 +88,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
{intl.formatMessage(
{
id: "redirection-hosts.actions-title",
},
{ id: info.row.original.id },
)}
<T id="redirection-hosts.actions-title" data={{ id: info.row.original.id }} />
</span>
<a
className="dropdown-item"
@@ -104,7 +99,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconEdit size={16} />
{intl.formatMessage({ id: "action.edit" })}
<T id="action.edit" />
</a>
<a
className="dropdown-item"
@@ -115,9 +110,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconPower size={16} />
{intl.formatMessage({
id: info.row.original.enabled ? "action.disable" : "action.enable",
})}
<T id={info.row.original.enabled ? "action.disable" : "action.enable"} />
</a>
<div className="dropdown-divider" />
<a
@@ -129,7 +122,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
}}
>
<IconTrash size={16} />
{intl.formatMessage({ id: "action.delete" })}
<T id="action.delete" />
</a>
</div>
</span>

13
frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
View File

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useRedirectionHosts } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { DeleteConfirmModal, RedirectionHostModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
@@ -57,7 +57,9 @@ export default function TableWrapper() {
<div className="card-header">
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "redirection-hosts.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="redirection-hosts.title" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
@@ -74,9 +76,8 @@ export default function TableWrapper() {
onChange={(e: any) => setSearch(e.target.value.toLowerCase().trim())}
/>
</div>
<Button size="sm" className="btn-yellow" onClick={() => setEditId("new")}>
{intl.formatMessage({ id: "redirection-hosts.add" })}
<T id="redirection-hosts.add" />
</Button>
</div>
</div>
@@ -95,12 +96,12 @@ export default function TableWrapper() {
{editId ? <RedirectionHostModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title={intl.formatMessage({ id: "redirection-host.delete.title" })}
title="redirection-host.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["redirection-hosts"], ["redirection-host", deleteId]]}
>
{intl.formatMessage({ id: "redirection-host.delete.content" })}
<T id="redirection-host.delete.content" />
</DeleteConfirmModal>
) : null}
</div>

16
frontend/src/pages/Nginx/Streams/Empty.tsx
View File

@@ -1,6 +1,6 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
@@ -13,13 +13,19 @@ export default function Empty({ tableInstance, onNew, isFiltered }: Props) {
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
<h2>
<T id="empty.search" />
</h2>
) : (
<>
<h2>{intl.formatMessage({ id: "streams.empty" })}</h2>
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
<h2>
<T id="streams.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-blue my-3" onClick={onNew}>
{intl.formatMessage({ id: "streams.add" })}
<T id="streams.add" />
</Button>
</>
)}

19
frontend/src/pages/Nginx/Streams/Table.tsx
View File

@@ -4,7 +4,7 @@ import { useMemo } from "react";
import type { Stream } from "src/api/backend";
import { CertificateFormatter, GravatarFormatter, StatusFormatter, ValueWithDateFormatter } from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
@@ -55,12 +55,12 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
<>
{value.tcpForwarding ? (
<span className="badge badge-lg domain-name">
{intl.formatMessage({ id: "streams.tcp" })}
<T id="streams.tcp" />
</span>
) : null}
{value.udpForwarding ? (
<span className="badge badge-lg domain-name">
{intl.formatMessage({ id: "streams.udp" })}
<T id="streams.udp" />
</span>
) : null}
</>
@@ -96,12 +96,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
{intl.formatMessage(
{
id: "streams.actions-title",
},
{ id: info.row.original.id },
)}
<T id="streams.actions-title" data={{ id: info.row.original.id }} />
</span>
<a
className="dropdown-item"
@@ -112,7 +107,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
}}
>
<IconEdit size={16} />
{intl.formatMessage({ id: "action.edit" })}
<T id="action.edit" />
</a>
<a
className="dropdown-item"
@@ -123,7 +118,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
}}
>
<IconPower size={16} />
{intl.formatMessage({ id: "action.disable" })}
<T id="action.disable" />
</a>
<div className="dropdown-divider" />
<a
@@ -135,7 +130,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
}}
>
<IconTrash size={16} />
{intl.formatMessage({ id: "action.delete" })}
<T id="action.delete" />
</a>
</div>
</span>

12
frontend/src/pages/Nginx/Streams/TableWrapper.tsx
View File

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
import { deleteStream, toggleStream } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useStreams } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { DeleteConfirmModal, StreamModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
@@ -60,7 +60,9 @@ export default function TableWrapper() {
<div className="card-header">
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "streams.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="streams.title" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
@@ -78,7 +80,7 @@ export default function TableWrapper() {
/>
</div>
<Button size="sm" className="btn-blue" onClick={() => setEditId("new")}>
{intl.formatMessage({ id: "streams.add" })}
<T id="streams.add" />
</Button>
</div>
</div>
@@ -97,12 +99,12 @@ export default function TableWrapper() {
{editId ? <StreamModal id={editId} onClose={() => setEditId(0)} /> : null}
{deleteId ? (
<DeleteConfirmModal
title={intl.formatMessage({ id: "stream.delete.title" })}
title="stream.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteId(0)}
invalidations={[["streams"], ["stream", deleteId]]}
>
{intl.formatMessage({ id: "stream.delete.content" })}
<T id="stream.delete.content" />
</DeleteConfirmModal>
) : null}
</div>

6
frontend/src/pages/Settings/SettingTable.tsx
View File

@@ -1,5 +1,5 @@
import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
import { intl } from "src/locale";
import { T } from "src/locale";
export default function SettingTable() {
return (
@@ -8,7 +8,9 @@ export default function SettingTable() {
<div className="card-table">
<div className="card-header">
<div className="row w-full">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "settings.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="settings.title" />
</h2>
</div>
</div>
<div id="advanced-table">

18
frontend/src/pages/Setup/index.tsx
View File

@@ -6,7 +6,7 @@ import { Alert } from "react-bootstrap";
import { createUser } from "src/api/backend";
import { Button, LocalePicker, Page, ThemeSwitcher } from "src/components";
import { useAuthState } from "src/context";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { validateEmail, validateString } from "src/modules/Validations";
import styles from "./index.module.css";
@@ -89,8 +89,12 @@ export default function Setup() {
{({ isSubmitting }) => (
<Form>
<div className="card-body text-center py-4 p-sm-5">
<h1 className="mt-5">{intl.formatMessage({ id: "setup.title" })}</h1>
<p className="text-secondary">{intl.formatMessage({ id: "setup.preamble" })}</p>
<h1 className="mt-5">
<T id="setup.title" />
</h1>
<p className="text-secondary">
<T id="setup.preamble" />
</p>
</div>
<hr />
<div className="card-body">
@@ -105,7 +109,7 @@ export default function Setup() {
{...field}
/>
<label htmlFor="name">
{intl.formatMessage({ id: "user.full-name" })}
<T id="user.full-name" />
</label>
{form.errors.name ? (
<div className="invalid-feedback">
@@ -130,7 +134,7 @@ export default function Setup() {
{...field}
/>
<label htmlFor="email">
{intl.formatMessage({ id: "email-address" })}
<T id="email-address" />
</label>
{form.errors.email ? (
<div className="invalid-feedback">
@@ -155,7 +159,7 @@ export default function Setup() {
{...field}
/>
<label htmlFor="password">
{intl.formatMessage({ id: "user.new-password" })}
<T id="user.new-password" />
</label>
{form.errors.password ? (
<div className="invalid-feedback">
@@ -178,7 +182,7 @@ export default function Setup() {
disabled={isSubmitting}
className="w-100"
>
{intl.formatMessage({ id: "save" })}
<T id="save" />
</Button>
</div>
</Form>

16
frontend/src/pages/Users/Empty.tsx
View File

@@ -1,6 +1,6 @@
import type { Table as ReactTable } from "@tanstack/react-table";
import { Button } from "src/components";
import { intl } from "src/locale";
import { T } from "src/locale";
interface Props {
tableInstance: ReactTable<any>;
@@ -13,13 +13,19 @@ export default function Empty({ tableInstance, onNewUser, isFiltered }: Props) {
<td colSpan={tableInstance.getVisibleFlatColumns().length}>
<div className="text-center my-4">
{isFiltered ? (
<h2>{intl.formatMessage({ id: "empty-search" })}</h2>
<h2>
<T id="empty-search" />
</h2>
) : (
<>
<h2>{intl.formatMessage({ id: "users.empty" })}</h2>
<p className="text-muted">{intl.formatMessage({ id: "empty-subtitle" })}</p>
<h2>
<T id="users.empty" />
</h2>
<p className="text-muted">
<T id="empty-subtitle" />
</p>
<Button className="btn-orange my-3" onClick={onNewUser}>
{intl.formatMessage({ id: "users.add" })}
<T id="users.add" />
</Button>
</>
)}

21
frontend/src/pages/Users/Table.tsx
View File

@@ -10,7 +10,7 @@ import {
ValueWithDateFormatter,
} from "src/components";
import { TableLayout } from "src/components/Table/TableLayout";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import Empty from "./Empty";
interface Props {
@@ -101,12 +101,7 @@ export default function Table({
</button>
<div className="dropdown-menu dropdown-menu-end">
<span className="dropdown-header">
{intl.formatMessage(
{
id: "users.actions-title",
},
{ id: info.row.original.id },
)}
<T id="users.actions-title" data={{ id: info.row.original.id }} />
</span>
<a
className="dropdown-item"
@@ -117,7 +112,7 @@ export default function Table({
}}
>
<IconEdit size={16} />
{intl.formatMessage({ id: "user.edit" })}
<T id="users.edit" />
</a>
{currentUserId !== info.row.original.id ? (
<>
@@ -130,7 +125,7 @@ export default function Table({
}}
>
<IconShield size={16} />
{intl.formatMessage({ id: "action.permissions" })}
<T id="action.permissions" />
</a>
<a
className="dropdown-item"
@@ -141,7 +136,7 @@ export default function Table({
}}
>
<IconLock size={16} />
{intl.formatMessage({ id: "user.set-password" })}
<T id="user.set-password" />
</a>
<a
className="dropdown-item"
@@ -152,9 +147,7 @@ export default function Table({
}}
>
<IconPower size={16} />
{intl.formatMessage({
id: info.row.original.isDisabled ? "action.enable" : "action.disable",
})}
<T id={info.row.original.isDisabled ? "action.enable" : "action.disable"} />
</a>
<div className="dropdown-divider" />
<a
@@ -166,7 +159,7 @@ export default function Table({
}}
>
<IconTrash size={16} />
{intl.formatMessage({ id: "action.delete" })}
<T id="action.delete" />
</a>
</>
) : null}

12
frontend/src/pages/Users/TableWrapper.tsx
View File

@@ -5,7 +5,7 @@ import Alert from "react-bootstrap/Alert";
import { deleteUser, toggleUser } from "src/api/backend";
import { Button, LoadingPage } from "src/components";
import { useUser, useUsers } from "src/hooks";
import { intl } from "src/locale";
import { intl, T } from "src/locale";
import { DeleteConfirmModal, PermissionsModal, SetPasswordModal, UserModal } from "src/modals";
import { showSuccess } from "src/notifications";
import Table from "./Table";
@@ -61,7 +61,9 @@ export default function TableWrapper() {
<div className="card-header">
<div className="row w-full">
<div className="col">
<h2 className="mt-1 mb-0">{intl.formatMessage({ id: "users.title" })}</h2>
<h2 className="mt-1 mb-0">
<T id="users.title" />
</h2>
</div>
{data?.length ? (
<div className="col-md-auto col-sm-12">
@@ -80,7 +82,7 @@ export default function TableWrapper() {
</div>
<Button size="sm" className="btn-orange" onClick={() => setEditUserId("new")}>
{intl.formatMessage({ id: "users.add" })}
<T id="users.add" />
</Button>
</div>
</div>
@@ -105,12 +107,12 @@ export default function TableWrapper() {
) : null}
{deleteUserId ? (
<DeleteConfirmModal
title={intl.formatMessage({ id: "user.delete.title" })}
title="user.delete.title"
onConfirm={handleDelete}
onClose={() => setDeleteUserId(0)}
invalidations={[["users"], ["user", deleteUserId]]}
>
{intl.formatMessage({ id: "user.delete.content" })}
<T id="user.delete.content" />
</DeleteConfirmModal>
) : null}
{editUserPasswordId ? (