ThatGuyJack/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2025-12-06 08:16:51 +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

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>