95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
|
import React from "react";
|
||
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
||
|
|
import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
|
||
|
|
import { tss } from "../tss";
|
||
|
|
// @ts-expect-error
|
||
|
|
import screenshotPngUrl from "./screenshot.png";
|
||
|
|
|
||
|
|
const meta = {
|
||
|
|
title: "Account SPA/index.ftl"
|
||
|
|
} satisfies Meta<any>;
|
||
|
|
|
||
|
|
export default meta;
|
||
|
|
|
||
|
|
type Story = StoryObj<typeof meta>;
|
||
|
|
|
||
|
|
export const NotInStorybookButSupported: Story = {
|
||
|
|
render: () => <AccountSpa />
|
||
|
|
};
|
||
|
|
|
||
|
|
function AccountSpa() {
|
||
|
|
console.log(window.location.href);
|
||
|
|
|
||
|
|
useInsertLinkTags({
|
||
|
|
componentOrHookName: "Template",
|
||
|
|
hrefs: []
|
||
|
|
});
|
||
|
|
|
||
|
|
const { classes, theme } = useStyles();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classes.root}>
|
||
|
|
<div className={classes.content}>
|
||
|
|
<p>
|
||
|
|
Keycloakify offers two option for creating an account theme:{" "}
|
||
|
|
<a href="https://docs.keycloakify.dev/account-theme#multi-page" target="_blank">
|
||
|
|
Multi Page
|
||
|
|
</a>{" "}
|
||
|
|
or{" "}
|
||
|
|
<a href="https://docs.keycloakify.dev/account-theme#single-page" target="_blank">
|
||
|
|
Single Page
|
||
|
|
</a>
|
||
|
|
. Since the account Single Page does not support Storybook, here is a screenshot of it's default look:
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<img className={classes.screenshot} alt="image" src={screenshotPngUrl} />
|
||
|
|
<br />
|
||
|
|
<a href="https://docs.keycloakify.dev/account-theme" target="_blank">
|
||
|
|
Learn more
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const useStyles = tss.withName({ AccountSpa }).create(({ isDark, theme }) => ({
|
||
|
|
root: {
|
||
|
|
height: "100vh",
|
||
|
|
color: isDark ? "white" : "black",
|
||
|
|
backgroundColor: theme.appContentBg,
|
||
|
|
fontFamily: "'Work Sans'",
|
||
|
|
fontSize: "14px",
|
||
|
|
lineHeight: "24px",
|
||
|
|
WebkitFontSmoothing: "antialiased",
|
||
|
|
"& a": {
|
||
|
|
color: theme.colorSecondary,
|
||
|
|
textDecoration: "none",
|
||
|
|
"&:hover": {
|
||
|
|
textDecoration: "underline"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"& h1": {
|
||
|
|
fontSize: "32px",
|
||
|
|
marginBottom: 35
|
||
|
|
},
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "center"
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
maxWidth: 750,
|
||
|
|
textAlign: "center",
|
||
|
|
marginTop: 100
|
||
|
|
},
|
||
|
|
keycloakifyLogoWrapper: {
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "center"
|
||
|
|
},
|
||
|
|
keycloakifyLogo: {
|
||
|
|
width: 400
|
||
|
|
},
|
||
|
|
screenshot: {
|
||
|
|
maxWidth: "100%"
|
||
|
|
}
|
||
|
|
}));
|