Converted over all text to i18n

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
+										<FormattedMessage
+											id="footer.userguide"
+											defaultMessage="User Guide"
+										/>
 									</a>
 								</li>
 								<li className="list-inline-item">
@@ -37,7 +41,10 @@ function Footer({ fixed }: Props) {
 										target="_blank"
 										rel="noreferrer"
 										className="link-secondary">
-										Changelog
+										<FormattedMessage
+											id="footer.changelog"
+											defaultMessage="Change Log"
+										/>
 									</a>
 								</li>
 								<li className="list-inline-item">
@@ -46,7 +53,10 @@ function Footer({ fixed }: Props) {
 										target="_blank"
 										rel="noreferrer"
 										className="link-secondary">
-										Github
+										<FormattedMessage
+											id="footer.github"
+											defaultMessage="Github"
+										/>
 									</a>
 								</li>
 							</ul>
@@ -54,13 +64,20 @@ function Footer({ fixed }: Props) {
 						<div className="col-12 col-lg-auto mt-3 mt-lg-0">
 							<ul className="list-inline list-inline-dots mb-0">
 								<li className="list-inline-item">
-									Copyright © {new Date().getFullYear()} jc21.com. Theme by{" "}
+									<FormattedMessage
+										id="footer.copyright"
+										defaultMessage="Copyright © {year} jc21.com."
+										values={{ year: new Date().getFullYear() }}
+									/>{" "}
 									<a
 										className="link-secondary"
 										href="https://preview.tabler.io/"
 										target="_blank"
 										rel="noreferrer">
-										Tabler
+										<FormattedMessage
+											id="footer.theme"
+											defaultMessage="Theme by Tabler"
+										/>
 									</a>
 								</li>
 								<li className="list-inline-item">

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: <Home />,
 					to: "/",
 				},
 				{
-					title: "Hosts",
+					title: intl.formatMessage({
+						id: "hosts.title",
+						defaultMessage: "Hosts",
+					}),
 					icon: <DeviceDesktop />,
 					to: "/hosts",
 				},
 				{
-					title: "Access Lists",
+					title: intl.formatMessage({
+						id: "accesslists.title",
+						defaultMessage: "Access Lists",
+					}),
 					icon: <Lock />,
 					to: "/access-lists",
 				},
 				{
-					title: "Certificates",
+					title: intl.formatMessage({
+						id: "certificates.title",
+						defaultMessage: "Certificates",
+					}),
 					icon: <Shield />,
 					to: "/certificates",
 				},
 				{
-					title: "Users",
+					title: intl.formatMessage({
+						id: "users.title",
+						defaultMessage: "Users",
+					}),
 					icon: <Users />,
 					to: "/users",
 				},
 				{
-					title: "Audit Log",
+					title: intl.formatMessage({
+						id: "auditlog.title",
+						defaultMessage: "Audit Log",
+					}),
 					icon: <Book />,
 					to: "/audit-log",
 				},
 				{
-					title: "Settings",
+					title: intl.formatMessage({
+						id: "settings.title",
+						defaultMessage: "Settings",
+					}),
 					icon: <Settings />,
 					to: "/settings",
 				},

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={<Avatar size="sm" url={user.gravatarUrl} />}
 				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={[
-					<Dropdown.Item key="m1-2">Profile settings</Dropdown.Item>,
+					<Dropdown.Item key="m1-2">
+						<FormattedMessage
+							id="profile.title"
+							defaultMessage="Profile settings"
+						/>
+					</Dropdown.Item>,
 					<Dropdown.Item divider key="m1-4" />,
 					<Dropdown.Item key="m1-6" onClick={logout}>
-						Logout
+						<FormattedMessage id="profile.logout" defaultMessage="Logout" />
 					</Dropdown.Item>,
 				]}
 			/>

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 ? (
-				<div className="card-header">
-					<h3 className="card-title">{title}</h3>
-				</div>
-			) : null}
 			<div className="table-responsive">
 				<table className="table card-table table-vcenter text-nowrap datatable">
 					<thead>