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

Make base app build

Browse source
This commit is contained in:
Joseph Garrone 2024-01-27 06:54:20 +01:00
parent 422fdc91d9
commit a4cd9b6296
6 changed files with 801 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
index.html
View file

@ -9,17 +9,17 @@
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%BASE_URL%/favicon.ico" will Unlike "/favicon.ico" or "favicon.ico", "%BASE_URL%favicon.ico" will
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
--> -->
<link rel="icon" type="image/png" sizes="32x32" href="%BASE_URL%/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="%BASE_URL%favicon-32x32.png">
<title>Keycloakify starter</title> <title>Keycloakify starter</title>
<link rel="preload" href="%BASE_URL%/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous"> <link rel="preload" href="%BASE_URL%fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="%BASE_URL%/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous"> <link rel="preload" href="%BASE_URL%fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="%BASE_URL%/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous"> <link rel="preload" href="%BASE_URL%fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="%BASE_URL%/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous"> <link rel="preload" href="%BASE_URL%fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
<!-- SEE: https://docs.keycloakify.dev/limitations#self-hosted-fonts --> <!-- SEE: https://docs.keycloakify.dev/limitations#self-hosted-fonts -->
<!-- Don't forget to import your custom fonts in Storybook as well: https://github.com/keycloakify/keycloakify-starter/blob/bb019e66fb09166cb9af1e24e230994f59daa420/src/keycloak-theme/login/createPageStory.tsx#L21 --> <!-- Don't forget to import your custom fonts in Storybook as well: https://github.com/keycloakify/keycloakify-starter/blob/bb019e66fb09166cb9af1e24e230994f59daa420/src/keycloak-theme/login/createPageStory.tsx#L21 -->
<style> <style>
@ -30,7 +30,7 @@
font-weight: normal; font-weight: normal;
/*400*/ /*400*/
font-display: swap; font-display: swap;
src: url("%BASE_URL%/fonts/WorkSans/worksans-regular-webfont.woff2") format("woff2"); src: url("%BASE_URL%fonts/WorkSans/worksans-regular-webfont.woff2") format("woff2");
} }
/* latin */ /* latin */
@ -39,7 +39,7 @@
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
src: url("%BASE_URL%/fonts/WorkSans/worksans-medium-webfont.woff2") format("woff2"); src: url("%BASE_URL%fonts/WorkSans/worksans-medium-webfont.woff2") format("woff2");
} }
/* latin */ /* latin */
@ -48,7 +48,7 @@
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
src: url("%BASE_URL%/fonts/WorkSans/worksans-semibold-webfont.woff2") format("woff2"); src: url("%BASE_URL%fonts/WorkSans/worksans-semibold-webfont.woff2") format("woff2");
} }
/* latin */ /* latin */
@ -58,7 +58,7 @@
font-weight: bold; font-weight: bold;
/*700*/ /*700*/
font-display: swap; font-display: swap;
src: url("%BASE_URL%/fonts/WorkSans/worksans-bold-webfont.woff2") format("woff2"); src: url("%BASE_URL%fonts/WorkSans/worksans-bold-webfont.woff2") format("woff2");
} }
</style> </style>

4
package.json
View file

@ -7,6 +7,7 @@
"type": "git", "type": "git",
"url": "git://github.com/codegouvfr/keycloakify-starter.git" "url": "git://github.com/codegouvfr/keycloakify-starter.git"
}, },
"type": "module",
"scripts": { "scripts": {
"postinstall": "copy-keycloak-resources-to-public", "postinstall": "copy-keycloak-resources-to-public",
"dev": "vite", "dev": "vite",
@ -43,6 +44,7 @@
"eslint-plugin-react-refresh": "^0.4.5", "eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^5.0.8", "vite": "^5.0.8",
"vite-plugin-commonjs": "^0.10.1" "vite-plugin-commonjs": "^0.10.1",
"@storybook/react": "^7.6.10"
} }
} }

2
src/App/oidc.ts
View file

@ -22,7 +22,7 @@ export const { OidcProvider, useOidc } = createReactOidc({
"ui_locales": "en", "ui_locales": "en",
"my_custom_param": "value of foo transferred to login page" "my_custom_param": "value of foo transferred to login page"
}), }),
publicUrl: process.env.PUBLIC_URL, publicUrl: import.meta.env.BASE_URL,
decodedIdTokenSchema: z.object({ decodedIdTokenSchema: z.object({
// Use https://jwt.io/ to tell what's in your idToken // Use https://jwt.io/ to tell what's in your idToken
// It will depend of your Keycloak configuration. // It will depend of your Keycloak configuration.

6
src/BASE_URL.ts
View file

@ -1,6 +1,6 @@
import { kcContext as kcLoginThemeContext } from "keycloak-theme/login/kcContext"; import { kcContext as kcLoginThemeContext } from "./keycloak-theme/login/kcContext";
import { kcContext as kcAccountThemeContext } from "keycloak-theme/login/kcContext"; import { kcContext as kcAccountThemeContext } from "./keycloak-theme/login/kcContext";
/** /**
* If you need to use import.meta.env.BASE_URL, use this variable instead. * If you need to use import.meta.env.BASE_URL, use this variable instead.
@ -24,7 +24,7 @@ export const BASE_URL = (()=>{
})(); })();
return (kcContext === undefined || process.env.NODE_ENV === "development") return (kcContext === undefined || import.meta.env.MODE === 'development')
? import.meta.env.BASE_URL ? import.meta.env.BASE_URL
: `${kcContext.url.resourcesPath}/build`; : `${kcContext.url.resourcesPath}/build`;

7
src/keycloak-theme/login/Template.tsx
View file

@ -9,7 +9,7 @@ import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
import type { KcContext } from "./kcContext"; import type { KcContext } from "./kcContext";
import type { I18n } from "./i18n"; import type { I18n } from "./i18n";
import keycloakifyLogoPngUrl from "./assets/keycloakify-logo.png"; import keycloakifyLogoPngUrl from "./assets/keycloakify-logo.png";
import { PUBLIC_URL } from "../../PUBLIC_URL"; import { BASE_URL } from "../../BASE_URL";
export default function Template(props: TemplateProps<KcContext, I18n>) { export default function Template(props: TemplateProps<KcContext, I18n>) {
const { const {
@ -64,7 +64,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
This is just to show you how it can be done but this is not the best option for importing assets. This is just to show you how it can be done but this is not the best option for importing assets.
See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets
*/} */}
<img src={`${PUBLIC_URL}/keycloakify-logo.png`} alt="Keycloakify logo" width={50} /> <img src={`${BASE_URL}keycloakify-logo.png`} alt="Keycloakify logo" width={50} />
{msg("loginTitleHtml", realm.displayNameHtml)}!!! {msg("loginTitleHtml", realm.displayNameHtml)}!!!
{/* This is the preferred way to use assets */} {/* This is the preferred way to use assets */}
<img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} /> <img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} />
@ -77,14 +77,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
<div id="kc-locale"> <div id="kc-locale">
<div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}> <div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}>
<div className="kc-dropdown" id="kc-locale-dropdown"> <div className="kc-dropdown" id="kc-locale-dropdown">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a href="#" id="kc-current-locale-link"> <a href="#" id="kc-current-locale-link">
{labelBySupportedLanguageTag[currentLanguageTag]} {labelBySupportedLanguageTag[currentLanguageTag]}
</a> </a>
<ul> <ul>
{locale.supported.map(({ languageTag }) => ( {locale.supported.map(({ languageTag }) => (
<li key={languageTag} className="kc-dropdown-item"> <li key={languageTag} className="kc-dropdown-item">
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a href="#" onClick={() => changeLocale(languageTag)}> <a href="#" onClick={() => changeLocale(languageTag)}>
{labelBySupportedLanguageTag[languageTag]} {labelBySupportedLanguageTag[languageTag]}
</a> </a>
@ -182,7 +180,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
> >
<div className={getClassName("kcFormGroupClass")}> <div className={getClassName("kcFormGroupClass")}>
<input type="hidden" name="tryAnotherWay" value="on" /> <input type="hidden" name="tryAnotherWay" value="on" />
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a <a
href="#" href="#"
id="try-another-way" id="try-another-way"

795
yarn.lock
View file

File diff suppressed because it is too large Load diff