Improve support for use of i18next; rely on browser caching to keep things simple

resources/lang/en/activity.php

@@ -8,6 +8,8 @@
  */
 return [
     'auth' => [
+        'fail' => 'Failed login attempt',
+        'success' => 'Successfully logged in',
         'password-reset' => 'Reset account password',
         'reset-password' => 'Sending password reset email',
         'checkpoint' => 'Prompting for second factor authentication',

resources/scripts/i18n.ts

@@ -1,32 +1,35 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import LocalStorageBackend from 'i18next-localstorage-backend';
-import XHR from 'i18next-xhr-backend';
-import Backend from 'i18next-chained-backend';
+import I18NextHttpBackend, { BackendOptions } from 'i18next-http-backend';
+import I18NextMultiloadBackendAdapter from 'i18next-multiload-backend-adapter';
+
+// If we're using HMR use a unique hash per page reload so that we're always
+// doing cache busting. Otherwise just use the builder provided hash value in
+// the URL to allow cache busting to occur whenever the front-end is rebuilt.
+const hash = module.hot ? Date.now().toString(16) : process.env.WEBPACK_BUILD_HASH;
 
 i18n
-    .use(Backend)
+    .use(I18NextMultiloadBackendAdapter)
     .use(initReactI18next)
     .init({
-        debug: process.env.NODE_ENV !== 'production',
+        debug: process.env.DEBUG === 'true',
         lng: 'en',
         fallbackLng: 'en',
         keySeparator: '.',
         backend: {
-            backends: [
-                LocalStorageBackend,
-                XHR,
-            ],
-            backendOptions: [ {
-                prefix: 'pterodactyl_lng__',
-                expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days, in milliseconds
-                store: window.localStorage,
-            }, {
-                loadPath: '/locales/{{lng}}/{{ns}}.json',
-            } ],
+            backend: I18NextHttpBackend,
+            backendOption: {
+                loadPath: `/locales/locale.json?locale={{lng}}&namespace={{ns}}&hash=${hash}`,
+                allowMultiLoading: true,
+            } as BackendOptions,
+        } as Record<string, any>,
+        interpolation: {
+            // Per i18n-react documentation: this is not needed since React is already
+            // handling escapes for us.
+            escapeValue: false,
         },
     });
 
-// i18n.loadNamespaces(['validation']);
+i18n.loadNamespaces([ 'validation' ]).catch(console.error);
 
 export default i18n;

resources/scripts/index.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from '@/components/App';
-import './i18n';
 import { setConfig } from 'react-hot-loader';
 
+// Enable language support.
+import './i18n';
+
 // Prevents page reloads while making component changes which
 // also avoids triggering constant loading indicators all over
 // the place in development.

resources/scripts/routers/DashboardRouter.tsx

@@ -10,6 +10,7 @@ import SubNavigation from '@/components/elements/SubNavigation';
 import AccountSSHContainer from '@/components/dashboard/ssh/AccountSSHContainer';
 import { useLocation } from 'react-router';
 import ActivityLogContainer from '@/components/dashboard/activity/ActivityLogContainer';
+import Spinner from '@/components/elements/Spinner';
 
 export default () => {
     const location = useLocation();
@@ -28,26 +29,28 @@ export default () => {
                 </SubNavigation>
             }
             <TransitionRouter>
-                <Switch location={location}>
-                    <Route path={'/'} exact>
-                        <DashboardContainer/>
-                    </Route>
-                    <Route path={'/account'} exact>
-                        <AccountOverviewContainer/>
-                    </Route>
-                    <Route path={'/account/api'} exact>
-                        <AccountApiContainer/>
-                    </Route>
-                    <Route path={'/account/ssh'} exact>
-                        <AccountSSHContainer/>
-                    </Route>
-                    <Route path={'/account/activity'} exact>
-                        <ActivityLogContainer />
-                    </Route>
-                    <Route path={'*'}>
-                        <NotFound/>
-                    </Route>
-                </Switch>
+                <React.Suspense fallback={<Spinner centered/>}>
+                    <Switch location={location}>
+                        <Route path={'/'} exact>
+                            <DashboardContainer/>
+                        </Route>
+                        <Route path={'/account'} exact>
+                            <AccountOverviewContainer/>
+                        </Route>
+                        <Route path={'/account/api'} exact>
+                            <AccountApiContainer/>
+                        </Route>
+                        <Route path={'/account/ssh'} exact>
+                            <AccountSSHContainer/>
+                        </Route>
+                        <Route path={'/account/activity'} exact>
+                            <ActivityLogContainer/>
+                        </Route>
+                        <Route path={'*'}>
+                            <NotFound/>
+                        </Route>
+                    </Switch>
+                </React.Suspense>
             </TransitionRouter>
         </>
     );