keycloakify 11.10.0 → 11.11.0

package/login/pages/SelectOrganization.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { getKcClsx } from "../../login/lib/kcClsx";
+export default function SelectOrganization(props) {
+    var _a;
+    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(null);
+    const organizationInputRef = useRef(null);
+    const onOrganizationClick = (organizationAlias) => (event) => {
+        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 = (_a = user.organizations) !== null && _a !== void 0 ? _a : [];
+    const shouldDisplayGrid = organizations.length > 3;
+    return (_jsx(Template, Object.assign({ kcContext: kcContext, i18n: i18n, doUseDefaultCss: doUseDefaultCss, classes: classes, headerNode: null }, { children: _jsxs("form", Object.assign({ ref: formRef, action: url.loginAction, className: "form-vertical", method: "post" }, { children: [_jsxs("div", Object.assign({ id: "kc-user-organizations", className: kcClsx("kcFormGroupClass") }, { children: [_jsx("h2", { children: msg("organization.select") }), _jsx("ul", Object.assign({ className: kcClsx("kcFormSocialAccountListClass", shouldDisplayGrid && "kcFormSocialAccountListGridClass") }, { children: organizations.map(({ alias, name }) => (_jsx("li", { children: _jsx("button", Object.assign({ id: `organization-${alias}`, className: kcClsx("kcFormSocialAccountListButtonClass", shouldDisplayGrid && "kcFormSocialAccountGridItem"), type: "button", onClick: onOrganizationClick(alias), disabled: isSubmitting }, { children: _jsx("span", Object.assign({ className: kcClsx("kcFormSocialAccountNameClass") }, { children: name !== null && name !== void 0 ? name : alias })) })) }, alias))) }))] })), _jsx("input", { ref: organizationInputRef, type: "hidden", name: "kc.org" })] })) })));
+}
+//# sourceMappingURL=SelectOrganization.js.map

package/login/pages/SelectOrganization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOrganization.js","sourceRoot":"","sources":["../../src/login/pages/SelectOrganization.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAKzD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAiF;;IACxH,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEtE,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACzB,eAAe;QACf,OAAO;KACV,CAAC,CAAC;IAEH,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;IAEhC,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAErB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC9C,MAAM,oBAAoB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE5D,MAAM,mBAAmB,GAAG,CAAC,iBAAyB,EAAE,EAAE,CAAC,CAAC,KAAoC,EAAE,EAAE;QAChG,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,oBAAoB,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACnD,OAAO;SACV;QAED,oBAAoB,CAAC,OAAO,CAAC,KAAK,GAAG,iBAAiB,CAAC;QACvD,eAAe,CAAC,IAAI,CAAC,CAAC;QAEtB,IAAI,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,KAAK,UAAU,EAAE;YACrD,OAAO,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;YAChC,OAAO;SACV;QAED,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,aAAa,mCAAI,EAAE,CAAC;IAC/C,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAEnD,OAAO,CACH,KAAC,QAAQ,kBAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,gBAC5G,8BAAM,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,EAAC,eAAe,EAAC,MAAM,EAAC,MAAM,iBAChF,6BAAK,EAAE,EAAC,uBAAuB,EAAC,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,iBACjE,uBAAK,GAAG,CAAC,qBAAqB,CAAC,GAAM,EACrC,2BAAI,SAAS,EAAE,MAAM,CAAC,8BAA8B,EAAE,iBAAiB,IAAI,kCAAkC,CAAC,gBACzG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACpC,uBACI,+BACI,EAAE,EAAE,gBAAgB,KAAK,EAAE,EAC3B,SAAS,EAAE,MAAM,CAAC,oCAAoC,EAAE,iBAAiB,IAAI,6BAA6B,CAAC,EAC3G,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,mBAAmB,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,YAAY,gBAEtB,6BAAM,SAAS,EAAE,MAAM,CAAC,8BAA8B,CAAC,gBAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,IAAQ,IAC1E,IATJ,KAAK,CAUT,CACR,CAAC,IACD,KACH,EACN,gBAAO,GAAG,EAAE,oBAAoB,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,KAC7D,IACA,CACd,CAAC;AACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "11.10.0",
+    "version": "11.11.0",
     "description": "Framework to create custom Keycloak UIs",
     "repository": {
         "type": "git",
@@ -475,6 +475,9 @@
         "login/pages/SelectAuthenticator.d.ts",
         "login/pages/SelectAuthenticator.js",
         "login/pages/SelectAuthenticator.js.map",
+        "login/pages/SelectOrganization.d.ts",
+        "login/pages/SelectOrganization.js",
+        "login/pages/SelectOrganization.js.map",
         "login/pages/Terms.d.ts",
         "login/pages/Terms.js",
         "login/pages/Terms.js.map",
@@ -866,6 +869,7 @@
         "src/login/pages/Register.tsx",
         "src/login/pages/SamlPostForm.tsx",
         "src/login/pages/SelectAuthenticator.tsx",
+        "src/login/pages/SelectOrganization.tsx",
         "src/login/pages/Terms.tsx",
         "src/login/pages/UpdateEmail.tsx",
         "src/login/pages/WebauthnAuthenticate.tsx",
@@ -948,6 +952,7 @@
         "stories/login/pages/Register.stories.tsx",
         "stories/login/pages/SamlPostForm.stories.tsx",
         "stories/login/pages/SelectAuthenticator.stories.tsx",
+        "stories/login/pages/SelectOrganization.stories.tsx",
         "stories/login/pages/Terms.stories.tsx",
         "stories/login/pages/UpdateEmail.stories.tsx",
         "stories/login/pages/WebauthnAuthenticate.stories.tsx",

package/src/bin/shared/constants.ts

@@ -53,7 +53,8 @@ export 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"
 ] as const;
 
 export const ACCOUNT_THEME_PAGE_IDS = [

package/src/login/DefaultPage.tsx

@@ -43,6 +43,7 @@ const LoginX509Info = lazy(() => import("keycloakify/login/pages/LoginX509Info")
 const WebauthnError = lazy(() => import("keycloakify/login/pages/WebauthnError"));
 const LoginPasskeysConditionalAuthenticate = lazy(() => import("keycloakify/login/pages/LoginPasskeysConditionalAuthenticate"));
 const LoginIdpLinkConfirmOverride = lazy(() => import("keycloakify/login/pages/LoginIdpLinkConfirmOverride"));
+const SelectOrganization = lazy(() => import("keycloakify/login/pages/SelectOrganization"));
 
 type DefaultPageProps = PageProps<KcContext, I18n> & {
     UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
@@ -128,6 +129,8 @@ export default function DefaultPage(props: DefaultPageProps) {
                         return <LoginPasskeysConditionalAuthenticate kcContext={kcContext} {...rest} />;
                     case "login-idp-link-confirm-override.ftl":
                         return <LoginIdpLinkConfirmOverride kcContext={kcContext} {...rest} />;
+                    case "select-organization.ftl":
+                        return <SelectOrganization kcContext={kcContext} {...rest} />;
                 }
                 assert<Equals<typeof kcContext, never>>(false);
             })()}

package/src/login/KcContext/KcContext.ts

@@ -61,7 +61,8 @@ export type KcContext =
     | KcContext.LoginX509Info
     | KcContext.WebauthnError
     | KcContext.LoginPasskeysConditionalAuthenticate
-    | KcContext.LoginIdpLinkConfirmOverride;
+    | KcContext.LoginIdpLinkConfirmOverride
+    | KcContext.SelectOrganization;
 
 assert<KcContext["themeType"] extends ThemeType ? true : false>();
 
@@ -620,6 +621,16 @@ export declare namespace KcContext {
         };
         idpDisplayName: string;
     };
+
+    export type SelectOrganization = Common & {
+        pageId: "select-organization.ftl";
+        user: {
+            organizations: {
+                alias: string;
+                name?: string;
+            }[];
+        };
+    };
 }
 
 export type UserProfile = {

package/src/login/KcContext/kcContextMocks.ts

@@ -623,6 +623,29 @@ export const kcContextMocks = [
             loginRestartFlowUrl: "#"
         },
         idpDisplayName: "Google"
+    }),
+    id<KcContext.SelectOrganization>({
+        pageId: "select-organization.ftl",
+        ...kcContextCommonMock,
+        user: {
+            organizations: [
+                {
+                    alias: "acme-inc",
+                    name: "Acme Incorporated"
+                },
+                {
+                    alias: "northwind-traders",
+                    name: "Northwind Traders"
+                },
+                {
+                    alias: "contoso-labs",
+                    name: "Contoso Labs"
+                },
+                {
+                    alias: "shared-services"
+                }
+            ]
+        }
     })
 ];
 

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

@@ -478,7 +478,8 @@ const messages = {
     selectAnOption: "اختر خيارًا",
     remove: "إزالة",
     addValue: "أضف قيمة",
-    languages: "اللغات"
+    languages: "اللغات",
+    "organization.select": "اختر مؤسسة للمتابعة:"
 };
 
 export default messages;

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

@@ -510,7 +510,8 @@ const messages = {
     selectAnOption: "Selecciona una opció",
     remove: "Elimina",
     addValue: "Afegeix valor",
-    languages: "Idiomes"
+    languages: "Idiomes",
+    "organization.select": "Selecciona una organització per continuar:"
 };
 
 export default messages;

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

@@ -487,7 +487,8 @@ const messages = {
     selectAnOption: "Vyberte možnost",
     remove: "Odstranit",
     addValue: "Přidat hodnotu",
-    languages: "Jazyky"
+    languages: "Jazyky",
+    "organization.select": "Vyberte organizaci pro pokračování:"
 };
 
 export default messages;

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

@@ -349,7 +349,8 @@ const messages = {
     selectAnOption: "Vælg en mulighed",
     remove: "Fjern",
     addValue: "Tilføj værdi",
-    languages: "Sprog"
+    languages: "Sprog",
+    "organization.select": "Vælg en organisation for at fortsætte:"
 };
 
 export default messages;

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

@@ -536,7 +536,8 @@ const messages = {
     selectAnOption: "Wählen Sie eine Option",
     remove: "Entfernen",
     addValue: "Wert hinzufügen",
-    languages: "Sprachen"
+    languages: "Sprachen",
+    "organization.select": "Wählen Sie eine Organisation, um fortzufahren:"
 };
 
 export default messages;

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

@@ -505,7 +505,8 @@ const messages = {
     selectAnOption: "Επιλέξτε μια επιλογή",
     remove: "Αφαίρεση",
     addValue: "Προσθήκη τιμής",
-    languages: "Γλώσσες"
+    languages: "Γλώσσες",
+    "organization.select": "Επιλέξτε έναν οργανισμό για να συνεχίσετε:"
 };
 
 export default messages;

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

@@ -521,7 +521,8 @@ const messages = {
     selectAnOption: "Select an option",
     remove: "Remove",
     addValue: "Add value",
-    languages: "Languages"
+    languages: "Languages",
+    "organization.select": "Select an organization to proceed:"
 };
 
 export default messages;

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

@@ -518,7 +518,8 @@ const messages = {
     selectAnOption: "Selecciona una opción",
     remove: "Eliminar",
     addValue: "Añadir valor",
-    languages: "Idiomas"
+    languages: "Idiomas",
+    "organization.select": "Selecciona una organización para continuar:"
 };
 
 export default messages;

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

@@ -473,7 +473,8 @@ const messages = {
     selectAnOption: "یک گزینه انتخاب کنید",
     remove: "حذف",
     addValue: "افزودن مقدار",
-    languages: "زبان‌ها"
+    languages: "زبان‌ها",
+    "organization.select": "یک سازمان را برای ادامه انتخاب کنید:"
 };
 
 export default messages;

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

@@ -419,7 +419,8 @@ const messages = {
     selectAnOption: "Valitse vaihtoehto",
     remove: "Poista",
     addValue: "Lisää arvo",
-    languages: "Kielet"
+    languages: "Kielet",
+    "organization.select": "Valitse organisaatio jatkaaksesi:"
 };
 
 export default messages;

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

@@ -451,7 +451,8 @@ const messages = {
     selectAnOption: "Sélectionnez une option",
     remove: "Supprimer",
     addValue: "Ajouter une valeur",
-    languages: "Langues"
+    languages: "Langues",
+    "organization.select": "Sélectionnez une organisation pour continuer :"
 };
 
 export default messages;

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

@@ -505,7 +505,8 @@ const messages = {
     selectAnOption: "Válasszon egy lehetőséget",
     remove: "Eltávolítás",
     addValue: "Érték hozzáadása",
-    languages: "Nyelvek"
+    languages: "Nyelvek",
+    "organization.select": "Válasszon egy szervezetet a folytatáshoz:"
 };
 
 export default messages;

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

@@ -359,7 +359,8 @@ const messages = {
     selectAnOption: "Seleziona un'opzione",
     remove: "Rimuovi",
     addValue: "Aggiungi valore",
-    languages: "Lingue"
+    languages: "Lingue",
+    "organization.select": "Seleziona un'organizzazione per continuare:"
 };
 
 export default messages;

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

@@ -362,7 +362,8 @@ const messages = {
     selectAnOption: "オプションを選択",
     remove: "削除",
     addValue: "値を追加",
-    languages: "言語"
+    languages: "言語",
+    "organization.select": "続行する組織を選択してください:"
 };
 
 export default messages;

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

@@ -530,7 +530,8 @@ const messages = {
     selectAnOption: "აირჩიეთ ვარიანტი",
     remove: "წაშალეთ",
     addValue: "დაამატეთ მნიშვნელობა",
-    languages: "ენები"
+    languages: "ენები",
+    "organization.select": "აირჩიეთ ორგანიზაცია გაგრძელებისთვის:"
 };
 
 export default messages;

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

@@ -226,7 +226,8 @@ const messages = {
     selectAnOption: "Pasirinkite parinktį",
     remove: "Pašalinti",
     addValue: "Pridėti reikšmę",
-    languages: "Kalbos"
+    languages: "Kalbos",
+    "organization.select": "Pasirinkite organizaciją, kad galėtumėte tęsti:"
 };
 
 export default messages;

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

@@ -222,7 +222,8 @@ const messages = {
     selectAnOption: "Izvēlieties opciju",
     remove: "Noņemt",
     addValue: "Pievienot vērtību",
-    languages: "Valodas"
+    languages: "Valodas",
+    "organization.select": "Izvēlieties organizāciju, lai turpinātu:"
 };
 
 export default messages;

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

@@ -317,7 +317,8 @@ const messages = {
     selectAnOption: "Selecteer een optie",
     remove: "Verwijderen",
     addValue: "Waarde toevoegen",
-    languages: "Talen"
+    languages: "Talen",
+    "organization.select": "Selecteer een organisatie om door te gaan:"
 };
 
 export default messages;

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

@@ -221,7 +221,8 @@ const messages = {
     selectAnOption: "Velg et alternativ",
     remove: "Fjern",
     addValue: "Legg til verdi",
-    languages: "Språk"
+    languages: "Språk",
+    "organization.select": "Velg en organisasjon for å fortsette:"
 };
 
 export default messages;

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

@@ -321,7 +321,8 @@ const messages = {
     selectAnOption: "Wybierz opcję",
     remove: "Usuń",
     addValue: "Dodaj wartość",
-    languages: "Języki"
+    languages: "Języki",
+    "organization.select": "Wybierz organizację, aby kontynuować:"
 };
 
 export default messages;

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/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",