diff --git a/.trigger b/.trigger deleted file mode 100644 index c094da132..000000000 --- a/.trigger +++ /dev/null @@ -1 +0,0 @@ -// 🐛 debug push diff --git a/github_assets/subcloakify_1.png b/github_assets/subcloakify_1.png index e91e7141c..ec365e00d 100644 Binary files a/github_assets/subcloakify_1.png and b/github_assets/subcloakify_1.png differ diff --git a/src/login/UserProfileFormFields.tsx b/src/login/UserProfileFormFields.tsx index 569e2f4e0..6d514b32f 100644 --- a/src/login/UserProfileFormFields.tsx +++ b/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, diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx index 244f41c74..a220bf1a8 100644 --- a/src/login/pages/Login.tsx +++ b/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"; diff --git a/src/login/useIsPasswordRevealed.ts b/src/login/useIsPasswordRevealed.ts new file mode 100644 index 000000000..19227505b --- /dev/null +++ b/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) + }; +}