#754: PasswordWrapper fix for React 19

src/tools/useIsPasswordRevealed.ts

@@ -0,0 +1,45 @@
+import { useEffect, useReducer } from "react";
+import { assert } from "keycloakify/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: { passwordInputId: string }) {
+    const { passwordInputId } = params;
+
+    const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer(
+        (isPasswordRevealed: boolean) => !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 };
+}