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({ const { isReady } = usePrepareTemplate({
"doFetchDefaultThemeResources": doUseDefaultCss, "doFetchDefaultThemeResources": doUseDefaultCss,
"styles": [ "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` `${url.resourcesPath}/css/account.css`
], ],
"htmlClassName": getClassName("kcHtmlClass"), "htmlClassName": getClassName("kcHtmlClass"),

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

@ -44,15 +44,15 @@ export default function KcApp(props: { kcContext: KcContext; }) {
<Suspense> <Suspense>
{(() => { {(() => {
switch (kcContext.pageId) { 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 // Removes those pages in you project. They are included to show you how to implement keycloak pages
// that are not yes implemented by Keycloakify. // that are not yes implemented by Keycloakify.
// See: https://docs.keycloakify.dev/limitations#some-pages-still-have-the-default-theme.-why // 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. // 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. // 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 ( case "info.ftl": return (

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

@ -2,211 +2,177 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { assert } from "keycloakify/tools/assert"; import { assert } from "keycloakify/tools/assert";
import { clsx } from "keycloakify/tools/clsx";
import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate"; import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
import { type TemplateProps } from "keycloakify/login/TemplateProps"; import { type TemplateProps } from "keycloakify/login/TemplateProps";
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";
export default function Template(props: TemplateProps<KcContext, I18n>) { export default function Template(props: TemplateProps<KcContext, I18n>) {
const { const {
displayInfo = false, displayInfo = false,
displayMessage = true, displayMessage = true,
displayRequiredFields = false, displayRequiredFields = false,
displayWide = false, displayWide = false,
showAnotherWayIfPresent = true, showAnotherWayIfPresent = true,
headerNode, headerNode,
showUsernameNode = null, showUsernameNode = null,
infoNode = null, infoNode = null,
kcContext, kcContext,
i18n, i18n,
doUseDefaultCss, doUseDefaultCss,
classes, classes,
children children
} = props; } = props;
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
const { getClassName } = useGetClassName({ doUseDefaultCss, classes }); const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n; const { isReady } = usePrepareTemplate({
"doFetchDefaultThemeResources": doUseDefaultCss,
"styles": [
`${url.resourcesPath}/css/login.css`
],
"htmlClassName": "ps-html",
"bodyClassName": "ps-body",
});
const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext; useState(()=> { document.title = i18n.msgStr("loginTitle", kcContext.realm.displayName); });
const { isReady } = usePrepareTemplate({ useEffect(() => {
"doFetchDefaultThemeResources": doUseDefaultCss, console.log(`Value of MY_ENV_VARIABLE on the Keycloak server: "${kcContext.properties.MY_ENV_VARIABLE}"`);
"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")
});
useState(()=> { document.title = i18n.msgStr("loginTitle", kcContext.realm.displayName); }); if (!isReady) {
return null;
}
useEffect(() => { return (<>
console.log(`Value of MY_ENV_VARIABLE on the Keycloak server: "${kcContext.properties.MY_ENV_VARIABLE}"`); <header className="ps-header">
}, []); {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
<div id="kc-locale">
if (!isReady) { <div id="kc-locale-wrapper" className="ps-locale-dropdown">
return null; <div className="ps-dropdown" id="kc-locale-dropdown">
} <a href="#" id="kc-current-locale-link">
{labelBySupportedLanguageTag[currentLanguageTag]}
return ( </a>
<div className={getClassName("kcLoginClass")}> <ul>
<div id="kc-header" className={getClassName("kcHeaderClass")}> {locale.supported.map(({ languageTag }) => (
<div <li key={languageTag} className="ps-dropdown-item">
id="kc-header-wrapper" <a href="#" onClick={() => changeLocale(languageTag)}>
className={getClassName("kcHeaderWrapperClass")} {labelBySupportedLanguageTag[languageTag]}
style={{ "fontFamily": '"Work Sans"' }} </a>
> </li>
{/* ))}
Here we are referencing the `keycloakify-logo.png` in the `public` directory. </ul>
When possible don't use this approach, instead ... </div>
*/} </div>
<img src={`${import.meta.env.BASE_URL}keycloakify-logo.png`} alt="Keycloakify logo" width={50} /> </div>
{msg("loginTitleHtml", realm.displayNameHtml)}!!! )}
{/* ...rely on the bundler to import your assets, it's more efficient */} {!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
<img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} /> displayRequiredFields ? (
</div> <div className="ps-required-fields">
</div> <div className="ps-required-fields--field">
<span className="subtitle">
<div className={clsx(getClassName("kcFormCardClass"), displayWide && getClassName("kcFormCardAccountClass"))}> <span className="required">*</span>
<header className={getClassName("kcFormHeaderClass")}> {msg("requiredFields")}
{realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && ( </span>
<div id="kc-locale"> </div>
<div id="kc-locale-wrapper" className={getClassName("kcLocaleWrapperClass")}> <div className="col-md-10">
<div className="kc-dropdown" id="kc-locale-dropdown"> <h1 id="kc-page-title">{headerNode}</h1>
<a href="#" id="kc-current-locale-link"> </div>
{labelBySupportedLanguageTag[currentLanguageTag]} </div>
</a> ) : (
<ul> <h1 id="kc-page-title">{headerNode}</h1>
{locale.supported.map(({ languageTag }) => ( )
<li key={languageTag} className="kc-dropdown-item"> ) : displayRequiredFields ? (
<a href="#" onClick={() => changeLocale(languageTag)}> <div className="ps-content">
{labelBySupportedLanguageTag[languageTag]} <div className="ps-required">
</a> <span className="subtitle">
</li> <span className="required">*</span> {msg("requiredFields")}
))} </span>
</ul> </div>
</div> <div className="col-md-10">
</div> {showUsernameNode}
</div> <div className="ps-form-group">
)} <div id="kc-username">
{!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? ( <label id="kc-attempted-username">{auth?.attemptedUsername}</label>
displayRequiredFields ? ( <a id="reset-login" href={url.loginRestartFlowUrl}>
<div className={getClassName("kcContentWrapperClass")}> <div className="kc-login-tooltip">
<div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}> <i className="ps-icon ps-icon_restart-flow"></i>
<span className="subtitle"> <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
<span className="required">*</span> </div>
{msg("requiredFields")} </a>
</span> </div>
</div> </div>
<div className="col-md-10"> </div>
<h1 id="kc-page-title">{headerNode}</h1> </div>
</div> ) : (
</div> <>
) : ( {showUsernameNode}
<h1 id="kc-page-title">{headerNode}</h1> <div className="ps-form-group">
) <div id="kc-username">
) : displayRequiredFields ? ( <label id="kc-attempted-username">{auth?.attemptedUsername}</label>
<div className={getClassName("kcContentWrapperClass")}> <a id="reset-login" href={url.loginRestartFlowUrl}>
<div className={clsx(getClassName("kcLabelWrapperClass"), "subtitle")}> <div className="kc-login-tooltip">
<span className="subtitle"> <i className="ps-icon ps-icon_restart-flow"></i>
<span className="required">*</span> {msg("requiredFields")} <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
</span> </div>
</div> </a>
<div className="col-md-10"> </div>
{showUsernameNode} </div>
<div className={getClassName("kcFormGroupClass")}> </>
<div id="kc-username"> )}
<label id="kc-attempted-username">{auth?.attemptedUsername}</label> </header>
<a id="reset-login" href={url.loginRestartFlowUrl}> <div id="kc-content">
<div className="kc-login-tooltip"> <div id="kc-content-wrapper">
<i className={getClassName("kcResetFlowIcon")}></i> {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span> {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
</div> <div className={clsx("alert", `alert-${message.type}`)}>
</a> {message.type === "success" && <span className={getClassName("kcFeedbackSuccessIcon")}></span>}
</div> {message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>}
</div> {message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>}
</div> {message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>}
</div> <span
) : ( className="kc-feedback-text"
<> dangerouslySetInnerHTML={{
{showUsernameNode} "__html": message.summary
<div className={getClassName("kcFormGroupClass")}> }}
<div id="kc-username"> />
<label id="kc-attempted-username">{auth?.attemptedUsername}</label> </div>
<a id="reset-login" href={url.loginRestartFlowUrl}> )}
<div className="kc-login-tooltip"> {children}
<i className={getClassName("kcResetFlowIcon")}></i> {auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && (
<span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span> <form
</div> id="kc-select-try-another-way-form"
</a> action={url.loginAction}
</div> method="post"
</div> >
</> <div>
)} <div className="ps-form-group">
</header> <input type="hidden" name="tryAnotherWay" value="on" />
<div id="kc-content"> <a
<div id="kc-content-wrapper"> href="#"
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */} id="try-another-way"
{displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && ( onClick={() => {
<div className={clsx("alert", `alert-${message.type}`)}> document.forms["kc-select-try-another-way-form" as never].submit();
{message.type === "success" && <span className={getClassName("kcFeedbackSuccessIcon")}></span>} return false;
{message.type === "warning" && <span className={getClassName("kcFeedbackWarningIcon")}></span>} }}
{message.type === "error" && <span className={getClassName("kcFeedbackErrorIcon")}></span>} >
{message.type === "info" && <span className={getClassName("kcFeedbackInfoIcon")}></span>} {msg("doTryAnotherWay")}
<span </a>
className="kc-feedback-text" </div>
dangerouslySetInnerHTML={{ </div>
"__html": message.summary </form>
}} )}
/> {displayInfo && (
</div> <div id="kc-info">
)} <div id="kc-info-wrapper">
{children} {infoNode}
{auth !== undefined && auth.showTryAnotherWayLink && showAnotherWayIfPresent && ( </div>
<form </div>
id="kc-select-try-another-way-form" )}
action={url.loginAction} </div>
method="post" </div>
className={clsx(displayWide && getClassName("kcContentWrapperClass"))} </>
> );
<div
className={clsx(
displayWide && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
)}
>
<div className={getClassName("kcFormGroupClass")}>
<input type="hidden" name="tryAnotherWay" value="on" />
<a
href="#"
id="try-another-way"
onClick={() => {
document.forms["kc-select-try-another-way-form" as never].submit();
return false;
}}
>
{msg("doTryAnotherWay")}
</a>
</div>
</div>
</form>
)}
{displayInfo && (
<div id="kc-info" className={getClassName("kcSignUpClass")}>
<div id="kc-info-wrapper" className={getClassName("kcInfoAreaWrapperClass")}>
{infoNode}
</div>
</div>
)}
</div>
</div>
</div>
</div>
);
} }

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

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

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

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

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

@ -1,3 +1,4 @@
import "./Login.css";
import { useState, type FormEventHandler } from "react"; import { useState, type FormEventHandler } from "react";
import { clsx } from "keycloakify/tools/clsx"; import { clsx } from "keycloakify/tools/clsx";
import { useConstCallback } from "keycloakify/tools/useConstCallback"; import { useConstCallback } from "keycloakify/tools/useConstCallback";
@ -9,196 +10,196 @@ import type { I18n } from "../i18n";
const my_custom_param = new URL(window.location.href).searchParams.get("my_custom_param"); const my_custom_param = new URL(window.location.href).searchParams.get("my_custom_param");
if (my_custom_param !== null) { if (my_custom_param !== null) {
console.log("my_custom_param:", my_custom_param); console.log("my_custom_param:", my_custom_param);
} }
export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) { export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
const { getClassName } = useGetClassName({ const { getClassName } = useGetClassName({
doUseDefaultCss, doUseDefaultCss,
classes classes
}); });
const { social, realm, url, usernameHidden, login, auth, registrationDisabled } = kcContext; const { social, realm, url, usernameHidden, login, auth, registrationDisabled } = kcContext;
const { msg, msgStr } = i18n; const { msg, msgStr } = i18n;
const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false); const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => { const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
e.preventDefault(); e.preventDefault();
setIsLoginButtonDisabled(true); setIsLoginButtonDisabled(true);
const formElement = e.target as HTMLFormElement; const formElement = e.target as HTMLFormElement;
//NOTE: Even if we login with email Keycloak expect username and password in //NOTE: Even if we login with email Keycloak expect username and password in
//the POST request. //the POST request.
formElement.querySelector("input[name='email']")?.setAttribute("name", "username"); formElement.querySelector("input[name='email']")?.setAttribute("name", "username");
formElement.submit(); formElement.submit();
}); });
return ( return (
<Template <Template
{...{ kcContext, i18n, doUseDefaultCss, classes }} {...{ kcContext, i18n, doUseDefaultCss, classes }}
displayInfo={ displayInfo={
realm.password && realm.password &&
realm.registrationAllowed && realm.registrationAllowed &&
!registrationDisabled !registrationDisabled
} }
displayWide={realm.password && social.providers !== undefined} displayWide={realm.password && social.providers !== undefined}
headerNode={msg("doLogIn")} headerNode={msg("doLogIn")}
infoNode={ infoNode={
<div id="kc-registration"> <div id="kc-registration">
<span> <span>
{msg("noAccount")} {msg("noAccount")}
<a tabIndex={6} href={url.registrationUrl}> <a tabIndex={6} href={url.registrationUrl}>
{msg("doRegister")} {msg("doRegister")}
</a> </a>
</span> </span>
</div> </div>
} }
> >
<div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}> <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>
<div <div
id="kc-form-wrapper" id="kc-form-wrapper"
className={clsx( className={clsx(
realm.password && realm.password &&
social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")] social.providers && [getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass")]
)} )}
> >
{realm.password && ( {realm.password && (
<form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post"> <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
<div className={getClassName("kcFormGroupClass")}> <div className="ps-form-group">
{!usernameHidden && {!usernameHidden &&
(() => { (() => {
const label = !realm.loginWithEmailAllowed const label = !realm.loginWithEmailAllowed
? "username" ? "username"
: realm.registrationEmailAsUsername : realm.registrationEmailAsUsername
? "email" ? "email"
: "usernameOrEmail"; : "usernameOrEmail";
const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label; const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
return ( return (
<> <>
<label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}> <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
{msg(label)} {msg(label)}
</label> </label>
<input <input
tabIndex={1} tabIndex={1}
id={autoCompleteHelper} id={autoCompleteHelper}
className={getClassName("kcInputClass")} className={getClassName("kcInputClass")}
//NOTE: This is used by Google Chrome auto fill so we use it to tell //NOTE: This is used by Google Chrome auto fill so we use it to tell
//the browser how to pre fill the form but before submit we put it back //the browser how to pre fill the form but before submit we put it back
//to username because it is what keycloak expects. //to username because it is what keycloak expects.
name={autoCompleteHelper} name={autoCompleteHelper}
defaultValue={login.username ?? ""} defaultValue={login.username ?? ""}
type="text" type="text"
autoFocus={true} autoFocus={true}
autoComplete="off" autoComplete="off"
/> />
</> </>
); );
})()} })()}
</div> </div>
<div className={getClassName("kcFormGroupClass")}> <div className="ps-form-group">
<label htmlFor="password" className={getClassName("kcLabelClass")}> <label htmlFor="password" className={getClassName("kcLabelClass")}>
{msg("password")} {msg("password")}
</label> </label>
<input <input
tabIndex={2} tabIndex={2}
id="password" id="password"
className={getClassName("kcInputClass")} className={getClassName("kcInputClass")}
name="password" name="password"
type="password" type="password"
autoComplete="off" autoComplete="off"
/> />
</div> </div>
<div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}> <div className="ps-form-group">
<div id="kc-form-options"> <div id="kc-form-options">
{realm.rememberMe && !usernameHidden && ( {realm.rememberMe && !usernameHidden && (
<div className="checkbox"> <div className="checkbox">
<label> <label>
<input <input
tabIndex={3} tabIndex={3}
id="rememberMe" id="rememberMe"
name="rememberMe" name="rememberMe"
type="checkbox" type="checkbox"
{...(login.rememberMe === "on" {...(login.rememberMe === "on"
? { ? {
"checked": true "checked": true
} }
: {})} : {})}
/> />
{msg("rememberMe")} {msg("rememberMe")}
</label> </label>
</div> </div>
)} )}
</div> </div>
<div className={getClassName("kcFormOptionsWrapperClass")}> <div className={getClassName("kcFormOptionsWrapperClass")}>
{realm.resetPasswordAllowed && ( {realm.resetPasswordAllowed && (
<span> <span>
<a tabIndex={5} href={url.loginResetCredentialsUrl}> <a tabIndex={5} href={url.loginResetCredentialsUrl}>
{msg("doForgotPassword")} {msg("doForgotPassword")}
</a> </a>
</span> </span>
)} )}
</div> </div>
</div> </div>
<div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}> <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
<input <input
type="hidden" type="hidden"
id="id-hidden-input" id="id-hidden-input"
name="credentialId" name="credentialId"
{...(auth?.selectedCredential !== undefined {...(auth?.selectedCredential !== undefined
? { ? {
"value": auth.selectedCredential "value": auth.selectedCredential
} }
: {})} : {})}
/> />
<input <input
tabIndex={4} tabIndex={4}
className={clsx( className={clsx(
getClassName("kcButtonClass"), getClassName("kcButtonClass"),
getClassName("kcButtonPrimaryClass"), getClassName("kcButtonPrimaryClass"),
getClassName("kcButtonBlockClass"), getClassName("kcButtonBlockClass"),
getClassName("kcButtonLargeClass") getClassName("kcButtonLargeClass")
)} )}
name="login" name="login"
id="kc-login" id="kc-login"
type="submit" type="submit"
value={msgStr("doLogIn")} value={msgStr("doLogIn")}
disabled={isLoginButtonDisabled} disabled={isLoginButtonDisabled}
/> />
</div> </div>
</form> </form>
)} )}
</div> </div>
{realm.password && social.providers !== undefined && ( {realm.password && social.providers !== undefined && (
<div <div
id="kc-social-providers" id="kc-social-providers"
className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))} className={clsx(getClassName("kcFormSocialAccountContentClass"), getClassName("kcFormSocialAccountClass"))}
> >
<ul <ul
className={clsx( className={clsx(
getClassName("kcFormSocialAccountListClass"), getClassName("kcFormSocialAccountListClass"),
social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass") social.providers.length > 4 && getClassName("kcFormSocialAccountDoubleListClass")
)} )}
> >
{social.providers.map(p => ( {social.providers.map(p => (
<li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}> <li key={p.providerId} className={getClassName("kcFormSocialAccountListLinkClass")}>
<a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}> <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
<span>{p.displayName}</span> <span>{p.displayName}</span>
</a> </a>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
)} )}
</div> </div>
</Template> </Template>
); );
} }