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

pub.solar: initial changes

Browse source
This commit is contained in:
Benjamin Yule Bädorf 2024-04-27 14:30:04 +02:00
parent 4529ae8727
commit 1ee87a49a3
Signed by: b12f
GPG key ID: 729956E1124F8F26
8 changed files with 444 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
flake.lock Normal file
View file

@ -0,0 +1,64 @@
{
"nodes": {
"flake-parts": {
"inputs": {
"nixpkgs-lib": "nixpkgs-lib"
},
"locked": {
"lastModified": 1712014858,
"narHash": "sha256-sB4SWl2lX95bExY2gMFG5HIzvva5AVMJd4Igm+GpZNw=",
"owner": "hercules-ci",
"repo": "flake-parts",
"rev": "9126214d0a59633752a136528f5f3b9aa8565b7d",
"type": "github"
},
"original": {
"owner": "hercules-ci",
"repo": "flake-parts",
"type": "github"
}
},
"nixpkgs": {
"locked": {
"lastModified": 1713248628,
"narHash": "sha256-NLznXB5AOnniUtZsyy/aPWOk8ussTuePp2acb9U+ISA=",
"owner": "nixos",
"repo": "nixpkgs",
"rev": "5672bc9dbf9d88246ddab5ac454e82318d094bb8",
"type": "github"
},
"original": {
"owner": "nixos",
"ref": "nixos-unstable",
"repo": "nixpkgs",
"type": "github"
}
},
"nixpkgs-lib": {
"locked": {
"dir": "lib",
"lastModified": 1711703276,
"narHash": "sha256-iMUFArF0WCatKK6RzfUJknjem0H9m4KgorO/p3Dopkk=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "d8fe5e6c92d0d190646fb9f1056741a229980089",
"type": "github"
},
"original": {
"dir": "lib",
"owner": "NixOS",
"ref": "nixos-unstable",
"repo": "nixpkgs",
"type": "github"
}
},
"root": {
"inputs": {
"flake-parts": "flake-parts",
"nixpkgs": "nixpkgs"
}
}
},
"root": "root",
"version": 7
}

28
flake.nix Normal file
View file

@ -0,0 +1,28 @@
{
description = "pub.solar keycloak theme";
inputs = {
nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
flake-parts.url = "github:hercules-ci/flake-parts";
};
outputs = inputs@{ self, ... }:
inputs.flake-parts.lib.mkFlake { inherit inputs; } {
systems = [ "x86_64-linux" "aarch64-linux" ];
perSystem = { system, pkgs, config, ... }: {
_module.args = {
inherit inputs;
pkgs = import inputs.nixpkgs { inherit system; };
};
devShells.default = pkgs.mkShell {
buildInputs = with pkgs; [
yarn
nodejs
maven
];
};
};
};
}

2
src/keycloak-theme/account/Template.tsx
View file

@ -20,8 +20,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
const { isReady } = usePrepareTemplate({
"doFetchDefaultThemeResources": doUseDefaultCss,
"styles": [
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
`${url.resourcesPath}/css/account.css`
],
"htmlClassName": getClassName("kcHtmlClass"),

12
src/keycloak-theme/login/KcApp.tsx
View file

@ -44,15 +44,15 @@ export default function KcApp(props: { kcContext: KcContext; }) {
<Suspense>
{(() => {
switch (kcContext.pageId) {
case "login.ftl": return <Login {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
case "register.ftl": return <Register {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
case "register-user-profile.ftl": return <RegisterUserProfile {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />
case "terms.ftl": return <Terms {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
case "login.ftl": return <Login {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />;
case "register.ftl": return <Register {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />;
case "register-user-profile.ftl": return <RegisterUserProfile {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />
case "terms.ftl": return <Terms {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />;
// Removes those pages in you project. They are included to show you how to implement keycloak pages
// that are not yes implemented by Keycloakify.
// See: https://docs.keycloakify.dev/limitations#some-pages-still-have-the-default-theme.-why
case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />;
case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />;
// We choose to use the default Template for the Info page and to download the theme resources.
// This is just an example to show you what is possible. You likely don't want to keep this as is.
case "info.ftl": return (

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

@ -2,13 +2,10 @@
import { useState, useEffect } from "react";
import { assert } from "keycloakify/tools/assert";
import { clsx } from "keycloakify/tools/clsx";
import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
import { type TemplateProps } from "keycloakify/login/TemplateProps";
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
import type { KcContext } from "./kcContext";
import type { I18n } from "./i18n";
import keycloakifyLogoPngUrl from "./assets/keycloakify-logo.png";
export default function Template(props: TemplateProps<KcContext, I18n>) {
const {
@ -26,9 +23,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
classes,
children
} = props;
const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
@ -36,13 +30,10 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
const { isReady } = usePrepareTemplate({
"doFetchDefaultThemeResources": doUseDefaultCss,
"styles": [
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
`${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
`${url.resourcesCommonPath}/lib/zocial/zocial.css`,
`${url.resourcesPath}/css/login.css`
],
"htmlClassName": getClassName("kcHtmlClass"),
"bodyClassName": getClassName("kcBodyClass")
"htmlClassName": "ps-html",
"bodyClassName": "ps-body",
});
useState(()=> { document.title = i18n.msgStr("loginTitle", kcContext.realm.displayName); });
@ -55,37 +46,18 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
return null;
}
return (
<div className={getClassName("kcLoginClass")}>
<div id="kc-header" className={getClassName("kcHeaderClass")}>
<div
id="kc-header-wrapper"
className={getClassName("kcHeaderWrapperClass")}
style={{ "fontFamily": '"Work Sans"' }}
>
{/*
Here we are referencing the `keycloakify-logo.png` in the `public` directory.
When possible don't use this approach, instead ...
*/}
<img src={`${import.meta.env.BASE_URL}keycloakify-logo.png`} alt="Keycloakify logo" width={50} />
{msg("loginTitleHtml", realm.displayNameHtml)}!!!
{/* ...rely on the bundler to import your assets, it's more efficient */}
<img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} />
</div>
</div>
<div className={clsx(getClassName("kcFormCardClass"), displayWide && getClassName("kcFormCardAccountClass"))}>
<header className={getClassName("kcFormHeaderClass")}>
return (<>
<header className="ps-header">
{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
<div id="kc-locale">
<div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}>
<div className="kc-dropdown" id="kc-locale-dropdown">
<div id="kc-locale-wrapper" className="ps-locale-dropdown">
<div className="ps-dropdown" id="kc-locale-dropdown">
<a href="#" id="kc-current-locale-link">
{labelBySupportedLanguageTag[currentLanguageTag]}
</a>
<ul>
{locale.supported.map(({ languageTag }) => (
<li key={languageTag} className="kc-dropdown-item">
<li key={languageTag} className="ps-dropdown-item">
<a href="#" onClick={() => changeLocale(languageTag)}>
{labelBySupportedLanguageTag[languageTag]}
</a>
@ -98,8 +70,8 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
)}
{!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
displayRequiredFields ? (
<div className={getClassName("kcContentWrapperClass")}>
<div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}>
<div className="ps-required-fields">
<div className="ps-required-fields--field">
<span className="subtitle">
<span className="required">*</span>
{msg("requiredFields")}
@ -113,20 +85,20 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
<h1 id="kc-page-title">{headerNode}</h1>
)
) : displayRequiredFields ? (
<div className={getClassName("kcContentWrapperClass")}>
<div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}>
<div className="ps-content">
<div className="ps-required">
<span className="subtitle">
<span className="required">*</span> {msg("requiredFields")}
</span>
</div>
<div className="col-md-10">
{showUsernameNode}
<div className={getClassName("kcFormGroupClass")}>
<div className="ps-form-group">
<div id="kc-username">
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
<a id="reset-login" href={url.loginRestartFlowUrl}>
<div className="kc-login-tooltip">
<i className={getClassName("kcResetFlowIcon")}></i>
<i className="ps-icon ps-icon_restart-flow"></i>
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
</div>
</a>
@ -137,12 +109,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
) : (
<>
{showUsernameNode}
<div className={getClassName("kcFormGroupClass")}>
<div className="ps-form-group">
<div id="kc-username">
<label id="kc-attempted-username">{auth?.attemptedUsername}</label>
<a id="reset-login" href={url.loginRestartFlowUrl}>
<div className="kc-login-tooltip">
<i className={getClassName("kcResetFlowIcon")}></i>
<i className="ps-icon ps-icon_restart-flow"></i>
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
</div>
</a>
@ -174,14 +146,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
id="kc-select-try-another-way-form"
action={url.loginAction}
method="post"
className={clsx(displayWide && getClassName("kcContentWrapperClass"))}
>
<div
className={clsx(
displayWide && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
)}
>
<div className={getClassName("kcFormGroupClass")}>
<div>
<div className="ps-form-group">
<input type="hidden" name="tryAnotherWay" value="on" />
<a
href="#"
@ -198,15 +165,14 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
</form>
)}
{displayInfo && (
<div id="kc-info" className={getClassName("kcSignUpClass")}>
<div id="kc-info-wrapper" className={getClassName("kcInfoAreaWrapperClass")}>
<div id="kc-info">
<div id="kc-info-wrapper">
{infoNode}
</div>
</div>
)}
</div>
</div>
</div>
</div>
</>
);
}

6
src/keycloak-theme/login/kcContext.ts
View file

@ -20,7 +20,7 @@ export const { getKcContext } = createGetKcContext<KcContextExtension>({
pageId: "login.ftl",
locale: {
//When we test the login page we do it in french
currentLanguageTag: "fr",
currentLanguageTag: "en",
},
//Uncomment the following line for hiding the Alert message
//"message": undefined
@ -35,7 +35,7 @@ export const { getKcContext } = createGetKcContext<KcContextExtension>({
//NOTE: You will either use register.ftl (legacy) or register-user-profile.ftl, not both
pageId: "register-user-profile.ftl",
locale: {
currentLanguageTag: "fr"
currentLanguageTag: "en"
},
profile: {
attributes: [
@ -97,7 +97,7 @@ export const { getKcContext } = createGetKcContext<KcContextExtension>({
export const { kcContext } = getKcContext({
// Uncomment to test the login page for development.
//mockPageId: "login.ftl",
mockPageId: "login.ftl",
});

3
src/keycloak-theme/login/pages/Login.css Normal file
View file

@ -0,0 +1,3 @@
.ps-form-group {
background: red;
}

7
src/keycloak-theme/login/pages/Login.tsx
View file

@ -1,3 +1,4 @@
import "./Login.css";
import { useState, type FormEventHandler } from "react";
import { clsx } from "keycloakify/tools/clsx";
import { useConstCallback } from "keycloakify/tools/useConstCallback";
@ -71,7 +72,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
>
{realm.password && (
<form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
<div className={getClassName("kcFormGroupClass")}>
<div className="ps-form-group">
{!usernameHidden &&
(() => {
const label = !realm.loginWithEmailAllowed
@ -104,7 +105,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
);
})()}
</div>
<div className={getClassName("kcFormGroupClass")}>
<div className="ps-form-group">
<label htmlFor="password" className={getClassName("kcLabelClass")}>
{msg("password")}
</label>
@ -117,7 +118,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
autoComplete="off"
/>
</div>
<div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
<div className="ps-form-group">
<div id="kc-form-options">
{realm.rememberMe && !usernameHidden && (
<div className="checkbox">