agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix numerous bugs, improve structure

Browse Source
This commit is contained in:
garronej
2023-03-21 05:27:31 +01:00
parent 6691992a79
commit c9e546a8fd
35 changed files with 285 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/account/Template.tsx
View File

@ -1,12 +1,15 @@
import { clsx } from "keycloakify/tools/clsx";
import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
import { type TemplateProps } from "keycloakify/account/TemplateProps";
import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
import type { KcContext } from "./kcContext";
import type { I18n } from "./i18n";
import { assert } from "keycloakify/tools/assert";
export default function Template(props: TemplateProps<KcContext, I18n>) {
const { kcContext, i18n, doUseDefaultCss, bodyClass, active, children } = props;
const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props;
const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
@ -18,7 +21,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
"stylesCommon": ["node_modules/patternfly/dist/css/patternfly.min.css", "node_modules/patternfly/dist/css/patternfly-additions.min.css"],
"styles": ["css/account.css"],
"htmlClassName": undefined,
"bodyClassName": clsx("admin-console", "user", bodyClass)
"bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass"))
});
if (!isReady) {

4
src/account/TemplateProps.ts
View File

@ -7,6 +7,8 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
i18n: I18nExtended;
doUseDefaultCss: boolean;
active: string;
bodyClass: string | undefined;
classes?: Partial<Record<ClassKey, string>>;
children: ReactNode;
};
export type ClassKey = "kcBodyClass" | "kcButtonClass" | "kcButtonPrimaryClass" | "kcButtonLargeClass" | "kcButtonDefaultClass";

10
src/account/kcContext/KcContext.ts
View File

@ -51,6 +51,12 @@ export declare namespace KcContext {
get: (fieldName: string) => string;
exists: (fieldName: string) => boolean;
};
account: {
email?: string;
firstName: string;
lastName?: string;
username?: string;
};
};
export type Password = Common & {
@ -71,10 +77,6 @@ export declare namespace KcContext {
editUsernameAllowed: boolean;
};
stateChecker: string;
account: {
firstName: string;
lastName?: string;
};
};
}

14
src/account/kcContext/kcContextMocks.ts
View File

@ -139,7 +139,13 @@ export const kcContextCommonMock: KcContext.Common = {
"log": true,
"passwordUpdateSupported": true
},
"referrer": undefined
"referrer": undefined,
"account": {
"firstName": "john",
"lastName": "doe",
"email": "john.doe@code.gouv.fr",
"username": "doe_j"
}
};
export const kcContextMocks: KcContext[] = [
@ -163,10 +169,6 @@ export const kcContextMocks: KcContext[] = [
"registrationEmailAsUsername": true,
"editUsernameAllowed": true
},
"stateChecker": "",
"account": {
"firstName": "john",
"lastName": "doe"
}
"stateChecker": ""
})
];

12
src/account/lib/useGetClassName.ts Normal file
View File

@ -0,0 +1,12 @@
import { createUseClassName } from "keycloakify/lib/useGetClassName";
import type { ClassKey } from "keycloakify/account/TemplateProps";
export const { useGetClassName } = createUseClassName<ClassKey>({
"defaultClasses": {
"kcBodyClass": undefined,
"kcButtonClass": "btn",
"kcButtonPrimaryClass": "btn-primary",
"kcButtonLargeClass": "btn-lg",
"kcButtonDefaultClass": "btn-default"
}
});

21
src/account/pages/Account.tsx
View File

@ -1,6 +1,6 @@
import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/account/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
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";
@ -8,8 +8,11 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
const { getClassName } = useGetClassName({
"defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
classes
doUseDefaultCss,
"classes": {
...classes,
"kcBodyClass": clsx(classes?.kcBodyClass, "user")
}
});
const { url, realm, messagesPerField, stateChecker, account } = kcContext;
@ -17,7 +20,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
const { msg } = i18n;
return (
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account" bodyClass="user">
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account">
<div className="row">
<div className="col-md-10">
<h2>{msg("editAccountHtmlTitle")}</h2>
@ -33,7 +36,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
<input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
{!realm.registrationEmailAsUsername && (
<div className="form-group ${messagesPerField.printIfExists('username','has-error')}">
<div className={clsx("form-group", messagesPerField.printIfExists("username", "has-error"))}>
<div className="col-sm-2 col-md-2">
<label htmlFor="username" className="control-label">
{msg("username")}
@ -48,7 +51,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
id="username"
name="username"
disabled={!realm.editUsernameAllowed}
value="${(account.username!'')}"
value={account.username ?? ""}
/>
</div>
</div>
@ -63,7 +66,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
</div>
<div className="col-sm-10 col-md-10">
<input type="text" className="form-control" id="email" name="email" autoFocus value="${(account.email!'')}" />
<input type="text" className="form-control" id="email" name="email" autoFocus value={account.email ?? ""} />
</div>
</div>
@ -89,7 +92,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
</div>
<div className="col-sm-10 col-md-10">
<input type="text" className="form-control" id="lastName" name="lastName" value={account.lastName || ""} />
<input type="text" className="form-control" id="lastName" name="lastName" value={account.lastName ?? ""} />
</div>
</div>

12
src/account/pages/PageProps.ts
View File

@ -1,6 +1,6 @@
import type { LazyExoticComponent } from "react";
import type { I18n } from "keycloakify/account/i18n";
import { type TemplateProps } from "keycloakify/account/TemplateProps";
import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
export type PageProps<KcContext, I18nExtended extends I18n> = {
Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
@ -9,13 +9,3 @@ export type PageProps<KcContext, I18nExtended extends I18n> = {
doUseDefaultCss: boolean;
classes?: Partial<Record<ClassKey, string>>;
};
export type ClassKey = "kcButtonClass" | "kcButtonPrimaryClass" | "kcButtonLargeClass" | "kcButtonDefaultClass";
export const defaultClasses: Record<ClassKey, string | undefined> = {
/** password.ftl */
"kcButtonClass": "btn",
"kcButtonPrimaryClass": "btn-primary",
"kcButtonLargeClass": "btn-lg",
"kcButtonDefaultClass": "btn-default"
};

19
src/account/pages/Password.tsx
View File

@ -1,6 +1,6 @@
import { clsx } from "keycloakify/tools/clsx";
import { type PageProps, defaultClasses } from "keycloakify/account/pages/PageProps";
import { useGetClassName } from "keycloakify/lib/useGetClassName";
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";
@ -8,16 +8,19 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
const { getClassName } = useGetClassName({
"defaultClasses": !doUseDefaultCss ? undefined : defaultClasses,
classes
doUseDefaultCss,
"classes": {
...classes,
"kcBodyClass": clsx(classes?.kcBodyClass, "password")
}
});
const { password } = kcContext;
const { url, password, account } = kcContext;
const { msg } = i18n;
return (
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="password" bodyClass="password">
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="password">
<div className="row">
<div className="col-md-10">
<h2>{msg("changePasswordHtmlTitle")}</h2>
@ -27,12 +30,12 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
</div>
</div>
<form action="${url.passwordUrl}" className="form-horizontal" method="post">
<form action={url.passwordUrl} className="form-horizontal" method="post">
<input
type="text"
id="username"
name="username"
value="${(account.username!'')}"
value={account.username ?? ""}
autoComplete="username"
readOnly
style={{ "display": "none;" }}