+
;
+}
diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx
index cfd68fb..7aeaf00 100644
--- a/src/login/KcPage.tsx
+++ b/src/login/KcPage.tsx
@@ -1,9 +1,10 @@
+import "../scss/index.scss";
import { Suspense, lazy } from "react";
import type { ClassKey } from "keycloakify/login";
import type { KcContext } from "./KcContext";
import { useI18n } from "./i18n";
import DefaultPage from "keycloakify/login/DefaultPage";
-import Template from "keycloakify/login/Template";
+import Template from "./Template";
const UserProfileFormFields = lazy(
() => import("keycloakify/login/UserProfileFormFields")
);
@@ -26,7 +27,6 @@ export default function KcPage(props: { kcContext: KcContext }) {
i18n={i18n}
classes={classes}
Template={Template}
- doUseDefaultCss={true}
UserProfileFormFields={UserProfileFormFields}
doMakeUserConfirmPassword={doMakeUserConfirmPassword}
/>
@@ -37,4 +37,36 @@ export default function KcPage(props: { kcContext: KcContext }) {
);
}
-const classes = {} satisfies { [key in ClassKey]?: string };
+const classes = {
+ kcBodyClass: "ps-main ps-main_full",
+ kcContentClass: "ps-content",
+ kcLoginClass: "ps-main--page ps-page",
+
+ kcHeaderClass: "ps-page--header ps-header",
+ kcHeaderWrapperClass: "ps-header--wrapper",
+
+ kcFormCardClass: "ps-page--section ps-page--section_full",
+
+ kcFormClass: "ps-form",
+
+ kcFormHeaderClass: "ps-form--header",
+
+ kcFormGroupClass: "ps-form-group",
+ kcFormButtonsClass: "ps-form-group--buttons",
+ kcFormOptionsClass: "ps-form-group--options",
+ kcFormOptionsWrapperClass: "ps-form-group--options-wrapper",
+
+ kcButtonClass: "ps-button",
+ kcLabelClass: "ps-label",
+ kcInputClass: "ps-input",
+ kcInputGroup: "ps-input-group",
+ kcFormPasswordVisibilityButtonClass: "ps-input-group--password-visibility-button",
+
+ kcLocaleClass: "ps-locale",
+ kcLocaleMainClass: "ps-locale ps-header--i18n",
+ kcLocaleListClass: "ps-locale--list",
+ kcLocaleListItemClass: "ps-locale--list-item",
+ kcLocaleItemClass: "ps-locale--item",
+ kcLocaleWrapperClass: "ps-locale--wrapper",
+ kcLocaleDropDownClass: "ps-locale--dropdown"
+} satisfies { [key in ClassKey]?: string };
diff --git a/src/login/Template.tsx b/src/login/Template.tsx
new file mode 100644
index 0000000..81e0832
--- /dev/null
+++ b/src/login/Template.tsx
@@ -0,0 +1,185 @@
+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";
+import Background from "./Background";
+
+export default function Template(props: TemplateProps{x1312}
+ {(new Array(Math.ceil(window.innerWidth / 100) * Math.ceil(window.innerHeight / 100)))
+ .fill(null)
+ .map((_, i) =>
+ 
+
)
+ }
+
+
+
+
+ );
+ }
diff --git a/src/login/pages/Error.stories.tsx b/src/login/pages/Error.stories.tsx
new file mode 100644
index 0000000..9c1e5a7
--- /dev/null
+++ b/src/login/pages/Error.stories.tsx
@@ -0,0 +1,62 @@
+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
+ pub.solar/
+ {enabledLanguages.length > 1 && (
+
+
+
+ )}
+
+
+
+
+
+ -
+ {enabledLanguages.map(({ languageTag, label, href }, i) => (
+
- + + {label} + + + ))} +
+
+ {(() => {
+ const node = !(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
+
+
+ {headerNode}
+ ) : ( + + ); + + if (displayRequiredFields) { + return ( +
+
+ );
+ }
+
+ return node;
+ })()}
+
+
+ *
+ {msg("requiredFields")}
+
+
+ {node}
+
+ {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
+ {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
+
+
+
+ )}
+ {children}
+ {auth !== undefined && auth.showTryAnotherWayLink && (
+
+ )}
+ {socialProvidersNode}
+ {displayInfo && (
+
+ {message.type === "success" && }
+ {message.type === "warning" && }
+ {message.type === "error" && }
+ {message.type === "info" && }
+
+
+
+
+ )}
+
+ {infoNode}
+
+