wip
This commit is contained in:
garronej
parent
316345eb1d
commit
184139f284
|
|
@ -13,6 +13,12 @@
|
|||
"keycloak": "yarn build && keycloakify",
|
||||
"download-builtin-keycloak-theme": "download-builtin-keycloak-theme 15.0.2"
|
||||
},
|
||||
"keycloakify": {
|
||||
"extraPages": [
|
||||
"my-extra-page-1.ftl",
|
||||
"my-extra-page-2.ftl"
|
||||
]
|
||||
},
|
||||
"author": "u/garronej",
|
||||
"license": "MIT",
|
||||
"keywords": [],
|
||||
|
|
@ -20,7 +26,8 @@
|
|||
"@emotion/react": "^11.9.0",
|
||||
"keycloakify": "^6.0.0",
|
||||
"react": "18.1.0",
|
||||
"react-dom": "18.1.0"
|
||||
"react-dom": "18.1.0",
|
||||
"evt": "^2.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^15.3.1",
|
||||
|
|
|
|||
|
|
@ -1,70 +1,41 @@
|
|||
import "./KcApp.css";
|
||||
import { lazy, Suspense } from "react";
|
||||
import type { KcContext } from "./kcContext";
|
||||
import KcAppBase, { defaultKcProps, useDownloadTerms, useI18n } from "keycloakify";
|
||||
import tos_en_url from "./tos_en.md";
|
||||
import tos_fr_url from "./tos_fr.md";
|
||||
import KcAppBase, { defaultKcProps } from "keycloakify";
|
||||
import { useI18n } from "./i18n";
|
||||
|
||||
const Terms = lazy(() => import("./Terms"));
|
||||
|
||||
export type Props = {
|
||||
kcContext: KcContext;
|
||||
};
|
||||
|
||||
export default function KcApp(props: Props) {
|
||||
const { kcContext } = props;
|
||||
export default function KcApp({ kcContext }: Props) {
|
||||
const i18n = useI18n({ kcContext });
|
||||
|
||||
useDownloadTerms({
|
||||
kcContext,
|
||||
"downloadTermMarkdown": async ({ currentLanguageTag }) => {
|
||||
const markdownString = await fetch(
|
||||
(() => {
|
||||
switch (currentLanguageTag) {
|
||||
case "fr":
|
||||
return tos_fr_url;
|
||||
default:
|
||||
return tos_en_url;
|
||||
}
|
||||
})(),
|
||||
).then(response => response.text());
|
||||
|
||||
return markdownString;
|
||||
},
|
||||
});
|
||||
|
||||
const i18n = useI18n({
|
||||
kcContext,
|
||||
// NOTE: Here you can override the default i18n messages
|
||||
// or define new ones that, for example, you would have
|
||||
// defined in the Keycloak admin UI for UserProfile
|
||||
// https://user-images.githubusercontent.com/6702424/182050652-522b6fe6-8ee5-49df-aca3-dba2d33f24a5.png
|
||||
"extraMessages": {
|
||||
"en": {
|
||||
"foo": "foo in English",
|
||||
// Here we overwrite the default english value for the message "doForgotPassword"
|
||||
// that is "Forgot Password?" see: https://github.com/InseeFrLab/keycloakify/blob/f0ae5ea908e0aa42391af323b6d5e2fd371af851/src/lib/i18n/generated_messages/18.0.1/login/en.ts#L17
|
||||
"doForgotPassword": "I forgot my password"
|
||||
},
|
||||
"fr": {
|
||||
/* spell-checker: disable */
|
||||
"foo": "foo en Francais",
|
||||
"doForgotPassword": "J'ai oublié mon mot de passe"
|
||||
/* spell-checker: enable */
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
//NOTE: Locale not yet downloaded
|
||||
//NOTE: Locales not yet downloaded
|
||||
if (i18n === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const props = {
|
||||
i18n,
|
||||
...defaultKcProps,
|
||||
// NOTE: The classes are defined in ./KcApp.css
|
||||
"kcHeaderWrapperClass": "my-color my-font",
|
||||
};
|
||||
|
||||
return (
|
||||
<KcAppBase
|
||||
kcContext={kcContext}
|
||||
i18n={i18n}
|
||||
{...{
|
||||
...defaultKcProps,
|
||||
// NOTE: The classes are defined in ./KcApp.css
|
||||
"kcHeaderWrapperClass": "my-color my-font",
|
||||
}}
|
||||
/>
|
||||
<Suspense>
|
||||
{(() => {
|
||||
switch (kcContext.pageId) {
|
||||
case "register.ftl": return <Register {...{ kcContext, ...props }} />;
|
||||
case "terms.ftl": return <Terms {...{ kcContext, ...props }} />;
|
||||
case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, ...props }} />;
|
||||
case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, ...props }} />;
|
||||
default: return <KcAppBase {...{ kcContext, ...props }} />;
|
||||
}
|
||||
})()}
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
}
|
||||
|
|
|
|||
96
src/KcApp/Terms.tsx
Normal file
96
src/KcApp/Terms.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import { memo } from "react";
|
||||
import Template from "keycloakify/lib/components/Template";
|
||||
import type { KcProps } from "keycloakify";
|
||||
import { useDownloadTerms } from "keycloakify";
|
||||
import type { KcContext } from "./kcContext";
|
||||
import type { I18n } from "./i18n";
|
||||
import { evtTermMarkdown } from "keycloakify/lib/components/Terms";
|
||||
import { useRerenderOnStateChange } from "evt/hooks";
|
||||
import tos_en_url from "./tos_en.md";
|
||||
import tos_fr_url from "./tos_fr.md";
|
||||
import { useCssAndCx } from "keycloakify/lib/tools/useCssAndCx";
|
||||
|
||||
/**
|
||||
* NOTE: Yo do not need to do all this to put your own Terms and conditions
|
||||
* this is if you want component level customization.
|
||||
* If the default works for you you can just use the useDownloadTerms hook
|
||||
* in the KcApp.tsx
|
||||
* Example: https://github.com/garronej/keycloakify-starter/blob/a20c21b2aae7c6dc6dbea294f3d321955ddf9355/src/KcApp/KcApp.tsx#L14-L30
|
||||
*/
|
||||
|
||||
type KcContext_Terms = Extract<KcContext, { pageId: "terms.ftl" }>;
|
||||
|
||||
const Terms = memo(
|
||||
({
|
||||
kcContext,
|
||||
i18n,
|
||||
...props
|
||||
}: { kcContext: KcContext_Terms; i18n: I18n } & KcProps) => {
|
||||
const { url } = kcContext;
|
||||
|
||||
useDownloadTerms({
|
||||
kcContext,
|
||||
"downloadTermMarkdown": async ({ currentLanguageTag }) => {
|
||||
|
||||
const markdownString = await fetch((() => {
|
||||
switch (currentLanguageTag) {
|
||||
case "fr": return tos_fr_url;
|
||||
default: return tos_en_url;
|
||||
}
|
||||
})()).then(response => response.text());
|
||||
|
||||
return markdownString;
|
||||
},
|
||||
});
|
||||
|
||||
useRerenderOnStateChange(evtTermMarkdown);
|
||||
|
||||
const { cx } = useCssAndCx();
|
||||
|
||||
if (evtTermMarkdown.state === undefined) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { msg, msgStr } = i18n;
|
||||
|
||||
return (
|
||||
<Template
|
||||
{...{ kcContext, i18n, ...props }}
|
||||
doFetchDefaultThemeResources={true}
|
||||
displayMessage={false}
|
||||
headerNode={msg("termsTitle")}
|
||||
formNode={
|
||||
<>
|
||||
<div id="kc-terms-text">{evtTermMarkdown.state}</div>
|
||||
<form className="form-actions" action={url.loginAction} method="POST">
|
||||
<input
|
||||
className={cx(
|
||||
props.kcButtonClass,
|
||||
props.kcButtonClass,
|
||||
props.kcButtonClass,
|
||||
props.kcButtonPrimaryClass,
|
||||
props.kcButtonLargeClass
|
||||
)}
|
||||
name="accept"
|
||||
id="kc-accept"
|
||||
type="submit"
|
||||
value={msgStr("doAccept")}
|
||||
/>
|
||||
<input
|
||||
className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
|
||||
name="cancel"
|
||||
id="kc-decline"
|
||||
type="submit"
|
||||
value={msgStr("doDecline")}
|
||||
/>
|
||||
</form>
|
||||
<div className="clearfix" />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
},
|
||||
);
|
||||
|
||||
export default Terms;
|
||||
28
src/KcApp/i18n.ts
Normal file
28
src/KcApp/i18n.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { useI18n as useI18nBase } from "keycloakify";
|
||||
|
||||
type Props = Omit<Parameters<typeof useI18nBase>[0], "extraMessages">;
|
||||
|
||||
export function useI18n(props: Props) {
|
||||
const { kcContext } = props;
|
||||
return useI18nBase({
|
||||
kcContext,
|
||||
"extraMessages": {
|
||||
"en": {
|
||||
"alphanumericalCharsOnly": "Only alphanumerical characters",
|
||||
"gender": "Gender",
|
||||
// Here we overwrite the default english value for the message "doForgotPassword"
|
||||
// that is "Forgot Password?" see: https://github.com/InseeFrLab/keycloakify/blob/f0ae5ea908e0aa42391af323b6d5e2fd371af851/src/lib/i18n/generated_messages/18.0.1/login/en.ts#L17
|
||||
"doForgotPassword": "I forgot my password"
|
||||
},
|
||||
"fr": {
|
||||
/* spell-checker: disable */
|
||||
"alphanumericalCharsOnly": "Caractère alphanumérique uniquement",
|
||||
"gender": "Genre",
|
||||
"doForgotPassword": "J'ai oublié mon mot de passe"
|
||||
/* spell-checker: enable */
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export type I18n = NonNullable<ReturnType<typeof useI18n>>;
|
||||
|
|
@ -1,16 +1,81 @@
|
|||
import { getKcContext } from "keycloakify/lib/getKcContext";
|
||||
|
||||
export const { kcContext } = getKcContext({
|
||||
/* Uncomment to test th<e login page for development */
|
||||
export const { kcContext } = getKcContext<
|
||||
// NOTE: A 'keycloakify' field must be added
|
||||
// in the package.json to generate theses pages
|
||||
// https://docs.keycloakify.dev/build-options#keycloakify.extrapages
|
||||
| { 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[]; }
|
||||
>({
|
||||
// Uncomment to test the login page for development.
|
||||
// Try with another page like "register-user-profile.ftl"
|
||||
// DON'T forget to re-comment before publishing to production.
|
||||
//"mockPageId": "login.ftl",
|
||||
"mockData": [
|
||||
{
|
||||
"pageId": "login.ftl",
|
||||
"locale": {
|
||||
"currentLanguageTag": "fr", //When we test the login page we do it in french
|
||||
//When we test the login page we do it in french
|
||||
"currentLanguageTag": "fr",
|
||||
},
|
||||
},
|
||||
],
|
||||
{
|
||||
"pageId": "my-extra-page-2.ftl",
|
||||
"someCustomValue": "foo bar baz"
|
||||
},
|
||||
{
|
||||
"pageId": "register.ftl",
|
||||
"authorizedMailDomains": [
|
||||
"example.com",
|
||||
"another-example.com",
|
||||
"*.yet-another-example.com",
|
||||
"*.example.com",
|
||||
"hello-world.com"
|
||||
]
|
||||
},
|
||||
{
|
||||
//NOTE: You will either use register.ftl (legacy) or register-user-profile.ftl, not both
|
||||
"pageId": "register-user-profile.ftl",
|
||||
"locale": {
|
||||
"currentLanguageTag": "fr"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export type KcContext = NonNullable<typeof kcContext>;
|
||||
export type KcContext = NonNullable<typeof kcContext>;
|
||||
Loading…
Reference in a new issue