Compare commits
No commits in common. "b278d97f3c11cb0a7a1516854aee76358acdc00a" and "a5ccc1cf8f9a0ca14e02930b8007d1f14a38cd7b" have entirely different histories.
b278d97f3c
...
a5ccc1cf8f
13 changed files with 62 additions and 7598 deletions
|
|
@ -1,28 +0,0 @@
|
||||||
name: ci
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches:
|
|
||||||
- main
|
|
||||||
pull_request:
|
|
||||||
branches:
|
|
||||||
- main
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build_and_publish:
|
|
||||||
runs-on: docker
|
|
||||||
container:
|
|
||||||
image: ghcr.io/catthehacker/ubuntu:runner-latest
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v4
|
|
||||||
- uses: actions/setup-node@v4
|
|
||||||
- run: npm install
|
|
||||||
- run: sudo apt update && sudo apt install -y maven
|
|
||||||
- run: npm run build-keycloak-theme-cloud
|
|
||||||
- run: mv dist_keycloak/keycloak-theme-cloud-for-kc-all-other-versions.jar sr2-theme.jar
|
|
||||||
- run: sha256sum sr2-theme.jar > sr2-theme.jar.sha256
|
|
||||||
- run: |
|
|
||||||
curl -H "Authorization: token ${{ secrets.PACKAGE_TOKEN }}" -X DELETE "https://guardianproject.dev/api/packages/sr2/generic/keycloak-theme-cloud/latest"
|
|
||||||
- run: |
|
|
||||||
curl -H "Authorization: token ${{ secrets.PACKAGE_TOKEN }}" -X PUT --upload-file sr2-theme.jar https://guardianproject.dev/api/packages/sr2/generic/keycloak-theme-cloud/latest/sr2-cloud-theme.jar
|
|
||||||
- run: |
|
|
||||||
curl -H "Authorization: token ${{ secrets.PACKAGE_TOKEN }}" -X PUT --upload-file sr2-theme.jar.sha256 https://guardianproject.dev/api/packages/sr2/generic/keycloak-theme-cloud/latest/sr2-cloud-theme.jar.sha256
|
|
||||||
55
.github/workflows/ci.yaml
vendored
Normal file
55
.github/workflows/ci.yaml
vendored
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
name: ci
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
pull_request:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
test:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- uses: actions/setup-node@v4
|
||||||
|
- uses: bahmutov/npm-install@v1
|
||||||
|
- run: npm run build-keycloak-theme
|
||||||
|
|
||||||
|
check_if_version_upgraded:
|
||||||
|
name: Check if version upgrade
|
||||||
|
if: github.event_name == 'push'
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
needs: test
|
||||||
|
outputs:
|
||||||
|
from_version: ${{ steps.step1.outputs.from_version }}
|
||||||
|
to_version: ${{ steps.step1.outputs.to_version }}
|
||||||
|
is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
|
||||||
|
is_pre_release: ${{steps.step1.outputs.is_pre_release }}
|
||||||
|
steps:
|
||||||
|
- uses: garronej/ts-ci@v2.1.5
|
||||||
|
id: step1
|
||||||
|
with:
|
||||||
|
action_name: is_package_json_version_upgraded
|
||||||
|
branch: ${{ github.head_ref || github.ref }}
|
||||||
|
|
||||||
|
create_github_release:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
needs: check_if_version_upgraded
|
||||||
|
if: needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true'
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
- uses: actions/setup-node@v4
|
||||||
|
- uses: bahmutov/npm-install@v1
|
||||||
|
- run: npm run build-keycloak-theme
|
||||||
|
- uses: softprops/action-gh-release@v2
|
||||||
|
with:
|
||||||
|
name: Release v${{ needs.check_if_version_upgraded.outputs.to_version }}
|
||||||
|
tag_name: v${{ needs.check_if_version_upgraded.outputs.to_version }}
|
||||||
|
target_commitish: ${{ github.head_ref || github.ref }}
|
||||||
|
generate_release_notes: true
|
||||||
|
draft: false
|
||||||
|
prerelease: ${{ needs.check_if_version_upgraded.outputs.is_pre_release == 'true' }}
|
||||||
|
files: dist_keycloak/keycloak-theme-*.jar
|
||||||
|
env:
|
||||||
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -58,4 +58,3 @@ jspm_packages
|
||||||
|
|
||||||
# build output of `jsx-email`
|
# build output of `jsx-email`
|
||||||
/.rendered
|
/.rendered
|
||||||
.idea/
|
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ yarn install # Or use an other package manager, just be sure to delete the yarn.
|
||||||
|
|
||||||
# How to customize the theme
|
# How to customize the theme
|
||||||
|
|
||||||
[Documentation](https://docs.keycloakify.dev/css-customization)
|
[Documentation](https://docs.keycloakify.dev/customization-strategies)
|
||||||
|
|
||||||
# Building the theme
|
# Building the theme
|
||||||
|
|
||||||
|
|
|
||||||
6964
package-lock.json
generated
6964
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -17,7 +17,7 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"keycloakify": "^11.15.0",
|
"keycloakify": "^11.12.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
|
|
@ -3,8 +3,7 @@ import type { ClassKey } from "keycloakify/login";
|
||||||
import type { KcContext } from "./KcContext";
|
import type { KcContext } from "./KcContext";
|
||||||
import { useI18n } from "./i18n";
|
import { useI18n } from "./i18n";
|
||||||
import DefaultPage from "keycloakify/login/DefaultPage";
|
import DefaultPage from "keycloakify/login/DefaultPage";
|
||||||
import Template from "./Template";
|
import Template from "keycloakify/login/Template";
|
||||||
import "./main.css";
|
|
||||||
const UserProfileFormFields = lazy(
|
const UserProfileFormFields = lazy(
|
||||||
() => import("keycloakify/login/UserProfileFormFields")
|
() => import("keycloakify/login/UserProfileFormFields")
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,185 +0,0 @@
|
||||||
import { useEffect } from "react";
|
|
||||||
import { clsx } from "keycloakify/tools/clsx";
|
|
||||||
import { kcSanitize } from "keycloakify/lib/kcSanitize";
|
|
||||||
import type { TemplateProps } from "keycloakify/login/TemplateProps";
|
|
||||||
import { getKcClsx } from "keycloakify/login/lib/kcClsx";
|
|
||||||
import { useSetClassName } from "keycloakify/tools/useSetClassName";
|
|
||||||
import { useInitialize } from "keycloakify/login/Template.useInitialize";
|
|
||||||
import type { I18n } from "./i18n";
|
|
||||||
import type { KcContext } from "./KcContext";
|
|
||||||
|
|
||||||
export default function Template(props: TemplateProps<KcContext, I18n>) {
|
|
||||||
const {
|
|
||||||
displayInfo = false,
|
|
||||||
displayMessage = true,
|
|
||||||
displayRequiredFields = false,
|
|
||||||
headerNode,
|
|
||||||
socialProvidersNode = null,
|
|
||||||
infoNode = null,
|
|
||||||
documentTitle,
|
|
||||||
bodyClassName,
|
|
||||||
kcContext,
|
|
||||||
i18n,
|
|
||||||
doUseDefaultCss,
|
|
||||||
classes,
|
|
||||||
children
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
|
|
||||||
|
|
||||||
const { msg, msgStr, currentLanguage, enabledLanguages } = i18n;
|
|
||||||
|
|
||||||
const { realm, auth, url, message, isAppInitiatedAction } = kcContext;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.title = documentTitle ?? msgStr("loginTitle", realm.displayName);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useSetClassName({
|
|
||||||
qualifiedName: "html",
|
|
||||||
className: kcClsx("kcHtmlClass")
|
|
||||||
});
|
|
||||||
|
|
||||||
useSetClassName({
|
|
||||||
qualifiedName: "body",
|
|
||||||
className: bodyClassName ?? kcClsx("kcBodyClass")
|
|
||||||
});
|
|
||||||
|
|
||||||
const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
|
|
||||||
|
|
||||||
if (!isReadyToRender) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={kcClsx("kcLoginClass")}>
|
|
||||||
<div id="kc-header" className={kcClsx("kcHeaderClass")}>
|
|
||||||
<div id="kc-header-wrapper" className={kcClsx("kcHeaderWrapperClass")}>
|
|
||||||
{msg("loginTitleHtml", realm.displayNameHtml)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={kcClsx("kcFormCardClass")}>
|
|
||||||
<header className={kcClsx("kcFormHeaderClass")}>
|
|
||||||
{enabledLanguages.length > 1 && (
|
|
||||||
<div className={kcClsx("kcLocaleMainClass")} id="kc-locale">
|
|
||||||
<div id="kc-locale-wrapper" className={kcClsx("kcLocaleWrapperClass")}>
|
|
||||||
<div id="kc-locale-dropdown" className={clsx("menu-button-links", kcClsx("kcLocaleDropDownClass"))}>
|
|
||||||
<button
|
|
||||||
tabIndex={1}
|
|
||||||
id="kc-current-locale-link"
|
|
||||||
aria-label={msgStr("languages")}
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-controls="language-switch1"
|
|
||||||
>
|
|
||||||
{currentLanguage.label}
|
|
||||||
</button>
|
|
||||||
<ul
|
|
||||||
role="menu"
|
|
||||||
tabIndex={-1}
|
|
||||||
aria-labelledby="kc-current-locale-link"
|
|
||||||
aria-activedescendant=""
|
|
||||||
id="language-switch1"
|
|
||||||
className={kcClsx("kcLocaleListClass")}
|
|
||||||
>
|
|
||||||
{enabledLanguages.map(({ languageTag, label, href }, i) => (
|
|
||||||
<li key={languageTag} className={kcClsx("kcLocaleListItemClass")} role="none">
|
|
||||||
<a role="menuitem" id={`language-${i + 1}`} className={kcClsx("kcLocaleItemClass")} href={href}>
|
|
||||||
{label}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(() => {
|
|
||||||
const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
|
|
||||||
<h1 id="kc-page-title">{headerNode}</h1>
|
|
||||||
) : (
|
|
||||||
<div id="kc-username" className={kcClsx("kcFormGroupClass")}>
|
|
||||||
<label id="kc-attempted-username">{auth.attemptedUsername}</label>
|
|
||||||
<a id="reset-login" href={url.loginRestartFlowUrl} aria-label={msgStr("restartLoginTooltip")}>
|
|
||||||
<div className="kc-login-tooltip">
|
|
||||||
<i className={kcClsx("kcResetFlowIcon")}></i>
|
|
||||||
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (displayRequiredFields) {
|
|
||||||
return (
|
|
||||||
<div className={kcClsx("kcContentWrapperClass")}>
|
|
||||||
<div className={clsx(kcClsx("kcLabelWrapperClass"), "subtitle")}>
|
|
||||||
<span className="subtitle">
|
|
||||||
<span className="required">*</span>
|
|
||||||
{msg("requiredFields")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-10">{node}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return node;
|
|
||||||
})()}
|
|
||||||
</header>
|
|
||||||
<div id="kc-content">
|
|
||||||
<div id="kc-content-wrapper">
|
|
||||||
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
|
|
||||||
{displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
`alert-${message.type}`,
|
|
||||||
kcClsx("kcAlertClass"),
|
|
||||||
`pf-m-${message?.type === "error" ? "danger" : message.type}`
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="pf-c-alert__icon">
|
|
||||||
{message.type === "success" && <span className={kcClsx("kcFeedbackSuccessIcon")}></span>}
|
|
||||||
{message.type === "warning" && <span className={kcClsx("kcFeedbackWarningIcon")}></span>}
|
|
||||||
{message.type === "error" && <span className={kcClsx("kcFeedbackErrorIcon")}></span>}
|
|
||||||
{message.type === "info" && <span className={kcClsx("kcFeedbackInfoIcon")}></span>}
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className={kcClsx("kcAlertTitleClass")}
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: kcSanitize(message.summary)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{children}
|
|
||||||
{auth !== undefined && auth.showTryAnotherWayLink && (
|
|
||||||
<form id="kc-select-try-another-way-form" action={url.loginAction} method="post">
|
|
||||||
<div className={kcClsx("kcFormGroupClass")}>
|
|
||||||
<input type="hidden" name="tryAnotherWay" value="on" />
|
|
||||||
<a
|
|
||||||
id="try-another-way"
|
|
||||||
className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
|
|
||||||
onClick={() => {
|
|
||||||
document.forms["kc-select-try-another-way-form" as never].requestSubmit();
|
|
||||||
return false;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{msg("doTryAnotherWay")}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
{socialProvidersNode}
|
|
||||||
{displayInfo && (
|
|
||||||
<div id="kc-info" className={kcClsx("kcSignUpClass")}>
|
|
||||||
<div id="kc-info-wrapper" className={kcClsx("kcInfoAreaWrapperClass")}>
|
|
||||||
{infoNode}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
body {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.kcBodyClass {
|
|
||||||
background: url(/background.jpg) no-repeat bottom center fixed;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kcFormCardClass {
|
|
||||||
border-image: linear-gradient(to right, #01486f, #00a870) 1;
|
|
||||||
border-width: 4px;
|
|
||||||
border-style: solid;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kcHeaderWrapperClass {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.kcFormHeaderClass h1:before {
|
|
||||||
content: "";
|
|
||||||
display: inline-block;
|
|
||||||
background: url(/logo-side.png) no-repeat center center;
|
|
||||||
background-size: contain;
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 1360/338;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#kc-form, #kc-form-webauthn {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,379 +0,0 @@
|
||||||
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",
|
|
||||||
iconClasses: "fa fa-google"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "microsoft",
|
|
||||||
alias: "microsoft",
|
|
||||||
providerId: "microsoft",
|
|
||||||
displayName: "Microsoft",
|
|
||||||
iconClasses: "fa fa-windows"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "facebook",
|
|
||||||
alias: "facebook",
|
|
||||||
providerId: "facebook",
|
|
||||||
displayName: "Facebook",
|
|
||||||
iconClasses: "fa fa-facebook"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "instagram",
|
|
||||||
alias: "instagram",
|
|
||||||
providerId: "instagram",
|
|
||||||
displayName: "Instagram",
|
|
||||||
iconClasses: "fa fa-instagram"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "twitter",
|
|
||||||
alias: "twitter",
|
|
||||||
providerId: "twitter",
|
|
||||||
displayName: "Twitter",
|
|
||||||
iconClasses: "fa fa-twitter"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "linkedin",
|
|
||||||
alias: "linkedin",
|
|
||||||
providerId: "linkedin",
|
|
||||||
displayName: "LinkedIn",
|
|
||||||
iconClasses: "fa fa-linkedin"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "stackoverflow",
|
|
||||||
alias: "stackoverflow",
|
|
||||||
providerId: "stackoverflow",
|
|
||||||
displayName: "Stackoverflow",
|
|
||||||
iconClasses: "fa fa-stack-overflow"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "github",
|
|
||||||
alias: "github",
|
|
||||||
providerId: "github",
|
|
||||||
displayName: "Github",
|
|
||||||
iconClasses: "fa fa-github"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "gitlab",
|
|
||||||
alias: "gitlab",
|
|
||||||
providerId: "gitlab",
|
|
||||||
displayName: "Gitlab",
|
|
||||||
iconClasses: "fa fa-gitlab"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "bitbucket",
|
|
||||||
alias: "bitbucket",
|
|
||||||
providerId: "bitbucket",
|
|
||||||
displayName: "Bitbucket",
|
|
||||||
iconClasses: "fa fa-bitbucket"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "paypal",
|
|
||||||
alias: "paypal",
|
|
||||||
providerId: "paypal",
|
|
||||||
displayName: "PayPal",
|
|
||||||
iconClasses: "fa fa-paypal"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "openshift",
|
|
||||||
alias: "openshift",
|
|
||||||
providerId: "openshift",
|
|
||||||
displayName: "OpenShift",
|
|
||||||
iconClasses: "fa fa-cloud"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
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"
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithOneSocialProvider: Story = {
|
|
||||||
render: args => (
|
|
||||||
<KcPageStory
|
|
||||||
{...args}
|
|
||||||
kcContext={{
|
|
||||||
social: {
|
|
||||||
displayInfo: true,
|
|
||||||
providers: [
|
|
||||||
{
|
|
||||||
loginUrl: "google",
|
|
||||||
alias: "google",
|
|
||||||
providerId: "google",
|
|
||||||
displayName: "Google",
|
|
||||||
iconClasses: "fa fa-google"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
||||||
export const WithTwoSocialProviders: Story = {
|
|
||||||
render: args => (
|
|
||||||
<KcPageStory
|
|
||||||
{...args}
|
|
||||||
kcContext={{
|
|
||||||
social: {
|
|
||||||
displayInfo: true,
|
|
||||||
providers: [
|
|
||||||
{
|
|
||||||
loginUrl: "google",
|
|
||||||
alias: "google",
|
|
||||||
providerId: "google",
|
|
||||||
displayName: "Google",
|
|
||||||
iconClasses: "fa fa-google"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "microsoft",
|
|
||||||
alias: "microsoft",
|
|
||||||
providerId: "microsoft",
|
|
||||||
displayName: "Microsoft",
|
|
||||||
iconClasses: "fa fa-windows"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
export const WithNoSocialProviders: Story = {
|
|
||||||
render: args => (
|
|
||||||
<KcPageStory
|
|
||||||
{...args}
|
|
||||||
kcContext={{
|
|
||||||
social: {
|
|
||||||
displayInfo: true,
|
|
||||||
providers: []
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
export const WithMoreThanTwoSocialProviders: Story = {
|
|
||||||
render: args => (
|
|
||||||
<KcPageStory
|
|
||||||
{...args}
|
|
||||||
kcContext={{
|
|
||||||
social: {
|
|
||||||
displayInfo: true,
|
|
||||||
providers: [
|
|
||||||
{
|
|
||||||
loginUrl: "google",
|
|
||||||
alias: "google",
|
|
||||||
providerId: "google",
|
|
||||||
displayName: "Google",
|
|
||||||
iconClasses: "fa fa-google"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "microsoft",
|
|
||||||
alias: "microsoft",
|
|
||||||
providerId: "microsoft",
|
|
||||||
displayName: "Microsoft",
|
|
||||||
iconClasses: "fa fa-windows"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "facebook",
|
|
||||||
alias: "facebook",
|
|
||||||
providerId: "facebook",
|
|
||||||
displayName: "Facebook",
|
|
||||||
iconClasses: "fa fa-facebook"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loginUrl: "twitter",
|
|
||||||
alias: "twitter",
|
|
||||||
providerId: "twitter",
|
|
||||||
displayName: "Twitter",
|
|
||||||
iconClasses: "fa fa-twitter"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
export const WithSocialProvidersAndWithoutRememberMe: Story = {
|
|
||||||
render: args => (
|
|
||||||
<KcPageStory
|
|
||||||
{...args}
|
|
||||||
kcContext={{
|
|
||||||
social: {
|
|
||||||
displayInfo: true,
|
|
||||||
providers: [
|
|
||||||
{
|
|
||||||
loginUrl: "google",
|
|
||||||
alias: "google",
|
|
||||||
providerId: "google",
|
|
||||||
displayName: "Google",
|
|
||||||
iconClasses: "fa fa-google"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
realm: { rememberMe: false }
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* WithAuthPassKey:
|
|
||||||
* - Purpose: Test usage of Sign In With Pass Key integration
|
|
||||||
* - Scenario: Simulates a scenario where the `Sign In with Passkey` button is rendered below `Sign In` button.
|
|
||||||
* - Key Aspect: Ensure that it is displayed correctly.
|
|
||||||
*/
|
|
||||||
export const WithAuthPassKey: Story = {
|
|
||||||
render: args => (
|
|
||||||
<KcPageStory
|
|
||||||
{...args}
|
|
||||||
kcContext={{
|
|
||||||
url: {
|
|
||||||
loginAction: "/mock-login-action"
|
|
||||||
},
|
|
||||||
enableWebAuthnConditionalUI: true
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
|
|
@ -4415,10 +4415,10 @@ jsonfile@^6.0.1:
|
||||||
object.assign "^4.1.4"
|
object.assign "^4.1.4"
|
||||||
object.values "^1.1.6"
|
object.values "^1.1.6"
|
||||||
|
|
||||||
keycloakify@^11.15.0:
|
keycloakify@^11.12.0:
|
||||||
version "11.15.0"
|
version "11.12.0"
|
||||||
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-11.15.0.tgz#53305e80b918fe5810df257a10c25dc87ef973ba"
|
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-11.12.0.tgz#55ba425107c4439e888ead3d0a91927c0c66701d"
|
||||||
integrity sha512-e44auIvwV3dgxGpwDuxYkFf3x+c2mxz6b4Uz8OelhCqR1FgxC9zprKnXjw1ZB80vX1546hDL99Or3PRbXXGujQ==
|
integrity sha512-m1zSgeJcy7CJ9ma7BouW0pXdCRDffIQucdvzQQjWRnaODMOxpe0wAad+9ZDJ403ourdNGsqr+XvJMlmTt7LZYw==
|
||||||
dependencies:
|
dependencies:
|
||||||
tsafe "^1.8.5"
|
tsafe "^1.8.5"
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue