Implement possible fix for mobile autofill

src/login/UserProfileFormFields.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from "keycloakify/tools/JSX";
 import { useEffect, Fragment } from "react";
 import { assert } from "keycloakify/tools/assert";
-import { useIsPasswordRevealed } from "keycloakify/tools/useIsPasswordRevealed";
+import { useIsPasswordRevealed } from "./useIsPasswordRevealed";
 import type { KcClsx } from "keycloakify/login/lib/kcClsx";
 import {
     useUserProfileForm,

src/login/pages/Login.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from "keycloakify/tools/JSX";
 import { useState } from "react";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
-import { useIsPasswordRevealed } from "keycloakify/tools/useIsPasswordRevealed";
+import { useIsPasswordRevealed } from "../useIsPasswordRevealed";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";

src/login/useIsPasswordRevealed.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Local replacement for keycloakify/tools/useIsPasswordRevealed
+ */
+export function useIsPasswordRevealed(params: { passwordInputId: string }) {
+    const { passwordInputId } = params;
+
+    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);
+
+    useEffect(() => {
+        const passwordInputElement = document.getElementById(passwordInputId);
+
+        if (!(passwordInputElement instanceof HTMLInputElement)) {
+            return;
+        }
+
+        passwordInputElement.type = isPasswordRevealed ? "text" : "password";
+    }, [isPasswordRevealed, passwordInputId]);
+
+    return {
+        isPasswordRevealed,
+        toggleIsPasswordRevealed: () => setIsPasswordRevealed(revealed => !revealed)
+    };
+}