From 93721ef2d8138b62cb3d26b0c4a7ef547c141ed8 Mon Sep 17 00:00:00 2001 From: Jamie Curnow Date: Mon, 26 Jul 2021 13:38:28 +1000 Subject: [PATCH] Converted over all text to i18n --- frontend/src/components/Footer.tsx | 27 +++++-- frontend/src/components/NavMenu.tsx | 36 +++++++-- frontend/src/components/SiteWrapper.tsx | 21 ++++- frontend/src/components/Table/Table.tsx | 17 +--- frontend/src/locale/IntlProvider.tsx | 12 --- frontend/src/locale/src/en.json | 96 ++++++++++++++++++----- frontend/src/pages/AccessLists/index.tsx | 17 +++- frontend/src/pages/AuditLog/index.tsx | 14 +++- frontend/src/pages/Certificates/index.tsx | 17 +++- frontend/src/pages/Dashboard/index.tsx | 14 +++- frontend/src/pages/Hosts/index.tsx | 14 +++- frontend/src/pages/Login/index.tsx | 22 ++++-- frontend/src/pages/Settings/index.tsx | 19 ++++- frontend/src/pages/Setup/index.tsx | 13 +-- frontend/src/pages/Users/index.tsx | 14 +++- 15 files changed, 273 insertions(+), 80 deletions(-) diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index 7be45df2..e409f971 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -1,6 +1,7 @@ import React from "react"; import { useHealthState } from "context"; +import { FormattedMessage } from "react-intl"; import styled from "styled-components"; const FixedFooterWrapper = styled.div` @@ -28,7 +29,10 @@ function Footer({ fixed }: Props) { target="_blank" rel="noreferrer" className="link-secondary"> - User Guide +
  • @@ -37,7 +41,10 @@ function Footer({ fixed }: Props) { target="_blank" rel="noreferrer" className="link-secondary"> - Changelog +
  • @@ -46,7 +53,10 @@ function Footer({ fixed }: Props) { target="_blank" rel="noreferrer" className="link-secondary"> - Github +
    • @@ -54,13 +64,20 @@ function Footer({ fixed }: Props) {
    • - Copyright © {new Date().getFullYear()} jc21.com. Theme by{" "} + {" "} - Tabler +
    • diff --git a/frontend/src/components/NavMenu.tsx b/frontend/src/components/NavMenu.tsx index e33ad59d..cce93fbb 100644 --- a/frontend/src/components/NavMenu.tsx +++ b/frontend/src/components/NavMenu.tsx @@ -1,6 +1,7 @@ import React from "react"; import { Navigation } from "components"; +import { intl } from "locale"; import { Book, DeviceDesktop, @@ -18,37 +19,58 @@ function NavMenu() { className="mb-3" items={[ { - title: "Home", + title: intl.formatMessage({ + id: "dashboard.title", + defaultMessage: "Dashboard", + }), icon: , to: "/", }, { - title: "Hosts", + title: intl.formatMessage({ + id: "hosts.title", + defaultMessage: "Hosts", + }), icon: , to: "/hosts", }, { - title: "Access Lists", + title: intl.formatMessage({ + id: "accesslists.title", + defaultMessage: "Access Lists", + }), icon: , to: "/access-lists", }, { - title: "Certificates", + title: intl.formatMessage({ + id: "certificates.title", + defaultMessage: "Certificates", + }), icon: , to: "/certificates", }, { - title: "Users", + title: intl.formatMessage({ + id: "users.title", + defaultMessage: "Users", + }), icon: , to: "/users", }, { - title: "Audit Log", + title: intl.formatMessage({ + id: "auditlog.title", + defaultMessage: "Audit Log", + }), icon: , to: "/audit-log", }, { - title: "Settings", + title: intl.formatMessage({ + id: "settings.title", + defaultMessage: "Settings", + }), icon: , to: "/settings", }, diff --git a/frontend/src/components/SiteWrapper.tsx b/frontend/src/components/SiteWrapper.tsx index 74317eb9..b1baf755 100644 --- a/frontend/src/components/SiteWrapper.tsx +++ b/frontend/src/components/SiteWrapper.tsx @@ -3,6 +3,8 @@ import React, { ReactNode } from "react"; import { Footer } from "components"; import { Avatar, Dropdown, Navigation } from "components"; import { useAuthState, useUserState } from "context"; +import { intl } from "locale"; +import { FormattedMessage } from "react-intl"; import styled from "styled-components"; import { NavMenu } from "./NavMenu"; @@ -33,13 +35,26 @@ function SiteWrapper({ children }: Props) { avatar={} profileName={user.nickname} profileSubName={ - user.roles.includes("admin") ? "Administrator" : "Standard User" + user.roles.includes("admin") + ? intl.formatMessage({ + id: "users.admin", + defaultMessage: "Administrator", + }) + : intl.formatMessage({ + id: "users.standard", + defaultMessage: "Standard User", + }) } profileItems={[ - Profile settings, + + + , , - Logout + , ]} /> diff --git a/frontend/src/components/Table/Table.tsx b/frontend/src/components/Table/Table.tsx index ebd88d96..88c5e2f9 100644 --- a/frontend/src/components/Table/Table.tsx +++ b/frontend/src/components/Table/Table.tsx @@ -29,10 +29,6 @@ export interface TablePagination { } export interface TableProps { - /** - * - */ - title?: string; /** * Columns */ @@ -50,13 +46,7 @@ export interface TableProps { */ sortBy?: string; } -export const Table = ({ - title, - columns, - data, - pagination, - sortBy, -}: TableProps) => { +export const Table = ({ columns, data, pagination, sortBy }: TableProps) => { const getFormatter = (given: any) => { if (typeof given === "string") { switch (given) { @@ -177,11 +167,6 @@ export const Table = ({ return ( <> - {title ? ( -
      -

      {title}

      -
      - ) : null}
      diff --git a/frontend/src/locale/IntlProvider.tsx b/frontend/src/locale/IntlProvider.tsx index 858713b1..db422e7b 100644 --- a/frontend/src/locale/IntlProvider.tsx +++ b/frontend/src/locale/IntlProvider.tsx @@ -2,15 +2,6 @@ import { createIntl, createIntlCache } from "react-intl"; import langEn from "./lang/en.json"; -// todo -/* -const messages: Record> = { - "en-US": { selectalanguage: "Select a language" }, - "pt-BR": { selectalanguage: "Selecione uma linguagem" }, -}; -*/ -// end todo - const loadMessages = (locale: string) => { switch (locale) { /* @@ -27,11 +18,8 @@ export const cache = createIntlCache(); const initialMessages = loadMessages(initialLocale); -console.log("MESSAGES:", initialMessages); export const intl = createIntl( // @ts-ignore messages file typings are correct { locale: initialLocale, messages: initialMessages }, cache, ); - -export const fmt = intl.formatMessage; diff --git a/frontend/src/locale/src/en.json b/frontend/src/locale/src/en.json index 3c898109..1bcbfac8 100644 --- a/frontend/src/locale/src/en.json +++ b/frontend/src/locale/src/en.json @@ -1,20 +1,80 @@ { - "setup.create": { - "defaultMessage": "Create Account" - }, - "setup.title": { - "defaultMessage": "Create your first Account" - }, - "user.email": { - "defaultMessage": "Email" - }, - "user.name": { - "defaultMessage": "Name" - }, - "user.nickname": { - "defaultMessage": "Nickname" - }, - "user.password": { - "defaultMessage": "Password" - } + "accesslists.title": { + "defaultMessage": "Access Lists" + }, + "auditlog.title": { + "defaultMessage": "Audit Log" + }, + "certificates.title": { + "defaultMessage": "Certificates" + }, + "column.description": { + "defaultMessage": "Description" + }, + "column.id": { + "defaultMessage": "ID" + }, + "column.name": { + "defaultMessage": "Name" + }, + "dashboard.title": { + "defaultMessage": "Dashboard" + }, + "footer.changelog": { + "defaultMessage": "Change Log" + }, + "footer.copyright": { + "defaultMessage": "Copyright © {year} jc21.com." + }, + "footer.github": { + "defaultMessage": "Github" + }, + "footer.theme": { + "defaultMessage": "Theme by Tabler" + }, + "footer.userguide": { + "defaultMessage": "User Guide" + }, + "hosts.title": { + "defaultMessage": "Hosts" + }, + "login.login": { + "defaultMessage": "Sign in" + }, + "profile.logout": { + "defaultMessage": "Logout" + }, + "profile.title": { + "defaultMessage": "Profile settings" + }, + "settings.title": { + "defaultMessage": "Settings" + }, + "setup.create": { + "defaultMessage": "Create Account" + }, + "setup.title": { + "defaultMessage": "Create your first Account" + }, + "user.email": { + "defaultMessage": "Email" + }, + "user.name": { + "defaultMessage": "Name" + }, + "user.nickname": { + "defaultMessage": "Nickname" + }, + "user.password": { + "defaultMessage": "Password" + }, + "users.admin": { + "defaultMessage": "Administrator" + }, + "users.standard": { + "defaultMessage": "Standard User" + }, + "users.title": { + "defaultMessage": "Users" + } } diff --git a/frontend/src/pages/AccessLists/index.tsx b/frontend/src/pages/AccessLists/index.tsx index 6217b1f0..c80c8bfe 100644 --- a/frontend/src/pages/AccessLists/index.tsx +++ b/frontend/src/pages/AccessLists/index.tsx @@ -1,5 +1,6 @@ import React from "react"; +import { FormattedMessage } from "react-intl"; import styled from "styled-components"; const Root = styled.div` @@ -8,7 +9,21 @@ const Root = styled.div` `; function AccessLists() { - return AccessLists; + return ( + +
      +
      +
      +

      + +

      +
      +
      + + ); } export default AccessLists; diff --git a/frontend/src/pages/AuditLog/index.tsx b/frontend/src/pages/AuditLog/index.tsx index 732bc975..5747c8f9 100644 --- a/frontend/src/pages/AuditLog/index.tsx +++ b/frontend/src/pages/AuditLog/index.tsx @@ -1,5 +1,6 @@ import React from "react"; +import { FormattedMessage } from "react-intl"; import styled from "styled-components"; const Root = styled.div` @@ -8,7 +9,18 @@ const Root = styled.div` `; function AuditLog() { - return AuditLog; + return ( + +
      +
      +
      +

      + +

      +
      +
      + + ); } export default AuditLog; diff --git a/frontend/src/pages/Certificates/index.tsx b/frontend/src/pages/Certificates/index.tsx index 1d11c2dc..90c622f0 100644 --- a/frontend/src/pages/Certificates/index.tsx +++ b/frontend/src/pages/Certificates/index.tsx @@ -1,5 +1,6 @@ import React from "react"; +import { FormattedMessage } from "react-intl"; import styled from "styled-components"; const Root = styled.div` @@ -8,7 +9,21 @@ const Root = styled.div` `; function Certificates() { - return Certificates; + return ( + +
      +
      +
      +

      + +

      +
      +
      + + ); } export default Certificates; diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx index aa530919..6f316e30 100644 --- a/frontend/src/pages/Dashboard/index.tsx +++ b/frontend/src/pages/Dashboard/index.tsx @@ -1,5 +1,6 @@ import React from "react"; +import { FormattedMessage } from "react-intl"; import styled from "styled-components"; const Root = styled.div` @@ -8,7 +9,18 @@ const Root = styled.div` `; function Dashboard() { - return Dashboard; + return ( + +
      +
      +
      +

      + +

      +
      +
      + + ); } export default Dashboard; diff --git a/frontend/src/pages/Hosts/index.tsx b/frontend/src/pages/Hosts/index.tsx index 117eff14..fda3561b 100644 --- a/frontend/src/pages/Hosts/index.tsx +++ b/frontend/src/pages/Hosts/index.tsx @@ -1,5 +1,6 @@ import React from "react"; +import { FormattedMessage } from "react-intl"; import styled from "styled-components"; const Root = styled.div` @@ -8,7 +9,18 @@ const Root = styled.div` `; function Hosts() { - return Hosts; + return ( + +
      +
      +
      +

      + +

      +
      +
      + + ); } export default Hosts; diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx index 488a3e27..51443a91 100644 --- a/frontend/src/pages/Login/index.tsx +++ b/frontend/src/pages/Login/index.tsx @@ -2,6 +2,8 @@ import React, { useEffect, useRef, useState, ChangeEvent } from "react"; import { Alert, Button } from "components"; import { useAuthState } from "context"; +import { intl } from "locale"; +import { FormattedMessage } from "react-intl"; import logo from "../../img/logo-text-vertical-grey.png"; @@ -50,7 +52,9 @@ function Login() {
      {errorMessage ? {errorMessage} : null}
      - +
      - +
      diff --git a/frontend/src/pages/Settings/index.tsx b/frontend/src/pages/Settings/index.tsx index 14aaeaa1..9ab1c83c 100644 --- a/frontend/src/pages/Settings/index.tsx +++ b/frontend/src/pages/Settings/index.tsx @@ -3,6 +3,8 @@ import React, { useState, useEffect, useCallback } from "react"; import { SettingsResponse, requestSettings } from "api/npm"; import { Table } from "components"; import { SuspenseLoader } from "components"; +import { intl } from "locale"; +import { FormattedMessage } from "react-intl"; import { useInterval } from "rooks"; import styled from "styled-components"; @@ -33,13 +35,20 @@ function Settings() { const cols = [ { name: "id", - title: "ID", + title: intl.formatMessage({ id: "column.id", defaultMessage: "ID" }), formatter: "id", className: "w-1", }, { name: "name", - title: "Name", + title: intl.formatMessage({ id: "column.name", defaultMessage: "Name" }), + }, + { + name: "description", + title: intl.formatMessage({ + id: "column.description", + defaultMessage: "Description", + }), }, ]; @@ -48,8 +57,12 @@ function Settings() {
      +
      +

      + +

      +
      @@ -122,7 +125,7 @@ function Setup() { name="nickname" value={formData.nickname} disabled={loading} - placeholder={fmt({ + placeholder={intl.formatMessage({ id: "user.nickname", defaultMessage: "Nickname", })} @@ -140,7 +143,7 @@ function Setup() { name="email" value={formData.email} disabled={loading} - placeholder={fmt({ + placeholder={intl.formatMessage({ id: "user.email", defaultMessage: "Email", })} @@ -162,7 +165,7 @@ function Setup() { name="password" value={formData.password} disabled={loading} - placeholder={fmt({ + placeholder={intl.formatMessage({ id: "user.password", defaultMessage: "Password", })} diff --git a/frontend/src/pages/Users/index.tsx b/frontend/src/pages/Users/index.tsx index 565be324..b6be3f16 100644 --- a/frontend/src/pages/Users/index.tsx +++ b/frontend/src/pages/Users/index.tsx @@ -1,5 +1,6 @@ import React from "react"; +import { FormattedMessage } from "react-intl"; import styled from "styled-components"; const Root = styled.div` @@ -8,7 +9,18 @@ const Root = styled.div` `; function Users() { - return Users; + return ( + +
      +
      +
      +

      + +

      +
      +
      + + ); } export default Users;