feat(web): i18n local storage detector (#3968)

This adds a local storage detector to the language detector. It's a copy of the official localStorage detector without the ability to set the value. The advantage here is the official localStorage detector always sets the localStorage lookup, which means the most appropriate detected language will be set. If newer languages more appropriate appear this would represent a bad UX.

web/src/i18n/detectors/localStorageCustom.ts

@@ -0,0 +1,41 @@
+import { CustomDetector, DetectorOptions } from "i18next-browser-languagedetector";
+
+let hasLocalStorageSupport: null | boolean = null;
+const testKey = "authelia.test";
+const testValue = "foo";
+
+const localStorageAvailable = () => {
+    if (hasLocalStorageSupport !== null) return hasLocalStorageSupport;
+
+    if (typeof window !== "undefined" && window.localStorage !== null) {
+        hasLocalStorageSupport = true;
+
+        try {
+            window.localStorage.setItem(testKey, testValue);
+            window.localStorage.removeItem(testKey);
+        } catch (e) {
+            hasLocalStorageSupport = false;
+        }
+    }
+
+    return hasLocalStorageSupport;
+};
+
+const LocalStorageCustomDetector: CustomDetector = {
+    name: "localStorageCustom",
+
+    lookup(options: DetectorOptions): string | undefined {
+        let found;
+
+        if (options.lookupLocalStorage && localStorageAvailable()) {
+            const lng = window.localStorage.getItem(options.lookupLocalStorage);
+            if (lng && lng !== "") {
+                found = lng;
+            }
+        }
+
+        return found;
+    },
+};
+
+export default LocalStorageCustomDetector;

web/src/i18n/index.ts

@@ -9,17 +9,23 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
 
+import LocalStorageCustomDetector from "@i18n/detectors/localStorageCustom";
 import { getBasePath } from "@utils/BasePath";
 
 const basePath = getBasePath();
 
+const CustomLanguageDetector = new LanguageDetector();
+
+CustomLanguageDetector.addDetector(LocalStorageCustomDetector);
+
 i18n.use(Backend)
-    .use(LanguageDetector)
+    .use(CustomLanguageDetector)
     .use(initReactI18next)
     .init({
         detection: {
-            order: ["querystring", "navigator"],
+            order: ["querystring", "localStorageCustom", "navigator"],
             lookupQuerystring: "lng",
+            lookupLocalStorage: "lng",
         },
         backend: {
             loadPath: basePath + "/locales/{{lng}}/{{ns}}.json",