Add language selection to web-eid.eu

example/src/main/resources/static/css/main.css

@@ -67,3 +67,84 @@ body {
 .eu-logo-fixed img {
     height: 86px;
 }
+
+.language-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.language-btn {
+  background-color: #f8f9fa;
+  color: #212529;
+  border: 1px solid #e9ecef;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  min-width: 60px;
+  justify-content: space-between;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.language-btn:hover {
+  background-color: #e9ecef;
+}
+
+.dropdown-arrow {
+  font-size: 10px;
+  transition: transform 0.2s;
+}
+
+.language-btn.active .dropdown-arrow {
+  transform: rotate(180deg);
+}
+
+.language-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  display: none;
+  min-width: 200px;
+  margin-top: 2px;
+}
+
+.language-menu.show {
+  display: block;
+}
+
+.language-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+}
+
+.language-option {
+  background: none;
+  border: none;
+  color: #212529;
+  padding: 8px 12px;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 2px;
+  font-size: 14px;
+  white-space: nowrap;
+  transition: background-color 0.2s;
+}
+
+.language-option:hover {
+  background-color: #e9ecef;
+}
+
+.language-option.selected {
+  font-weight: bold;
+}

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

@@ -0,0 +1,130 @@
+/*
+ * Copyright (c) 2020-2025 Estonian Information System Authority
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+"use strict";
+
+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: "Hrvatski" },
+  { lang: "de", display: "DE", name: "Deutsch" },
+  { lang: "fr", display: "FR", name: "Français" },
+  { lang: "nl", display: "NL", name: "Nederlands" },
+  { lang: "cs", display: "CS", name: "Čeština" },
+  { lang: "sk", display: "SK", name: "Slovenčina" },
+  NO_LANGUAGE_SELECTED
+];
+
+const languageComponent = {
+  selectedLang: document.querySelector("#selected-lang"),
+  languageButton: document.querySelector("#language-button"),
+  languageMenu: document.querySelector("#language-menu"),
+  languageGrid: document.querySelector(".language-grid"),
+  languageOptions: () => document.querySelectorAll(".language-option")
+};
+
+/**
+ * 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);
+    }
+
+    button.addEventListener("click", () => {
+      languageComponent.languageOptions().forEach(o => o.classList.remove("selected"));
+      button.classList.add("selected");
+
+      setSelectedLanguage(supportedLanguage);
+      hideLanguageSelectionMenu();
+
+      onLangChange(supportedLanguage.lang);
+    });
+
+    languageComponent.languageGrid.appendChild(button);
+  });
+
+  setSelectedLanguage(language);
+
+  languageComponent.languageButton.onclick = e => {
+    e.stopPropagation();
+    showLanguageSelectionMenu();
+  };
+
+  document.onclick = () => {
+    hideLanguageSelectionMenu();
+  };
+
+  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

@@ -87,15 +87,31 @@ <h3><a id="usage"></a>Usage</h3>
                     Attach a smart card reader to the computer and insert the eID card into the reader.
                 </li>
                 <li>Click <i>Authenticate</i> below.</li>
+                <li>
+                    Select the Web eID application language from the dropdown menu.
+                    If you have previously configured a language preference within the Web eID application dialog, that setting will take precedence over the language selection made here.
+                    Please note that this language setting does not affect the website interface.
+                </li>
             </ol>
 
             <div id="error-message" class="alert alert-danger" style="display: none;" role="alert">
                 <div class="message"></div>
                 <pre class="details"></pre>
             </div>
-            <p class="text-center p-4">
+
+            <div class="d-flex justify-content-center align-items-center p-4">
                 <button id="webeid-auth-button" class="btn btn-info">Authenticate</button>
-            </p>
+                <div class="language-dropdown ml-1">
+                    <button id="language-button" class="language-btn" type="button">
+                        <span id="selected-lang">EN</span>
+                        <span class="dropdown-arrow">▼</span>
+                    </button>
+                    <div id="language-menu" class="language-menu">
+                        <div class="language-grid">
+                        </div>
+                    </div>
+                </div>
+            </div>
 
             <p>The privacy policy of the test service is available <a href="/files/Web eID privacy policy.pdf">here</a>.
             </p>
@@ -250,6 +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, getValidatedLangFromUrl} from "/js/index.js";
 
     hideErrorMessage();
 
@@ -258,7 +275,8 @@ <h3><a id="for-developers"></a>For developers</h3>
     const csrfToken = document.querySelector('#csrftoken').content;
     const csrfHeaderName = document.querySelector('#csrfheadername').content;
 
-    const lang = new URLSearchParams(window.location.search).get("lang") || "en";
+    let lang = getValidatedLangFromUrl();
+    setupLanguageSelection(lang, changedLang => lang = changedLang);
 
     authButton.addEventListener("click", async () => {
         hideErrorMessage();
@@ -289,8 +307,11 @@ <h3><a id="for-developers"></a>For developers</h3>
 
             console.log("Authentication successful! Result:", authTokenResult);
 
-            window.location.href = "/welcome";
-
+            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;

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

@@ -52,6 +52,7 @@ <h2 class="adding-signature">Digital signing</h2>
     "use strict";
     import * as webeid from "/js/web-eid.js";
     import {hideErrorMessage, showErrorMessage, checkHttpError} from "/js/errors.js";
+    import {getValidatedLangFromUrl} from "/js/index.js";
 
     const signButton = document.querySelector("#webeid-sign-button");
     const downloadButton = document.querySelector("#webeid-download-button");
@@ -70,7 +71,12 @@ <h2 class="adding-signature">Digital signing</h2>
                 [csrfHeaderName]: csrfToken
             }
         });
-        window.location.href = "/";
+        const lang = getValidatedLangFromUrl();
+        const indexPageUrl = new URL("/", window.location.origin);
+        if (lang) {
+            indexPageUrl.searchParams.set("lang", lang);
+        }
+        window.location.href = indexPageUrl.toString();
     });
 
     downloadButton.addEventListener("click", async () => {