keycloakify 11.9.16 → 11.11.0

package/src/login/i18n/messages_defaultSet/pt-BR.ts

@@ -391,7 +391,8 @@ const messages = {
     selectAnOption: "Selecione uma opção",
     remove: "Remover",
     addValue: "Adicionar valor",
-    languages: "Idiomas"
+    languages: "Idiomas",
+    "organization.select": "Selecione uma organização para continuar:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/pt.ts

@@ -512,7 +512,8 @@ const messages = {
     selectAnOption: "Selecione uma opção",
     remove: "Remover",
     addValue: "Adicionar valor",
-    languages: "Idiomas"
+    languages: "Idiomas",
+    "organization.select": "Selecione uma organização para continuar:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/ru.ts

@@ -252,7 +252,8 @@ const messages = {
     selectAnOption: "Выберите вариант",
     remove: "Удалить",
     addValue: "Добавить значение",
-    languages: "Языки"
+    languages: "Языки",
+    "organization.select": "Выберите организацию, чтобы продолжить:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/sk.ts

@@ -496,7 +496,8 @@ const messages = {
     selectAnOption: "Vyberte možnosť",
     remove: "Odstrániť",
     addValue: "Pridať hodnotu",
-    languages: "Jazyky"
+    languages: "Jazyky",
+    "organization.select": "Vyberte organizáciu, aby ste pokračovali:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/sv.ts

@@ -222,7 +222,8 @@ const messages = {
     selectAnOption: "Välj ett alternativ",
     remove: "Ta bort",
     addValue: "Lägg till värde",
-    languages: "Språk"
+    languages: "Språk",
+    "organization.select": "Välj en organisation för att fortsätta:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/th.ts

@@ -484,7 +484,8 @@ const messages = {
     selectAnOption: "เลือกตัวเลือก",
     remove: "ลบ",
     addValue: "เพิ่มค่า",
-    languages: "ภาษา"
+    languages: "ภาษา",
+    "organization.select": "เลือกองค์กรเพื่อดำเนินการต่อ:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/tr.ts

@@ -299,7 +299,8 @@ const messages = {
     selectAnOption: "Bir seçenek seçin",
     remove: "Kaldır",
     addValue: "Değer ekle",
-    languages: "Diller"
+    languages: "Diller",
+    "organization.select": "Devam etmek için bir organizasyon seçin:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/uk.ts

@@ -510,7 +510,8 @@ const messages = {
     selectAnOption: "Виберіть опцію",
     remove: "Видалити",
     addValue: "Додати значення",
-    languages: "Мови"
+    languages: "Мови",
+    "organization.select": "Виберіть організацію, щоб продовжити:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/zh-CN.ts

@@ -455,7 +455,8 @@ const messages = {
     selectAnOption: "选择一个选项",
     remove: "移除",
     addValue: "添加值",
-    languages: "语言"
+    languages: "语言",
+    "organization.select": "选择一个组织以继续:"
 };
 
 export default messages;

package/src/login/i18n/messages_defaultSet/zh-TW.ts

@@ -464,7 +464,8 @@ const messages = {
     selectAnOption: "選擇一個選項",
     remove: "移除",
     addValue: "添加值",
-    languages: "語言"
+    languages: "語言",
+    "organization.select": "選擇一個組織以繼續:"
 };
 
 export default messages;

package/src/login/lib/kcClsx.ts

@@ -122,6 +122,7 @@ export type ClassKey =
     | "kcFormHeaderClass"
     | "kcFormSocialAccountGridItem"
     | "kcButtonPrimaryClass"
+    | "kcButtonSecondaryClass"
     | "kcInputHelperTextBeforeClass"
     | "kcLogoIdP-github"
     | "kcLabelClass";
@@ -256,6 +257,7 @@ export const { getKcClsx } = createGetKcClsx<ClassKey>({
         kcFormHeaderClass: "login-pf-header",
         kcFormSocialAccountGridItem: "pf-l-grid__item",
         kcButtonPrimaryClass: "pf-m-primary",
+        kcButtonSecondaryClass: "pf-m-secondary",
         kcInputHelperTextBeforeClass:
             "pf-c-form__helper-text pf-c-form__helper-text-before",
         "kcLogoIdP-github": "fa fa-github",

package/src/login/pages/LoginUsername.tsx

@@ -4,6 +4,7 @@ import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
+import { useScript } from "keycloakify/login/pages/LoginUsername.useScript";
 
 export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -13,12 +14,21 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
         classes
     });
 
-    const { social, realm, url, usernameHidden, login, registrationDisabled, messagesPerField } = kcContext;
+    const { social, realm, url, usernameHidden, login, registrationDisabled, messagesPerField, enableWebAuthnConditionalUI, authenticators } =
+        kcContext;
 
     const { msg, msgStr } = i18n;
 
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
+    const authButtonId = "authenticateWebAuthnButton";
+
+    useScript({
+        authButtonId,
+        kcContext,
+        i18n
+    });
+
     return (
         <Template
             kcContext={kcContext}
@@ -143,6 +153,32 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
                     )}
                 </div>
             </div>
+            {enableWebAuthnConditionalUI && (
+                <>
+                    <form id="webauth" action={url.loginAction} method="post">
+                        <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                        <input type="hidden" id="authenticatorData" name="authenticatorData" />
+                        <input type="hidden" id="signature" name="signature" />
+                        <input type="hidden" id="credentialId" name="credentialId" />
+                        <input type="hidden" id="userHandle" name="userHandle" />
+                        <input type="hidden" id="error" name="error" />
+                    </form>
+
+                    {authenticators !== undefined && Object.keys(authenticators).length !== 0 && (
+                        <>
+                            <form id="authn_select" className={kcClsx("kcFormClass")}>
+                                {authenticators.authenticators.map((authenticator, i) => (
+                                    <input key={i} type="hidden" name="authn_use_chk" readOnly value={authenticator.credentialId} />
+                                ))}
+                            </form>
+                        </>
+                    )}
+                    <br />
+                    <a id={authButtonId} href="#" className={kcClsx("kcButtonSecondaryClass", "kcButtonBlockClass")}>
+                        {msg("passkey-doAuthenticate")}
+                    </a>
+                </>
+            )}
         </Template>
     );
 }

package/src/login/pages/LoginUsername.useScript.tsx

@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { assert } from "keycloakify/tools/assert";
+import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
+
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: "true" | "false";
+    challenge: string;
+    userVerification: KcContext.WebauthnAuthenticate["userVerification"];
+    rpId: string;
+    createTimeout: number | string;
+};
+
+assert<keyof KcContextLike extends keyof KcContext.LoginUsername ? true : false>();
+assert<KcContext.LoginUsername extends KcContextLike ? true : false>();
+
+type I18nLike = {
+    msgStr: (key: "webauthn-unsupported-browser-text") => string;
+    isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
+    const { authButtonId, kcContext, i18n } = params;
+
+    const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+
+    const { msgStr, isFetchingTranslations } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginUsername",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    const authButton = document.getElementById('${authButtonId}');
+                    authButton.addEventListener("click", function() {
+                        const input = {
+                            isUserIdentified : ${isUserIdentified},
+                            challenge : '${challenge}',
+                            userVerification : '${userVerification}',
+                            rpId : '${rpId}',
+                            createTimeout : ${createTimeout},
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        };
+                        authenticateByWebAuthn(input);
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: authButtonId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}

package/src/login/pages/SelectOrganization.tsx

@@ -0,0 +1,69 @@
+import { MouseEvent, useRef, useState } from "react";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
+import type { PageProps } from "keycloakify/login/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+
+export default function SelectOrganization(props: PageProps<Extract<KcContext, { pageId: "select-organization.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, user } = kcContext;
+
+    const { msg } = i18n;
+
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const formRef = useRef<HTMLFormElement>(null);
+    const organizationInputRef = useRef<HTMLInputElement>(null);
+
+    const onOrganizationClick = (organizationAlias: string) => (event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+
+        if (!organizationInputRef.current || !formRef.current) {
+            return;
+        }
+
+        organizationInputRef.current.value = organizationAlias;
+        setIsSubmitting(true);
+
+        if (typeof formRef.current.requestSubmit === "function") {
+            formRef.current.requestSubmit();
+            return;
+        }
+
+        formRef.current.submit();
+    };
+
+    const organizations = user.organizations ?? [];
+    const shouldDisplayGrid = organizations.length > 3;
+
+    return (
+        <Template kcContext={kcContext} i18n={i18n} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={null}>
+            <form ref={formRef} action={url.loginAction} className="form-vertical" method="post">
+                <div id="kc-user-organizations" className={kcClsx("kcFormGroupClass")}>
+                    <h2>{msg("organization.select")}</h2>
+                    <ul className={kcClsx("kcFormSocialAccountListClass", shouldDisplayGrid && "kcFormSocialAccountListGridClass")}>
+                        {organizations.map(({ alias, name }) => (
+                            <li key={alias}>
+                                <button
+                                    id={`organization-${alias}`}
+                                    className={kcClsx("kcFormSocialAccountListButtonClass", shouldDisplayGrid && "kcFormSocialAccountGridItem")}
+                                    type="button"
+                                    onClick={onOrganizationClick(alias)}
+                                    disabled={isSubmitting}
+                                >
+                                    <span className={kcClsx("kcFormSocialAccountNameClass")}>{name ?? alias}</span>
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                <input ref={organizationInputRef} type="hidden" name="kc.org" />
+            </form>
+        </Template>
+    );
+}

package/stories/login/pages/SelectOrganization.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "select-organization.ftl" });
+
+const meta = {
+    title: "login/select-organization.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/vite-plugin/index.js

@@ -1076,7 +1076,8 @@ const LOGIN_THEME_PAGE_IDS = [
     "login-x509-info.ftl",
     "webauthn-error.ftl",
     "login-passkeys-conditional-authenticate.ftl",
-    "login-idp-link-confirm-override.ftl"
+    "login-idp-link-confirm-override.ftl",
+    "select-organization.ftl"
 ];
 const ACCOUNT_THEME_PAGE_IDS = [
     "password.ftl",