added locales

package.json

@@ -16,6 +16,7 @@
     "i18next": "^22.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.0.0",
     "react-scripts": "5.0.1",
     "scss": "^0.2.4",
     "typescript": "^4.4.2",

src/i18n/index.ts

@@ -0,0 +1,28 @@
+import { format as formatDate } from 'date-fns';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import enTranslations from './resources/en';
+
+i18n.use(initReactI18next).init({
+    lng: 'en',
+    fallbackLng: 'en',
+    debug: false,
+    supportedLngs: ['en'],
+    resources: {
+        en: {
+            translation: enTranslations,
+        },
+    },
+    interpolation: {
+        format: (value, format) => {
+            if (value instanceof Date && typeof format === 'string') {
+                return formatDate(value, format);
+            }
+
+            return value;
+        },
+    },
+});
+
+export default i18n;

src/i18n/resources/en.ts

@@ -0,0 +1,93 @@
+export default {
+    app: {
+        title: 'React template'
+    },
+    refresh: {
+        title: 'Are you active?',
+        cta:
+            "You were registered as not active, please confirm that you are active in the next minute, if you don't you will be logged out.",
+    },
+    common: {
+        close: 'Close',
+        trademark: 'TM',
+        search: 'Search',
+        error: 'Error',
+        continue: 'Continue',
+        labelUsername: 'Username',
+        labelPassword: 'Password',
+        next: 'Next',
+        nextPage: 'Next page',
+        previousPage: 'Previous page',
+        back: 'Back',
+        goBack: 'Go Back',
+        ok: 'Ok',
+        done: 'Done',
+        confirm: 'Confirm',
+        printDownload: 'Print/Download',
+        cancel: 'Cancel',
+        remove: 'Remove',
+        invite: 'Invite',
+        save: 'Save',
+        complete: 'Complete',
+        download: 'Download',
+        yes: 'Yes',
+        no: 'No',
+        to: 'to',
+        select: 'Select...',
+        none: 'None',
+        date: {
+            range: '{{start}} to {{end}}',
+        },
+    },
+    login: {
+        welcome: 'React template',
+        dontHaveAccount: "Don't have an account? ",
+        emailFormat: 'Invalid email address format.',
+        emailRequired: 'An email or username is required.',
+        noUsers: 'There are no users with that email.',
+        passwordStrength: 'Your password is {{strength}}.',
+        passwordLength: 'Your password contain between 8 and 50 characters.',
+        signUpRecommendation: 'Sign up',
+        email: 'Please enter your email address or username to log in:',
+        logInTitle: 'Log In',
+        logIn: 'Log In',
+        signUp: 'Sign Up',
+        usernameRequired: 'Username is required.',
+        passwordRequired: 'A Password is required.',
+        forgotYourPassword: 'Forgot your password?',
+        forgotPasswordEmail: 'Email',
+        useDifferentEmail: 'Use different email address or username',
+    },
+    password: {
+        weak: 'weak',
+        average: 'average',
+        good: 'good',
+        strong: 'strong',
+    },
+    forgotPassword: {
+        title: 'Forgot Password',
+        label: 'Send email',
+        emailRequired: 'An email is required.',
+        emailFormat: 'Invalid email address format.',
+        forgotPassword: {
+            title: 'Forgot Password',
+            subtitle:
+                'Please answer the security question to gain access to your account:',
+            label: 'Reset Password',
+        },
+    },
+    notFound: {
+        text: "We're sorry but we couldn't find the page you were looking for.",
+        goBack: 'Go back to homepage',
+    },
+    errorPage: {
+        text:
+            "We're sorry, an internal server error came up. Please be patient or try again later.",
+        goBack: 'Go back to homepage',
+        logout: 'Logout',
+    },
+    apiErrors: {
+        ClientIpAddressIsNullOrEmpty: "Client Ip address is null or empty",
+        UsernameDoesNotExist: "Username does not exist"
+    }
+};

yarn.lock

@@ -1033,7 +1033,7 @@
     core-js-pure "^3.25.1"
     regenerator-runtime "^0.13.10"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.20.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
   integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==
@@ -4810,6 +4810,13 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 html-webpack-plugin@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
@@ -7459,6 +7466,14 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-i18next@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.0.0.tgz#634015a2c035779c5736ae4c2e5c34c1659753b1"
+  integrity sha512-/O7N6aIEAl1FaWZBNvhdIo9itvF/MO/nRKr9pYqRc9LhuC1u21SlfwpiYQqvaeNSEW3g3qUXLREOWMt+gxrWbg==
+  dependencies:
+    "@babel/runtime" "^7.14.5"
+    html-parse-stringify "^3.0.1"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8722,6 +8737,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"