Simple localization support

5 files changed, 151 insertions, 12 deletions

diff --git a/modern/craco.config.js b/modern/craco.config.js
new file mode 100644
index 00000000..3e5d98e9
--- /dev/null
+++ b/modern/craco.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  webpack: {
+    configure: webpackConfig => {
+      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
+        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
+      );
+
+      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
+      return webpackConfig;
+    }
+  }
+};
diff --git a/modern/package.json b/modern/package.json
index 90b03d3f..02b080a4 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^5.6.4",
     "@material-ui/core": "^4.9.7",
     "@material-ui/icons": "^4.9.1",
     "@reduxjs/toolkit": "^1.2.5",
@@ -19,10 +20,9 @@
     "typeface-roboto": "0.0.75"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
   },
   "browserslist": {
     "production": [
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index c094fa3b..8104aa34 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -1,3 +1,4 @@
+import t from './common/localization'
 import React, { Component } from 'react';
 import Button from '@material-ui/core/Button';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -95,7 +96,7 @@ class LoginPage extends Component {
           <form onSubmit={this.handleLogin}>
 
             <FormControl margin="normal" required fullWidth error={failed}>
-              <InputLabel htmlFor="email">Email</InputLabel>
+              <InputLabel htmlFor="email">{t('userEmail')}</InputLabel>
               <Input
                 id="email"
                 value={email}
@@ -106,7 +107,7 @@ class LoginPage extends Component {
             </FormControl>
 
             <FormControl margin="normal" required fullWidth>
-              <InputLabel htmlFor="password">Password</InputLabel>
+              <InputLabel htmlFor="password">{t('userPassword')}</InputLabel>
               <Input
                 id="password"
                 type="password"
@@ -123,7 +124,7 @@ class LoginPage extends Component {
                 disabled
                 className={classes.button}
                 onClick={this.handleRegister}>
-                Register
+                {t('loginRegister')}
               </Button>
 
               <Button
@@ -132,7 +133,7 @@ class LoginPage extends Component {
                 color="primary"
                 disabled={!email || !password}
                 className={classes.button}>
-                Login
+                {t('loginLogin')}
               </Button>
 
             </div>
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 6e2e4d6d..41382b0b 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,3 +1,4 @@
+import t from './common/localization'
 import React, { Component, Fragment } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -80,7 +81,7 @@ class MainToobar extends Component {
             <Typography variant="h6" color="inherit" className={classes.flex}>
               Traccar
             </Typography>
-            <Button color="inherit" onClick={this.handleLogout}>Logout</Button>
+            <Button color="inherit" onClick={this.handleLogout}>{t('loginLogout')}</Button>
           </Toolbar>
         </AppBar>
         <Drawer open={this.state.drawer} onClose={this.closeDrawer}>
@@ -95,13 +96,13 @@ class MainToobar extends Component {
                 <ListItemIcon>
                   <DashboardIcon />
                 </ListItemIcon>
-                <ListItemText primary="Dashboard" />
+                <ListItemText primary={t('mapTitle')} />
               </ListItem>
               <ListItem button disabled>
                 <ListItemIcon>
                   <BarChartIcon />
                 </ListItemIcon>
-                <ListItemText primary="Reports" />
+                <ListItemText primary={t('reportTitle')} />
               </ListItem>
             </List>
             <Divider />
@@ -110,7 +111,7 @@ class MainToobar extends Component {
                 <ListItemIcon>
                   <SettingsIcon />
                 </ListItemIcon>
-                <ListItemText primary="Settings" />
+                <ListItemText primary={t('settingsTitle')} />
               </ListItem>
             </List>
           </div>
diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
new file mode 100644
index 00000000..eb8fc1d4
--- /dev/null
+++ b/modern/src/common/localization.js
@@ -0,0 +1,125 @@
+import ar from '../../../web/l10n/ar.json';
+import az from '../../../web/l10n/az.json';
+import bg from '../../../web/l10n/bg.json';
+import bn from '../../../web/l10n/bn.json';
+import cs from '../../../web/l10n/cs.json';
+import da from '../../../web/l10n/da.json';
+import de from '../../../web/l10n/de.json';
+import el from '../../../web/l10n/el.json';
+import en from '../../../web/l10n/en.json';
+import es from '../../../web/l10n/es.json';
+import fa from '../../../web/l10n/fa.json';
+import fi from '../../../web/l10n/fi.json';
+import fr from '../../../web/l10n/fr.json';
+import he from '../../../web/l10n/he.json';
+import hi from '../../../web/l10n/hi.json';
+import hr from '../../../web/l10n/hr.json';
+import hu from '../../../web/l10n/hu.json';
+import id from '../../../web/l10n/id.json';
+import it from '../../../web/l10n/it.json';
+import ja from '../../../web/l10n/ja.json';
+import ka from '../../../web/l10n/ka.json';
+import kk from '../../../web/l10n/kk.json';
+import km from '../../../web/l10n/km.json';
+import ko from '../../../web/l10n/ko.json';
+import lo from '../../../web/l10n/lo.json';
+import lt from '../../../web/l10n/lt.json';
+import lv from '../../../web/l10n/lv.json';
+import ml from '../../../web/l10n/ml.json';
+import ms from '../../../web/l10n/ms.json';
+import nb from '../../../web/l10n/nb.json';
+import ne from '../../../web/l10n/ne.json';
+import nl from '../../../web/l10n/nl.json';
+import nn from '../../../web/l10n/nn.json';
+import pl from '../../../web/l10n/pl.json';
+import pt from '../../../web/l10n/pt.json';
+import pt_BR from '../../../web/l10n/pt_BR.json';
+import ro from '../../../web/l10n/ro.json';
+import ru from '../../../web/l10n/ru.json';
+import si from '../../../web/l10n/si.json';
+import sk from '../../../web/l10n/sk.json';
+import sl from '../../../web/l10n/sl.json';
+import sq from '../../../web/l10n/sq.json';
+import sr from '../../../web/l10n/sr.json';
+import sv from '../../../web/l10n/sv.json';
+import ta from '../../../web/l10n/ta.json';
+import th from '../../../web/l10n/th.json';
+import tr from '../../../web/l10n/tr.json';
+import uk from '../../../web/l10n/uk.json';
+import uz from '../../../web/l10n/uz.json';
+import vi from '../../../web/l10n/vi.json';
+import zh from '../../../web/l10n/zh.json';
+import zh_TW from '../../../web/l10n/zh_TW.json';
+
+const supportedLanguages = {
+    'ar': { data: ar, name: 'العربية' },
+    'az': { data: az, name: 'Azərbaycanca' },
+    'bg': { data: bg, name: 'Български' },
+    'bn': { data: bn, name: 'বাংলা' },
+    'cs': { data: cs, name: 'Čeština' },
+    'de': { data: de, name: 'Deutsch' },
+    'da': { data: da, name: 'Dansk' },
+    'el': { data: el, name: 'Ελληνικά' },
+    'en': { data: en, name: 'English' },
+    'es': { data: es, name: 'Español' },
+    'fa': { data: fa, name: 'فارسی' },
+    'fi': { data: fi, name: 'Suomi' },
+    'fr': { data: fr, name: 'Français' },
+    'he': { data: he, name: 'עברית' },
+    'hi': { data: hi, name: 'हिन्दी' },
+    'hr': { data: hr, name: 'Hrvatski' },
+    'hu': { data: hu, name: 'Magyar' },
+    'id': { data: id, name: 'Bahasa Indonesia' },
+    'it': { data: it, name: 'Italiano' },
+    'ja': { data: ja, name: '日本語' },
+    'ka': { data: ka, name: 'ქართული' },
+    'kk': { data: kk, name: 'Қазақша' },
+    'ko': { data: ko, name: '한국어' },
+    'km': { data: km, name: 'ភាសាខ្មែរ' },
+    'lo': { data: lo, name: 'ລາວ' },
+    'lt': { data: lt, name: 'Lietuvių' },
+    'lv': { data: lv, name: 'Latviešu' },
+    'ml': { data: ml, name: 'മലയാളം' },
+    'ms': { data: ms, name: 'بهاس ملايو' },
+    'nb': { data: nb, name: 'Norsk bokmål' },
+    'ne': { data: ne, name: 'नेपाली' },
+    'nl': { data: nl, name: 'Nederlands' },
+    'nn': { data: nn, name: 'Norsk nynorsk' },
+    'pl': { data: pl, name: 'Polski' },
+    'pt': { data: pt, name: 'Português' },
+    'pt_BR': { data: pt_BR, name: 'Português (Brasil)' },
+    'ro': { data: ro, name: 'Română' },
+    'ru': { data: ru, name: 'Русский' },
+    'si': { data: si, name: 'සිංහල' },
+    'sk': { data: sk, name: 'Slovenčina' },
+    'sl': { data: sl, name: 'Slovenščina' },
+    'sq': { data: sq, name: 'Shqipëria' },
+    'sr': { data: sr, name: 'Srpski' },
+    'sv': { data: sv, name: 'Svenska' },
+    'ta': { data: ta, name: 'தமிழ்' },
+    'th': { data: th, name: 'ไทย' },
+    'tr': { data: tr, name: 'Türkçe' },
+    'uk': { data: uk, name: 'Українська' },
+    'uz': { data: uz, name: 'Oʻzbekcha' },
+    'vi': { data: vi, name: 'Tiếng Việt' },
+    'zh': { data: zh, name: '中文' },
+    'zh_TW': { data: zh_TW, name: '中文 (Taiwan)' }
+};
+
+const languages = window.navigator.languages !== undefined ? window.navigator.languages.slice() : [];
+let language = window.navigator.userLanguage || window.navigator.language;
+languages.push(language);
+languages.push(language.substr(0, 2));
+languages.push('en');
+for (let i = 0; i < languages.length; i++) {
+    language = languages[i].replace('-', '_');
+    if (language in supportedLanguages) {
+        break;
+    }
+}
+
+const selectedLanguage = supportedLanguages[language];
+
+export default key => {
+    return selectedLanguage.data[key]
+};