462 lines
18 KiB
TypeScript
462 lines
18 KiB
TypeScript
import React from "react";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
import { createKcPageStory } from "../KcPageStory";
|
|
|
|
const { KcPageStory } = createKcPageStory({
|
|
pageId: "log.ftl"
|
|
});
|
|
|
|
const meta = {
|
|
title: "account/log.ftl",
|
|
component: KcPageStory
|
|
} satisfies Meta<typeof KcPageStory>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
// NOTE: Enable in your Keycloak realm with: https://github.com/user-attachments/assets/5fc5e49e-a172-4cb0-897a-49baac284b47
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<KcPageStory
|
|
kcContext={{
|
|
log: {
|
|
events: [
|
|
{
|
|
date: "2024-04-26T12:29:08Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T12:10:56Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T11:57:34Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "account",
|
|
details: [],
|
|
event: "update totp"
|
|
},
|
|
{
|
|
date: "2024-04-26T11:57:21Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "account",
|
|
details: [],
|
|
event: "update totp"
|
|
},
|
|
{
|
|
date: "2024-04-26T11:56:56Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "account",
|
|
details: [],
|
|
event: "remove totp"
|
|
},
|
|
{
|
|
date: "2024-04-26T11:56:55Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "account",
|
|
details: [],
|
|
event: "remove totp"
|
|
},
|
|
{
|
|
date: "2024-04-26T11:56:41Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "account",
|
|
details: [],
|
|
event: "update totp"
|
|
},
|
|
{
|
|
date: "2024-04-26T11:56:36Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "account",
|
|
details: [],
|
|
event: "update totp"
|
|
},
|
|
{
|
|
date: "2024-04-26T11:32:54Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:42:54Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:42:52Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:42:40Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:42:09Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "false",
|
|
key: "remember_me"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:24:17Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [],
|
|
event: "logout"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:23:54Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:23:50Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:23:47Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "account",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:23:15Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [],
|
|
event: "logout"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:23:06Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:22:53Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [],
|
|
event: "logout"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:21:29Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "false",
|
|
key: "remember_me"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-26T09:17:32Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-18T11:19:09Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-18T11:18:50Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
},
|
|
{
|
|
date: "2024-04-18T11:18:24Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "account",
|
|
details: [
|
|
{
|
|
value: "openid-connect",
|
|
key: "auth_method"
|
|
},
|
|
{
|
|
value: "john.doe",
|
|
key: "username"
|
|
}
|
|
],
|
|
event: "login"
|
|
}
|
|
]
|
|
}
|
|
}}
|
|
/>
|
|
)
|
|
};
|
|
export const LogsMissingDetails: Story = {
|
|
render: () => (
|
|
<KcPageStory
|
|
kcContext={{
|
|
pageId: "log.ftl",
|
|
log: {
|
|
events: [
|
|
{
|
|
date: "2024-04-26T12:29:08Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "",
|
|
details: [],
|
|
event: "login"
|
|
}
|
|
]
|
|
}
|
|
}}
|
|
/>
|
|
)
|
|
};
|
|
export const SingleLogEntry: Story = {
|
|
render: () => (
|
|
<KcPageStory
|
|
kcContext={{
|
|
pageId: "log.ftl",
|
|
log: {
|
|
events: [
|
|
{
|
|
date: "2024-04-26T12:29:08Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{ key: "auth_method", value: "openid-connect" },
|
|
{ key: "username", value: "john.doe" }
|
|
],
|
|
event: "login"
|
|
}
|
|
]
|
|
}
|
|
}}
|
|
/>
|
|
)
|
|
};
|
|
export const LogsWithLongDetails: Story = {
|
|
render: () => (
|
|
<KcPageStory
|
|
kcContext={{
|
|
pageId: "log.ftl",
|
|
log: {
|
|
events: [
|
|
{
|
|
date: "2024-04-26T12:29:08Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "keycloakify-frontend",
|
|
details: [
|
|
{ key: "auth_method", value: "openid-connect" },
|
|
{ key: "username", value: "john.doe" },
|
|
{ key: "session_duration", value: "2 hours 30 minutes 45 seconds" },
|
|
{ key: "location", value: "Windsor, Ontario, Canada" },
|
|
{ key: "user_agent", value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" }
|
|
],
|
|
event: "login"
|
|
}
|
|
]
|
|
}
|
|
}}
|
|
/>
|
|
)
|
|
};
|
|
export const EmptyClientField: Story = {
|
|
render: () => (
|
|
<KcPageStory
|
|
kcContext={{
|
|
pageId: "log.ftl",
|
|
log: {
|
|
events: [
|
|
{
|
|
date: "2024-04-26T12:29:08Z",
|
|
ipAddress: "127.0.0.1",
|
|
client: "", // Empty client field
|
|
details: [
|
|
{ key: "auth_method", value: "openid-connect" },
|
|
{ key: "username", value: "john.doe" }
|
|
],
|
|
event: "login"
|
|
}
|
|
]
|
|
}
|
|
}}
|
|
/>
|
|
)
|
|
};
|
|
export const NoLogsAvailable: Story = {
|
|
render: () => (
|
|
<KcPageStory
|
|
kcContext={{
|
|
pageId: "log.ftl",
|
|
log: {
|
|
events: [] // No log events
|
|
}
|
|
}}
|
|
/>
|
|
)
|
|
};
|