Implement login-reset-password.ftl

src/bin/build-keycloak-theme/generateFtl/index.ts

@@ -9,7 +9,7 @@ import fs from "fs";
 import { join as pathJoin } from "path";
 import { objectKeys } from "evt/tools/typeSafety/objectKeys";
 
-export const pageIds= [ "login.ftl", "register.ftl", "info.ftl", "error.ftl"] as const;
+export const pageIds= [ "login.ftl", "register.ftl", "info.ftl", "error.ftl", "login-reset-password.ftl"] as const;
 
 export type PageId =  typeof pageIds[number];
 

src/bin/build-keycloak-theme/generateFtl/login-reset-password.ftl

@@ -0,0 +1,7 @@
+<script>const _= 
+{
+    "realm": {
+        "loginWithEmailAllowed": ${realm.loginWithEmailAllowed?c}
+    },
+}
+</script>

src/lib/components/KcApp.tsx

@@ -6,7 +6,8 @@ import type { KcProps } from "./KcProps";
 import { Login } from "./Login";
 import { Register } from "./Register";
 import { Info } from "./Info";
-import { Error } from "./Error";
+import { Error } from "./Error";
+import { LoginResetPassword } from "./LoginResetPassword";
 
 
 export const KcApp = memo((props: KcProps) => {
@@ -18,6 +19,7 @@ export const KcApp = memo((props: KcProps) => {
         case "register.ftl": return <Register {...props} />;
         case "info.ftl": return <Info {...props} />;
         case "error.ftl": return <Error {...props} />;
+        case "login-reset-password.ftl": return <LoginResetPassword {...props} />;
     }
 
 });

src/lib/components/LoginResetPassword.tsx

@@ -0,0 +1,86 @@
+
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import { assert } from "../tools/assert";
+import { kcContext } from "../kcContext";
+import { useKcTranslation } from "../i18n/useKcTranslation";
+import { cx } from "tss-react";
+
+export const LoginResetPassword = memo((props: KcProps) => {
+
+    const { t, tStr } = useKcTranslation();
+
+    assert(
+        kcContext !== undefined &&
+        kcContext.pageId === "login-reset-password.ftl"
+    );
+
+    const {
+        url,
+        realm,
+        auth
+    } = kcContext;
+
+    return (
+        <Template
+            {...props}
+            displayMessage={false}
+            headerNode={t("emailForgotTitle")}
+            formNode={
+                <form id="kc-reset-password-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div className={cx(props.kcLabelWrapperClass)}>
+                            <label htmlFor="username" className={cx(props.kcLabelClass)}>
+                                {
+                                    !realm.loginWithEmailAllowed ?
+                                        t("username")
+                                        :
+                                        !realm.registrationEmailAsUsername ?
+                                            t("usernameOrEmail") :
+                                            t("email")
+                                }
+                            </label>
+                        </div>
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input
+                                type="text"
+                                id="username"
+                                name="username"
+                                className={cx(props.kcInputClass)}
+                                autoFocus
+                                defaultValue={
+                                    auth !== undefined && auth.showUsername ?
+                                        auth.attemptedUsername : undefined
+                                }
+                            />
+                        </div>
+                    </div>
+                    <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
+                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                            <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                <span>
+                                    <a href={url.loginUrl}>{t("backToLogin")}</a>
+                                </span>
+                            </div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                            <input
+                                className={cx(
+                                    props.kcButtonClass, props.kcButtonPrimaryClass,
+                                    props.kcButtonBlockClass, props.kcButtonLargeClass
+                                )}
+                                type="submit"
+                                defaultValue={tStr("doSubmit")}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+            infoNode={t("emailInstruction")}
+        />
+    );
+});
+
+

src/lib/components/Template.tsx

@@ -24,7 +24,7 @@ export type TemplateProps = {
     headerNode: ReactNode;
     showUsernameNode?: ReactNode;
     formNode: ReactNode;
-    displayInfoNode?: ReactNode;
+    infoNode?: ReactNode;
 } & KcTemplateProps;
 
 
@@ -39,7 +39,7 @@ export const Template = memo((props: TemplateProps) => {
         headerNode,
         showUsernameNode = null,
         formNode,
-        displayInfoNode = null
+        infoNode = null
     } = props;
 
     useEffect(() => { console.log("Rendering this page with react using keycloakify") }, []);
@@ -279,7 +279,7 @@ export const Template = memo((props: TemplateProps) => {
 
                             <div id="kc-info" className={cx(props.kcSignUpClass)}>
                                 <div id="kc-info-wrapper" className={cx(props.kcInfoAreaWrapperClass)}>
-                                    {displayInfoNode}
+                                    {infoNode}
                                 </div>
                             </div>
                         }

src/lib/kcContext.ts

@@ -10,7 +10,7 @@ import type { LanguageLabel } from "./i18n/KcLanguageTag";
 type ExtractAfterStartingWith<Prefix extends string, StrEnum> = 
     StrEnum extends `${Prefix}${infer U}` ? U : never;
 
-export type KcContext = KcContext.Login | KcContext.Register | KcContext.Info | KcContext.Error;
+export type KcContext = KcContext.Login | KcContext.Register | KcContext.Info | KcContext.Error | KcContext.LoginResetPassword;
 export declare namespace KcContext {
 
     export type Template = {
@@ -43,7 +43,7 @@ export declare namespace KcContext {
             showUsername: boolean;
             showResetCredentials: boolean;
             showTryAnotherWayLink: boolean;
-            attemptedUsername?: boolean;
+            attemptedUsername?: string;
         };
         scripts: string[];
         message?: {
@@ -138,6 +138,13 @@ export declare namespace KcContext {
         }
     };
 
+    export type LoginResetPassword = Template & {
+        pageId: "login-reset-password.ftl";
+        realm: {
+            loginWithEmailAllowed: boolean;
+        }
+    };
+
 }
 
 doExtends<KcContext["pageId"], PageId>();