Update page login-password.ftl

src/login/kcContext/KcContext.ts

@@ -329,9 +329,6 @@ export declare namespace KcContext {
         social: {
             displayInfo: boolean;
         };
-        login: {
-            password?: string;
-        };
     };
 
     export type WebauthnAuthenticate = Common & {

src/login/pages/Login.tsx

@@ -5,7 +5,6 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
-import type { ClassKey } from "keycloakify/login/TemplateProps";
 
 export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -194,7 +193,12 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
     );
 }
 
-function PasswordWrapper(props: { getClassName: (classKey: ClassKey) => string; i18n: I18n; passwordInputId: string; children: JSX.Element }) {
+function PasswordWrapper(props: {
+    getClassName: ReturnType<typeof useGetClassName>["getClassName"];
+    i18n: I18n;
+    passwordInputId: string;
+    children: JSX.Element;
+}) {
     const { getClassName, i18n, passwordInputId, children } = props;
 
     const { msgStr } = i18n;

src/login/pages/LoginPassword.tsx

@@ -1,7 +1,6 @@
-import { useState } from "react";
+import { useState, useEffect, useReducer } from "react";
 import { clsx } from "keycloakify/tools/clsx";
-import { useConstCallback } from "keycloakify/tools/useConstCallback";
+import { assert } from "tsafe/assert";
-import type { FormEventHandler } from "react";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
@@ -15,42 +14,53 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { "pag
         classes
     });
 
-    const { realm, url, login } = kcContext;
+    const { realm, url, messagesPerField } = kcContext;
 
     const { msg, msgStr } = i18n;
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
-    const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
-        e.preventDefault();
-
-        setIsLoginButtonDisabled(true);
-
-        const formElement = e.target as HTMLFormElement;
-
-        formElement.submit();
-    });
-
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            headerNode={msg("doLogIn")}
+            displayMessage={!messagesPerField.existsError("password")}
+        >
             <div id="kc-form">
                 <div id="kc-form-wrapper">
-                    <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
+                    <form
-                        <div className={getClassName("kcFormGroupClass")}>
+                        id="kc-form-login"
+                        onSubmit={() => {
+                            setIsLoginButtonDisabled(true);
+                            return true;
+                        }}
+                        action={url.loginAction}
+                        method="post"
+                    >
+                        <div className={clsx(getClassName("kcFormGroupClass"), "no-bottom-margin")}>
                             <hr />
                             <label htmlFor="password" className={getClassName("kcLabelClass")}>
                                 {msg("password")}
                             </label>
-                            <input
+
-                                tabIndex={2}
+                            <PasswordWrapper getClassName={getClassName} i18n={i18n} passwordInputId="password">
-                                id="password"
+                                <input
-                                className={getClassName("kcInputClass")}
+                                    tabIndex={2}
-                                name="password"
+                                    id="password"
-                                type="password"
+                                    className={getClassName("kcInputClass")}
-                                autoFocus={true}
+                                    name="password"
-                                autoComplete="on"
+                                    type="password"
-                                defaultValue={login.password ?? ""}
+                                    autoFocus
-                            />
+                                    autoComplete="on"
+                                    aria-invalid={messagesPerField.existsError("username", "password")}
+                                />
+                            </PasswordWrapper>
+
+                            {messagesPerField.existsError("password") && (
+                                <span id="input-error-password" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                    {messagesPerField.get("password")}
+                                </span>
+                            )}
                         </div>
                         <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
                             <div id="kc-form-options" />
@@ -86,3 +96,42 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { "pag
         </Template>
     );
 }
+
+function PasswordWrapper(props: {
+    getClassName: ReturnType<typeof useGetClassName>["getClassName"];
+    i18n: I18n;
+    passwordInputId: string;
+    children: JSX.Element;
+}) {
+    const { getClassName, i18n, passwordInputId, children } = props;
+
+    const { msgStr } = i18n;
+
+    const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer((isPasswordRevealed: boolean) => !isPasswordRevealed, false);
+
+    useEffect(() => {
+        const passwordInputElement = document.getElementById(passwordInputId);
+
+        assert(passwordInputElement instanceof HTMLInputElement);
+
+        passwordInputElement.type = isPasswordRevealed ? "text" : "password";
+    }, [isPasswordRevealed]);
+
+    return (
+        <div className={getClassName("kcInputGroup")}>
+            {children}
+            <button
+                type="button"
+                className={getClassName("kcFormPasswordVisibilityButtonClass")}
+                aria-label={msgStr(isPasswordRevealed ? "hidePassword" : "showPassword")}
+                aria-controls={passwordInputId}
+                onClick={toggleIsPasswordRevealed}
+            >
+                <i
+                    className={getClassName(isPasswordRevealed ? "kcFormPasswordVisibilityIconHide" : "kcFormPasswordVisibilityIconShow")}
+                    aria-hidden
+                />
+            </button>
+        </div>
+    );
+}