@keycloakify/login-ui 250004.0.33

package/keycloak-theme/login/pages/logout-confirm/Page.tsx

@@ -0,0 +1,54 @@
+import { assert } from "tsafe/assert";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "logout-confirm.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { url, client, logoutConfirm } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template headerNode={msg("logoutConfirmTitle")}>
+            <div id="kc-logout-confirm" className="content-area">
+                <p className="instruction">{msg("logoutConfirmHeader")}</p>
+                <form className="form-actions" action={url.logoutConfirmAction} method="POST">
+                    <input type="hidden" name="session_code" value={logoutConfirm.code} />
+                    <div className={kcClsx("kcFormGroupClass")}>
+                        <div id="kc-form-options">
+                            <div className={kcClsx("kcFormOptionsWrapperClass")}></div>
+                        </div>
+                        <div id="kc-form-buttons" className={kcClsx("kcFormGroupClass")}>
+                            <input
+                                tabIndex={4}
+                                className={kcClsx(
+                                    "kcButtonClass",
+                                    "kcButtonPrimaryClass",
+                                    "kcButtonBlockClass",
+                                    "kcButtonLargeClass"
+                                )}
+                                name="confirmLogout"
+                                id="kc-logout"
+                                type="submit"
+                                value={msgStr("doLogout")}
+                            />
+                        </div>
+                    </div>
+                </form>
+                <div id="kc-info-message">
+                    {!logoutConfirm.skipLink && client.baseUrl && (
+                        <p>
+                            <a href={client.baseUrl}>{msg("backToApplication")}</a>
+                        </p>
+                    )}
+                </div>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/logout-confirm/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/register/Form.tsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { assert } from "tsafe/assert";
+import { clsx } from "@keycloakify/login-ui/tools/clsx";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { UserProfileFormFields } from "../../components/UserProfileFormFields";
+import { TermsAcceptance } from "./TermsAcceptance";
+
+export function Form() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "register.ftl");
+    const { kcClsx } = useKcClsx();
+    const { msg, msgStr } = useI18n();
+
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+    const [areTermsAccepted, setAreTermsAccepted] = useState(false);
+
+    return (
+        <form
+            id="kc-register-form"
+            className={kcClsx("kcFormClass")}
+            action={kcContext.url.registrationAction}
+            method="post"
+        >
+            <UserProfileFormFields onIsFormSubmittableValueChange={setIsFormSubmittable} />
+            {kcContext.termsAcceptanceRequired && (
+                <TermsAcceptance
+                    areTermsAccepted={areTermsAccepted}
+                    onAreTermsAcceptedValueChange={setAreTermsAccepted}
+                />
+            )}
+            {kcContext.recaptchaRequired &&
+                (kcContext.recaptchaVisible || kcContext.recaptchaAction === undefined) && (
+                    <div className="form-group">
+                        <div className={kcClsx("kcInputWrapperClass")}>
+                            <div
+                                className="g-recaptcha"
+                                data-size="compact"
+                                data-sitekey={kcContext.recaptchaSiteKey}
+                                data-action={kcContext.recaptchaAction}
+                            ></div>
+                        </div>
+                    </div>
+                )}
+            <div className={kcClsx("kcFormGroupClass")}>
+                <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                    <div className={kcClsx("kcFormOptionsWrapperClass")}>
+                        <span>
+                            <a href={kcContext.url.loginUrl}>{msg("backToLogin")}</a>
+                        </span>
+                    </div>
+                </div>
+
+                {kcContext.recaptchaRequired &&
+                !kcContext.recaptchaVisible &&
+                kcContext.recaptchaAction !== undefined ? (
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <button
+                            className={clsx(
+                                kcClsx(
+                                    "kcButtonClass",
+                                    "kcButtonPrimaryClass",
+                                    "kcButtonBlockClass",
+                                    "kcButtonLargeClass"
+                                ),
+                                "g-recaptcha"
+                            )}
+                            data-sitekey={kcContext.recaptchaSiteKey}
+                            data-callback={() => {
+                                (
+                                    document.getElementById("kc-register-form") as HTMLFormElement
+                                ).submit();
+                            }}
+                            data-action={kcContext.recaptchaAction}
+                            type="submit"
+                        >
+                            {msg("doRegister")}
+                        </button>
+                    </div>
+                ) : (
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input
+                            disabled={
+                                !isFormSubmittable ||
+                                (kcContext.termsAcceptanceRequired && !areTermsAccepted)
+                            }
+                            className={kcClsx(
+                                "kcButtonClass",
+                                "kcButtonPrimaryClass",
+                                "kcButtonBlockClass",
+                                "kcButtonLargeClass"
+                            )}
+                            type="submit"
+                            value={msgStr("doRegister")}
+                        />
+                    </div>
+                )}
+            </div>
+        </form>
+    );
+}

package/keycloak-theme/login/pages/register/Page.tsx

@@ -0,0 +1,26 @@
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { Template } from "../../components/Template";
+import { useI18n } from "../../i18n";
+import { Form } from "./Form";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "register.ftl");
+
+    const { msg, advancedMsg } = useI18n();
+
+    return (
+        <Template
+            headerNode={
+                kcContext.messageHeader !== undefined
+                    ? advancedMsg(kcContext.messageHeader)
+                    : msg("registerTitle")
+            }
+            displayMessage={kcContext.messagesPerField.exists("global")}
+            displayRequiredFields
+        >
+            <Form />
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/register/TermsAcceptance.tsx

@@ -0,0 +1,54 @@
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+
+export function TermsAcceptance(props: {
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+}) {
+    const { areTermsAccepted, onAreTermsAcceptedValueChange } = props;
+
+    const { kcContext } = useKcContext();
+    const { msg } = useI18n();
+    const { kcClsx } = useKcClsx();
+
+    return (
+        <>
+            <div className="form-group">
+                <div className={kcClsx("kcInputWrapperClass")}>
+                    {msg("termsTitle")}
+                    <div id="kc-registration-terms-text">{msg("termsText")}</div>
+                </div>
+            </div>
+            <div className="form-group">
+                <div className={kcClsx("kcLabelWrapperClass")}>
+                    <input
+                        type="checkbox"
+                        id="termsAccepted"
+                        name="termsAccepted"
+                        className={kcClsx("kcCheckboxInputClass")}
+                        checked={areTermsAccepted}
+                        onChange={e => onAreTermsAcceptedValueChange(e.target.checked)}
+                        aria-invalid={kcContext.messagesPerField.existsError("termsAccepted")}
+                    />
+                    <label htmlFor="termsAccepted" className={kcClsx("kcLabelClass")}>
+                        {msg("acceptTerms")}
+                    </label>
+                </div>
+                {kcContext.messagesPerField.existsError("termsAccepted") && (
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <span
+                            id="input-error-terms-accepted"
+                            className={kcClsx("kcInputErrorMessageClass")}
+                            aria-live="polite"
+                            dangerouslySetInnerHTML={{
+                                __html: kcSanitize(kcContext.messagesPerField.get("termsAccepted"))
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+        </>
+    );
+}

package/keycloak-theme/login/pages/register/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/saml-post-form/Page.tsx

@@ -0,0 +1,50 @@
+import { assert } from "tsafe/assert";
+import { useEffect, useState } from "react";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "saml-post-form.ftl");
+
+    const { msgStr, msg } = useI18n();
+
+    const { samlPost } = kcContext;
+
+    const [htmlFormElement, setHtmlFormElement] = useState<HTMLFormElement | null>(null);
+
+    useEffect(() => {
+        if (htmlFormElement === null) {
+            return;
+        }
+
+        // Storybook
+        if (samlPost.url === "#") {
+            alert("In a real Keycloak the user would be redirected immediately");
+            return;
+        }
+
+        htmlFormElement.submit();
+    }, [htmlFormElement]);
+    return (
+        <Template headerNode={msg("saml.post-form.title")}>
+            <p>{msg("saml.post-form.message")}</p>
+            <form name="saml-post-binding" method="post" action={samlPost.url} ref={setHtmlFormElement}>
+                {samlPost.SAMLRequest && (
+                    <input type="hidden" name="SAMLRequest" value={samlPost.SAMLRequest} />
+                )}
+                {samlPost.SAMLResponse && (
+                    <input type="hidden" name="SAMLResponse" value={samlPost.SAMLResponse} />
+                )}
+                {samlPost.relayState && (
+                    <input type="hidden" name="RelayState" value={samlPost.relayState} />
+                )}
+                <noscript>
+                    <p>{msg("saml.post-form.js-disabled")}</p>
+                    <input type="submit" value={msgStr("doContinue")} />
+                </noscript>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/saml-post-form/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/select-authenticator/Page.tsx

@@ -0,0 +1,59 @@
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "select-authenticator.ftl");
+
+    const { url, auth } = kcContext;
+
+    const { kcClsx } = useKcClsx();
+    const { msg, advancedMsg } = useI18n();
+
+    return (
+        <Template displayInfo={false} headerNode={msg("loginChooseAuthenticator")}>
+            <form
+                id="kc-select-credential-form"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                method="post"
+            >
+                <div className={kcClsx("kcSelectAuthListClass")}>
+                    {auth.authenticationSelections.map((authenticationSelection, i) => (
+                        <button
+                            key={i}
+                            className={kcClsx("kcSelectAuthListItemClass")}
+                            type="submit"
+                            name="authenticationExecution"
+                            value={authenticationSelection.authExecId}
+                        >
+                            <div className={kcClsx("kcSelectAuthListItemIconClass")}>
+                                <i
+                                    className={kcClsx(
+                                        "kcSelectAuthListItemIconPropertyClass",
+                                        authenticationSelection.iconCssClass
+                                    )}
+                                />
+                            </div>
+                            <div className={kcClsx("kcSelectAuthListItemBodyClass")}>
+                                <div className={kcClsx("kcSelectAuthListItemHeadingClass")}>
+                                    {advancedMsg(authenticationSelection.displayName)}
+                                </div>
+                                <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>
+                                    {advancedMsg(authenticationSelection.helpText)}
+                                </div>
+                            </div>
+                            <div className={kcClsx("kcSelectAuthListItemFillClass")} />
+                            <div className={kcClsx("kcSelectAuthListItemArrowClass")}>
+                                <i className={kcClsx("kcSelectAuthListItemArrowIconClass")} />
+                            </div>
+                        </button>
+                    ))}
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/select-authenticator/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/terms/Page.tsx

@@ -0,0 +1,45 @@
+import { assert } from "tsafe/assert";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "select-authenticator.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { msg, msgStr } = useI18n();
+
+    const { url } = kcContext;
+
+    return (
+        <Template displayMessage={false} headerNode={msg("termsTitle")}>
+            <div id="kc-terms-text">{msg("termsText")}</div>
+            <form className="form-actions" action={url.loginAction} method="POST">
+                <input
+                    className={kcClsx(
+                        "kcButtonClass",
+                        "kcButtonClass",
+                        "kcButtonClass",
+                        "kcButtonPrimaryClass",
+                        "kcButtonLargeClass"
+                    )}
+                    name="accept"
+                    id="kc-accept"
+                    type="submit"
+                    value={msgStr("doAccept")}
+                />
+                <input
+                    className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
+                    name="cancel"
+                    id="kc-decline"
+                    type="submit"
+                    value={msgStr("doDecline")}
+                />
+            </form>
+            <div className="clearfix" />
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/terms/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/update-email/Page.tsx

@@ -0,0 +1,74 @@
+import { assert } from "tsafe/assert";
+import { useState } from "react";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+import { UserProfileFormFields } from "../../components/UserProfileFormFields";
+import { LogoutOtherSessions } from "../../components/LogoutOtherSessions";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "update-email.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { msg, msgStr } = useI18n();
+
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+
+    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
+
+    return (
+        <Template
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields
+            headerNode={msg("updateEmailTitle")}
+        >
+            <form
+                id="kc-update-email-form"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                method="post"
+            >
+                <UserProfileFormFields onIsFormSubmittableValueChange={setIsFormSubmittable} />
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+
+                    <LogoutOtherSessions />
+
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input
+                            disabled={!isFormSubmittable}
+                            className={kcClsx(
+                                "kcButtonClass",
+                                "kcButtonPrimaryClass",
+                                isAppInitiatedAction && "kcButtonBlockClass",
+                                "kcButtonLargeClass"
+                            )}
+                            type="submit"
+                            value={msgStr("doSubmit")}
+                        />
+                        {isAppInitiatedAction && (
+                            <button
+                                className={kcClsx(
+                                    "kcButtonClass",
+                                    "kcButtonDefaultClass",
+                                    "kcButtonLargeClass"
+                                )}
+                                type="submit"
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                {msg("doCancel")}
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/update-email/index.ts

@@ -0,0 +1,3 @@
+import { Page } from "./Page";
+
+export default Page;