pub.solar: initial changes

flake.lock

@@ -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
+}

flake.nix

@@ -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
+          ];
+        };
+      };
+    };
+}

src/keycloak-theme/account/Template.tsx

@@ -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"),

src/keycloak-theme/login/KcApp.tsx

@@ -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 "login.ftl": return <Login {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />;
-                    case "register.ftl": return <Register {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
+                    case "register.ftl": return <Register {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />;
-                    case "register-user-profile.ftl": return <RegisterUserProfile {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />
+                    case "register-user-profile.ftl": return <RegisterUserProfile {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />
-                    case "terms.ftl": return <Terms {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
+                    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-1.ftl": return <MyExtraPage1 {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={false} />;
-                    case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
+                    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 (

src/keycloak-theme/login/Template.tsx

@@ -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"),
+		"htmlClassName": "ps-html",
-        "bodyClassName": getClassName("kcBodyClass")
+		"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 (
+	return (<>
-        <div className={getClassName("kcLoginClass")}>
+		<header className="ps-header">
-            <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")}>
 			{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
 				<div id="kc-locale">
-                            <div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}>
+					<div id="kc-locale-wrapper" className="ps-locale-dropdown">
-                                <div className="kc-dropdown" id="kc-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="ps-required-fields">
-                                <div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}>
+						<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="ps-content">
-                            <div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}>
+					<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
+						<div>
-                                    className={clsx(
+							<div className="ps-form-group">
-                                        displayWide && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
-                                    )}
-                                >
-                                    <div className={getClassName("kcFormGroupClass")}>
 								<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">
-                                <div id="kc-info-wrapper" className={getClassName("kcInfoAreaWrapperClass")}>
+						<div id="kc-info-wrapper">
 							{infoNode}
 						</div>
 					</div>
 				)}
 			</div>
 		</div>
-            </div>
+	</>
-        </div>
 	);
 }

src/keycloak-theme/login/kcContext.ts

@@ -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",
 });
 
 

src/keycloak-theme/login/pages/Login.css

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

src/keycloak-theme/login/pages/Login.tsx

@@ -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">