feat: Add AUTO option, no lang is selected and web-eid-app uses language from host

WE2-1110

Signed-off-by: Sven Mitt <[email protected]>

Author: svenzik

example/src/main/resources/static/js/index.js

@@ -22,44 +22,109 @@
 
 "use strict";
 
-const languageUi = {
+const NO_LANGUAGE_SELECTED = { lang: "auto", display: "AUTO", name: "Auto" };
+
+const SUPPORTED_LANGUAGES = [
+  { lang: "et", display: "ET", name: "Eesti" },
+  { lang: "en", display: "EN", name: "English" },
+  { lang: "ru", display: "RU", name: "Русский" },
+  { lang: "fi", display: "FI", name: "Suomi" },
+  { lang: "hr", display: "HR", name: "Hrvatska" },
+  { lang: "de", display: "DE", name: "Deutsch" },
+  { lang: "fr", display: "FR", name: "Française" },
+  { lang: "nl", display: "NL", name: "Nederlands" },
+  { lang: "cs", display: "CS", name: "Čeština" },
+  { lang: "sk", display: "SK", name: "Slovenština" },
+  NO_LANGUAGE_SELECTED
+];
+
+const languageComponent = {
   selectedLang: document.querySelector("#selected-lang"),
   languageButton: document.querySelector("#language-button"),
   languageMenu: document.querySelector("#language-menu"),
-  languageOptions: document.querySelectorAll(".language-option")
+  languageGrid: document.querySelector(".language-grid"),
+  languageOptions: () => document.querySelectorAll(".language-option")
 };
 
-export function setupLanguageSelection(currentLang, onLangChange) {
-  const selectedOption = Array.from(languageUi.languageOptions)
-    .find(option => option.dataset.lang === currentLang);
+/**
+ * Reads the `lang` query parameter from the current URL and validates it.
+ *
+ * - Returns the language code (e.g. "en", "et") if present and included in SUPPORTED_LANGUAGES.
+ * - Returns `null` if the parameter is missing, empty, or not in the supported list.
+ *
+ * This ensures that only recognized languages are passed to the app. If `null`
+ * is returned, the Web eID application will fall back to the OS default locale.
+ */
+export function getValidatedLangFromUrl() {
+  const lang = new URLSearchParams(window.location.search).get("lang");
+  if (!lang) {
+    return null;
+  }
+  const normalizedLang = lang.trim().toLowerCase();
+  const language = SUPPORTED_LANGUAGES.find(lang => lang.lang === normalizedLang);
+  return language ? language.lang : null;
+}
+
+/**
+ * Creates a language selections in UI component
+ *
+ * @param lang Language to be selected in component, example en
+ * @param onLangChange Action to be executed when language is changed
+ */
+export function setupLanguageSelection(lang, onLangChange) {
+  const language = SUPPORTED_LANGUAGES.find(supportedLanguage => supportedLanguage.lang === lang) ?? NO_LANGUAGE_SELECTED;
+
+  SUPPORTED_LANGUAGES.forEach(supportedLanguage => {
+    if (supportedLanguage === NO_LANGUAGE_SELECTED) {
+      return;
+    }
+
+    const button = document.createElement("button");
+    button.className = "language-option";
+    button.textContent = supportedLanguage.name;
+
+    if (supportedLanguage === language) {
+      button.classList.add("selected");
+      setSelectedLanguage(supportedLanguage);
+    }
 
-  languageUi.selectedLang.textContent = selectedOption ? selectedOption.dataset.display : "EN";
+    button.addEventListener("click", () => {
+      languageComponent.languageOptions().forEach(o => o.classList.remove("selected"));
+      button.classList.add("selected");
 
-  languageUi.languageOptions.forEach(option =>
-    option.classList.toggle('selected', option.dataset.lang === currentLang)
-  );
+      setSelectedLanguage(supportedLanguage);
+      hideLanguageSelectionMenu();
 
-  languageUi.languageButton.onclick = e => {
+      onLangChange(supportedLanguage.lang);
+    });
+
+    languageComponent.languageGrid.appendChild(button);
+  });
+
+  setSelectedLanguage(language);
+
+  languageComponent.languageButton.onclick = e => {
     e.stopPropagation();
-    languageUi.languageMenu.classList.toggle('show');
-    e.target.classList.toggle('active');
+    showLanguageSelectionMenu();
   };
 
   document.onclick = () => {
-    languageUi.languageMenu.classList.remove('show');
-    languageUi.languageButton.classList.remove('active');
+    hideLanguageSelectionMenu();
   };
 
-  languageUi.languageMenu.onclick = e => e.stopPropagation();
-
-  languageUi.languageOptions.forEach(option => {
-    option.onclick = () => {
-      onLangChange(option.dataset.lang);
-      languageUi.selectedLang.textContent = option.dataset.display;
-      languageUi.languageOptions.forEach(o => o.classList.remove('selected'));
-      option.classList.add('selected');
-      languageUi.languageMenu.classList.remove('show');
-      languageUi.languageButton.classList.remove('active');
-    };
-  });
+  languageComponent.languageMenu.onclick = e => e.stopPropagation();
+}
+
+function setSelectedLanguage(supportedLanguage) {
+  languageComponent.selectedLang.textContent = supportedLanguage.display;
+}
+
+function showLanguageSelectionMenu() {
+  languageComponent.languageMenu.classList.toggle("show");
+  languageComponent.languageButton.classList.toggle("active");
+}
+
+function hideLanguageSelectionMenu() {
+  languageComponent.languageMenu.classList.remove("show");
+  languageComponent.languageButton.classList.remove("active");
 }

example/src/main/resources/templates/index.html

@@ -108,16 +108,6 @@ <h3><a id="usage"></a>Usage</h3>
                     </button>
                     <div id="language-menu" class="language-menu">
                         <div class="language-grid">
-                            <button class="language-option" data-lang="et" data-display="ET">Eesti</button>
-                            <button class="language-option" data-lang="en" data-display="EN">English</button>
-                            <button class="language-option" data-lang="ru" data-display="RU">Русский</button>
-                            <button class="language-option" data-lang="fi" data-display="FI">Suomi</button>
-                            <button class="language-option" data-lang="hr" data-display="HR">Hrvatska</button>
-                            <button class="language-option" data-lang="de" data-display="DE">Deutsch</button>
-                            <button class="language-option" data-lang="fr" data-display="FR">Française</button>
-                            <button class="language-option" data-lang="nl" data-display="NL">Nederlands</button>
-                            <button class="language-option" data-lang="cs" data-display="CS">Čeština</button>
-                            <button class="language-option" data-lang="sk" data-display="SK">Slovenština</button>
                         </div>
                     </div>
                 </div>
@@ -276,7 +266,7 @@ <h3><a id="for-developers"></a>For developers</h3>
     "use strict";
     import * as webeid from "/js/web-eid.js";
     import {hideErrorMessage, showErrorMessage, checkHttpError} from "/js/errors.js";
-    import {setupLanguageSelection} from "/js/index.js";
+    import {setupLanguageSelection, getValidatedLangFromUrl} from "/js/index.js";
 
     hideErrorMessage();
 
@@ -285,7 +275,7 @@ <h3><a id="for-developers"></a>For developers</h3>
     const csrfToken = document.querySelector('#csrftoken').content;
     const csrfHeaderName = document.querySelector('#csrfheadername').content;
 
-    let lang = new URLSearchParams(window.location.search).get("lang") || "en";
+    let lang = getValidatedLangFromUrl();
     setupLanguageSelection(lang, changedLang => lang = changedLang);
 
     authButton.addEventListener("click", async () => {
@@ -317,8 +307,11 @@ <h3><a id="for-developers"></a>For developers</h3>
 
             console.log("Authentication successful! Result:", authTokenResult);
 
-            window.location.href = "/welcome?lang=" + lang;
-
+            const welcomePageUrl = new URL("/welcome", window.location.origin);
+            if (lang) {
+                welcomePageUrl.searchParams.set("lang", lang);
+            }
+            window.location.href = welcomePageUrl.toString();
         } catch (error) {
             showErrorMessage(error);
             throw error;