pub-solar/keycloak-theme
5
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

update

Browse source
This commit is contained in:
Joseph Garrone 2024-06-06 07:46:48 +02:00
parent 9420dc118a
commit f3036ec2c3
8 changed files with 23 additions and 354 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.storybook/preview-head.html
View file

@ -1,3 +1,9 @@
<script>
console.log("Hello world");
</script>
<style>
body.sb-show-main.sb-main-padded {
padding: 0;
}
body:not(.kcBodyClass) {
background-color: #393939;
}
</style>

9
src/account/PageStory.tsx
View file

@ -37,3 +37,12 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: {
return { PageStory };
}
export const parameters = {
viewMode: "story",
previewTabs: {
"storybook/docs/panel": {
hidden: true
}
}
};

19
src/account/pages/Account.stories.tsx
View file

@ -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 />
};

29
src/account/pages/Password.stories.tsx
View file

@ -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" }
}}
/>
)
};

9
src/login/PageStory.tsx
View file

@ -32,12 +32,11 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: {
overrides
});
return (
<>
<KcApp kcContext={kcContextMock} />
</>
);
return <KcApp kcContext={kcContextMock} />;
}
return { PageStory };
}
export const parameters = {
};

183
src/login/pages/Login.stories.tsx
View file

@ -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 }
}}
/>
)
};

115
src/login/pages/Register.stories.tsx
View file

@ -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"
}
}
}
}}
/>
)
};

1
src/main.tsx
View file

@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
import { StrictMode, lazy, Suspense } from "react";
// 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";