diff --git a/src/account/Fallback.tsx b/src/account/Fallback.tsx index 50e9225a..35a16f49 100644 --- a/src/account/Fallback.tsx +++ b/src/account/Fallback.tsx @@ -6,6 +6,7 @@ import { assert, type Equals } from "tsafe/assert"; const Password = lazy(() => import("keycloakify/account/pages/Password")); const Account = lazy(() => import("keycloakify/account/pages/Account")); +const Sessions = lazy(() => import("keycloakify/account/pages/Sessions")); export default function Fallback(props: PageProps) { const { kcContext, ...rest } = props; @@ -16,6 +17,8 @@ export default function Fallback(props: PageProps) { switch (kcContext.pageId) { case "password.ftl": return ; + case "sessions.ftl": + return ; case "account.ftl": return ; } diff --git a/src/account/TemplateProps.ts b/src/account/TemplateProps.ts index 10ebf9aa..1f20c599 100644 --- a/src/account/TemplateProps.ts +++ b/src/account/TemplateProps.ts @@ -11,4 +11,11 @@ export type TemplateProps({ + ...kcContextCommonMock, + "pageId": "sessions.ftl", + sessions: { + sessions: [ + { + ...kcContextCommonMock.sessions, + ipAddress: "127.0.0.1", + started: new Date().toString(), + lastAccess: new Date().toString(), + expires: new Date().toString(), + clients: ["Chrome", "Firefox"] + } + ] + }, + "stateChecker": "" }) ]; diff --git a/src/account/lib/useGetClassName.ts b/src/account/lib/useGetClassName.ts index 51366ff0..f0ee87af 100644 --- a/src/account/lib/useGetClassName.ts +++ b/src/account/lib/useGetClassName.ts @@ -6,6 +6,7 @@ export const { useGetClassName } = createUseClassName({ "kcHtmlClass": undefined, "kcBodyClass": undefined, "kcButtonClass": "btn", + "kcContentWrapperClass": "row", "kcButtonPrimaryClass": "btn-primary", "kcButtonLargeClass": "btn-lg", "kcButtonDefaultClass": "btn-default" diff --git a/src/account/pages/Sessions.tsx b/src/account/pages/Sessions.tsx new file mode 100644 index 00000000..1bb46355 --- /dev/null +++ b/src/account/pages/Sessions.tsx @@ -0,0 +1,68 @@ +import { clsx } from "keycloakify/tools/clsx"; +import type { PageProps } from "keycloakify/account/pages/PageProps"; +import { useGetClassName } from "keycloakify/account/lib/useGetClassName"; +import type { KcContext } from "../kcContext"; +import type { I18n } from "../i18n"; + +export default function Sessions(props: PageProps, I18n>) { + const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; + + const { getClassName } = useGetClassName({ + doUseDefaultCss, + classes + }); + + console.log({ kcContext }); + const { url, stateChecker, sessions } = kcContext; + + const { msg } = i18n; + console.log({ sdf: kcContext.locale?.supported }); + console.log({ asdf: "asdf" }); + return ( + + ); +} diff --git a/src/bin/keycloakify/generateFtl/pageId.ts b/src/bin/keycloakify/generateFtl/pageId.ts index da3525f6..70062ac0 100644 --- a/src/bin/keycloakify/generateFtl/pageId.ts +++ b/src/bin/keycloakify/generateFtl/pageId.ts @@ -27,7 +27,7 @@ export const loginThemePageIds = [ "saml-post-form.ftl" ] as const; -export const accountThemePageIds = ["password.ftl", "account.ftl"] as const; +export const accountThemePageIds = ["password.ftl", "account.ftl", "sessions.ftl"] as const; export type LoginThemePageId = (typeof loginThemePageIds)[number]; export type AccountThemePageId = (typeof accountThemePageIds)[number]; diff --git a/stories/account/pages/Sessions.stories.tsx b/stories/account/pages/Sessions.stories.tsx new file mode 100644 index 00000000..b5d882aa --- /dev/null +++ b/stories/account/pages/Sessions.stories.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import type { ComponentMeta } from "@storybook/react"; +import { createPageStory } from "../createPageStory"; + +const pageId = "sessions.ftl"; + +const { PageStory } = createPageStory({ pageId }); + +const meta: ComponentMeta = { + title: `account/${pageId}`, + component: PageStory, + parameters: { + viewMode: "story", + previewTabs: { + "storybook/docs/panel": { + hidden: true + } + } + } +}; + +export default meta; + +export const Default = () => ; + +export const WithMessage = () => ( + +);