keycloakify 10.0.0-rc.1 → 10.0.0-rc.10

package/src/bin/start-keycloak.ts

@@ -0,0 +1,236 @@
+import { readBuildOptions } from "./shared/buildOptions";
+import type { CliCommandOptions as CliCommandOptions_common } from "./main";
+import { promptKeycloakVersion } from "./shared/promptKeycloakVersion";
+import { readMetaInfKeycloakThemes } from "./shared/metaInfKeycloakThemes";
+import { accountV1ThemeName } from "./shared/constants";
+import { SemVer } from "./tools/SemVer";
+import type { KeycloakVersionRange } from "./shared/KeycloakVersionRange";
+import { getJarFileBasename } from "./shared/getJarFileBasename";
+import { assert, type Equals } from "tsafe/assert";
+import * as fs from "fs";
+import { join as pathJoin, posix as pathPosix } from "path";
+import * as child_process from "child_process";
+import chalk from "chalk";
+
+export type CliCommandOptions = CliCommandOptions_common & {
+    port: number;
+    keycloakVersion: string | undefined;
+};
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    exit_if_docker_not_installed: {
+        let commandOutput: Buffer | undefined = undefined;
+
+        try {
+            commandOutput = child_process.execSync("docker --version", { "stdio": ["ignore", "pipe", "ignore"] });
+        } catch {}
+
+        if (commandOutput?.toString("utf8").includes("Docker")) {
+            break exit_if_docker_not_installed;
+        }
+
+        console.log(
+            [
+                `${chalk.red("Docker required.")}`,
+                `Install it with Docker Desktop: ${chalk.bold.underline("https://www.docker.com/products/docker-desktop/")}`,
+                `(or any other way)`
+            ].join(" ")
+        );
+
+        process.exit(1);
+    }
+
+    exit_if_docker_not_running: {
+        let isDockerRunning: boolean;
+
+        try {
+            child_process.execSync("docker info", { "stdio": "ignore" });
+            isDockerRunning = true;
+        } catch {
+            isDockerRunning = false;
+        }
+
+        if (isDockerRunning) {
+            break exit_if_docker_not_running;
+        }
+
+        console.log([`${chalk.red("Docker daemon is not running.")}`, `Please start Docker Desktop and try again.`].join(" "));
+
+        process.exit(1);
+    }
+
+    const { cliCommandOptions } = params;
+
+    const buildOptions = readBuildOptions({ cliCommandOptions });
+
+    exit_if_theme_not_built: {
+        if (fs.existsSync(buildOptions.keycloakifyBuildDirPath)) {
+            break exit_if_theme_not_built;
+        }
+
+        console.log(
+            [`${chalk.red("The theme has not been built.")}`, `Please run ${chalk.bold("npx vite && npx keycloakify build")} first.`].join(" ")
+        );
+        process.exit(1);
+    }
+
+    const metaInfKeycloakThemes = readMetaInfKeycloakThemes({
+        "keycloakifyBuildDirPath": buildOptions.keycloakifyBuildDirPath
+    });
+
+    const doesImplementAccountTheme = metaInfKeycloakThemes.themes.some(({ name }) => name === accountV1ThemeName);
+
+    const { keycloakVersion, keycloakMajorNumber } = await (async function getKeycloakMajor(): Promise<{
+        keycloakVersion: string;
+        keycloakMajorNumber: number;
+    }> {
+        if (cliCommandOptions.keycloakVersion !== undefined) {
+            return {
+                "keycloakVersion": cliCommandOptions.keycloakVersion,
+                "keycloakMajorNumber": SemVer.parse(cliCommandOptions.keycloakVersion).major
+            };
+        }
+
+        console.log("On which version of Keycloak do you want to test your theme?");
+
+        const { keycloakVersion } = await promptKeycloakVersion({
+            "startingFromMajor": 17,
+            "cacheDirPath": buildOptions.cacheDirPath
+        });
+
+        const keycloakMajorNumber = SemVer.parse(keycloakVersion).major;
+
+        if (doesImplementAccountTheme && keycloakMajorNumber === 22) {
+            console.log(
+                [
+                    "Unfortunately, Keycloakify themes that implements an account theme do not work on Keycloak 22",
+                    "Please select any other Keycloak version"
+                ].join(" ")
+            );
+            return getKeycloakMajor();
+        }
+
+        return { keycloakVersion, keycloakMajorNumber };
+    })();
+
+    const keycloakVersionRange: KeycloakVersionRange = (() => {
+        if (doesImplementAccountTheme) {
+            const keycloakVersionRange = (() => {
+                if (keycloakMajorNumber <= 21) {
+                    return "21-and-below" as const;
+                }
+
+                assert(keycloakMajorNumber !== 22);
+
+                if (keycloakMajorNumber === 23) {
+                    return "23" as const;
+                }
+
+                return "24-and-above" as const;
+            })();
+
+            assert<Equals<typeof keycloakVersionRange, KeycloakVersionRange.WithAccountTheme>>();
+
+            return keycloakVersionRange;
+        } else {
+            const keycloakVersionRange = (() => {
+                if (keycloakMajorNumber <= 21) {
+                    return "21-and-below" as const;
+                }
+
+                return "22-and-above" as const;
+            })();
+
+            assert<Equals<typeof keycloakVersionRange, KeycloakVersionRange.WithoutAccountTheme>>();
+
+            return keycloakVersionRange;
+        }
+    })();
+
+    const { jarFileBasename } = getJarFileBasename({ keycloakVersionRange });
+
+    const mountTargets = buildOptions.themeNames
+        .map(themeName => {
+            const themeEntry = metaInfKeycloakThemes.themes.find(({ name }) => name === themeName);
+
+            assert(themeEntry !== undefined);
+
+            return themeEntry.types
+                .map(themeType => {
+                    const localPathDirname = pathJoin(
+                        buildOptions.keycloakifyBuildDirPath,
+                        "src",
+                        "main",
+                        "resources",
+                        "theme",
+                        themeName,
+                        themeType
+                    );
+
+                    return fs
+                        .readdirSync(localPathDirname)
+                        .filter(fileOrDirectoryBasename => !fileOrDirectoryBasename.endsWith(".properties"))
+                        .map(fileOrDirectoryBasename => ({
+                            "localPath": pathJoin(localPathDirname, fileOrDirectoryBasename),
+                            "containerPath": pathPosix.join("/", "opt", "keycloak", "themes", themeName, themeType, fileOrDirectoryBasename)
+                        }));
+                })
+                .flat();
+        })
+        .flat();
+
+    const containerName = "keycloak-keycloakify";
+
+    try {
+        child_process.execSync(`docker rm ${containerName}`, { "stdio": "ignore" });
+    } catch {}
+
+    const child = child_process.spawn(
+        "docker",
+        [
+            "run",
+            ...["-p", `${cliCommandOptions.port}:8080`],
+            ...["--name", containerName],
+            ...["-e", "KEYCLOAK_ADMIN=admin"],
+            ...["-e", "KEYCLOAK_ADMIN_PASSWORD=admin"],
+            ...["-v", `${pathJoin(buildOptions.keycloakifyBuildDirPath, jarFileBasename)}:/opt/keycloak/providers/keycloak-theme.jar`],
+            ...(keycloakMajorNumber <= 20 ? ["-e", "JAVA_OPTS=-Dkeycloak.profile=preview"] : []),
+            ...mountTargets.map(({ localPath, containerPath }) => ["-v", `${localPath}:${containerPath}:rw`]).flat(),
+            `quay.io/keycloak/keycloak:${keycloakVersion}`,
+            "start-dev",
+            ...(21 <= keycloakMajorNumber && keycloakMajorNumber < 24 ? ["--features=declarative-user-profile"] : [])
+        ],
+        {
+            "cwd": buildOptions.keycloakifyBuildDirPath
+        }
+    );
+
+    child.stdout.on("data", data => process.stdout.write(data));
+
+    child.stderr.on("data", data => process.stderr.write(data));
+
+    {
+        const handler = async (data: Buffer) => {
+            if (!data.toString("utf8").includes("Listening on: http://0.0.0.0:8080")) {
+                return;
+            }
+
+            child.stdout.off("data", handler);
+
+            await new Promise(resolve => setTimeout(resolve, 1_000));
+
+            console.log(
+                [
+                    "",
+                    `${chalk.green("Your theme is accessible at:")}`,
+                    `${chalk.green("➜")} ${chalk.cyan.bold("https://test.keycloakify.dev/")}`,
+                    ""
+                ].join("\n")
+            );
+        };
+
+        child.stdout.on("data", handler);
+    }
+
+    child.on("exit", process.exit);
+}

package/src/bin/tools/fs.rmSync.ts

@@ -20,13 +20,13 @@ export function rmSync(dirPath: string, options: { recursive: true; force?: true
 
     const removeDir_rec = (dirPath: string) =>
         fs.readdirSync(dirPath).forEach(basename => {
-            const fileOrDirpath = pathJoin(dirPath, basename);
+            const fileOrDirPath = pathJoin(dirPath, basename);
 
-            if (fs.lstatSync(fileOrDirpath).isDirectory()) {
-                removeDir_rec(fileOrDirpath);
+            if (fs.lstatSync(fileOrDirPath).isDirectory()) {
+                removeDir_rec(fileOrDirPath);
                 return;
             } else {
-                fs.unlinkSync(fileOrDirpath);
+                fs.unlinkSync(fileOrDirPath);
             }
         });
 

package/src/bin/tools/getAbsoluteAndInOsFormatPath.ts

@@ -1,4 +1,5 @@
-import { isAbsolute as pathIsAbsolute, sep as pathSep, join as pathJoin } from "path";
+import { isAbsolute as pathIsAbsolute, sep as pathSep, join as pathJoin, resolve as pathResolve } from "path";
+import * as os from "os";
 
 export function getAbsoluteAndInOsFormatPath(params: { pathIsh: string; cwd: string }): string {
     const { pathIsh, cwd } = params;
@@ -7,11 +8,17 @@ export function getAbsoluteAndInOsFormatPath(params: { pathIsh: string; cwd: str
 
     pathOut = pathOut.replace(/\//g, pathSep);
 
+    if (pathOut.startsWith("~")) {
+        pathOut = pathOut.replace("~", os.homedir());
+    }
+
     pathOut = pathOut.endsWith(pathSep) ? pathOut.slice(0, -1) : pathOut;
 
     if (!pathIsAbsolute(pathOut)) {
         pathOut = pathJoin(cwd, pathOut);
     }
 
+    pathOut = pathResolve(pathOut);
+
     return pathOut;
 }

package/src/bin/{keycloakify/buildOptions → tools}/getNpmWorkspaceRootDirPath.ts

@@ -2,31 +2,14 @@ import * as child_process from "child_process";
 import { join as pathJoin, resolve as pathResolve, sep as pathSep } from "path";
 import { assert } from "tsafe/assert";
 
-let cache:
-    | {
-          reactAppRootDirPath: string;
-          npmWorkspaceRootDirPath: string;
-      }
-    | undefined = undefined;
-
 export function getNpmWorkspaceRootDirPath(params: { reactAppRootDirPath: string }) {
     const { reactAppRootDirPath } = params;
 
-    use_cache: {
-        if (cache === undefined || cache.reactAppRootDirPath !== reactAppRootDirPath) {
-            break use_cache;
-        }
-
-        const { npmWorkspaceRootDirPath } = cache;
-
-        return { npmWorkspaceRootDirPath };
-    }
-
     const npmWorkspaceRootDirPath = (function callee(depth: number): string {
         const cwd = pathResolve(pathJoin(...[reactAppRootDirPath, ...Array(depth).fill("..")]));
 
         try {
-            child_process.execSync("npm config get", { cwd, "stdio": ["pipe", "pipe", "pipe"] });
+            child_process.execSync("npm config get", { cwd, "stdio": "ignore" });
         } catch (error) {
             if (String(error).includes("ENOWORKSPACES")) {
                 assert(cwd !== pathSep, "NPM workspace not found");
@@ -40,10 +23,5 @@ export function getNpmWorkspaceRootDirPath(params: { reactAppRootDirPath: string
         return cwd;
     })(0);
 
-    cache = {
-        reactAppRootDirPath,
-        npmWorkspaceRootDirPath
-    };
-
     return { npmWorkspaceRootDirPath };
 }

package/src/bin/tools/{readThisNpmProjectVersion.ts → readThisNpmPackageVersion.ts}

@@ -3,7 +3,7 @@ import { assert } from "tsafe/assert";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
 
-export function readThisNpmProjectVersion(): string {
+export function readThisNpmPackageVersion(): string {
     const version = JSON.parse(fs.readFileSync(pathJoin(getThisCodebaseRootDirPath(), "package.json")).toString("utf8"))["version"];
 
     assert(typeof version === "string");

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>

package/src/login/UserProfileFormFields.tsx

@@ -201,18 +201,15 @@ function FieldErrors(props: {
         <span
             id={`input-error-${attribute.name}${fieldIndex === undefined ? "" : `-${fieldIndex}`}`}
             className={getClassName("kcInputErrorMessageClass")}
-            style={{
-                "position": displayableErrors.length === 1 ? "absolute" : undefined
-            }}
             aria-live="polite"
         >
             {displayableErrors
                 .filter(error => error.fieldIndex === fieldIndex)
                 .map(({ errorMessage }, i, arr) => (
-                    <>
+                    <Fragment key={i}>
                         <span key={i}>{errorMessage}</span>
                         {arr.length - 1 !== i && <br />}
-                    </>
+                    </Fragment>
                 ))}
         </span>
     );

package/src/login/i18n/i18n.tsx

@@ -28,11 +28,10 @@ export type GenericI18n<MessageKey extends string> = {
      */
     currentLanguageTag: string;
     /**
-     * To call when the user switch language.
-     * This will cause the page to be reloaded,
-     * on next load currentLanguageTag === newLanguageTag
+     * Redirect to this url to change the language.
+     * After reload currentLanguageTag === newLanguageTag
      */
-    changeLocale: (newLanguageTag: string) => never;
+    getChangeLocalUrl: (newLanguageTag: string) => string;
     /**
      * e.g. "en" => "English", "fr" => "Français", ...
      *
@@ -104,7 +103,7 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
                         } as any
                     }),
                     currentLanguageTag,
-                    "changeLocale": newLanguageTag => {
+                    "getChangeLocalUrl": newLanguageTag => {
                         const { locale } = kcContext;
 
                         assert(locale !== undefined, "Internationalization not enabled");
@@ -113,9 +112,7 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 
                         assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
 
-                        window.location.href = targetSupportedLocale.url;
-
-                        assert(false, "never");
+                        return targetSupportedLocale.url;
                     },
                     "labelBySupportedLanguageTag": Object.fromEntries(
                         (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])

package/src/login/index.ts

@@ -5,7 +5,7 @@ export default Fallback;
 export { useDownloadTerms } from "keycloakify/login/lib/useDownloadTerms";
 export { getKcContext } from "keycloakify/login/kcContext/getKcContext";
 export { createGetKcContext } from "keycloakify/login/kcContext/createGetKcContext";
-export type { LoginThemePageId as PageId } from "keycloakify/bin/keycloakify/generateFtl";
+export type { LoginThemePageId as PageId } from "keycloakify/bin/shared/constants";
 export { createUseI18n } from "keycloakify/login/i18n/i18n";
 
 export type { PageProps } from "keycloakify/login/pages/PageProps";

package/src/login/kcContext/KcContext.ts

@@ -1,5 +1,4 @@
-import type { LoginThemePageId } from "keycloakify/bin/keycloakify/generateFtl";
-import { type ThemeType } from "keycloakify/bin/constants";
+import type { ThemeType, LoginThemePageId } from "keycloakify/bin/shared/constants";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import type { MessageKey } from "../i18n/i18n";
@@ -419,6 +418,7 @@ export declare namespace KcContext {
                 algorithm: "HmacSHA1" | "HmacSHA256" | "HmacSHA512";
                 digits: number;
                 lookAheadWindow: number;
+                getAlgorithmKey: () => string;
             } & (
                 | {
                       type: "totp";

package/src/login/kcContext/getKcContextFromWindow.ts

@@ -1,6 +1,6 @@
 import type { KcContext } from "./KcContext";
 import type { AndByDiscriminatingKey } from "keycloakify/tools/AndByDiscriminatingKey";
-import { nameOfTheGlobal } from "keycloakify/bin/constants";
+import { nameOfTheGlobal } from "keycloakify/bin/shared/constants";
 
 export type ExtendKcContext<KcContextExtension extends { pageId: string }> = [KcContextExtension] extends [never]
     ? KcContext

package/src/login/kcContext/kcContextMocks.ts

@@ -1,9 +1,8 @@
 import "minimal-polyfills/Object.fromEntries";
 import type { KcContext, Attribute } from "./KcContext";
-import { resources_common, keycloak_resources } from "keycloakify/bin/constants";
+import { resources_common, keycloak_resources, type LoginThemePageId } from "keycloakify/bin/shared/constants";
 import { id } from "tsafe/id";
 import { assert, type Equals } from "tsafe/assert";
-import type { LoginThemePageId } from "keycloakify/bin/keycloakify/generateFtl";
 import { BASE_URL } from "keycloakify/lib/BASE_URL";
 
 const attributes: Attribute[] = [
@@ -443,7 +442,8 @@ export const kcContextMocks = [
                 "digits": 6,
                 "lookAheadWindow": 1,
                 "type": "totp",
-                "period": 30
+                "period": 30,
+                "getAlgorithmKey": () => "SHA1"
             }
         }
     }),

package/src/login/lib/useUserProfileForm.tsx

@@ -354,15 +354,15 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
         return initialState;
     }, []);
 
-    const [state, dispatchFormAction] = useReducer(function reducer(state: internal.State, params: FormAction): internal.State {
-        const formFieldState = state.formFieldStates.find(({ attribute }) => attribute.name === params.name);
+    const [state, dispatchFormAction] = useReducer(function reducer(state: internal.State, formAction: FormAction): internal.State {
+        const formFieldState = state.formFieldStates.find(({ attribute }) => attribute.name === formAction.name);
 
         assert(formFieldState !== undefined);
 
         (() => {
-            switch (params.action) {
+            switch (formAction.action) {
                 case "update":
-                    formFieldState.valueOrValues = params.valueOrValues;
+                    formFieldState.valueOrValues = formAction.valueOrValues;
 
                     apply_formatters: {
                         const { attribute } = formFieldState;
@@ -381,7 +381,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     }
 
                     formFieldState.errors = getErrors({
-                        "attributeName": params.name,
+                        "attributeName": formAction.name,
                         "formFieldStates": state.formFieldStates
                     });
 
@@ -390,21 +390,21 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                             break update_password_confirm;
                         }
 
-                        if (params.name !== "password") {
+                        if (formAction.name !== "password") {
                             break update_password_confirm;
                         }
 
                         state = reducer(state, {
                             "action": "update",
                             "name": "password-confirm",
-                            "valueOrValues": params.valueOrValues
+                            "valueOrValues": formAction.valueOrValues
                         });
                     }
 
                     return;
                 case "focus lost":
                     if (formFieldState.hasLostFocusAtLeastOnce instanceof Array) {
-                        const { fieldIndex } = params;
+                        const { fieldIndex } = formAction;
                         assert(fieldIndex !== undefined);
                         formFieldState.hasLostFocusAtLeastOnce[fieldIndex] = true;
                         return;
@@ -413,10 +413,10 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     formFieldState.hasLostFocusAtLeastOnce = true;
                     return;
             }
-            assert<Equals<typeof params, never>>(false);
+            assert<Equals<typeof formAction, never>>(false);
         })();
 
-        return state;
+        return { ...state };
     }, initialState);
 
     const formState: FormState = useMemo(

package/src/login/pages/Code.tsx

@@ -24,7 +24,7 @@ export default function Code(props: PageProps<Extract<KcContext, { pageId: "code
                 {code.success ? (
                     <>
                         <p>{msg("copyCodeInstruction")}</p>
-                        <input id="code" className={getClassName("kcTextareaClass")} value={code.code} />
+                        <input id="code" className={getClassName("kcTextareaClass")} defaultValue={code.code} />
                     </>
                 ) : (
                     <p id="error">{code.error}</p>

package/src/login/pages/IdpReviewUserProfile.tsx

@@ -29,7 +29,7 @@ export default function IdpReviewUserProfile(props: IdpReviewUserProfileProps) {
         <Template
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
             displayMessage={messagesPerField.exists("global")}
-            displayRequiredFields={true}
+            displayRequiredFields
             headerNode={msg("loginIdpReviewProfileTitle")}
         >
             <form id="kc-idp-review-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">

package/src/login/pages/Login.tsx

@@ -104,7 +104,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                         id="username"
                                         className={getClassName("kcInputClass")}
                                         name="username"
-                                        value={login.username ?? ""}
+                                        defaultValue={login.username ?? ""}
                                         type="text"
                                         autoFocus
                                         autoComplete="username"

package/src/login/pages/LoginConfigTotp.tsx

@@ -17,14 +17,6 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
 
     const { msg, msgStr } = i18n;
 
-    // NOTE: We should edit the ftl_object_to_js_code_declaring_an_object.ftl
-    // so that we have access to getAlgorithmKey()
-    const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
-        "HmacSHA1": "SHA1",
-        "HmacSHA256": "SHA256",
-        "HmacSHA512": "SHA512"
-    };
-
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginTotpTitle")}>
             <>
@@ -60,7 +52,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                                             {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
                                         </li>
                                         <li id="kc-totp-algorithm">
-                                            {msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                            {msg("loginTotpAlgorithm")}: {totp.policy.getAlgorithmKey()}
                                         </li>
                                         <li id="kc-totp-digits">
                                             {msg("loginTotpDigits")}: {totp.policy.digits}

package/src/login/pages/LoginUpdateProfile.tsx

@@ -26,7 +26,7 @@ export default function LoginUpdateProfile(props: LoginUpdateProfileProps) {
     const [isFormSubmittable, setIsFormSubmittable] = useState(false);
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginProfileTitle")}>
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayRequiredFields headerNode={msg("loginProfileTitle")}>
             <form id="kc-update-profile-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                 <UserProfileFormFields
                     {...{

package/src/login/pages/LoginUsername.tsx

@@ -101,7 +101,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                                         id="username"
                                         className={getClassName("kcInputClass")}
                                         name="username"
-                                        value={login.username ?? ""}
+                                        defaultValue={login.username ?? ""}
                                         type="text"
                                         autoFocus
                                         autoComplete="off"