update
This commit is contained in:
Joseph Garrone
parent
9420dc118a
commit
f3036ec2c3
|
|
@ -1,3 +1,9 @@
|
||||||
<script>
|
<style>
|
||||||
console.log("Hello world");
|
body.sb-show-main.sb-main-padded {
|
||||||
</script>
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body:not(.kcBodyClass) {
|
||||||
|
background-color: #393939;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -37,3 +37,12 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: {
|
||||||
|
|
||||||
return { PageStory };
|
return { PageStory };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const parameters = {
|
||||||
|
viewMode: "story",
|
||||||
|
previewTabs: {
|
||||||
|
"storybook/docs/panel": {
|
||||||
|
hidden: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import type { Meta, StoryObj } from "@storybook/react";
|
|
||||||
import { createPageStory } from "../PageStory";
|
|
||||||
|
|
||||||
const pageId = "account.ftl";
|
|
||||||
|
|
||||||
const { PageStory } = createPageStory({ pageId });
|
|
||||||
|
|
||||||
const meta = {
|
|
||||||
title: `account/${pageId}`,
|
|
||||||
component: PageStory
|
|
||||||
} satisfies Meta<typeof PageStory>;
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof meta>;
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
render: () => <PageStory />
|
|
||||||
};
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
import type { Meta, StoryObj } from "@storybook/react";
|
|
||||||
import { createPageStory } from "../PageStory";
|
|
||||||
|
|
||||||
const pageId = "password.ftl";
|
|
||||||
|
|
||||||
const { PageStory } = createPageStory({ pageId });
|
|
||||||
|
|
||||||
const meta = {
|
|
||||||
title: `account/${pageId}`,
|
|
||||||
component: PageStory
|
|
||||||
} satisfies Meta<typeof PageStory>;
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof meta>;
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
render: () => <PageStory />
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithMessage: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
message: { type: "success", summary: "This is a test message" }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
@ -32,12 +32,11 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: {
|
||||||
overrides
|
overrides
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return <KcApp kcContext={kcContextMock} />;
|
||||||
<>
|
|
||||||
<KcApp kcContext={kcContextMock} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return { PageStory };
|
return { PageStory };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const parameters = {
|
||||||
|
};
|
||||||
|
|
@ -1,183 +0,0 @@
|
||||||
import type { Meta, StoryObj } from "@storybook/react";
|
|
||||||
import { createPageStory } from "../PageStory";
|
|
||||||
|
|
||||||
const pageId = "login.ftl";
|
|
||||||
|
|
||||||
const { PageStory } = createPageStory({ pageId });
|
|
||||||
|
|
||||||
const meta = {
|
|
||||||
title: `login/${pageId}`,
|
|
||||||
component: PageStory
|
|
||||||
} satisfies Meta<typeof PageStory>;
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof meta>;
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
render: () => <PageStory />
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithoutRegistration: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
realm: { registrationAllowed: false }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithoutRememberMe: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
realm: { rememberMe: false }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithoutPasswordReset: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
realm: { resetPasswordAllowed: false }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithEmailAsUsername: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
realm: { loginWithEmailAllowed: false }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithPresetUsername: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
login: { username: "max.mustermann@mail.com" }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithImmutablePresetUsername: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
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: () => (
|
|
||||||
<PageStory
|
|
||||||
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: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
realm: { password: false }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
import type { Meta, StoryObj } from "@storybook/react";
|
|
||||||
import { createPageStory } from "../PageStory";
|
|
||||||
|
|
||||||
const pageId = "register.ftl";
|
|
||||||
|
|
||||||
const { PageStory } = createPageStory({ pageId });
|
|
||||||
|
|
||||||
const meta = {
|
|
||||||
title: `login/${pageId}`,
|
|
||||||
component: PageStory
|
|
||||||
} satisfies Meta<typeof PageStory>;
|
|
||||||
|
|
||||||
export default meta;
|
|
||||||
|
|
||||||
type Story = StoryObj<typeof meta>;
|
|
||||||
|
|
||||||
export const Default: Story = {
|
|
||||||
render: () => <PageStory />
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithFieldError: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
profile: {
|
|
||||||
attributesByName: {
|
|
||||||
email: {
|
|
||||||
value: "max.mustermann@gmail.com"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
messagesPerField: {
|
|
||||||
existsError: (fieldName: string) => fieldName === "email",
|
|
||||||
exists: (fieldName: string) => fieldName === "email",
|
|
||||||
get: (fieldName: string) => (fieldName === "email" ? "I don't like your email address" : undefined),
|
|
||||||
printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "email" ? x : undefined)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithEmailAsUsername: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
realm: {
|
|
||||||
registrationEmailAsUsername: true
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithoutPassword: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
passwordRequired: false
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithRecaptcha: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
scripts: ["https://www.google.com/recaptcha/api.js?hl=en"],
|
|
||||||
recaptchaRequired: true,
|
|
||||||
recaptchaSiteKey: "6LfQHvApAAAAAE73SYTd5vS0lB1Xr7zdiQ-6iBVa"
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithRecaptchaFrench: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
locale: {
|
|
||||||
currentLanguageTag: "fr"
|
|
||||||
},
|
|
||||||
scripts: ["https://www.google.com/recaptcha/api.js?hl=fr"],
|
|
||||||
recaptchaRequired: true,
|
|
||||||
recaptchaSiteKey: "6LfQHvApAAAAAE73SYTd5vS0lB1Xr7zdiQ-6iBVa"
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithPresets: Story = {
|
|
||||||
render: () => (
|
|
||||||
<PageStory
|
|
||||||
kcContext={{
|
|
||||||
profile: {
|
|
||||||
attributesByName: {
|
|
||||||
firstName: {
|
|
||||||
value: "Max"
|
|
||||||
},
|
|
||||||
lastName: {
|
|
||||||
value: "Mustermann"
|
|
||||||
},
|
|
||||||
email: {
|
|
||||||
value: "max.mustermann@gmail.com"
|
|
||||||
},
|
|
||||||
username: {
|
|
||||||
value: "max.mustermann"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
|
||||||
import { StrictMode, lazy, Suspense } from "react";
|
import { StrictMode, lazy, Suspense } from "react";
|
||||||
|
|
||||||
// The following block can be uncommented to test a specific page with `yarn dev`
|
// The following block can be uncommented to test a specific page with `yarn dev`
|
||||||
|
// Don't forget to comment back or your bundle size will increase
|
||||||
/*
|
/*
|
||||||
import { getKcContextMock } from "./login/PageStory";
|
import { getKcContextMock } from "./login/PageStory";
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue