+ hello world +
+ ) +} + +export default App diff --git a/mosip_keycloak_theme/src/assets/react.svg b/mosip_keycloak_theme/src/assets/react.svg new file mode 100644 index 00000000..6c87de9b --- /dev/null +++ b/mosip_keycloak_theme/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/mosip_keycloak_theme/src/index.css b/mosip_keycloak_theme/src/index.css new file mode 100644 index 00000000..4d01c583 --- /dev/null +++ b/mosip_keycloak_theme/src/index.css @@ -0,0 +1,72 @@ +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/mosip_keycloak_theme/src/keycloak-theme/README.md b/mosip_keycloak_theme/src/keycloak-theme/README.md new file mode 100644 index 00000000..0920d0ba --- /dev/null +++ b/mosip_keycloak_theme/src/keycloak-theme/README.md @@ -0,0 +1,29 @@ +Your theme source files should be located in a keycloak-theme directory somewhere in your src directory OR at the root of your directory. +Acceptable directory strucuture: + +```txt +src/ + keycloak-theme/ + login/ + account/ + email/ + +===OR=== + +src/ + foo/ + bar/ + keycloak-theme/ + login/ + account/ + email/ + +===OR=== + +src/ + login/ + account/ + email/ +``` + +You don't need to have all three variant of the theme. If you only need the login theme for example you can have only the login directory. diff --git a/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.css b/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.css new file mode 100644 index 00000000..860849bd --- /dev/null +++ b/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.css @@ -0,0 +1,9 @@ +/* +If you use global CSS like we do here(not recommended) +Be mindful that the CSS of the login theme may clash with the CSS of the account theme in Storybook (and only in storybook). +This is why I made sure to use .my-root-account-class instead of .my-root-class that is already used in the login theme. +*/ + +.my-root-account-class { + background: url(./assets/background.svg) no-repeat center center fixed; +} \ No newline at end of file diff --git a/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.tsx b/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.tsx new file mode 100644 index 00000000..3f88a883 --- /dev/null +++ b/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.tsx @@ -0,0 +1,40 @@ +import "./KcApp.css"; +import { lazy, Suspense } from "react"; +import type { PageProps } from "keycloakify/account"; +import type { KcContext } from "./kcContext"; +import { useI18n } from "./i18n"; +import Template from "./Template"; + +const Password = lazy(() => import("./pages/Password")); +const MyExtraPage1 = lazy(() => import("./pages/MyExtraPage1")); +const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2")); +const Fallback = lazy(()=> import("keycloakify/account")); + +const classes = { + "kcBodyClass": "my-root-account-class" +} satisfies PageProps["classes"]; + +export default function KcApp(props: { kcContext: KcContext; }) { + + const { kcContext } = props; + + const i18n = useI18n({ kcContext }); + + if (i18n === null) { + return null; + } + + return ( +
+
+
+ );
+}
diff --git a/mosip_keycloak_theme/src/keycloak-theme/account/assets/background.svg b/mosip_keycloak_theme/src/keycloak-theme/account/assets/background.svg
new file mode 100644
index 00000000..0e1cada3
--- /dev/null
+++ b/mosip_keycloak_theme/src/keycloak-theme/account/assets/background.svg
@@ -0,0 +1,132 @@
+
diff --git a/mosip_keycloak_theme/src/keycloak-theme/account/createPageStory.tsx b/mosip_keycloak_theme/src/keycloak-theme/account/createPageStory.tsx
new file mode 100644
index 00000000..cecb0345
--- /dev/null
+++ b/mosip_keycloak_theme/src/keycloak-theme/account/createPageStory.tsx
@@ -0,0 +1,30 @@
+import { getKcContext, type KcContext } from "./kcContext";
+import KcApp from "./KcApp";
+import type { DeepPartial } from "keycloakify/tools/DeepPartial";
+
+export function createPageStory
+
+
+ -
+
- + {msg("account")} + + {features.passwordUpdateSupported && ( +
- + {msg("password")} + + )} +
- + {msg("authenticator")} + + {features.identityFederation && ( +
- + {msg("federatedIdentity")} + + )} +
- + {msg("sessions")} + +
- + {msg("applications")} + + {features.log && ( +
- + {msg("log")} + + )} + {realm.userManagedAccessAllowed && features.authorization && ( +
- + {msg("myResources")} + + )} +
+ {message !== undefined && (
+
+
+ {message.type === "success" && }
+ {message.type === "error" && }
+ {message.summary}
+
+ )}
+
+ {children}
+ Hello world 1
+ + ); + +} diff --git a/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage2.tsx b/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage2.tsx new file mode 100644 index 00000000..dc90e84f --- /dev/null +++ b/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage2.tsx @@ -0,0 +1,18 @@ +import type { PageProps } from "keycloakify/account/pages/PageProps"; +import type { KcContext } from "../kcContext"; +import type { I18n } from "../i18n"; + +export default function MyExtraPage1(props: PagePropsHello world 2
+ + ); + +} diff --git a/mosip_keycloak_theme/src/keycloak-theme/account/pages/Password.stories.tsx b/mosip_keycloak_theme/src/keycloak-theme/account/pages/Password.stories.tsx new file mode 100644 index 00000000..1ce118d2 --- /dev/null +++ b/mosip_keycloak_theme/src/keycloak-theme/account/pages/Password.stories.tsx @@ -0,0 +1,22 @@ + +import { Meta, StoryObj } from '@storybook/react'; +import { createPageStory } from "../createPageStory"; + +const { PageStory } = createPageStory({ + pageId: "password.ftl" +}); + +const meta = { + title: "account/Password", + component: PageStory, +} satisfies Meta
+
+
+
+
+ );
+}
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css b/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css
new file mode 100644
index 00000000..856e3fe7
--- /dev/null
+++ b/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css
@@ -0,0 +1,42 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+.my-color {
+ color: red;
+}
+
+.my-font {
+ font-family: 'Work Sans';
+}
+
+.my-root-class {
+ background: white;
+}
+
+#kc-locale-dropdown a {
+ color: #fff !important;
+}
+
+.kcInputClass {
+ height: 36px !important;
+ border-radius: 5px;
+ border: 1px solid #707070;
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
+}
+
+#kc-form-buttons {
+ margin-top: 0px;
+}
+
+.btn-primary {
+ height: 40px !important;
+ background-color: #0D3077 !important;
+ border-radius: 10px !important;
+ background-image: none !important;
+}
+
+.my-root-class body {
+ background: url(./assets/mosip_keycloakbg.png) no-repeat center center fixed;
+ height: 120%;
+}
\ No newline at end of file
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.tsx b/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.tsx
new file mode 100644
index 00000000..192dba30
--- /dev/null
+++ b/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.tsx
@@ -0,0 +1,70 @@
+import "./KcApp.css";
+import { lazy, Suspense } from "react";
+import Fallback, { type PageProps } from "keycloakify/login";
+import type { KcContext } from "./kcContext";
+import { useI18n } from "./i18n";
+import Template from "./Template";
+
+const Login = lazy(() => import("./pages/Login"));
+// If you can, favor register-user-profile.ftl over register.ftl, see: https://docs.keycloakify.dev/realtime-input-validation
+const Register = lazy(() => import("./pages/Register"));
+const RegisterUserProfile = lazy(() => import("./pages/RegisterUserProfile"));
+const Terms = lazy(() => import("./pages/Terms"));
+const MyExtraPage1 = lazy(() => import("./pages/MyExtraPage1"));
+const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2"));
+const Info = lazy(() => import("keycloakify/login/pages/Info"));
+
+// This is like adding classes to theme.properties
+// https://github.com/keycloak/keycloak/blob/11.0.3/themes/src/main/resources/theme/keycloak/login/theme.properties
+const classes = {
+ // NOTE: The classes are defined in ./KcApp.css
+ "kcHtmlClass": "my-root-class",
+ "kcHeaderWrapperClass": "my-color my-font"
+} satisfies PageProps["classes"];
+
+export default function KcApp(props: { kcContext: KcContext; }) {
+
+ const { kcContext } = props;
+ const i18n = useI18n({ kcContext });
+
+ if (i18n === null) {
+ //NOTE: Text resources for the current language are still being downloaded, we can't display anything yet.
+ //We could display a loading progress but it's usually a matter of milliseconds.
+ return null;
+ }
+
+ /*
+ * Examples assuming i18n.currentLanguageTag === "en":
+ * i18n.msg("access-denied") === Access denied
+ * i18n.msg("foo") === foo in English
+ */
+
+ return (
+
+
+ {msg("changePasswordHtmlTitle")}
+
+ {msg("allFieldsRequired")}
+
+
+
+ );
+}
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/assets/background.svg b/mosip_keycloak_theme/src/keycloak-theme/login/assets/background.svg
new file mode 100644
index 00000000..0e1cada3
--- /dev/null
+++ b/mosip_keycloak_theme/src/keycloak-theme/login/assets/background.svg
@@ -0,0 +1,132 @@
+
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/assets/keycloakify-logo.png b/mosip_keycloak_theme/src/keycloak-theme/login/assets/keycloakify-logo.png
new file mode 100644
index 00000000..b9d103cf
Binary files /dev/null and b/mosip_keycloak_theme/src/keycloak-theme/login/assets/keycloakify-logo.png differ
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/assets/mosip_keycloakbg.png b/mosip_keycloak_theme/src/keycloak-theme/login/assets/mosip_keycloakbg.png
new file mode 100644
index 00000000..d9cb7d4c
Binary files /dev/null and b/mosip_keycloak_theme/src/keycloak-theme/login/assets/mosip_keycloakbg.png differ
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/assets/mosip_logo.png b/mosip_keycloak_theme/src/keycloak-theme/login/assets/mosip_logo.png
new file mode 100644
index 00000000..962bff30
Binary files /dev/null and b/mosip_keycloak_theme/src/keycloak-theme/login/assets/mosip_logo.png differ
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/createPageStory.tsx b/mosip_keycloak_theme/src/keycloak-theme/login/createPageStory.tsx
new file mode 100644
index 00000000..cecb0345
--- /dev/null
+++ b/mosip_keycloak_theme/src/keycloak-theme/login/createPageStory.tsx
@@ -0,0 +1,30 @@
+import { getKcContext, type KcContext } from "./kcContext";
+import KcApp from "./KcApp";
+import type { DeepPartial } from "keycloakify/tools/DeepPartial";
+
+export function createPageStory
+ 
+
+ {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
+
+
+
+ )}
+
+
+
+ {labelBySupportedLanguageTag[currentLanguageTag]}
+
+
+ -
+ {locale.supported.map(({ languageTag }) => (
+
- + changeLocale(languageTag)}> + {labelBySupportedLanguageTag[languageTag]} + + + ))} +
+
+ {!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
+ displayRequiredFields ? (
+
+
+
+
+ ) : (
+ <>
+
+
+ *
+ {msg("requiredFields")}
+
+
+
+
+ {headerNode}
+{headerNode}
+{msg("loginDesc")}
+ + ) + ) : displayRequiredFields ? ( +
+
+ ) : (
+ <>
+ {showUsernameNode}
+
+
+ * {msg("requiredFields")}
+
+
+
+ {showUsernameNode}
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
+ {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
+
+
+ {message.type === "success" && }
+ {message.type === "warning" && }
+ {message.type === "error" && }
+ {message.type === "info" && }
+
+
+ )}
+ {children}
+ {auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
+
+ )}
+ {displayInfo && (
+
+
+ )}
+
+ {infoNode}
+
+
+
+
+ );
+}
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx b/mosip_keycloak_theme/src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx
new file mode 100644
index 00000000..0b8b9d8a
--- /dev/null
+++ b/mosip_keycloak_theme/src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx
@@ -0,0 +1,30 @@
+//This is to show that you can create stories for pages that you haven't overloaded.
+
+import { Meta, StoryObj } from '@storybook/react';
+import { createPageStory } from "../createPageStory";
+
+const { PageStory } = createPageStory({
+ pageId: "login-reset-password.ftl"
+});
+
+const meta = {
+ title: "login/LoginResetPassword",
+ component: PageStory,
+} satisfies Meta
+ {realm.password && (
+
+ )}
+
+ {realm.password && social.providers !== undefined && (
+
+ )}
+
+ {termMarkdown}
+
+
+
+
+ );
+}
diff --git a/mosip_keycloak_theme/src/keycloak-theme/login/pages/shared/UserProfileFormFields.tsx b/mosip_keycloak_theme/src/keycloak-theme/login/pages/shared/UserProfileFormFields.tsx
new file mode 100644
index 00000000..a95d47b6
--- /dev/null
+++ b/mosip_keycloak_theme/src/keycloak-theme/login/pages/shared/UserProfileFormFields.tsx
@@ -0,0 +1,177 @@
+import { useEffect, Fragment } from "react";
+import type { ClassKey } from "keycloakify/login/TemplateProps";
+import { clsx } from "keycloakify/tools/clsx";
+import { useFormValidation } from "keycloakify/login/lib/useFormValidation";
+import type { Attribute } from "keycloakify/login/kcContext/KcContext";
+import type { I18n } from "../../i18n";
+
+export type UserProfileFormFieldsProps = {
+ kcContext: Parameters
+
+ )}
+
+ {BeforeField &&
+
+
+ {groupDisplayDescription !== "" && (
+
+
+
+ )}
+
+
+ {AfterField &&
+
+ {attribute.required && <>*}
+
+
+ {(() => {
+ const { options } = attribute.validators;
+
+ if (options !== undefined) {
+ return (
+
+ );
+ }
+
+ return (
+ {
+ switch (attribute.name) {
+ case "password-confirm":
+ case "password":
+ return "password";
+ default:
+ return "text";
+ }
+ })()}
+ id={attribute.name}
+ name={attribute.name}
+ value={value}
+ onChange={event =>
+ formValidationDispatch({
+ "action": "update value",
+ "name": attribute.name,
+ "newValue": event.target.value
+ })
+ }
+ onBlur={() =>
+ formValidationDispatch({
+ "action": "focus lost",
+ "name": attribute.name
+ })
+ }
+ className={getClassName("kcInputClass")}
+ aria-invalid={displayableErrors.length !== 0}
+ disabled={attribute.readOnly}
+ autoComplete={attribute.autocomplete}
+ />
+ );
+ })()}
+ {displayableErrors.length !== 0 &&
+ (() => {
+ const divId = `input-error-${attribute.name}`;
+
+ return (
+ <>
+
+
+ {displayableErrors.map(({ errorMessage }) => errorMessage)}
+
+
+ );
+ })()}
+
+