agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply #502 from main

Browse Source
This commit is contained in:
Joseph Garrone 2024-02-06 07:59:21 +01:00
parent 18900d20e1
commit c091089830
2 changed files with 66 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/login/lib/useGetClassName.ts
View File

@ -94,7 +94,7 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
"kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg", "kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
//css classes for the OTP Login Form //css classes for the OTP Login Form
"kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select", "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select col-xs-12",
"kcSelectOTPListItemClass": "card-pf-body card-pf-top-element", "kcSelectOTPListItemClass": "card-pf-body card-pf-top-element",
"kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle", "kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle",
"kcSelectOTPItemHeadingClass": "card-pf-title text-center", "kcSelectOTPItemHeadingClass": "card-pf-title text-center",

160
src/login/pages/LoginOtp.tsx
View File

@ -1,5 +1,3 @@
import { useEffect } from "react";
import { headInsert } from "keycloakify/tools/headInsert";
import { clsx } from "keycloakify/tools/clsx"; import { clsx } from "keycloakify/tools/clsx";
import type { PageProps } from "keycloakify/login/pages/PageProps"; import type { PageProps } from "keycloakify/login/pages/PageProps";
import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
@ -18,105 +16,77 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
const { msg, msgStr } = i18n; const { msg, msgStr } = i18n;
useEffect(() => {
let isCleanedUp = false;
const { prLoaded, remove } = headInsert({
"type": "javascript",
"src": `${kcContext.url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
});
(async () => {
await prLoaded;
if (isCleanedUp) {
return;
}
evaluateInlineScript();
})();
return () => {
isCleanedUp = true;
remove();
};
}, []);
return ( return (
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}> <>
<form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post"> <style>
{otpLogin.userOtpCredentials.length > 1 && ( {`
<div className={getClassName("kcFormGroupClass")}> input[type="radio"]:checked~label.kcSelectOTPListClass{
<div className={getClassName("kcInputWrapperClass")}> border: 2px solid #39a5dc;
{otpLogin.userOtpCredentials.map(otpCredential => ( }`}
<div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}> </style>
<input type="hidden" value="${otpCredential.id}" /> <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
<div className={getClassName("kcSelectOTPListItemClass")}> <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
<span className={getClassName("kcAuthenticatorOtpCircleClass")} /> {otpLogin.userOtpCredentials.length > 1 && (
<h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2> <div className={getClassName("kcFormGroupClass")}>
<div className={getClassName("kcInputWrapperClass")}>
{otpLogin.userOtpCredentials.map((otpCredential, index) => (
<div key={otpCredential.id}>
<input
id={`kc-otp-credential-${index}`}
name="selectedCredentialId"
type="radio"
value={otpCredential.id}
style={{ display: "none" }}
/>
<label
htmlFor={`kc-otp-credential-${index}`}
key={otpCredential.id}
className={getClassName("kcSelectOTPListClass")}
>
<div className={getClassName("kcSelectOTPListItemClass")}>
<span className={getClassName("kcAuthenticatorOtpCircleClass")} />
<h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
</div>
</label>
</div> </div>
</div> ))}
))} </div>
</div>
)}
<div className={getClassName("kcFormGroupClass")}>
<div className={getClassName("kcLabelWrapperClass")}>
<label htmlFor="otp" className={getClassName("kcLabelClass")}>
{msg("loginOtpOneTime")}
</label>
</div>
<div className={getClassName("kcInputWrapperClass")}>
<input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
</div> </div>
</div> </div>
)}
<div className={getClassName("kcFormGroupClass")}>
<div className={getClassName("kcLabelWrapperClass")}>
<label htmlFor="otp" className={getClassName("kcLabelClass")}>
{msg("loginOtpOneTime")}
</label>
</div>
<div className={getClassName("kcInputWrapperClass")}> <div className={getClassName("kcFormGroupClass")}>
<input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus /> <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
</div> <div className={getClassName("kcFormOptionsWrapperClass")} />
</div> </div>
<div className={getClassName("kcFormGroupClass")}> <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
<div id="kc-form-options" className={getClassName("kcFormOptionsClass")}> <input
<div className={getClassName("kcFormOptionsWrapperClass")} /> className={clsx(
getClassName("kcButtonClass"),
getClassName("kcButtonPrimaryClass"),
getClassName("kcButtonBlockClass"),
getClassName("kcButtonLargeClass")
)}
name="login"
id="kc-login"
type="submit"
value={msgStr("doLogIn")}
/>
</div>
</div> </div>
</form>
<div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}> </Template>
<input </>
className={clsx(
getClassName("kcButtonClass"),
getClassName("kcButtonPrimaryClass"),
getClassName("kcButtonBlockClass"),
getClassName("kcButtonLargeClass")
)}
name="login"
id="kc-login"
type="submit"
value={msgStr("doLogIn")}
/>
</div>
</div>
</form>
</Template>
); );
} }
declare const $: any;
function evaluateInlineScript() {
$(document).ready(function () {
// Card Single Select
$(".card-pf-view-single-select").click(function (this: any) {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).children().removeAttr("name");
} else {
$(".card-pf-view-single-select").removeClass("active");
$(".card-pf-view-single-select").children().removeAttr("name");
$(this).addClass("active");
$(this).children().attr("name", "selectedCredentialId");
}
});
var defaultCred = $(".card-pf-view-single-select")[0];
if (defaultCred) {
defaultCred.click();
}
});
}