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

Add login-reset-otp.ftl page

Browse Source
This commit is contained in:
Joseph Garrone 2024-05-11 16:57:41 +02:00
parent 9001e254cc
commit c80c399e6b
4 changed files with 88 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/bin/keycloakify/generateFtl/pageId.ts
View File

@ -31,7 +31,8 @@ export const loginThemePageIds = [
"delete-account-confirm.ftl",
"frontchannel-logout.ftl",
"login-recovery-authn-code-config.ftl",
"login-recovery-authn-code-input.ftl"
"login-recovery-authn-code-input.ftl",
"login-reset-otp.ftl"
] as const;
export const accountThemePageIds = [

3
src/login/Fallback.tsx
View File

@ -37,6 +37,7 @@ const DeleteAccountConfirm = lazy(() => import("keycloakify/login/pages/DeleteAc
const FrontchannelLogout = lazy(() => import("keycloakify/login/pages/FrontchannelLogout"));
const LoginRecoveryAuthnCodeConfig = lazy(() => import("keycloakify/login/pages/LoginRecoveryAuthnCodeConfig"));
const LoginRecoveryAuthnCodeInput = lazy(() => import("keycloakify/login/pages/LoginRecoveryAuthnCodeInput"));
const LoginResetOtp = lazy(() => import("keycloakify/login/pages/LoginResetOtp"));
type FallbackProps = PageProps<KcContext, I18n> & {
UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
@ -113,6 +114,8 @@ export default function Fallback(props: FallbackProps) {
return <LoginRecoveryAuthnCodeConfig kcContext={kcContext} {...rest} />;
case "login-recovery-authn-code-input.ftl":
return <LoginRecoveryAuthnCodeInput kcContext={kcContext} {...rest} />;
case "login-reset-otp.ftl":
return <LoginResetOtp kcContext={kcContext} {...rest} />;
}
assert<Equals<typeof kcContext, never>>(false);
})()}

14
src/login/kcContext/KcContext.ts
View File

@ -41,7 +41,8 @@ export type KcContext =
| KcContext.DeleteAccountConfirm
| KcContext.FrontchannelLogout
| KcContext.LoginRecoveryAuthnCodeConfig
| KcContext.LoginRecoveryAuthnCodeInput;
| KcContext.LoginRecoveryAuthnCodeInput
| KcContext.LoginResetOtp;
assert<KcContext["themeType"] extends ThemeType ? true : false>();
@ -546,6 +547,17 @@ export declare namespace KcContext {
codeNumber: number;
};
};
export type LoginResetOtp = Common & {
pageId: "login-reset-otp.ftl";
configuredOtpCredentials: {
userOtpCredentials: {
id: string;
userLabel: string;
}[];
selectedCredentialId: string;
};
};
}
export type UserProfile = {

70
src/login/pages/LoginResetOtp.tsx Normal file
View File

@ -0,0 +1,70 @@
import { Fragment } from "react";
import { clsx } from "keycloakify/tools/clsx";
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";
export default function LoginResetOtp(props: PageProps<Extract<KcContext, { pageId: "login-reset-otp.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
const { getClassName } = useGetClassName({
doUseDefaultCss,
classes
});
const { url, messagesPerField, configuredOtpCredentials } = kcContext;
const { msg, msgStr } = i18n;
return (
<Template
{...{ kcContext, i18n, doUseDefaultCss, classes }}
displayMessage={!messagesPerField.existsError("totp")}
headerNode={msg("doLogIn")}
>
<form id="kc-otp-reset-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
<div className={getClassName("kcInputWrapperClass")}>
<div className={getClassName("kcInfoAreaWrapperClass")}>
<p id="kc-otp-reset-form-description">{msg("otp-reset-description")}</p>
{configuredOtpCredentials.userOtpCredentials.map((otpCredential, index) => (
<Fragment key={otpCredential.id}>
<input
id={`kc-otp-credential-${index}`}
className={getClassName("kcLoginOTPListInputClass")}
type="radio"
name="selectedCredentialId"
value={otpCredential.id}
defaultChecked={otpCredential.id === configuredOtpCredentials.selectedCredentialId}
/>
<label htmlFor={`kc-otp-credential-${index}`} className={getClassName("kcLoginOTPListClass")} tabIndex={index}>
<span className={getClassName("kcLoginOTPListItemHeaderClass")}>
<span className={getClassName("kcLoginOTPListItemIconBodyClass")}>
<i className={getClassName("kcLoginOTPListItemIconClass")} aria-hidden="true"></i>
</span>
<span className={getClassName("kcLoginOTPListItemTitleClass")}>{otpCredential.userLabel}</span>
</span>
</label>
</Fragment>
))}
<div className={getClassName("kcFormGroupClass")}>
<div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
<input
id="kc-otp-reset-form-submit"
className={clsx(
getClassName("kcButtonClass"),
getClassName("kcButtonPrimaryClass"),
getClassName("kcButtonBlockClass"),
getClassName("kcButtonLargeClass")
)}
type="submit"
value={msgStr("doSubmit")}
/>
</div>
</div>
</div>
</div>
</form>
</Template>
);
}