Skip to content

Commit a470086

Browse files
bivanalharbivanalhar
committed
feat(upgrade): upgrade keycloakify to v11
1 parent e0b88ab commit a470086

6 files changed

Lines changed: 83 additions & 88 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"@emotion/react": "^11.13.5",
3030
"@emotion/styled": "^11.13.5",
3131
"framer-motion": "^11.2.0",
32-
"keycloakify": "^10.1.6",
32+
"keycloakify": "^11",
3333
"react": "^18.3.1",
3434
"react-dom": "^18.3.1"
3535
},

‎src/kc.gen.tsx‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
/* prettier-ignore-start */
1+
// This file is auto-generated by the `update-kc-gen` command. Do not edit it manually.
2+
// Hash: 9ae0fc6db02c7aaca5511c810584dc11912602c9a6a8c8f778a301e8e52807fc
23

34
/* eslint-disable */
45

56
// @ts-nocheck
67

78
// noinspection JSUnusedGlobalSymbols
89

9-
// This file is auto-generated by Keycloakify
10-
1110
import { lazy, Suspense, type ReactNode } from "react";
1211

1312
export type ThemeName = "coursemology-keycloakify";
@@ -19,37 +18,34 @@ export type KcEnvName = "MY_ENV_VARIABLE";
1918
export const kcEnvNames: KcEnvName[] = ["MY_ENV_VARIABLE"];
2019

2120
export const kcEnvDefaults: Record<KcEnvName, string> = {
22-
"MY_ENV_VARIABLE": ""
21+
MY_ENV_VARIABLE: "",
2322
};
2423

25-
export type KcContext =
26-
| import("./login/KcContext").KcContext
27-
;
24+
/**
25+
* NOTE: Do not import this type except maybe in your entrypoint.
26+
* If you need to import the KcContext import it either from src/login/KcContext.ts or src/account/KcContext.ts.
27+
* Depending on the theme type you are working on.
28+
*/
29+
export type KcContext = import("./login/KcContext").KcContext;
2830

2931
declare global {
30-
interface Window {
31-
kcContext?: KcContext;
32-
}
32+
interface Window {
33+
kcContext?: KcContext;
34+
}
3335
}
3436

3537
export const KcLoginPage = lazy(() => import("./login/KcPage"));
3638

37-
export function KcPage(
38-
props: {
39-
kcContext: KcContext;
40-
fallback?: ReactNode;
41-
}
42-
) {
43-
const { kcContext, fallback } = props;
44-
return (
45-
<Suspense fallback={fallback}>
46-
{(() => {
47-
switch (kcContext.themeType) {
48-
case "login": return <KcLoginPage kcContext={kcContext} />;
49-
}
50-
})()}
51-
</Suspense>
52-
);
39+
export function KcPage(props: { kcContext: KcContext; fallback?: ReactNode }) {
40+
const { kcContext, fallback } = props;
41+
return (
42+
<Suspense fallback={fallback}>
43+
{(() => {
44+
switch (kcContext.themeType) {
45+
case "login":
46+
return <KcLoginPage kcContext={kcContext} />;
47+
}
48+
})()}
49+
</Suspense>
50+
);
5351
}
54-
55-
/* prettier-ignore-end */

‎src/login/Template.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Original file: https://github.com/InseeFrLab/keycloakify/blob/main/src/login/Template.tsx
22

3+
import { kcSanitize } from "keycloakify/lib/kcSanitize";
34
import { type TemplateProps as KeycloakTemplateProps } from "keycloakify/login/TemplateProps";
45

56
import AlertBox from "src/lib/components/core/AlertBox";
@@ -21,9 +22,9 @@ const Template = (props: KeycloakTemplateProps<KcContext, I18n>) => {
2122
children,
2223
} = props;
2324

24-
const { msg } = i18n;
25+
const { msg, enabledLanguages } = i18n;
2526

26-
const { realm, locale, message, isAppInitiatedAction } = kcContext;
27+
const { realm, message, isAppInitiatedAction } = kcContext;
2728
const { homeUrl } = useCoursemologyUrls();
2829

2930
return (
@@ -33,9 +34,7 @@ const Template = (props: KeycloakTemplateProps<KcContext, I18n>) => {
3334
textNode={msg("loginTitleHtml", realm.displayNameHtml)}
3435
brandUrl={homeUrl}
3536
/>
36-
{realm.internationalizationEnabled && (
37-
<LocaleDropdown locale={locale} i18n={i18n} />
38-
)}
37+
{enabledLanguages.length > 1 && <LocaleDropdown i18n={i18n} />}
3938
</header>
4039

4140
<div className="relative h-full">
@@ -48,7 +47,7 @@ const Template = (props: KeycloakTemplateProps<KcContext, I18n>) => {
4847
<AlertBox status={message.type}>
4948
<span
5049
dangerouslySetInnerHTML={{
51-
__html: message.summary,
50+
__html: kcSanitize(message.summary),
5251
}}
5352
/>
5453
</AlertBox>

‎src/login/components/LocaleDropdown/index.tsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,37 @@
11
import { ChevronDownIcon } from "@chakra-ui/icons";
22
import { Button, Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react";
3-
import { assert } from "keycloakify/tools/assert";
43

54
import type { I18n } from "../../i18n";
6-
import type { KcContext } from "../../KcContext";
75

86
interface LocaleDropdownProps {
9-
locale: KcContext["locale"];
107
i18n: I18n;
118
}
129

1310
const LocaleDropdown = (props: LocaleDropdownProps): JSX.Element | null => {
14-
const { locale, i18n } = props;
15-
const {
16-
getChangeLocaleUrl,
17-
labelBySupportedLanguageTag,
18-
currentLanguageTag,
19-
} = i18n;
11+
const { i18n } = props;
12+
const { currentLanguage, enabledLanguages } = i18n;
2013

21-
return (assert(locale !== undefined), true) && locale.supported.length > 1 ? (
14+
return (
2215
<div>
2316
<Menu>
2417
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
25-
{labelBySupportedLanguageTag[currentLanguageTag]}
18+
{currentLanguage.label}
2619
</MenuButton>
2720
<MenuList>
28-
{locale.supported.map(({ languageTag }) => (
21+
{enabledLanguages.map(({ languageTag, label, href }, i) => (
2922
<MenuItem
23+
id={`language-${i + 1}`}
3024
as="a"
31-
href={getChangeLocaleUrl(languageTag)}
25+
href={href}
3226
key={languageTag}
3327
>
34-
{labelBySupportedLanguageTag[languageTag]}
28+
{label}
3529
</MenuItem>
3630
))}
3731
</MenuList>
3832
</Menu>
3933
</div>
40-
) : null;
34+
);
4135
};
4236

4337
export default LocaleDropdown;

‎src/login/i18n.ts‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
1-
import { createUseI18n } from "keycloakify/login";
1+
import { i18nBuilder } from "keycloakify/login";
2+
import type { ThemeName } from "src/kc.gen";
23

3-
export const { useI18n, ofTypeI18n } = createUseI18n({
4-
// NOTE: Here you can override the default i18n messages
5-
// or define new ones that, for example, you would have
6-
// defined in the Keycloak admin UI for UserProfile
7-
// https://user-images.githubusercontent.com/6702424/182050652-522b6fe6-8ee5-49df-aca3-dba2d33f24a5.png
8-
en: {
9-
// Here we overwrite the default english value for the message "doForgotPassword"
10-
// that is "Forgot Password?" see: https://github.com/InseeFrLab/keycloakify/blob/f0ae5ea908e0aa42391af323b6d5e2fd371af851/src/lib/i18n/generated_messages/18.0.1/login/en.ts#L17
11-
doRegister: "Sign up",
12-
dontYetHaveAnAccount: "Don't yet have an account?",
13-
forgotPassword: "Forgot Password",
14-
rememberMe: "Remember me on this device",
15-
resendConfirmationEmail: "Resend confirmation email",
16-
troubleSigningIn: "Trouble signing in?",
17-
usernameOrEmail: "Email address",
18-
emailNotVerified:
19-
"Your email account has not been verified. Please verify your email before proceeding.",
20-
},
21-
"zh-CN": {
22-
doRegister: "注册",
23-
dontYetHaveAnAccount: "还没有账户？",
24-
forgotPassword: "忘记密码",
25-
rememberMe: "在这台设备上记住我",
26-
resendConfirmationEmail: "重新发送确认邮件",
27-
troubleSigningIn: "登录遇到问题？",
28-
usernameOrEmail: "电子邮箱地址",
29-
emailNotVerified:
30-
"您的电子邮件帐户尚未经过验证。 请在继续之前验证您的电子邮件。",
31-
},
32-
});
4+
const { useI18n, ofTypeI18n } = i18nBuilder
5+
.withThemeName<ThemeName>()
6+
.withCustomTranslations({
7+
// NOTE: Here you can override the default i18n messages
8+
// or define new ones that, for example, you would have
9+
// defined in the Keycloak admin UI for UserProfile
10+
// https://user-images.githubusercontent.com/6702424/182050652-522b6fe6-8ee5-49df-aca3-dba2d33f24a5.png
11+
en: {
12+
// Here we overwrite the default english value for the message "doForgotPassword"
13+
// that is "Forgot Password?" see: https://github.com/InseeFrLab/keycloakify/blob/f0ae5ea908e0aa42391af323b6d5e2fd371af851/src/lib/i18n/generated_messages/18.0.1/login/en.ts#L17
14+
doRegister: "Sign up",
15+
dontYetHaveAnAccount: "Don't yet have an account?",
16+
forgotPassword: "Forgot Password",
17+
rememberMe: "Remember me on this device",
18+
resendConfirmationEmail: "Resend confirmation email",
19+
troubleSigningIn: "Trouble signing in?",
20+
usernameOrEmail: "Email address",
21+
emailNotVerified:
22+
"Your email account has not been verified. Please verify your email before proceeding.",
23+
},
24+
"zh-CN": {
25+
doRegister: "注册",
26+
dontYetHaveAnAccount: "还没有账户？",
27+
forgotPassword: "忘记密码",
28+
rememberMe: "在这台设备上记住我",
29+
resendConfirmationEmail: "重新发送确认邮件",
30+
troubleSigningIn: "登录遇到问题？",
31+
usernameOrEmail: "电子邮箱地址",
32+
emailNotVerified:
33+
"您的电子邮件帐户尚未经过验证。 请在继续之前验证您的电子邮件。",
34+
},
35+
})
36+
.build();
3337

34-
export type I18n = typeof ofTypeI18n;
38+
type I18n = typeof ofTypeI18n;
39+
40+
export { type I18n, useI18n };

‎yarn.lock‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2308,12 +2308,12 @@ json5@^2.2.2, json5@^2.2.3:
23082308
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
23092309
integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
23102310

2311-
keycloakify@^10.1.6:
2312-
version "10.1.6"
2313-
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-10.1.6.tgz#f948c0167b2fa64b851c99c2dac029fff496b1a0"
2314-
integrity sha512-yuCOM2xHxph8mmxWdK7BmsvkDfo42YOO2oqY0U94MGaBuYaSUqmUQC9dednvyApx2IndzBhd9C18H/86wvIx6Q==
2311+
keycloakify@^11:
2312+
version "11.8.9"
2313+
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-11.8.9.tgz#0e603e544e37c4dafac518f506c7200103c9077a"
2314+
integrity sha512-puYkK+4VfkmDfcfT4XkDAEUQfoObAon2+L+8YchBCvcGFcL8c1JkF8S1lLHX9AMuFWX1FW0r7Ye7zGJIpvcz1w==
23152315
dependencies:
2316-
tsafe "^1.6.6"
2316+
tsafe "^1.8.5"
23172317

23182318
keyv@^4.5.3:
23192319
version "4.5.4"
@@ -3172,7 +3172,7 @@ ts-interface-checker@^0.1.9:
31723172
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
31733173
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
31743174

3175-
tsafe@^1.6.6:
3175+
tsafe@^1.8.5:
31763176
version "1.8.5"
31773177
resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.8.5.tgz#cdf9fa3111974ac480d7ee519f8241815e5d22ea"
31783178
integrity sha512-LFWTWQrW6rwSY+IBNFl2ridGfUzVsPwrZ26T4KUJww/py8rzaQ/SY+MIz6YROozpUCaRcuISqagmlwub9YT9kw==

0 commit comments

Comments
 (0)