@keycloakify/login-ui 250004.0.33

package/keycloak-theme/login/pages/login-reset-password/Form.tsx

@@ -0,0 +1,78 @@
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+
+export function Form() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-reset-password.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <form
+            id="kc-reset-password-form"
+            className={kcClsx("kcFormClass")}
+            action={kcContext.url.loginAction}
+            method="post"
+        >
+            <div className={kcClsx("kcFormGroupClass")}>
+                <div className={kcClsx("kcLabelWrapperClass")}>
+                    <label htmlFor="username" className={kcClsx("kcLabelClass")}>
+                        {!kcContext.realm.loginWithEmailAllowed
+                            ? msg("username")
+                            : !kcContext.realm.registrationEmailAsUsername
+                              ? msg("usernameOrEmail")
+                              : msg("email")}
+                    </label>
+                </div>
+                <div className={kcClsx("kcInputWrapperClass")}>
+                    <input
+                        type="text"
+                        id="username"
+                        name="username"
+                        className={kcClsx("kcInputClass")}
+                        autoFocus
+                        defaultValue={kcContext.auth.attemptedUsername ?? ""}
+                        aria-invalid={kcContext.messagesPerField.existsError("username")}
+                    />
+                    {kcContext.messagesPerField.existsError("username") && (
+                        <span
+                            id="input-error-username"
+                            className={kcClsx("kcInputErrorMessageClass")}
+                            aria-live="polite"
+                            dangerouslySetInnerHTML={{
+                                __html: kcSanitize(kcContext.messagesPerField.get("username"))
+                            }}
+                        />
+                    )}
+                </div>
+            </div>
+            <div className={kcClsx("kcFormGroupClass", "kcFormSettingClass")}>
+                <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                    <div className={kcClsx("kcFormOptionsWrapperClass")}>
+                        <span>
+                            <a href={kcContext.url.loginUrl}>{msg("backToLogin")}</a>
+                        </span>
+                    </div>
+                </div>
+
+                <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                    <input
+                        className={kcClsx(
+                            "kcButtonClass",
+                            "kcButtonPrimaryClass",
+                            "kcButtonBlockClass",
+                            "kcButtonLargeClass"
+                        )}
+                        type="submit"
+                        value={msgStr("doSubmit")}
+                    />
+                </div>
+            </div>
+        </form>
+    );
+}

package/keycloak-theme/login/pages/login-reset-password/Page.tsx

@@ -0,0 +1,27 @@
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+import { Form } from "./Form";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-reset-password.ftl");
+
+    const { msg } = useI18n();
+
+    return (
+        <Template
+            displayInfo
+            displayMessage={!kcContext.messagesPerField.existsError("username")}
+            infoNode={
+                kcContext.realm.duplicateEmailsAllowed
+                    ? msg("emailInstructionUsername")
+                    : msg("emailInstruction")
+            }
+            headerNode={msg("emailForgotTitle")}
+        >
+            <Form />
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-reset-password/index.ts

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

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

@@ -0,0 +1,132 @@
+import { assert } from "tsafe/assert";
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+import { PasswordWrapper } from "../../components/PasswordWrapper";
+import { LogoutOtherSessions } from "../../components/LogoutOtherSessions";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-update-password.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { msg, msgStr } = useI18n();
+
+    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
+
+    return (
+        <Template
+            displayMessage={!messagesPerField.existsError("password", "password-confirm")}
+            headerNode={msg("updatePasswordTitle")}
+        >
+            <form
+                id="kc-passwd-update-form"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                method="post"
+            >
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="password-new" className={kcClsx("kcLabelClass")}>
+                            {msg("passwordNew")}
+                        </label>
+                    </div>
+                    <div className={kcClsx("kcInputWrapperClass")}>
+                        <PasswordWrapper passwordInputId="password-new">
+                            <input
+                                type="password"
+                                id="password-new"
+                                name="password-new"
+                                className={kcClsx("kcInputClass")}
+                                autoFocus
+                                autoComplete="new-password"
+                                aria-invalid={messagesPerField.existsError(
+                                    "password",
+                                    "password-confirm"
+                                )}
+                            />
+                        </PasswordWrapper>
+
+                        {messagesPerField.existsError("password") && (
+                            <span
+                                id="input-error-password"
+                                className={kcClsx("kcInputErrorMessageClass")}
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(messagesPerField.get("password"))
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="password-confirm" className={kcClsx("kcLabelClass")}>
+                            {msg("passwordConfirm")}
+                        </label>
+                    </div>
+                    <div className={kcClsx("kcInputWrapperClass")}>
+                        <PasswordWrapper passwordInputId="password-confirm">
+                            <input
+                                type="password"
+                                id="password-confirm"
+                                name="password-confirm"
+                                className={kcClsx("kcInputClass")}
+                                autoFocus
+                                autoComplete="new-password"
+                                aria-invalid={messagesPerField.existsError(
+                                    "password",
+                                    "password-confirm"
+                                )}
+                            />
+                        </PasswordWrapper>
+
+                        {messagesPerField.existsError("password-confirm") && (
+                            <span
+                                id="input-error-password-confirm"
+                                className={kcClsx("kcInputErrorMessageClass")}
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(messagesPerField.get("password-confirm"))
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <LogoutOtherSessions />
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <input
+                            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/login-update-password/index.ts

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

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

@@ -0,0 +1,70 @@
+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";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-update-profile.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { messagesPerField, url, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+
+    return (
+        <Template
+            displayRequiredFields
+            headerNode={msg("loginProfileTitle")}
+            displayMessage={messagesPerField.exists("global")}
+        >
+            <form
+                id="kc-update-profile-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>
+                    <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"
+                                formNoValidate
+                            >
+                                {msg("doCancel")}
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

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

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

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

@@ -0,0 +1,176 @@
+import { assert } from "tsafe/assert";
+import { useState } from "react";
+import { clsx } from "@keycloakify/login-ui/tools/clsx";
+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 === "login-username.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { social, realm, url, usernameHidden, login, registrationDisabled, messagesPerField } =
+        kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+
+    return (
+        <Template
+            displayMessage={!messagesPerField.existsError("username")}
+            displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
+            infoNode={
+                <div id="kc-registration">
+                    <span>
+                        {msg("noAccount")}
+                        <a tabIndex={6} href={url.registrationUrl}>
+                            {msg("doRegister")}
+                        </a>
+                    </span>
+                </div>
+            }
+            headerNode={msg("doLogIn")}
+            socialProvidersNode={
+                <>
+                    {realm.password &&
+                        social?.providers !== undefined &&
+                        social.providers.length !== 0 && (
+                            <div
+                                id="kc-social-providers"
+                                className={kcClsx("kcFormSocialAccountSectionClass")}
+                            >
+                                <hr />
+                                <h2>{msg("identity-provider-login-label")}</h2>
+                                <ul
+                                    className={kcClsx(
+                                        "kcFormSocialAccountListClass",
+                                        social.providers.length > 3 && "kcFormSocialAccountListGridClass"
+                                    )}
+                                >
+                                    {social.providers.map((...[p, , providers]) => (
+                                        <li key={p.alias}>
+                                            <a
+                                                id={`social-${p.alias}`}
+                                                className={kcClsx(
+                                                    "kcFormSocialAccountListButtonClass",
+                                                    providers.length > 3 && "kcFormSocialAccountGridItem"
+                                                )}
+                                                type="button"
+                                                href={p.loginUrl}
+                                            >
+                                                {p.iconClasses && (
+                                                    <i
+                                                        className={clsx(
+                                                            kcClsx("kcCommonLogoIdP"),
+                                                            p.iconClasses
+                                                        )}
+                                                        aria-hidden="true"
+                                                    ></i>
+                                                )}
+                                                <span
+                                                    className={clsx(
+                                                        kcClsx("kcFormSocialAccountNameClass"),
+                                                        p.iconClasses && "kc-social-icon-text"
+                                                    )}
+                                                >
+                                                    {p.displayName}
+                                                </span>
+                                            </a>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        )}
+                </>
+            }
+        >
+            <div id="kc-form">
+                <div id="kc-form-wrapper">
+                    {realm.password && (
+                        <form
+                            id="kc-form-login"
+                            onSubmit={() => {
+                                setIsLoginButtonDisabled(true);
+                                return true;
+                            }}
+                            action={url.loginAction}
+                            method="post"
+                        >
+                            {!usernameHidden && (
+                                <div className={kcClsx("kcFormGroupClass")}>
+                                    <label htmlFor="username" className={kcClsx("kcLabelClass")}>
+                                        {!realm.loginWithEmailAllowed
+                                            ? msg("username")
+                                            : !realm.registrationEmailAsUsername
+                                              ? msg("usernameOrEmail")
+                                              : msg("email")}
+                                    </label>
+                                    <input
+                                        tabIndex={2}
+                                        id="username"
+                                        className={kcClsx("kcInputClass")}
+                                        name="username"
+                                        defaultValue={login.username ?? ""}
+                                        type="text"
+                                        autoFocus
+                                        autoComplete="username"
+                                        aria-invalid={messagesPerField.existsError("username")}
+                                    />
+                                    {messagesPerField.existsError("username") && (
+                                        <span
+                                            id="input-error"
+                                            className={kcClsx("kcInputErrorMessageClass")}
+                                            aria-live="polite"
+                                        >
+                                            {messagesPerField.getFirstError("username")}
+                                        </span>
+                                    )}
+                                </div>
+                            )}
+
+                            <div className={kcClsx("kcFormGroupClass", "kcFormSettingClass")}>
+                                <div id="kc-form-options">
+                                    {realm.rememberMe && !usernameHidden && (
+                                        <div className="checkbox">
+                                            <label>
+                                                <input
+                                                    tabIndex={3}
+                                                    id="rememberMe"
+                                                    name="rememberMe"
+                                                    type="checkbox"
+                                                    defaultChecked={!!login.rememberMe}
+                                                />{" "}
+                                                {msg("rememberMe")}
+                                            </label>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div id="kc-form-buttons" className={kcClsx("kcFormGroupClass")}>
+                                <input
+                                    tabIndex={4}
+                                    disabled={isLoginButtonDisabled}
+                                    className={kcClsx(
+                                        "kcButtonClass",
+                                        "kcButtonPrimaryClass",
+                                        "kcButtonBlockClass",
+                                        "kcButtonLargeClass"
+                                    )}
+                                    name="login"
+                                    id="kc-login"
+                                    type="submit"
+                                    value={msgStr("doLogIn")}
+                                />
+                            </div>
+                        </form>
+                    )}
+                </div>
+            </div>
+        </Template>
+    );
+}

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

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

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

@@ -0,0 +1,31 @@
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-verify-email.ftl");
+
+    const { msg } = useI18n();
+
+    const { url, user } = kcContext;
+
+    return (
+        <Template
+            displayInfo
+            headerNode={msg("emailVerifyTitle")}
+            infoNode={
+                <p className="instruction">
+                    {msg("emailVerifyInstruction2")}
+                    <br />
+                    <a href={url.loginAction}>{msg("doClickHere")}</a>
+                    &nbsp;
+                    {msg("emailVerifyInstruction3")}
+                </p>
+            }
+        >
+            <p className="instruction">{msg("emailVerifyInstruction1", user?.email ?? "")}</p>
+        </Template>
+    );
+}

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

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

package/keycloak-theme/login/pages/login-x509-info/Page.tsx

@@ -0,0 +1,97 @@
+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 === "login-x509-info.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { url, x509 } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template headerNode={msg("doLogIn")}>
+            <form
+                id="kc-x509-login-info"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                method="post"
+            >
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div className={kcClsx("kcLabelWrapperClass")}>
+                        <label htmlFor="certificate_subjectDN" className={kcClsx("kcLabelClass")}>
+                            {msg("clientCertificate")}
+                        </label>
+                    </div>
+                    {x509.formData.subjectDN ? (
+                        <div className={kcClsx("kcLabelWrapperClass")}>
+                            <label id="certificate_subjectDN" className={kcClsx("kcLabelClass")}>
+                                {x509.formData.subjectDN}
+                            </label>
+                        </div>
+                    ) : (
+                        <div className={kcClsx("kcLabelWrapperClass")}>
+                            <label id="certificate_subjectDN" className={kcClsx("kcLabelClass")}>
+                                {msg("noCertificate")}
+                            </label>
+                        </div>
+                    )}
+                </div>
+                <div className={kcClsx("kcFormGroupClass")}>
+                    {x509.formData.isUserEnabled && (
+                        <>
+                            <div className={kcClsx("kcLabelWrapperClass")}>
+                                <label htmlFor="username" className={kcClsx("kcLabelClass")}>
+                                    {msg("doX509Login")}
+                                </label>
+                            </div>
+                            <div className={kcClsx("kcLabelWrapperClass")}>
+                                <label id="username" className={kcClsx("kcLabelClass")}>
+                                    {x509.formData.username}
+                                </label>
+                            </div>
+                        </>
+                    )}
+                </div>
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <div className={kcClsx("kcFormButtonsWrapperClass")}>
+                            <input
+                                className={kcClsx(
+                                    "kcButtonClass",
+                                    "kcButtonPrimaryClass",
+                                    "kcButtonLargeClass"
+                                )}
+                                name="login"
+                                id="kc-login"
+                                type="submit"
+                                value={msgStr("doContinue")}
+                            />
+                            {x509.formData.isUserEnabled && (
+                                <input
+                                    className={kcClsx(
+                                        "kcButtonClass",
+                                        "kcButtonDefaultClass",
+                                        "kcButtonLargeClass"
+                                    )}
+                                    name="cancel"
+                                    id="kc-cancel"
+                                    type="submit"
+                                    value={msgStr("doIgnore")}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-x509-info/index.ts

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