keycloakify/tools/useIsPasswordRevealed.js

Framework to create custom Keycloak UIs

import { useEffect, useReducer } from "react";
import { assert } from "../tools/assert";
/**
 * Initially false, state that enables to dynamically control if
 * the type of a password input is "password" (false) or "text" (true).
 */
export function useIsPasswordRevealed(params) {
    const { passwordInputId } = params;
    const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer((isPasswordRevealed) => !isPasswordRevealed, false);
    useEffect(() => {
        const passwordInputElement = document.getElementById(passwordInputId);
        assert(passwordInputElement instanceof HTMLInputElement);
        const type = isPasswordRevealed ? "text" : "password";
        passwordInputElement.type = type;
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.attributeName !== "type") {
                    return;
                }
                if (passwordInputElement.type === type) {
                    return;
                }
                passwordInputElement.type = type;
            });
        });
        observer.observe(passwordInputElement, { attributes: true });
        return () => {
            observer.disconnect();
        };
    }, [isPasswordRevealed]);
    return { isPasswordRevealed, toggleIsPasswordRevealed };
}
//# sourceMappingURL=useIsPasswordRevealed.js.map