keycloakify 10.0.0-rc.13 → 10.0.0-rc.131

package/stories/account-spa/index.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
+import { tss } from "../tss";
+// @ts-expect-error
+import screenshotPngUrl from "./screenshot.png";
+
+const meta = {
+    title: "Account SPA/index.ftl"
+} satisfies Meta<any>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NotInStorybookButSupported: Story = {
+    render: () => <AccountSpa />
+};
+
+function AccountSpa() {
+    console.log(window.location.href);
+
+    useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: []
+    });
+
+    const { classes, theme } = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.content}>
+                <p>
+                    Keycloakify offers two option for creating an account theme:{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#multi-page" target="_blank">
+                        Multi Page
+                    </a>{" "}
+                    or{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#single-page" target="_blank">
+                        Single Page
+                    </a>
+                    . Since the account Single Page does not support Storybook, here is a screenshot of it's default look:
+                    <br />
+                    <br />
+                    <img className={classes.screenshot} alt="image" src={screenshotPngUrl} />
+                    <br />
+                    <a href="https://docs.keycloakify.dev/account-theme" target="_blank">
+                        Learn more
+                    </a>
+                </p>
+            </div>
+        </div>
+    );
+}
+
+const useStyles = tss.withName({ AccountSpa }).create(({ isDark, theme }) => ({
+    root: {
+        height: "100vh",
+        color: isDark ? "white" : "black",
+        backgroundColor: theme.appContentBg,
+        fontFamily: "'Work Sans'",
+        fontSize: "14px",
+        lineHeight: "24px",
+        WebkitFontSmoothing: "antialiased",
+        "& a": {
+            color: theme.colorSecondary,
+            textDecoration: "none",
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        "& h1": {
+            fontSize: "32px",
+            marginBottom: 35
+        },
+        display: "flex",
+        justifyContent: "center"
+    },
+    content: {
+        maxWidth: 750,
+        textAlign: "center",
+        marginTop: 100
+    },
+    keycloakifyLogoWrapper: {
+        display: "flex",
+        justifyContent: "center"
+    },
+    keycloakifyLogo: {
+        width: 400
+    },
+    screenshot: {
+        maxWidth: "100%"
+    }
+}));

package/stories/intro/intro.stories.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { KeycloakifyRotatingLogo } from "./KeycloakifyRotatingLogo";
+import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
+import { useOnFistMount } from "../../dist/tools/useOnFirstMount";
+import { tss } from "../tss";
+
+const meta = {
+    title: "Introduction"
+} satisfies Meta<any>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WhatIsThisWebsite: Story = {
+    render: () => <Introduction />
+};
+
+function Introduction() {
+    console.log(window.location.href);
+
+    useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: []
+    });
+
+    const { classes, theme } = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.content}>
+                <div className={classes.keycloakifyLogoWrapper}>
+                    <KeycloakifyRotatingLogo className={classes.keycloakifyLogo} />
+                </div>
+                <h1>
+                    <a href={theme.brandUrl}>Keycloakify </a> Storybook
+                </h1>
+
+                <p>
+                    This website showcases all the Keycloak user-facing pages of the Login and{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#multi-page">Account Multi-Page theme</a>.<br />
+                    The storybook serves as a reference to help you determine which pages you would like to personalize.
+                    <br />
+                    These pages are a direct React adaptation of the{" "}
+                    <a href="https://github.com/keycloak/keycloak/tree/24.0.4/themes/src/main/resources/theme/base" target="_blank">
+                        built-in FreeMarker Keycloak pages
+                    </a>
+                    .
+                </p>
+            </div>
+        </div>
+    );
+}
+
+const useStyles = tss.withName({ Introduction }).create(({ isDark, theme }) => ({
+    root: {
+        height: "100vh",
+        color: isDark ? "white" : "black",
+        backgroundColor: theme.appContentBg,
+        fontFamily: "'Work Sans'",
+        fontSize: "14px",
+        lineHeight: "24px",
+        WebkitFontSmoothing: "antialiased",
+        "& a": {
+            color: theme.colorSecondary,
+            textDecoration: "none",
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        "& h1": {
+            fontSize: "32px",
+            marginBottom: 35
+        },
+        display: "flex",
+        justifyContent: "center"
+    },
+    content: {
+        maxWidth: 750,
+        textAlign: "center"
+    },
+    keycloakifyLogoWrapper: {
+        display: "flex",
+        justifyContent: "center"
+    },
+    keycloakifyLogo: {
+        width: 400
+    }
+}));

package/stories/login/pages/Code.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: "code.ftl" });
+
+const meta = {
+    title: "login/code.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/login/pages/DeleteAccountConfirm.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: "delete-account-confirm.ftl" });
+
+const meta = {
+    title: "login/delete-account-confirm.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/login/pages/DeleteCredential.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: "delete-credential.ftl" });
+
+const meta = {
+    title: "login/delete-credential.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/login/pages/Error.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "error.ftl" });
+
+const meta = {
+    title: "login/error.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+
+export const WithAnotherMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { summary: "With another error message" }
+            }}
+        />
+    )
+};

package/stories/login/pages/FrontchannelLogout.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: "frontchannel-logout.ftl" });
+
+const meta = {
+    title: "login/frontchannel-logout.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/login/pages/IdpReviewUserProfile.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: "idp-review-user-profile.ftl" });
+
+const meta = {
+    title: "login/idp-review-user-profile.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/login/pages/Info.stories.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "info.ftl" });
+
+const meta = {
+    title: "login/info.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Server info message"
+                }
+            }}
+        />
+    )
+};
+
+export const WithLinkBack: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Server message"
+                },
+                actionUri: undefined
+            }}
+        />
+    )
+};
+
+export const WithRequiredActions: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "Required actions: "
+                },
+                requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL", "CUSTOM_ACTION"],
+                "x-keycloakify": {
+                    messages: {
+                        "requiredAction.CUSTOM_ACTION": "Custom action"
+                    }
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/Login.stories.tsx

@@ -0,0 +1,221 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login.ftl" });
+
+const meta = {
+    title: "login/login.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+
+export const WithInvalidCredential: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                login: {
+                    username: "johndoe"
+                },
+                messagesPerField: {
+                    // NOTE: The other functions of messagesPerField are derived from get() and
+                    // existsError() so they are the only ones that need to mock.
+                    existsError: (fieldName: string, ...otherFieldNames: string[]) => {
+                        const fieldNames = [fieldName, ...otherFieldNames];
+                        return fieldNames.includes("username") || fieldNames.includes("password");
+                    },
+                    get: (fieldName: string) => {
+                        if (fieldName === "username" || fieldName === "password") {
+                            return "Invalid username or password.";
+                        }
+                        return "";
+                    }
+                }
+            }}
+        />
+    )
+};
+
+export const WithoutRegistration: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: { registrationAllowed: false }
+            }}
+        />
+    )
+};
+
+export const WithoutRememberMe: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: { rememberMe: false }
+            }}
+        />
+    )
+};
+
+export const WithoutPasswordReset: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: { resetPasswordAllowed: false }
+            }}
+        />
+    )
+};
+
+export const WithEmailAsUsername: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: { loginWithEmailAllowed: false }
+            }}
+        />
+    )
+};
+
+export const WithPresetUsername: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                login: { username: "max.mustermann@mail.com" }
+            }}
+        />
+    )
+};
+
+export const WithImmutablePresetUsername: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                auth: {
+                    attemptedUsername: "max.mustermann@mail.com",
+                    showUsername: true
+                },
+                usernameHidden: true,
+                message: {
+                    type: "info",
+                    summary: "Please re-authenticate to continue"
+                }
+            }}
+        />
+    )
+};
+
+export const WithSocialProviders: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                social: {
+                    displayInfo: true,
+                    providers: [
+                        {
+                            loginUrl: "google",
+                            alias: "google",
+                            providerId: "google",
+                            displayName: "Google"
+                        },
+                        {
+                            loginUrl: "microsoft",
+                            alias: "microsoft",
+                            providerId: "microsoft",
+                            displayName: "Microsoft"
+                        },
+                        {
+                            loginUrl: "facebook",
+                            alias: "facebook",
+                            providerId: "facebook",
+                            displayName: "Facebook"
+                        },
+                        {
+                            loginUrl: "instagram",
+                            alias: "instagram",
+                            providerId: "instagram",
+                            displayName: "Instagram"
+                        },
+                        {
+                            loginUrl: "twitter",
+                            alias: "twitter",
+                            providerId: "twitter",
+                            displayName: "Twitter"
+                        },
+                        {
+                            loginUrl: "linkedin",
+                            alias: "linkedin",
+                            providerId: "linkedin",
+                            displayName: "LinkedIn"
+                        },
+                        {
+                            loginUrl: "stackoverflow",
+                            alias: "stackoverflow",
+                            providerId: "stackoverflow",
+                            displayName: "Stackoverflow"
+                        },
+                        {
+                            loginUrl: "github",
+                            alias: "github",
+                            providerId: "github",
+                            displayName: "Github"
+                        },
+                        {
+                            loginUrl: "gitlab",
+                            alias: "gitlab",
+                            providerId: "gitlab",
+                            displayName: "Gitlab"
+                        },
+                        {
+                            loginUrl: "bitbucket",
+                            alias: "bitbucket",
+                            providerId: "bitbucket",
+                            displayName: "Bitbucket"
+                        },
+                        {
+                            loginUrl: "paypal",
+                            alias: "paypal",
+                            providerId: "paypal",
+                            displayName: "PayPal"
+                        },
+                        {
+                            loginUrl: "openshift",
+                            alias: "openshift",
+                            providerId: "openshift",
+                            displayName: "OpenShift"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+
+export const WithoutPasswordField: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: { password: false }
+            }}
+        />
+    )
+};
+
+export const WithErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "The time allotted for the connection has elapsed.<br/>The login process will restart from the beginning.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginConfigTotp.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { createKcPageStory } from "../KcPageStory";
+
+const { KcPageStory } = createKcPageStory({ pageId: "login-config-totp.ftl" });
+
+const meta = {
+    title: "login/login-config-totp.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};
+
+export const WithManualSetUp: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                mode: "manual"
+            }}
+        />
+    )
+};
+
+export const WithError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                messagesPerField: {
+                    get: (fieldName: string) => (fieldName === "totp" ? "Invalid TOTP" : undefined),
+                    exists: (fieldName: string) => fieldName === "totp",
+                    existsError: (fieldName: string) => fieldName === "totp",
+                    printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "totp" ? x : undefined)
+                }
+            }}
+        />
+    )
+};

package/stories/login/pages/LoginDeviceVerifyUserCode.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: "login-oauth2-device-verify-user-code.ftl" });
+
+const meta = {
+    title: "login/login-oauth2-device-verify-user-code.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/login/pages/LoginIdpLinkConfirm.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: "login-idp-link-confirm.ftl" });
+
+const meta = {
+    title: "login/login-idp-link-confirm.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};

package/stories/login/pages/LoginIdpLinkEmail.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: "login-idp-link-email.ftl" });
+
+const meta = {
+    title: "login/login-idp-link-email.ftl",
+    component: KcPageStory
+} satisfies Meta<typeof KcPageStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <KcPageStory />
+};