keycloakify 10.0.0-rc.1 → 10.0.0-rc.3

package/src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -1,280 +1,189 @@
 <script>const _= 
-<#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
 (()=>{
-
-    const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
-
-    out["msg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
-    out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
-
-    out["messagesPerField"]= {
-        <#assign fieldNames = [ FIELD_NAMES_eKsIY4ZsZ4xeM ]>
-    
-        <#attempt>
-            <#if profile?? && profile.attributes?? && profile.attributes?is_enumerable>
-                <#list profile.attributes as attribute>
-                    <#if fieldNames?seq_contains(attribute.name)>
-                        <#continue>
-                    </#if>
-                    <#assign fieldNames += [attribute.name]>
-                </#list>
-            </#if>
-        <#recover>
-        </#attempt>
-    
-        "printIfExists": function (fieldName, text) {
-
-            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
-                throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-
-                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                        <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                            <#assign doExistErrorOnUsernameOrPassword = "">
-
-                            <#attempt>
-                                <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
-                            <#recover>
-                                <#assign doExistErrorOnUsernameOrPassword = true>
-                            </#attempt>
-
-                            <#if doExistErrorOnUsernameOrPassword>
-                                return text;
-                            <#else>
-
-                                <#assign doExistMessageForField = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
-                                <#recover>
-                                    <#assign doExistMessageForField = true>
-                                </#attempt>
-
-                                return <#if doExistMessageForField>text<#else>undefined</#if>;
-
-                            </#if>
-
+<#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
+const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
+out["msg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
+out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
+out["messagesPerField"]= {
+    <#assign fieldNames = [ FIELD_NAMES_eKsIY4ZsZ4xeM ]>
+    <#attempt>
+        <#if profile?? && profile.attributes?? && profile.attributes?is_enumerable>
+            <#list profile.attributes as attribute>
+                <#if fieldNames?seq_contains(attribute.name)>
+                    <#continue>
+                </#if>
+                <#assign fieldNames += [attribute.name]>
+            </#list>
+        </#if>
+    <#recover>
+    </#attempt>
+    "printIfExists": function (fieldName, text) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        <#if doExistErrorOnUsernameOrPassword>
+                            return text;
                         <#else>
-
                             <#assign doExistMessageForField = "">
-
                             <#attempt>
                                 <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
                             <#recover>
                                 <#assign doExistMessageForField = true>
                             </#attempt>
-
                             return <#if doExistMessageForField>text<#else>undefined</#if>;
-
                         </#if>
-
-
-                    }
-                </#list>
-
-                throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
-            </#if>
-
-        },
-        "existsError": function (){
-
-            function existsError_singleFieldName(fieldName) {
-
-                <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
-                    throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
-                <#else>
-                    <#list fieldNames as fieldName>
-                        if(fieldName === "${fieldName}" ){
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistErrorOnUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
-                                <#recover>
-                                    <#assign doExistErrorOnUsernameOrPassword = true>
-                                </#attempt>
-
-                                return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
-
-                            <#else>
-
-                                <#assign doExistErrorMessageForField = "">
-
-                                <#attempt>
-                                    <#assign doExistErrorMessageForField = messagesPerField.existsError('${fieldName}')>
-                                <#recover>
-                                    <#assign doExistErrorMessageForField = true>
-                                </#attempt>
-
-                                return <#if doExistErrorMessageForField>true<#else>false</#if>;
-
-                            </#if>
-
-                        }
-                    </#list>
-
-                    throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
-
-                </#if>
-
-            }
-
-            for( let i = 0; i < arguments.length; i++ ){
-
-                if( existsError_singleFieldName(arguments[i]) ){
-                    return true;
+                    <#else>
+                        <#assign doExistMessageForField = "">
+                        <#attempt>
+                            <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
+                        <#recover>
+                            <#assign doExistMessageForField = true>
+                        </#attempt>
+                        return <#if doExistMessageForField>text<#else>undefined</#if>;
+                    </#if>
                 }
-
-            }
-
-            return false;
-
-        },
-        "get": function (fieldName) {
-
-
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "existsError": function (){
+        function existsError_singleFieldName(fieldName) {
             <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
-                throw new Error("You're not supposed to use messagesPerField.get in this page");
+                throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
             <#else>
                 <#list fieldNames as fieldName>
                     if(fieldName === "${fieldName}" ){
-
                         <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
                         <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
                             <#assign doExistErrorOnUsernameOrPassword = "">
-
                             <#attempt>
                                 <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
                             <#recover>
                                 <#assign doExistErrorOnUsernameOrPassword = true>
                             </#attempt>
-
-                            <#if doExistErrorOnUsernameOrPassword>
-
-                                <#attempt>
-                                    return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
-                                <#recover>
-                                    return "Invalid username or password.";
-                                </#attempt>
-
-                            <#else>
-
-                                <#attempt>
-                                    return "${messagesPerField.get('${fieldName}')?no_esc}";
-                                <#recover>
-                                    return "";
-                                </#attempt>
-
-                            </#if>
-
+                            return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
                         <#else>
-
+                            <#assign doExistErrorMessageForField = "">
                             <#attempt>
-                                return "${messagesPerField.get('${fieldName}')?no_esc}";
+                                <#assign doExistErrorMessageForField = messagesPerField.existsError('${fieldName}')>
                             <#recover>
-                                return "invalid field";
+                                <#assign doExistErrorMessageForField = true>
                             </#attempt>
-
+                            return <#if doExistErrorMessageForField>true<#else>false</#if>;
                         </#if>
-
                     }
                 </#list>
-
                 throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
-
             </#if>
-
-        },
-        "exists": function (fieldName) {
-
-            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
-                throw new Error("You're not supposed to use messagesPerField.exists in this page");
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-
-                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                        <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                            <#assign doExistErrorOnUsernameOrPassword = "">
-
+        }
+        for( let i = 0; i < arguments.length; i++ ){
+            if( existsError_singleFieldName(arguments[i]) ){
+                return true;
+            }
+        }
+        return false;
+    },
+    "get": function (fieldName) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.get in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        <#if doExistErrorOnUsernameOrPassword>
                             <#attempt>
-                                <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                                return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
                             <#recover>
-                                <#assign doExistErrorOnUsernameOrPassword = true>
+                                return "Invalid username or password.";
                             </#attempt>
-
-                            return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
-
                         <#else>
-
-                            <#assign doExistErrorMessageForField = "">
-
                             <#attempt>
-                                <#assign doExistErrorMessageForField = messagesPerField.exists('${fieldName}')>
+                                return "${messagesPerField.get('${fieldName}')?no_esc}";
                             <#recover>
-                                <#assign doExistErrorMessageForField = true>
+                                return "";
                             </#attempt>
-
-                            return <#if doExistErrorMessageForField>true<#else>false</#if>;
-
                         </#if>
-
-                    }
-                </#list>
-
-                throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
-            </#if>
-
-        },
-        "getFirstError": function () {
-
-            for( let i = 0; i < arguments.length; i++ ){
-
-                const fieldName = arguments[i];
-
-                if( out.messagesPerField.existsError(fieldName) ){
-                    return out.messagesPerField.get(fieldName);
+                    <#else>
+                        <#attempt>
+                            return "${messagesPerField.get('${fieldName}')?no_esc}";
+                        <#recover>
+                            return "invalid field";
+                        </#attempt>
+                    </#if>
                 }
-
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "exists": function (fieldName) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.exists in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
+                    <#else>
+                        <#assign doExistErrorMessageForField = "">
+                        <#attempt>
+                            <#assign doExistErrorMessageForField = messagesPerField.exists('${fieldName}')>
+                        <#recover>
+                            <#assign doExistErrorMessageForField = true>
+                        </#attempt>
+                        return <#if doExistErrorMessageForField>true<#else>false</#if>;
+                    </#if>
+                }
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "getFirstError": function () {
+        for( let i = 0; i < arguments.length; i++ ){
+            const fieldName = arguments[i];
+            if( out.messagesPerField.existsError(fieldName) ){
+                return out.messagesPerField.get(fieldName);
             }
-
         }
-    };
-
-    <#if account??>
-        out["url"]["getLogoutUrl"] = function () {
-            <#attempt>
-                return "${url.getLogoutUrl()}";
-            <#recover>
-            </#attempt>
-        };
-    </#if>
-
-    out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
-    out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
-    out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
-    out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
-    out["pageId"] = "${pageId}";
-
-    try {
+    }
+};
 
-        out["url"]["resourcesCommonPath"] = out["url"]["resourcesPath"] + "/" + "RESOURCES_COMMON_cLsLsMrtDkpVv";
+out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
+out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
+out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
+out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
+out["pageId"] = "${pageId}";
 
-    } catch(error) {
+try {
+    out["url"]["resourcesCommonPath"] = out["url"]["resourcesPath"] + "/" + "RESOURCES_COMMON_cLsLsMrtDkpVv";
+} catch(error) { }
 
-    }
+return out;
 
-    return out;
-
-})()
+})();
 <#function ftl_object_to_js_code_declaring_an_object object path>
 
         <#local isHash = "">
@@ -298,7 +207,6 @@
                 <#return "ABORT: We can't list keys on this object">
             </#attempt>
 
-
             <#local out_seq = []>
 
             <#list keys as key>
@@ -367,7 +275,7 @@
                         key == "realmAttributes"
                     )
                 >
-                    <#local out_seq += ["/*If you need '" + path?join(".") + "." + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
+                    <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
                     <#continue>
                 </#if>
 
@@ -379,7 +287,7 @@
                     <#attempt>
                         <#-- https://github.com/keycloak/keycloak/blob/3a2bf0c04bcde185e497aaa32d0bb7ab7520cf4a/themes/src/main/resources/theme/base/login/template.ftl#L63 -->
                         <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
-                            <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
+                            <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
                             <#continue>
                         </#if>
                     <#recover>
@@ -459,6 +367,26 @@
                 </#attempt>
             </#if>
 
+            <#if are_same_path(path, ["url", "getLogoutUrl"])>
+                <#local returnValue = "">
+                <#attempt>
+                    <#local returnValue = url.getLogoutUrl()>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate url.getLogoutUrl()">
+                </#attempt>
+                <#return 'function(){ return "' + returnValue + '"; }'>
+            </#if>
+
+            <#if are_same_path(path, ["totp", "policy", "getAlgorithmKey"])>
+                <#local returnValue = "">
+                <#attempt>
+                    <#local returnValue = totp.policy.getAlgorithmKey()>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate totp.policy.getAlgorithmKey()">
+                </#attempt>
+                <#return 'function(){ return "' + returnValue + '"; }'>
+            </#if>
+
             <#return "ABORT: It's a method">
         </#if>
 

package/src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -108,7 +108,7 @@ export function generateFtlFilesCodeFactory(params: {
 
     const ftlObjectToJsCodeDeclaringAnObjectPlaceholder = '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }';
 
-    $("head").prepend(["<script>", `    window.${nameOfTheGlobal}= ${ftlObjectToJsCodeDeclaringAnObjectPlaceholder};`, "</script>"].join("\n"));
+    $("head").prepend(`<script>\nwindow.${nameOfTheGlobal}=${ftlObjectToJsCodeDeclaringAnObjectPlaceholder}</script>`);
 
     // Remove part of the document marked as ignored.
     {

package/src/bin/keycloakify/generateStartKeycloakTestingContainer.ts

@@ -2,9 +2,11 @@ import * as fs from "fs";
 import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
 import { assert } from "tsafe/assert";
 import type { BuildOptions } from "./buildOptions";
+import { accountV1ThemeName } from "../constants";
 
 export type BuildOptionsLike = {
     keycloakifyBuildDirPath: string;
+    themeNames: string[];
 };
 
 assert<BuildOptions extends BuildOptionsLike ? true : false>();
@@ -15,11 +17,14 @@ const containerName = "keycloak-testing-container";
 const keycloakVersion = "24.0.4";
 
 /** Files for being able to run a hot reload keycloak container */
-export function generateStartKeycloakTestingContainer(params: { jarFilePath: string; buildOptions: BuildOptionsLike }) {
-    const { jarFilePath, buildOptions } = params;
+export function generateStartKeycloakTestingContainer(params: {
+    jarFilePath: string;
+    doesImplementAccountTheme: boolean;
+    buildOptions: BuildOptionsLike;
+}) {
+    const { jarFilePath, doesImplementAccountTheme, buildOptions } = params;
 
     const themeRelativeDirPath = pathJoin("src", "main", "resources", "theme");
-    const themeDirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, themeRelativeDirPath);
 
     fs.writeFileSync(
         pathJoin(buildOptions.keycloakifyBuildDirPath, generateStartKeycloakTestingContainer.basename),
@@ -40,18 +45,12 @@ export function generateStartKeycloakTestingContainer(params: { jarFilePath: str
                     "$(pwd)",
                     pathRelative(buildOptions.keycloakifyBuildDirPath, jarFilePath)
                 )}":"/opt/keycloak/providers/${pathBasename(jarFilePath)}" \\`,
-                ...fs
-                    .readdirSync(themeDirPath)
-                    .filter(name => fs.lstatSync(pathJoin(themeDirPath, name)).isDirectory())
-                    .map(
-                        themeName =>
-                            `   -v "${pathJoin("$(pwd)", themeRelativeDirPath, themeName).replace(
-                                /\\/g,
-                                "/"
-                            )}":"/opt/keycloak/themes/${themeName}":rw \\`
-                    ),
+                [...(doesImplementAccountTheme ? [accountV1ThemeName] : []), ...buildOptions.themeNames].map(
+                    themeName =>
+                        `   -v "${pathJoin("$(pwd)", themeRelativeDirPath, themeName).replace(/\\/g, "/")}":"/opt/keycloak/themes/${themeName}":rw \\`
+                ),
                 `   -it quay.io/keycloak/keycloak:${keycloakVersion} \\`,
-                `   start-dev --features=declarative-user-profile`,
+                `   start-dev`,
                 ""
             ].join("\n"),
             "utf8"

package/src/bin/keycloakify/generateTheme/generateThemeVariants.ts

@@ -10,7 +10,7 @@ export function generateThemeVariations(params: { themeName: string; themeVarian
 
     transformCodebase({
         "srcDirPath": mainThemeDirPath,
-        "destDirPath": pathJoin(mainThemeDirPath, themeVariantName),
+        "destDirPath": pathJoin(mainThemeDirPath, "..", themeVariantName),
         "transformSourceCode": ({ fileRelativePath, sourceCode }) => {
             if (pathExtname(fileRelativePath) === ".ftl" && fileRelativePath.split(pathSep).length === 2) {
                 const modifiedSourceCode = Buffer.from(

package/src/bin/keycloakify/keycloakify.ts

@@ -57,6 +57,7 @@ export async function main() {
 
     generateStartKeycloakTestingContainer({
         "jarFilePath": pathJoin(buildOptions.keycloakifyBuildDirPath, lastJarFileBasename),
+        doesImplementAccountTheme,
         buildOptions
     });
 

package/src/login/Template.tsx

@@ -32,7 +32,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
 
-    const { msg, msgStr, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
+    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
     const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession, scripts } = kcContext;
 
@@ -126,31 +126,17 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
             <div className={getClassName("kcFormCardClass")}>
                 <header className={getClassName("kcFormHeaderClass")}>
-                    {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
+                    {realm.internationalizationEnabled && (assert(locale !== undefined), locale.supported.length > 1) && (
                         <div className={getClassName("kcLocaleMainClass")} id="kc-locale">
                             <div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}>
                                 <div id="kc-locale-dropdown" className={clsx("menu-button-links", getClassName("kcLocaleDropDownClass"))}>
                                     {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                                    <a href="#" id="kc-current-locale-link">
-                                        {labelBySupportedLanguageTag[currentLanguageTag]}
-                                    </a>
-                                    <ul>
-                                        {locale.supported.map(({ languageTag }) => (
-                                            <li key={languageTag} className="kc-dropdown-item">
-                                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                                                <a href="#" onClick={() => changeLocale(languageTag)}>
-                                                    {labelBySupportedLanguageTag[languageTag]}
-                                                </a>
-                                            </li>
-                                        ))}
-                                    </ul>
-
                                     <button
                                         tabIndex={1}
                                         id="kc-current-locale-link"
                                         aria-label={msgStr("languages" as any)}
-                                        aria-haspopup={true}
-                                        aria-expanded={false}
+                                        aria-haspopup="true"
+                                        aria-expanded="false"
                                         aria-controls="language-switch1"
                                     >
                                         {labelBySupportedLanguageTag[currentLanguageTag]}
@@ -165,13 +151,11 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                     >
                                         {locale.supported.map(({ languageTag }, i) => (
                                             <li key={languageTag} className={getClassName("kcLocaleListItemClass")} role="none">
-                                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                                 <a
                                                     role="menuitem"
-                                                    id={`language-${i}`}
+                                                    id={`language-${i + 1}`}
                                                     className={getClassName("kcLocaleItemClass")}
-                                                    href="#"
-                                                    onClick={() => changeLocale(languageTag)}
+                                                    href={getChangeLocalUrl(languageTag)}
                                                 >
                                                     {labelBySupportedLanguageTag[languageTag]}
                                                 </a>