-
-
-
-
- -
-
- - {msg("account")} - - {features.passwordUpdateSupported && ( -
- - {msg("password")} - - )} -
- - {msg("authenticator")} - - {features.identityFederation && ( -
- - {msg("federatedIdentity")} - - )} -
- - {msg("sessions")} - -
- - {msg("applications")} - - {features.log && ( -
- - {msg("log")} - - )} - {realm.userManagedAccessAllowed && features.authorization && ( -
- - {msg("myResources")} - - )} -
- {message !== undefined && (
-
-
- {message.type === "success" && (
-
- )}
- {message.type === "error" && (
-
- )}
- {message.summary}
-
- )}
-
- {children}
- Hello world 1
- - ); - -} diff --git a/src/account/pages/MyExtraPage2.tsx b/src/account/pages/MyExtraPage2.tsx deleted file mode 100644 index dc90e84..0000000 --- a/src/account/pages/MyExtraPage2.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { PageProps } from "keycloakify/account/pages/PageProps"; -import type { KcContext } from "../kcContext"; -import type { I18n } from "../i18n"; - -export default function MyExtraPage1(props: PagePropsHello world 2
- - ); - -} diff --git a/src/account/pages/Password.stories.tsx b/src/account/pages/Password.stories.tsx deleted file mode 100644 index 1ce118d..0000000 --- a/src/account/pages/Password.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ - -import { Meta, StoryObj } from '@storybook/react'; -import { createPageStory } from "../createPageStory"; - -const { PageStory } = createPageStory({ - pageId: "password.ftl" -}); - -const meta = { - title: "account/Password", - component: PageStory, -} satisfies Meta
-
-
-
-
- );
-}
diff --git a/src/kc.gen.tsx b/src/kc.gen.tsx
new file mode 100644
index 0000000..ec705a9
--- /dev/null
+++ b/src/kc.gen.tsx
@@ -0,0 +1,49 @@
+// This file is auto-generated by the `update-kc-gen` command. Do not edit it manually.
+// Hash: 161ca8533960b1f738b619eff9d07b6bc0fd4ad9a851a9307b8a3ddbd9073969
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+import { lazy, Suspense, type ReactNode } from "react";
+
+export type ThemeName = "neosync-keycloakify";
+
+export const themeNames: ThemeName[] = ["neosync-keycloakify"];
+
+export type KcEnvName = never;
+
+export const kcEnvNames: KcEnvName[] = [];
+
+export const kcEnvDefaults: Record
-
- {msg("changePasswordHtmlTitle")}
-
- {msg("allFieldsRequired")}
-
-
-
-
- {!(
- auth !== undefined &&
- auth.showUsername &&
- !auth.showResetCredentials
- ) ? (
- displayRequiredFields ? (
-
-
- ) : (
-
-
- *
- {msg("requiredFields")}
-
-
-
- 
-
-
-
-
-
- )
- ) : displayRequiredFields ? (
-
-
-
-
- * {msg("requiredFields")}
-
-
-
- {showUsernameNode}
-
- ;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- render: () => ,
- I18n
- >
-) {
- const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
- const { getClassName } = useGetClassName({
- doUseDefaultCss,
- classes,
- });
-
- const { url, realm, auth } = kcContext;
-
- const { msg, msgStr } = i18n;
-
- return (
-
-
-
- );
-}
diff --git a/src/login/pages/MyExtraPage1.tsx b/src/login/pages/MyExtraPage1.tsx
deleted file mode 100644
index b7c73bd..0000000
--- a/src/login/pages/MyExtraPage1.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { PageProps } from "keycloakify/login/pages/PageProps";
-import type { KcContext } from "../kcContext";
-import type { I18n } from "../i18n";
-
-export default function MyExtraPage1(props: PageProps, I18n>) {
-
- const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
- return (
- Header text}
- infoNode={footer}
- >
-
-
- );
-
-}
diff --git a/src/login/pages/MyExtraPage2.stories.tsx b/src/login/pages/MyExtraPage2.stories.tsx
deleted file mode 100644
index b412140..0000000
--- a/src/login/pages/MyExtraPage2.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { createPageStory } from "../createPageStory";
-
-const { PageStory } = createPageStory({
- pageId: "my-extra-page-2.ftl"
-});
-
-const meta = {
- title: "login/MyExtraPage2",
- component: PageStory,
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- render: () => , I18n>
-) {
- const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
- // someCustomValue is declared by you in ../kcContext.ts
- console.log(`TODO: Do something with: ${kcContext.someCustomValue}`);
-
- return (
-
- Header text
-
- }
- infoNode={footer}
- >
-
-
- );
-}
diff --git a/src/login/pages/Register.stories.tsx b/src/login/pages/Register.stories.tsx
deleted file mode 100644
index 3a4771f..0000000
--- a/src/login/pages/Register.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
-
-const { PageStory } = createPageStory({
- pageId: "register.ftl",
-});
-
-const meta = {
- title: "register/Register",
- component: PageStory,
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- render: () => , I18n>) {
- const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
- const { getClassName } = useGetClassName({
- doUseDefaultCss,
- classes
- });
-
- const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
-
- const { msg, msgStr } = i18n;
-
- return (
-
-
-
- );
-}
diff --git a/src/login/pages/RegisterUserProfile.stories.tsx b/src/login/pages/RegisterUserProfile.stories.tsx
deleted file mode 100644
index ed46a46..0000000
--- a/src/login/pages/RegisterUserProfile.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
-
-const { PageStory } = createPageStory({
- pageId: "register-user-profile.ftl",
-});
-
-const meta = {
- title: "registerUserProfile/Register User Profile",
- component: PageStory,
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- render: () => ,
- I18n
- >
-) {
- const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
- const { getClassName } = useGetClassName({
- doUseDefaultCss,
- classes,
- });
-
- const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } =
- kcContext;
-
- const { msg, msgStr } = i18n;
-
- const [isFormSubmittable, setIsFormSubmittable] = useState(false);
-
- return (
-
-
-
- );
-}
diff --git a/src/login/pages/Terms.stories.tsx b/src/login/pages/Terms.stories.tsx
deleted file mode 100644
index 35d2847..0000000
--- a/src/login/pages/Terms.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { createPageStory } from "../createPageStory";
-
-const { PageStory } = createPageStory({
- pageId: "terms.ftl"
-});
-
-const meta = {
- title: "login/Terms",
- component: PageStory,
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Primary: Story = {
- render: () => , I18n>
-) {
- const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-
- const { getClassName } = useGetClassName({
- doUseDefaultCss,
- classes,
- });
-
- const { msg, msgStr } = i18n;
-
- // NOTE: If you aren't going to customize the layout of the page you can move this hook to
- // KcApp.tsx, see: https://docs.keycloakify.dev/terms-and-conditions
- useDownloadTerms({
- kcContext,
- downloadTermMarkdown: async ({ currentLanguageTag }) => {
- const tos_url = (() => {
- switch (currentLanguageTag) {
- // case "fr": return `${import.meta.env.BASE_URL}terms/fr.md`;
- default:
- return `${import.meta.env.BASE_URL}terms/en.md`;
- }
- })();
-
- const markdownString = await fetch(tos_url).then((response) =>
- response.text()
- );
-
- return markdownString;
- },
- });
-
- useRerenderOnStateChange(evtTermMarkdown);
-
- const { url } = kcContext;
-
- const termMarkdown = evtTermMarkdown.state;
-
- if (termMarkdown === undefined) {
- return null;
- }
-
- return (
-
- [0]["kcContext"];
- i18n: I18n;
- getClassName: (classKey: ClassKey) => string;
- onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
- BeforeField?: (props: { attribute: Attribute }) => JSX.Element | null;
- AfterField?: (props: { attribute: Attribute }) => JSX.Element | null;
-};
-
-export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
- const {
- kcContext,
- onIsFormSubmittableValueChange,
- i18n,
- getClassName,
- BeforeField,
- AfterField,
- } = props;
-
- const { advancedMsg, msg } = i18n;
-
- const {
- formValidationState: { fieldStateByAttributeName, isFormSubmittable },
- formValidationDispatch,
- attributesWithPassword,
- } = useFormValidation({
- kcContext,
- i18n,
- });
-
- useEffect(() => {
- onIsFormSubmittableValueChange(isFormSubmittable);
- }, [isFormSubmittable]);
-
- let currentGroup = "";
-
- return (
- <>
- {attributesWithPassword.map((attribute, i) => {
- const {
- group = "",
- groupDisplayHeader = "",
- groupDisplayDescription = "",
- } = attribute;
-
- const { value, displayableErrors } =
- fieldStateByAttributeName[attribute.name];
-
- const formGroupClassName = clsx(
- getClassName("kcFormGroupClass"),
- displayableErrors.length !== 0 &&
- getClassName("kcFormGroupErrorClass")
- );
-
- return (
-
- {group !== currentGroup && (currentGroup = group) !== "" && (
-
- );
- })}
-
- );
-}
diff --git a/src/main.tsx b/src/main.tsx
index f5df0f7..f4b247d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,28 +1,25 @@
-import { StrictMode, Suspense, lazy } from "react";
+import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
-import { kcContext as kcAccountThemeContext } from "./account/kcContext";
-import { kcContext as kcLoginThemeContext } from "./login/kcContext";
+import { KcPage } from "./kc.gen";
-const KcLoginThemeApp = lazy(() => import("./login/KcApp"));
-const KcAccountThemeApp = lazy(() => import("./account/KcApp"));
+// 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
-createRoot(document.getElementById("root")!).render(
-
-
- {(() => {
- if (kcLoginThemeContext !== undefined) {
- return
-
+createRoot(document.getElementById("root")!).render(
+
+ {!window.kcContext ? (
+
);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 979466a..11f02fe 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,6 +1 @@
///
-
-
-
- }
- >
-
-
-
- {msg("restartLoginTooltip")}
-
+ return (
+ ) {
+// const {
+// displayInfo = false,
+// displayMessage = true,
+// displayRequiredFields = false,
+// displayWide = false,
+// showAnotherWayIfPresent = true,
+// showUsernameNode = null,
+// infoNode = null,
+// kcContext,
+// i18n,
+// doUseDefaultCss,
+// classes,
+// children,
+// } = props;
+
+// const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+
+// const { msg } = i18n;
+
+// const { auth, url, message, isAppInitiatedAction } = kcContext;
+
+// useEffect(() => {
+// posthog.init(kcContext.properties.POSTHOG_KEY ?? "fake-key", {
+// api_host: kcContext.properties.POSTHOG_HOST,
+// });
+// }, [kcContext?.properties?.POSTHOG_KEY, kcContext?.properties?.POSTHOG_HOST]);
+
+// const { isReady } = usePrepareTemplate({
+// doFetchDefaultThemeResources: doUseDefaultCss,
+// styles: [
+// `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+// `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+// `${url.resourcesCommonPath}/lib/zocial/zocial.css`,
+// `${url.resourcesPath}/css/login.css`,
+// ],
+// htmlClassName: getClassName("kcHtmlClass"),
+// bodyClassName: getClassName("kcBodyClass"),
+// });
+
+// useState(() => {
+// document.title = i18n.msgStr("loginTitle", kcContext.realm.displayName);
+// });
+
+// if (!isReady) {
+// return null;
+// }
+
+// const logos: { id: number; logo: ReactElement }[] = [
+// {
+// id: 1,
+// logo: 
,
+// },
+// {
+// id: 2,
+// logo: 
,
+// },
+// {
+// id: 3,
+// logo: 
,
+// },
+// {
+// id: 8,
+// logo: 
,
+// },
+// ];
+
+// return (
+//
+//
+// );
+// }
diff --git a/src/login/components/SideImageContet.tsx b/src/login/components/SideImageContet.tsx
new file mode 100644
index 0000000..b4cb1e3
--- /dev/null
+++ b/src/login/components/SideImageContet.tsx
@@ -0,0 +1,56 @@
+import { ReactElement } from "react";
+import { SyncDash } from "../SyncDash";
+import c2foLogo from "../assets/c2fo_logo.svg";
+import fellow from "../assets/fellow_logo.svg";
+import fp from "../assets/fpllc_logo.svg";
+import siemans from "../assets/siemens_logo.svg";
+
+const logos: { id: number; logo: ReactElement }[] = [
+ {
+ id: 1,
+ logo:
+ },
+ {
+ id: 2,
+ logo:
+ },
+ {
+ id: 3,
+ logo:
+ },
+ {
+ id: 8,
+ logo:
+ }
+];
+
+export default function SideImageContent(): ReactElement {
+ return (
+ (params: {
- pageId: PageId;
-}) {
-
- const { pageId } = params;
-
- function PageStory(params: { kcContext?: DeepPartial>; }) {
-
- const { kcContext } = getKcContext({
- mockPageId: pageId,
- storyPartialKcContext: params.kcContext
- });
-
- return (
- <>
- {/* If you import custom fonts in your index.html you have to import them in storybook as well*/}
-
- ().build();
-export type I18n = NonNullable>;
+type I18n = typeof ofTypeI18n;
+
+export { useI18n, type I18n };
diff --git a/src/login/kcContext.ts b/src/login/kcContext.ts
deleted file mode 100644
index 10483b3..0000000
--- a/src/login/kcContext.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { createGetKcContext } from "keycloakify/login";
-
-export type KcContextExtension =
- // WARNING: It's important to keep in sync the extraThemeProperties declared in the package.json and this type definition.
- | { pageId: "login.ftl"; extraThemeProperties: { foo: string } }
- | { pageId: "my-extra-page-1.ftl" }
- | { pageId: "my-extra-page-2.ftl"; someCustomValue: string }
- // NOTE: register.ftl is deprecated in favor of register-user-profile.ftl
- // but let's say we use it anyway and have this plugin enabled: https://github.com/micedre/keycloak-mail-whitelisting
- // keycloak-mail-whitelisting define the non standard ftl global authorizedMailDomains, we declare it here.
- | { pageId: "register.ftl"; authorizedMailDomains: string[] };
-
-//NOTE: In most of the cases you do not need to overload the KcContext, you can
-// just call createGetKcContext(...) without type arguments.
-// You want to overload the KcContext only if:
-// - You have custom plugins that add some values to the context (like https://github.com/micedre/keycloak-mail-whitelisting that adds authorizedMailDomains)
-// - You want to add support for extra pages that are not yey featured by default, see: https://docs.keycloakify.dev/contributing#adding-support-for-a-new-page
-export const { getKcContext } = createGetKcContext({
- mockData: [
- {
- pageId: "login.ftl",
- locale: {
- //When we test the login page we do it in french
- currentLanguageTag: "en",
- },
- //Uncomment the following line for hiding the Alert message
- //"message": undefined
- //Uncomment the following line for showing an Error message
- //message: { type: "error", summary: "This is an error" }
- },
- {
- pageId: "my-extra-page-2.ftl",
- someCustomValue: "foo bar baz",
- },
- {
- //NOTE: You will either use register.ftl (legacy) or register-user-profile.ftl, not both
- pageId: "register-user-profile.ftl",
- locale: {
- currentLanguageTag: "en",
- },
- profile: {
- attributes: [
- {
- validators: {
- pattern: {
- pattern: "^[a-zA-Z0-9]+$",
- "ignore.empty.value": true,
- // eslint-disable-next-line no-template-curly-in-string
- "error-message": "${alphanumericalCharsOnly}",
- },
- },
- //NOTE: To override the default mock value
- value: undefined,
- name: "username",
- },
- {
- validators: {
- options: {
- options: [
- "male",
- "female",
- "non-binary",
- "transgender",
- "intersex",
- "non_communicated",
- ],
- },
- },
- // eslint-disable-next-line no-template-curly-in-string
- displayName: "${gender}",
- annotations: {},
- required: true,
- groupAnnotations: {},
- readOnly: false,
- name: "gender",
- },
- ],
- },
- },
- {
- pageId: "register.ftl",
- authorizedMailDomains: [
- "example.com",
- "another-example.com",
- "*.yet-another-example.com",
- "*.example.com",
- "hello-world.com",
- ],
- // Simulate we got an error with the email field
- messagesPerField: {
- printIfExists: (fieldName: string, className: T) => {
- console.log({ fieldName });
- return fieldName === "email" ? className : undefined;
- },
- existsError: (fieldName: string) => fieldName === "email",
- get: (fieldName: string) => `Fake error for ${fieldName}`,
- exists: (fieldName: string) => fieldName === "email",
- },
- },
- ],
-});
-
-export const { kcContext } = getKcContext({
- // Uncomment to test the login page for development.
- //mockPageId: "login.ftl",
-});
-
-export type KcContext = NonNullable<
- ReturnType["kcContext"]
->;
diff --git a/src/login/pages/Login.stories.tsx b/src/login/pages/Login.stories.tsx
deleted file mode 100644
index 91ac4e9..0000000
--- a/src/login/pages/Login.stories.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
-
-const { PageStory } = createPageStory({
- pageId: "login.ftl",
-});
-
-const meta = {
- title: "login/Login",
- component: PageStory,
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- render: () => , I18n>) {
+ const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
-if (my_custom_param !== null) {
- console.log("my_custom_param:", my_custom_param);
-}
+ const { kcClsx } = getKcClsx({
+ doUseDefaultCss,
+ classes
+ });
-export default function Login(
- props: PageProps, I18n>
-) {
- const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+ const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } = kcContext;
- const { getClassName } = useGetClassName({
- doUseDefaultCss,
- classes,
- });
+ const { msg, msgStr } = i18n;
- const {
- social,
- realm,
- url,
- usernameHidden,
- login,
- auth,
- registrationDisabled,
- } = kcContext;
+ const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
- const { msg, msgStr } = i18n;
+ return (
+
+
+ }
+ socialProvidersNode={
+ <>
+ {realm.password && social?.providers !== undefined && social.providers.length !== 0 && (
+
+ )}
+
+ }
+ >
+
+
- ) : (
- <>
- {showUsernameNode}
-
-
- )}
-
-
+
-
+
-
+
-
+ {/* {msg("loginTitleHtml", realm.displayNameHtml)} */}
+
-
-
-
- );
+ );
}
diff --git a/src/login/Template2.tsx b/src/login/Template2.tsx
new file mode 100644
index 0000000..71e5e2c
--- /dev/null
+++ b/src/login/Template2.tsx
@@ -0,0 +1,299 @@
+// // Copy pasted from: https://github.com/InseeFrLab/keycloakify/blob/main/src/login/Template.tsx
+
+// import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
+// import { type TemplateProps } from "keycloakify/login/TemplateProps";
+// import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+// import { clsx } from "keycloakify/tools/clsx";
+// import posthog from "posthog-js";
+// import { PostHogProvider } from "posthog-js/react";
+// import { ReactElement, useEffect, useState } from "react";
+// import type { I18n } from "./i18n";
+// import type { KcContext } from "./kcContext";
+// import c2foLogo from "./assets/c2fo_logo.svg";
+// import fellow from "./assets/fellow_logo.svg";
+// import fp from "./assets/fpllc_logo.svg";
+// import siemans from "./assets/siemens_logo.svg";
+// import { SyncDash } from "./SyncDash";
+
+// export default function Template(props: TemplateProps
- {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
- {auth !== undefined &&
- auth.showTryAnotherWayLink &&
- showAnotherWayIfPresent && (
-
-
-
-
-
- Every developer needs data.
-
- Neosync powers developers with safe, high-quality data for a
- better building, testing and debugging experience.
-
-
- {logos.map((src) => (
-
+
+
- {src.logo}
-
- ))}
-
+//
+//
+//
+// {!(
+// auth !== undefined &&
+// auth.showUsername &&
+// !auth.showResetCredentials
+// ) ? (
+// displayRequiredFields ? (
+//
+//
+//
+//
+// ) : (
+//
+//
+// *
+// {msg("requiredFields")}
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// )
+// ) : displayRequiredFields ? (
+//
+//
+//
+// ) : (
+// <>
+// {showUsernameNode}
+//
+//
+// * {msg("requiredFields")}
+//
+//
+//
+// {showUsernameNode}
+//
+//
+//
+//
+//
+//
+//
+//
+// )}
+//
+//
+//
+// {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
+// {auth !== undefined &&
+// auth.showTryAnotherWayLink &&
+// showAnotherWayIfPresent && (
+//
+// )}
+// {displayMessage &&
+// message !== undefined &&
+// (message.type !== "warning" || !isAppInitiatedAction) && (
+//
+//
+// {message.type === "success" && (
+//
+// )}
+// {message.type === "warning" && (
+//
+// )}
+// {message.type === "error" && (
+//
+// )}
+// {message.type === "info" && (
+//
+// )}
+//
+//
+// )}
+// {children}
+// {displayInfo && (
+//
+//
+// )}
+//
+// {infoNode}
+//
+//
+//
+//
+//
+// Every developer needs data.
+//
+// Neosync powers developers with safe, high-quality data for a
+// better building, testing and debugging experience.
+//
+//
+// {logos.map((src) => (
+//
+//
+// {src.logo}
+//
+// ))}
+//
+
+ );
+}
diff --git a/src/login/createPageStory.tsx b/src/login/createPageStory.tsx
deleted file mode 100644
index cecb034..0000000
--- a/src/login/createPageStory.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { getKcContext, type KcContext } from "./kcContext";
-import KcApp from "./KcApp";
-import type { DeepPartial } from "keycloakify/tools/DeepPartial";
-
-export function createPageStory
+
+ Every developer needs data.
+
+ Neosync powers developers with safe, high-quality data for a better
+ building, testing and debugging experience.
+
+
+ {logos.map(src => (
+
+
+ {src.logo}
+
+ ))}
+
+
+ {msg("noAccount")}{" "}
+
+ {msg("doRegister")}
+
+
+
+
+
+
+ );
+}
- const formElement = e.target as HTMLFormElement;
+function PasswordWrapper(props: { kcClsx: KcClsx; i18n: I18n; passwordInputId: string; children: JSX.Element }) {
+ const { kcClsx, i18n, passwordInputId, children } = props;
- //NOTE: Even if we login with email Keycloak expect username and password in
- //the POST request.
- formElement
- .querySelector("input[name='email']")
- ?.setAttribute("name", "username");
+ const { msgStr } = i18n;
- formElement.submit();
- });
+ const { isPasswordRevealed, toggleIsPasswordRevealed } = useIsPasswordRevealed({ passwordInputId });
- return (
-
-
- {msg("noAccount")}
-
- {msg("doRegister")}
-
-
-
+ {realm.password && (
+
+ )}
+
+
-
-
- );
+ );
}
diff --git a/src/login/pages/LoginResetPassword.stories.tsx b/src/login/pages/LoginResetPassword.stories.tsx
deleted file mode 100644
index 0b8b9d8..0000000
--- a/src/login/pages/LoginResetPassword.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-//This is to show that you can create stories for pages that you haven't overloaded.
-
-import { Meta, StoryObj } from '@storybook/react';
-import { createPageStory } from "../createPageStory";
-
-const { PageStory } = createPageStory({
- pageId: "login-reset-password.ftl"
-});
-
-const meta = {
- title: "login/LoginResetPassword",
- component: PageStory,
-} satisfies Meta
-
- {realm.password && social.providers !== undefined && (
-
- or continue with email
-
- {realm.password && (
-
- )}
+
+
-
- )}
- - 4 &&
- getClassName("kcFormSocialAccountDoubleListClass")
- )}
- >
- {social.providers.map((p) => (
-
-
-
- - {p.providerId == "google" ? ( -- -
- ) : (
- 
- )}
- {p.displayName}
-
- ))}
-
- {termMarkdown}
-
-
-
-
- );
-}
diff --git a/src/login/pages/shared/UserProfileFormFields.tsx b/src/login/pages/shared/UserProfileFormFields.tsx
deleted file mode 100644
index 8455402..0000000
--- a/src/login/pages/shared/UserProfileFormFields.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import type { ClassKey } from "keycloakify/login/TemplateProps";
-import type { Attribute } from "keycloakify/login/kcContext/KcContext";
-import { useFormValidation } from "keycloakify/login/lib/useFormValidation";
-import { clsx } from "keycloakify/tools/clsx";
-import { Fragment, useEffect } from "react";
-import type { I18n } from "../../i18n";
-
-export type UserProfileFormFieldsProps = {
- kcContext: Parameters
-
- )}
-
- {BeforeField &&
-
-
- {groupDisplayDescription !== "" && (
-
-
-
- )}
-
-
- {AfterField &&
-
- {attribute.required && <>*}
-
-
- {(() => {
- const { options } = attribute.validators;
-
- if (options !== undefined) {
- return (
-
- );
- }
-
- return (
- {
- switch (attribute.name) {
- case "password-confirm":
- case "password":
- return "password";
- default:
- return "text";
- }
- })()}
- id={attribute.name}
- name={attribute.name}
- value={value}
- onChange={(event) =>
- formValidationDispatch({
- action: "update value",
- name: attribute.name,
- newValue: event.target.value,
- })
- }
- onBlur={() =>
- formValidationDispatch({
- action: "focus lost",
- name: attribute.name,
- })
- }
- className={getClassName("kcInputClass")}
- aria-invalid={displayableErrors.length !== 0}
- disabled={attribute.readOnly}
- autoComplete={attribute.autocomplete}
- />
- );
- })()}
- {displayableErrors.length !== 0 &&
- (() => {
- const divId = `input-error-${attribute.name}`;
-
- return (
- <>
-
-
- {displayableErrors.map(
- ({ errorMessage }) => errorMessage
- )}
-
-
- );
- })()}
-
-