pub-solar/keycloak-theme
5
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

WIP

Browse source
This commit is contained in:
garronej 2022-09-07 13:27:27 +02:00
parent 184139f284
commit 2a10ec9a20
7 changed files with 216 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -24,7 +24,7 @@
"keywords": [],
"dependencies": {
"@emotion/react": "^11.9.0",
"keycloakify": "^6.0.0",
"keycloakify": "^6.0.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"evt": "^2.4.1"

3
src/KcApp/KcApp.tsx
View file

@ -3,7 +3,10 @@ import type { KcContext } from "./kcContext";
import KcAppBase, { defaultKcProps } from "keycloakify";
import { useI18n } from "./i18n";
const Register = lazy(() => import("./Register"));
const Terms = lazy(() => import("./Terms"));
const MyExtraPage1 = lazy(() => import("./MyExtraPage1"));
const MyExtraPage2 = lazy(() => import("./MyExtraPage2"));
export type Props = {
kcContext: KcContext;

14
src/KcApp/MyExtraPage1.tsx Normal file
View file

@ -0,0 +1,14 @@
import { memo } from "react";
import type { KcProps } from "keycloakify";
import type { KcContext } from "./kcContext";
import type { I18n } from "./i18n";
type KcContext_MyExtraPage1 = Extract<KcContext, { pageId: "my-extra-page-1.ftl"; }>;
const MyExtraPage1 = memo(({ kcContext, i18n, ...props }: { kcContext: KcContext_MyExtraPage1; i18n: I18n; } & KcProps) => {
return <>It is up to you to implement this page</>
});
export default MyExtraPage1;

16
src/KcApp/MyExtraPage2.tsx Normal file
View file

@ -0,0 +1,16 @@
import { memo } from "react";
import type { KcProps } from "keycloakify";
import type { KcContext } from "./kcContext";
import type { I18n } from "./i18n";
type KcContext_MyExtraPage2 = Extract<KcContext, { pageId: "my-extra-page-2.ftl"; }>;
const MyExtraPage2 = memo(({ kcContext, i18n, ...props }: { kcContext: KcContext_MyExtraPage2; i18n: I18n; } & KcProps) => {
console.log(`TODO: Do something with: ${kcContext.someCustomValue}`);
return <>It is up to you to implement this page</>
});
export default MyExtraPage2;

168
src/KcApp/Register.tsx Normal file
View file

@ -0,0 +1,168 @@
// This is a copy paste from https://github.com/InseeFrLab/keycloakify/blob/main/src/lib/components/Register.tsx
// It is now up to us to implement a special behavior to leverage the non standard authorizedMailDomains
// provided by the plugin: https://github.com/micedre/keycloak-mail-whitelisting installed on our keycloak server.
// Note that it is no longer recommended to use register.ftl, it's best to use register-user-profile.ftl
// See: https://docs.keycloakify.dev/realtime-input-validation
import { memo } from "react";
import Template from "keycloakify/lib/components/Template";
import type { KcProps } from "keycloakify";
import type { KcContext } from "./kcContext";
import { useCssAndCx } from "keycloakify/lib/tools/useCssAndCx";
import type { I18n } from "./i18n";
type KcContext_Register = Extract<KcContext, { pageId: "register.ftl"; }>;
const Register = memo(({ kcContext, i18n, ...props }: { kcContext: KcContext_Register; i18n: I18n; } & KcProps) => {
const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
const { msg, msgStr } = i18n;
const { cx } = useCssAndCx();
console.log(`NOTE: It is up to you do do something meaningful with ${kcContext.authorizedMailDomains}`)
return (
<Template
{...{ kcContext, i18n, ...props }}
doFetchDefaultThemeResources={true}
headerNode={msg("registerTitle")}
formNode={
<form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
<div className={cx(props.kcLabelWrapperClass)}>
<label htmlFor="firstName" className={cx(props.kcLabelClass)}>
{msg("firstName")}
</label>
</div>
<div className={cx(props.kcInputWrapperClass)}>
<input
type="text"
id="firstName"
className={cx(props.kcInputClass)}
name="firstName"
defaultValue={register.formData.firstName ?? ""}
/>
</div>
</div>
<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
<div className={cx(props.kcLabelWrapperClass)}>
<label htmlFor="lastName" className={cx(props.kcLabelClass)}>
{msg("lastName")}
</label>
</div>
<div className={cx(props.kcInputWrapperClass)}>
<input
type="text"
id="lastName"
className={cx(props.kcInputClass)}
name="lastName"
defaultValue={register.formData.lastName ?? ""}
/>
</div>
</div>
<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
<div className={cx(props.kcLabelWrapperClass)}>
<label htmlFor="email" className={cx(props.kcLabelClass)}>
{msg("email")}
</label>
</div>
<div className={cx(props.kcInputWrapperClass)}>
<input
type="text"
id="email"
className={cx(props.kcInputClass)}
name="email"
defaultValue={register.formData.email ?? ""}
autoComplete="email"
/>
</div>
</div>
{!realm.registrationEmailAsUsername && (
<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
<div className={cx(props.kcLabelWrapperClass)}>
<label htmlFor="username" className={cx(props.kcLabelClass)}>
{msg("username")}
</label>
</div>
<div className={cx(props.kcInputWrapperClass)}>
<input
type="text"
id="username"
className={cx(props.kcInputClass)}
name="username"
defaultValue={register.formData.username ?? ""}
autoComplete="username"
/>
</div>
</div>
)}
{passwordRequired && (
<>
<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
<div className={cx(props.kcLabelWrapperClass)}>
<label htmlFor="password" className={cx(props.kcLabelClass)}>
{msg("password")}
</label>
</div>
<div className={cx(props.kcInputWrapperClass)}>
<input
type="password"
id="password"
className={cx(props.kcInputClass)}
name="password"
autoComplete="new-password"
/>
</div>
</div>
<div
className={cx(
props.kcFormGroupClass,
messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass)
)}
>
<div className={cx(props.kcLabelWrapperClass)}>
<label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
{msg("passwordConfirm")}
</label>
</div>
<div className={cx(props.kcInputWrapperClass)}>
<input type="password" id="password-confirm" className={cx(props.kcInputClass)} name="password-confirm" />
</div>
</div>
</>
)}
{recaptchaRequired && (
<div className="form-group">
<div className={cx(props.kcInputWrapperClass)}>
<div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
</div>
</div>
)}
<div className={cx(props.kcFormGroupClass)}>
<div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
<div className={cx(props.kcFormOptionsWrapperClass)}>
<span>
<a href={url.loginUrl}>{msg("backToLogin")}</a>
</span>
</div>
</div>
<div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
<input
className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
type="submit"
value={msgStr("doRegister")}
/>
</div>
</div>
</form>
}
/>
);
});
export default Register;

2
src/KcApp/kcContext.ts
View file

@ -14,7 +14,7 @@ export const { kcContext } = getKcContext<
// 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",
"mockPageId": "login.ftl",
"mockData": [
{
"pageId": "login.ftl",

17
yarn.lock
View file

@ -4401,6 +4401,15 @@ evt@^2.4.0:
run-exclusive "^2.2.16"
tsafe "^1.0.1"
evt@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/evt/-/evt-2.4.1.tgz#68beca2f7bd7eb755fdda5b263a80b934100e046"
integrity sha512-eo7sZcfDbiVWD5Aw6STkIEMmchYLdeGnJB6tVaM9AXZc7pViin3PmQhb6fgFIFHfl0re9zSEHtSjyu70Y7dRJg==
dependencies:
minimal-polyfills "^2.2.2"
run-exclusive "^2.2.16"
tsafe "^1.0.1"
execa@^5.0.0:
version "5.1.1"
resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@ -6075,10 +6084,10 @@ jsonpointer@^5.0.0:
array-includes "^3.1.5"
object.assign "^4.1.2"
keycloakify@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-6.0.0.tgz#3a3f71a14514d6b2a5fbfe3517d74ac974224a3d"
integrity sha512-9SZAEuBiOTxfd0dOYdb+RJAaYq6eTc7SaoM7LTQuw/JqQfUM7x6/kOHUNOP7x9iTs6vptHRfSUZb52ydp8fltA==
keycloakify@^6.0.2:
version "6.0.2"
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-6.0.2.tgz#0bc95111117b6bc28e4668c335948c5ae70da7f0"
integrity sha512-/Y4YaWUB/rzXAwL1StEIYnVwKLmePlHcqqKC6ZrfhEaf02N0EWxqS9oZNrE1wU3mrD9xDSe5qcYMr/mgxkYAoQ==
dependencies:
"@octokit/rest" "^18.12.0"
cheerio "^1.0.0-rc.5"