diff --git a/keycloak-artemis/mosip_keycloak_theme/package-lock.json b/keycloak-artemis/mosip_keycloak_theme/package-lock.json index b2a1e6d8..8e6da6db 100644 --- a/keycloak-artemis/mosip_keycloak_theme/package-lock.json +++ b/keycloak-artemis/mosip_keycloak_theme/package-lock.json @@ -14,6 +14,7 @@ "powerhooks": "^1.0.8", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-recaptcha": "^2.3.10", "tsafe": "^1.6.6", "zod": "^3.22.4" }, @@ -31,6 +32,7 @@ "@types/node": "^12.0.0", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", + "@types/react-recaptcha": "^2.3.7", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", @@ -6841,6 +6843,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-recaptcha": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/@types/react-recaptcha/-/react-recaptcha-2.3.7.tgz", + "integrity": "sha512-01MumeQQm7fypkPBMaAfDD0Y8g6Kxx6wVy0VM8JCysiU6ZvTcXZvL1ykdBEAijhuls6N6mwLxw/ZtqdmCrtdlw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.20.6", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz", @@ -21372,6 +21383,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/react-recaptcha": { + "version": "2.3.10", + "resolved": "https://registry.npmjs.org/react-recaptcha/-/react-recaptcha-2.3.10.tgz", + "integrity": "sha512-IyanbozsYCuHvTYDuskZTIEcRAMG/sdvAu5b29iQWoC8Kd3Zk9WGCv2oNxh6RfGHvSvgHAyaLjmC6ei/yMsJ7g==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -31093,6 +31109,15 @@ "@types/react": "*" } }, + "@types/react-recaptcha": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/@types/react-recaptcha/-/react-recaptcha-2.3.7.tgz", + "integrity": "sha512-01MumeQQm7fypkPBMaAfDD0Y8g6Kxx6wVy0VM8JCysiU6ZvTcXZvL1ykdBEAijhuls6N6mwLxw/ZtqdmCrtdlw==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.20.6", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz", @@ -40907,6 +40932,11 @@ } } }, + "react-recaptcha": { + "version": "2.3.10", + "resolved": "https://registry.npmjs.org/react-recaptcha/-/react-recaptcha-2.3.10.tgz", + "integrity": "sha512-IyanbozsYCuHvTYDuskZTIEcRAMG/sdvAu5b29iQWoC8Kd3Zk9WGCv2oNxh6RfGHvSvgHAyaLjmC6ei/yMsJ7g==" + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", diff --git a/keycloak-artemis/mosip_keycloak_theme/package.json b/keycloak-artemis/mosip_keycloak_theme/package.json index a1742315..a27b205f 100644 --- a/keycloak-artemis/mosip_keycloak_theme/package.json +++ b/keycloak-artemis/mosip_keycloak_theme/package.json @@ -18,6 +18,7 @@ "powerhooks": "^1.0.8", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-recaptcha": "^2.3.10", "tsafe": "^1.6.6", "zod": "^3.22.4" }, @@ -35,6 +36,7 @@ "@types/node": "^12.0.0", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", + "@types/react-recaptcha": "^2.3.7", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react": "^4.2.1", @@ -53,6 +55,6 @@ }, "_comment": "See https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092", "resolutions": { - "jackspeak": "2.1.1" + "jackspeak": "2.3.6" } } diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.css b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.css deleted file mode 100644 index 860849bd..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.css +++ /dev/null @@ -1,9 +0,0 @@ -/* -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/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.tsx deleted file mode 100644 index 3f88a883..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/KcApp.tsx +++ /dev/null @@ -1,40 +0,0 @@ -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 ( - - {(() => { - switch (kcContext.pageId) { - case "password.ftl": return ; - case "my-extra-page-1.ftl": return ; - case "my-extra-page-2.ftl": return ; - default: return ; - } - })()} - - ); - -} diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/Template.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/Template.tsx deleted file mode 100644 index 93e4e2ff..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/Template.tsx +++ /dev/null @@ -1,135 +0,0 @@ -// Copy pasted from: https://github.com/InseeFrLab/keycloakify/blob/main/src/login/Template.tsx - -import { clsx } from "keycloakify/tools/clsx"; -import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate"; -import { type TemplateProps } from "keycloakify/account/TemplateProps"; -import { useGetClassName } from "keycloakify/account/lib/useGetClassName"; -import type { KcContext } from "./kcContext"; -import type { I18n } from "./i18n"; -import { assert } from "keycloakify/tools/assert"; - -export default function Template(props: TemplateProps) { - const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props; - - const { getClassName } = useGetClassName({ doUseDefaultCss, classes }); - - const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n; - - const { locale, url, features, realm, message, referrer } = kcContext; - - 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"), - "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass")), - "htmlLangProperty": locale?.currentLanguageTag, - "documentTitle": i18n.msgStr("accountManagementTitle") - }); - - if (!isReady) { - return null; - } - - return ( - <> -
- -
- -
-
- -
- -
- {message !== undefined && ( -
- {message.type === "success" && } - {message.type === "error" && } - {message.summary} -
- )} - - {children} -
-
- - ); -} diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/assets/background.svg b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/assets/background.svg deleted file mode 100644 index 0e1cada3..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/assets/background.svg +++ /dev/null @@ -1,132 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/createPageStory.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/createPageStory.tsx deleted file mode 100644 index cecb0345..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/createPageStory.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { getKcContext, type KcContext } from "./kcContext"; -import KcApp from "./KcApp"; -import type { DeepPartial } from "keycloakify/tools/DeepPartial"; - -export function createPageStory(params: { - pageId: PageId; -}) { - - const { pageId } = params; - - function PageStory(params: { kcContext?: DeepPartial>; }) { - - const { kcContext } = getKcContext({ - mockPageId: pageId, - storyPartialKcContext: params.kcContext - }); - - return ( - <> - {/* If you import custom fonts in your index.html you have to import them in storybook as well*/} - - - - ); - - } - - return { PageStory }; - -} diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/i18n.ts b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/i18n.ts deleted file mode 100644 index 45f75c4f..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/i18n.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createUseI18n } from "keycloakify/account"; - -//NOTE: See src/login/i18n.ts for instructions on customization of i18n messages. -export const { useI18n } = createUseI18n({}); - -export type I18n = NonNullable>; diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/kcContext.ts b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/kcContext.ts deleted file mode 100644 index 3a5d268b..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/kcContext.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { createGetKcContext } from "keycloakify/account"; - -export type KcContextExtension = - | { pageId: "my-extra-page-1.ftl"; } - | { pageId: "my-extra-page-2.ftl"; someCustomValue: string; }; - -export const { getKcContext } = createGetKcContext({ - mockData: [ - { - pageId: "my-extra-page-2.ftl", - someCustomValue: "foo bar" - } - ], - mockProperties: { - MY_ENV_VARIABLE: "Mocked value" - } -}); - -export const { kcContext } = getKcContext({ - //mockPageId: "password.ftl", -}); - -export type KcContext = NonNullable["kcContext"]>; diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage1.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage1.tsx deleted file mode 100644 index 649e4cbc..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage1.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { PageProps } from "keycloakify/account/pages/PageProps"; -import type { KcContext } from "../kcContext"; -import type { I18n } from "../i18n"; - -export default function MyExtraPage1(props: PageProps, I18n>) { - - const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; - - return ( - - ); - -} diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage2.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage2.tsx deleted file mode 100644 index dc90e84f..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/MyExtraPage2.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { PageProps } from "keycloakify/account/pages/PageProps"; -import type { KcContext } from "../kcContext"; -import type { I18n } from "../i18n"; - -export default function MyExtraPage1(props: PageProps, I18n>) { - - const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; - - // someCustomValue is declared by you in ../kcContext.ts - console.log(`TODO: Do something with: ${kcContext.someCustomValue}`); - - return ( - - ); - -} diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/Password.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/Password.tsx deleted file mode 100644 index 294c7597..00000000 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/account/pages/Password.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { clsx } from "keycloakify/tools/clsx"; -import type { PageProps } from "keycloakify/account/pages/PageProps"; -import { useGetClassName } from "keycloakify/account/lib/useGetClassName"; -import type { KcContext } from "../kcContext"; -import type { I18n } from "../i18n"; - -export default function LogoutConfirm(props: PageProps, I18n>) { - const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; - - const { getClassName } = useGetClassName({ - doUseDefaultCss, - "classes": { - ...classes, - "kcBodyClass": clsx(classes?.kcBodyClass, "password") - } - }); - - const { url, password, account, stateChecker } = kcContext; - - const { msg } = i18n; - - return ( - - ); -} diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css index 856e3fe7..3f405d46 100644 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.css @@ -29,6 +29,16 @@ margin-top: 0px; } +.login-pf-page .login-pf-header h1 { + text-align: left !important; + font-size: 20px; + margin-top: 10px; +} + +.login-pf-page .login-pf-header { + margin-bottom: 10px; +} + .btn-primary { height: 40px !important; background-color: #0D3077 !important; @@ -38,5 +48,51 @@ .my-root-class body { background: url(./assets/mosip_keycloakbg.png) no-repeat center center fixed; - height: 120%; + height: 180%; + background-size: cover; +} + + + +a { + color: #0D3077 !important; + text-decoration: none !important; +} + +.login-pf-page .card-pf { + padding: 20px 25px 20px 25px; +} + +.login-pf-page .card-pf p{ + color: #3D4468; +} + +.g-recaptcha { + transform: scale(1.08); + margin-left: 10px; +} + +/* +.g-recaptcha > * { + float: right; + right: 0; +}*/ + +.g-recaptcha::after{ + width: 400px !important; +} + +@media (max-width: 840px) { + .login-pf-page .card-pf { + max-width: 500px; + } +} + +@media (max-width: 767px) { + .login-pf-page .card-pf { + margin: 0 10px 0 10px; + } + #kc-locale { + top: 40px; + } } \ No newline at end of file diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.tsx index 192dba30..2ce403cd 100644 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.tsx +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/KcApp.tsx @@ -10,8 +10,6 @@ const Login = lazy(() => import("./pages/Login")); 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 @@ -50,8 +48,7 @@ export default function KcApp(props: { kcContext: KcContext; }) { // 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 ; - case "my-extra-page-2.ftl": return ; + // 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 ( diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/Template.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/Template.tsx index 3b1adf65..c7f4a340 100644 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/Template.tsx +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/Template.tsx @@ -14,11 +14,12 @@ export default function Template(props: TemplateProps) { const { displayInfo = false, displayMessage = true, - displayRequiredFields = false, + // displayRequiredFields = false, displayWide = false, showAnotherWayIfPresent = true, headerNode, - showUsernameNode = null, + // descText, + // showUsernameNode = null, infoNode = null, kcContext, i18n, @@ -26,14 +27,13 @@ export default function Template(props: TemplateProps) { classes, children } = props; - console.log(i18n) const { getClassName } = useGetClassName({ doUseDefaultCss, classes }); - const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n; - - const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext; + const { msg, msgStr, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n; + const { realm, locale, auth, url, message, isAppInitiatedAction, pageId } = kcContext; + console.log(kcContext) const { isReady } = usePrepareTemplate({ "doFetchDefaultThemeResources": doUseDefaultCss, "styles": [ @@ -48,6 +48,8 @@ export default function Template(props: TemplateProps) { "documentTitle": i18n.msgStr("loginTitle", kcContext.realm.displayName) }); + console.log(kcContext) + useEffect(() => { console.log(`Value of MY_ENV_VARIABLE on the Keycloak server: "${kcContext.properties.MY_ENV_VARIABLE}"`); }, []); @@ -57,7 +59,7 @@ export default function Template(props: TemplateProps) { } return ( -
+
logo
{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && ( @@ -81,9 +83,11 @@ export default function Template(props: TemplateProps) {
)}
-
-
- {!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? ( +
+
+
+ {headerNode} + {/* {!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? ( displayRequiredFields ? (
@@ -99,7 +103,7 @@ export default function Template(props: TemplateProps) { ) : ( <>

{headerNode}

-

{msg("loginDesc")}

+

{descText}

) ) : displayRequiredFields ? ( @@ -139,61 +143,67 @@ export default function Template(props: TemplateProps) {
- )} -
-
-
- {/* 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 && ( -
-
+
+
+ {/* 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" && } + {pageId === 'login.ftl' ? ( ) : ()} +
+ )} + {children} + {auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && ( + -
diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/expand_more_FILL0_wght300_GRAD0_opsz24 (1).svg b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/expand_more_FILL0_wght300_GRAD0_opsz24 (1).svg new file mode 100644 index 00000000..5c70c102 --- /dev/null +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/expand_more_FILL0_wght300_GRAD0_opsz24 (1).svg @@ -0,0 +1,3 @@ + + + diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/info.svg b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/info.svg new file mode 100644 index 00000000..c187c154 --- /dev/null +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/visibility_FILL0_wght400_GRAD0_opsz48.svg b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/visibility_FILL0_wght400_GRAD0_opsz48.svg new file mode 100644 index 00000000..f5faeb67 --- /dev/null +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/assets/visibility_FILL0_wght400_GRAD0_opsz48.svg @@ -0,0 +1,3 @@ + + + diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/i18n.ts b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/i18n.ts index 8fecec31..13ff5bd3 100644 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/i18n.ts +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/i18n.ts @@ -14,10 +14,30 @@ export const { useI18n } = createUseI18n({ usernameOrEmail: "Username", doLogIn:"Login", loginDesc:"Please enter your username and password to login.", + regDesc:"Please fill in the below fields to register as partner.", namePlaceholder:"Enter username", passwordPlaceholder:"Enter Password", noAccount:"Not a member yet?", - doRegister:"Register Now" + doRegister:"Register Now", + partnerType: "Partner Type", + selectAnOption: "Select Partner Type", + orgName: "Organisation Name", + address: "Address", + email: "Email Address", + backToLogin: "Back", + firstNamePH: "Enter First Name", + lastNamePH: "Enter Last Name", + orgnamePH: "Enter Organisation Name", + addressPH: "Enter Address", + emailPH: "Enter Email Address", + phoneNumberPH: "Enter Phone Number", + userNamePH: "Enter Username", + alreadyMember: "Already a member?", + requiredFields: "are mandatory.", + requiredFieldsTwo: "All fields marked with", + missingPartnerTypeMessage: "Please specify partner type", + logInErrorMsg: "Please Enter Email and Password", + registerErrorMsg: "Please fill all the required fields" }, fr: { /* spell-checker: disable */ @@ -25,12 +45,33 @@ export const { useI18n } = createUseI18n({ gender: "Genre", invalidUserMessage: "Nom d'utilisateur ou mot de passe invalide. (ce message a été écrasé dans le thème)", usernameOrEmail: "Nom d'utilisateur ou courriel", - doLogIn:"", - loginDesc:"", - namePlaceholder:"", - passwordPlaceholder:"", - noAccount:"", - doRegister:"" + doLogIn:"Se connecter", + loginDesc:"Merci d'entrer votre nom d'utilisateur et votre mot de passe pour vous connecter.", + regDesc:"Veuillez remplir les champs ci-dessous pour vous inscrire en tant que partenaire.", + namePlaceholder:"Saisissez votre nom d'utilisateur", + passwordPlaceholder:"Entrer le mot de passe", + noAccount:"Pas encore membre?", + doRegister:"S'inscrire maintenant", + partnerType: "Type de partenaire", + selectAnOption: "Sélectionnez le type de partenaire", + orgName: "Nom de l'organisme", + address: "Adresse", + email: "Adresse e-mail", + backToLogin: "Dos", + firstNamePH: "Entrez votre prénom", + lastNamePH: "Entrer le nom de famille", + orgnamePH: "Entrez le nom de l'organisation", + addressPH: "Entrer l'adresse", + emailPH: "Entrer l'adresse e-mail", + phoneNumberPH: "Entrez le numéro de téléphone", + userNamePH: "Saisissez votre nom d'utilisateur", + alreadyMember: "Déjà membre?", + requiredFields: "sont obligatoires.", + requiredFieldsTwo: "Tous les champs marqués d'un", + + missingPartnerTypeMessage:"Please specify partner type", + logInErrorMsg: "Please Enter Email and Password", + registerErrorMsg: "Please fill all the required fields" /* spell-checker: enable */ } }); diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/kcContext.ts b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/kcContext.ts index d0bb5d70..d0471b95 100644 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/kcContext.ts +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/kcContext.ts @@ -2,8 +2,6 @@ import { createGetKcContext } from "keycloakify/login"; export type KcContextExtension = | { pageId: "login.ftl"; } - | { pageId: "my-extra-page-1.ftl"; } - | { pageId: "my-extra-page-2.ftl"; someCustomValue: string; } // NOTE: register.ftl is deprecated in favor of register-user-profile.ftl // but let's say we use it anyway and have this plugin enabled: https://github.com/micedre/keycloak-mail-whitelisting // keycloak-mail-whitelisting define the non standard ftl global authorizedMailDomains, we declare it here. @@ -27,10 +25,6 @@ export const { getKcContext } = createGetKcContext({ //Uncomment the following line for showing an Error message //message: { type: "error", summary: "This is an error" } }, - { - pageId: "my-extra-page-2.ftl", - someCustomValue: "foo bar baz", - }, { //NOTE: You will either use register.ftl (legacy) or register-user-profile.ftl, not both pageId: "register-user-profile.ftl", @@ -80,7 +74,7 @@ export const { getKcContext } = createGetKcContext({ ], // Simulate we got an error with the email field messagesPerField: { - printIfExists: (fieldName: string, className: T) => { console.log({ fieldName }); return fieldName === "email" ? className : undefined; }, + printIfExists: (fieldName: string, className: T) => { return fieldName === "email" ? className : undefined; }, existsError: (fieldName: string) => fieldName === "email", get: (fieldName: string) => `Fake error for ${fieldName}`, exists: (fieldName: string) => fieldName === "email" diff --git a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Login.tsx b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Login.tsx index 65ec3a3c..8e0fe72d 100644 --- a/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Login.tsx +++ b/keycloak-artemis/mosip_keycloak_theme/src/keycloak-theme/login/pages/Login.tsx @@ -5,6 +5,8 @@ import type { PageProps } from "keycloakify/login/pages/PageProps"; import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; import type { KcContext } from "../kcContext"; import type { I18n } from "../i18n"; +import eyeIcon from '../assets/visibility_FILL0_wght400_GRAD0_opsz48.svg' +import info from '../assets/info.svg' const my_custom_param = new URL(window.location.href).searchParams.get("my_custom_param"); @@ -20,10 +22,11 @@ export default function Login(props: PageProps>(e => { e.preventDefault(); @@ -39,6 +42,10 @@ export default function Login(props: PageProps { + passwordType === 'password' ? setPasswordType('text') : setPasswordType('password') + } + return (