Skip to content

Commit 93721ef

Browse files
jc21jc21
committed
Converted over all text to i18n
1 parent 7530fc7 commit 93721ef

File tree

15 files changed

+273
-80
lines changed

15 files changed

+273
-80
lines changed

‎frontend/src/components/Footer.tsx

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22

33
import { useHealthState } from "context";
4+
import { FormattedMessage } from "react-intl";
45
import styled from "styled-components";
56

67
const FixedFooterWrapper = styled.div`
@@ -28,7 +29,10 @@ function Footer({ fixed }: Props) {
2829
target="_blank"
2930
rel="noreferrer"
3031
className="link-secondary">
31-
User Guide
32+
<FormattedMessage
33+
id="footer.userguide"
34+
defaultMessage="User Guide"
35+
/>
3236
</a>
3337
</li>
3438
<li className="list-inline-item">
@@ -37,7 +41,10 @@ function Footer({ fixed }: Props) {
3741
target="_blank"
3842
rel="noreferrer"
3943
className="link-secondary">
40-
Changelog
44+
<FormattedMessage
45+
id="footer.changelog"
46+
defaultMessage="Change Log"
47+
/>
4148
</a>
4249
</li>
4350
<li className="list-inline-item">
@@ -46,21 +53,31 @@ function Footer({ fixed }: Props) {
4653
target="_blank"
4754
rel="noreferrer"
4855
className="link-secondary">
49-
Github
56+
<FormattedMessage
57+
id="footer.github"
58+
defaultMessage="Github"
59+
/>
5060
</a>
5161
</li>
5262
</ul>
5363
</div>
5464
<div className="col-12 col-lg-auto mt-3 mt-lg-0">
5565
<ul className="list-inline list-inline-dots mb-0">
5666
<li className="list-inline-item">
57-
Copyright © {new Date().getFullYear()} jc21.com. Theme by{" "}
67+
<FormattedMessage
68+
id="footer.copyright"
69+
defaultMessage="Copyright © {year} jc21.com."
70+
values={{ year: new Date().getFullYear() }}
71+
/>{" "}
5872
<a
5973
className="link-secondary"
6074
href="https://preview.tabler.io/"
6175
target="_blank"
6276
rel="noreferrer">
63-
Tabler
77+
<FormattedMessage
78+
id="footer.theme"
79+
defaultMessage="Theme by Tabler"
80+
/>
6481
</a>
6582
</li>
6683
<li className="list-inline-item">

‎frontend/src/components/NavMenu.tsx

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22

33
import { Navigation } from "components";
4+
import { intl } from "locale";
45
import {
56
Book,
67
DeviceDesktop,
@@ -18,37 +19,58 @@ function NavMenu() {
1819
className="mb-3"
1920
items={[
2021
{
21-
title: "Home",
22+
title: intl.formatMessage({
23+
id: "dashboard.title",
24+
defaultMessage: "Dashboard",
25+
}),
2226
icon: <Home />,
2327
to: "/",
2428
},
2529
{
26-
title: "Hosts",
30+
title: intl.formatMessage({
31+
id: "hosts.title",
32+
defaultMessage: "Hosts",
33+
}),
2734
icon: <DeviceDesktop />,
2835
to: "/hosts",
2936
},
3037
{
31-
title: "Access Lists",
38+
title: intl.formatMessage({
39+
id: "accesslists.title",
40+
defaultMessage: "Access Lists",
41+
}),
3242
icon: <Lock />,
3343
to: "/access-lists",
3444
},
3545
{
36-
title: "Certificates",
46+
title: intl.formatMessage({
47+
id: "certificates.title",
48+
defaultMessage: "Certificates",
49+
}),
3750
icon: <Shield />,
3851
to: "/certificates",
3952
},
4053
{
41-
title: "Users",
54+
title: intl.formatMessage({
55+
id: "users.title",
56+
defaultMessage: "Users",
57+
}),
4258
icon: <Users />,
4359
to: "/users",
4460
},
4561
{
46-
title: "Audit Log",
62+
title: intl.formatMessage({
63+
id: "auditlog.title",
64+
defaultMessage: "Audit Log",
65+
}),
4766
icon: <Book />,
4867
to: "/audit-log",
4968
},
5069
{
51-
title: "Settings",
70+
title: intl.formatMessage({
71+
id: "settings.title",
72+
defaultMessage: "Settings",
73+
}),
5274
icon: <Settings />,
5375
to: "/settings",
5476
},

‎frontend/src/components/SiteWrapper.tsx

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import React, { ReactNode } from "react";
33
import { Footer } from "components";
44
import { Avatar, Dropdown, Navigation } from "components";
55
import { useAuthState, useUserState } from "context";
6+
import { intl } from "locale";
7+
import { FormattedMessage } from "react-intl";
68
import styled from "styled-components";
79

810
import { NavMenu } from "./NavMenu";
@@ -33,13 +35,26 @@ function SiteWrapper({ children }: Props) {
3335
avatar={<Avatar size="sm" url={user.gravatarUrl} />}
3436
profileName={user.nickname}
3537
profileSubName={
36-
user.roles.includes("admin") ? "Administrator" : "Standard User"
38+
user.roles.includes("admin")
39+
? intl.formatMessage({
40+
id: "users.admin",
41+
defaultMessage: "Administrator",
42+
})
43+
: intl.formatMessage({
44+
id: "users.standard",
45+
defaultMessage: "Standard User",
46+
})
3747
}
3848
profileItems={[
39-
<Dropdown.Item key="m1-2">Profile settings</Dropdown.Item>,
49+
<Dropdown.Item key="m1-2">
50+
<FormattedMessage
51+
id="profile.title"
52+
defaultMessage="Profile settings"
53+
/>
54+
</Dropdown.Item>,
4055
<Dropdown.Item divider key="m1-4" />,
4156
<Dropdown.Item key="m1-6" onClick={logout}>
42-
Logout
57+
<FormattedMessage id="profile.logout" defaultMessage="Logout" />
4358
</Dropdown.Item>,
4459
]}
4560
/>

‎frontend/src/components/Table/Table.tsx

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ export interface TablePagination {
2929
}
3030

3131
export interface TableProps {
32-
/**
33-
*
34-
*/
35-
title?: string;
3632
/**
3733
* Columns
3834
*/
@@ -50,13 +46,7 @@ export interface TableProps {
5046
*/
5147
sortBy?: string;
5248
}
53-
export const Table = ({
54-
title,
55-
columns,
56-
data,
57-
pagination,
58-
sortBy,
59-
}: TableProps) => {
49+
export const Table = ({ columns, data, pagination, sortBy }: TableProps) => {
6050
const getFormatter = (given: any) => {
6151
if (typeof given === "string") {
6252
switch (given) {
@@ -177,11 +167,6 @@ export const Table = ({
177167

178168
return (
179169
<>
180-
{title ? (
181-
<div className="card-header">
182-
<h3 className="card-title">{title}</h3>
183-
</div>
184-
) : null}
185170
<div className="table-responsive">
186171
<table className="table card-table table-vcenter text-nowrap datatable">
187172
<thead>

‎frontend/src/locale/IntlProvider.tsx

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,6 @@ import { createIntl, createIntlCache } from "react-intl";
22

33
import langEn from "./lang/en.json";
44

5-
// todo
6-
/*
7-
const messages: Record<string, Record<string, string>> = {
8-
"en-US": { selectalanguage: "Select a language" },
9-
"pt-BR": { selectalanguage: "Selecione uma linguagem" },
10-
};
11-
*/
12-
// end todo
13-
145
const loadMessages = (locale: string) => {
156
switch (locale) {
167
/*
@@ -27,11 +18,8 @@ export const cache = createIntlCache();
2718

2819
const initialMessages = loadMessages(initialLocale);
2920

30-
console.log("MESSAGES:", initialMessages);
3121
export const intl = createIntl(
3222
// @ts-ignore messages file typings are correct
3323
{ locale: initialLocale, messages: initialMessages },
3424
cache,
3525
);
36-
37-
export const fmt = intl.formatMessage;

‎frontend/src/locale/src/en.json

Lines changed: 78 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,80 @@
11
{
2-
"setup.create": {
3-
"defaultMessage": "Create Account"
4-
},
5-
"setup.title": {
6-
"defaultMessage": "Create your first Account"
7-
},
8-
"user.email": {
9-
"defaultMessage": "Email"
10-
},
11-
"user.name": {
12-
"defaultMessage": "Name"
13-
},
14-
"user.nickname": {
15-
"defaultMessage": "Nickname"
16-
},
17-
"user.password": {
18-
"defaultMessage": "Password"
19-
}
2+
"accesslists.title": {
3+
"defaultMessage": "Access Lists"
4+
},
5+
"auditlog.title": {
6+
"defaultMessage": "Audit Log"
7+
},
8+
"certificates.title": {
9+
"defaultMessage": "Certificates"
10+
},
11+
"column.description": {
12+
"defaultMessage": "Description"
13+
},
14+
"column.id": {
15+
"defaultMessage": "ID"
16+
},
17+
"column.name": {
18+
"defaultMessage": "Name"
19+
},
20+
"dashboard.title": {
21+
"defaultMessage": "Dashboard"
22+
},
23+
"footer.changelog": {
24+
"defaultMessage": "Change Log"
25+
},
26+
"footer.copyright": {
27+
"defaultMessage": "Copyright © {year} jc21.com."
28+
},
29+
"footer.github": {
30+
"defaultMessage": "Github"
31+
},
32+
"footer.theme": {
33+
"defaultMessage": "Theme by Tabler"
34+
},
35+
"footer.userguide": {
36+
"defaultMessage": "User Guide"
37+
},
38+
"hosts.title": {
39+
"defaultMessage": "Hosts"
40+
},
41+
"login.login": {
42+
"defaultMessage": "Sign in"
43+
},
44+
"profile.logout": {
45+
"defaultMessage": "Logout"
46+
},
47+
"profile.title": {
48+
"defaultMessage": "Profile settings"
49+
},
50+
"settings.title": {
51+
"defaultMessage": "Settings"
52+
},
53+
"setup.create": {
54+
"defaultMessage": "Create Account"
55+
},
56+
"setup.title": {
57+
"defaultMessage": "Create your first Account"
58+
},
59+
"user.email": {
60+
"defaultMessage": "Email"
61+
},
62+
"user.name": {
63+
"defaultMessage": "Name"
64+
},
65+
"user.nickname": {
66+
"defaultMessage": "Nickname"
67+
},
68+
"user.password": {
69+
"defaultMessage": "Password"
70+
},
71+
"users.admin": {
72+
"defaultMessage": "Administrator"
73+
},
74+
"users.standard": {
75+
"defaultMessage": "Standard User"
76+
},
77+
"users.title": {
78+
"defaultMessage": "Users"
79+
}
2080
}

‎frontend/src/pages/AccessLists/index.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22

3+
import { FormattedMessage } from "react-intl";
34
import styled from "styled-components";
45

56
const Root = styled.div`
@@ -8,7 +9,21 @@ const Root = styled.div`
89
`;
910

1011
function AccessLists() {
11-
return <Root>AccessLists</Root>;
12+
return (
13+
<Root>
14+
<div className="card">
15+
<div className="card-status-top bg-cyan" />
16+
<div className="card-header">
17+
<h3 className="card-title">
18+
<FormattedMessage
19+
id="accesslists.title"
20+
defaultMessage="Access Lists"
21+
/>
22+
</h3>
23+
</div>
24+
</div>
25+
</Root>
26+
);
1227
}
1328

1429
export default AccessLists;

0 commit comments

Comments
 (0)