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

fix: locales in account totp page

Browse Source
This commit is contained in:
George Litos 2024-02-19 08:58:27 +02:00
parent 319d7dbe94
commit 33b9917229
5 changed files with 68 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/account/TemplateProps.ts
View File

@ -18,4 +18,10 @@ export type ClassKey =
| "kcButtonPrimaryClass" | "kcButtonPrimaryClass"
| "kcButtonLargeClass" | "kcButtonLargeClass"
| "kcButtonDefaultClass" | "kcButtonDefaultClass"
| "kcContentWrapperClass"; | "kcContentWrapperClass"
| "kcFormClass"
| "kcFormGroupClass"
| "kcInputWrapperClass"
| "kcLabelClass"
| "kcInputClass"
| "kcInputErrorMessageClass";

2
src/account/kcContext/KcContext.ts
View File

@ -160,6 +160,8 @@ export declare namespace KcContext {
totpSecret: string; totpSecret: string;
otpCredentials: { id: string; userLabel: string }[]; otpCredentials: { id: string; userLabel: string }[];
}; };
mode?: "qr" | "manual" | undefined | null;
isAppInitiatedAction: boolean;
url: { url: {
accountUrl: string; accountUrl: string;
passwordUrl: string; passwordUrl: string;

4
src/account/kcContext/kcContextMocks.ts
View File

@ -211,7 +211,7 @@ export const kcContextMocks: KcContext[] = [
manualUrl: "#", manualUrl: "#",
totpSecret: "G4nsI8lQagRMUchH8jEG", totpSecret: "G4nsI8lQagRMUchH8jEG",
otpCredentials: [], otpCredentials: [],
supportedApplications: ["FreeOTP", "Google Authenticator"], supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
policy: { policy: {
algorithm: "HmacSHA1", algorithm: "HmacSHA1",
digits: 6, digits: 6,
@ -220,6 +220,8 @@ export const kcContextMocks: KcContext[] = [
period: 30 period: 30
} }
}, },
mode: "qr",
isAppInitiatedAction: false,
"stateChecker": "" "stateChecker": ""
}) })
]; ];

8
src/account/lib/useGetClassName.ts
View File

@ -9,6 +9,12 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
"kcContentWrapperClass": "row", "kcContentWrapperClass": "row",
"kcButtonPrimaryClass": "btn-primary", "kcButtonPrimaryClass": "btn-primary",
"kcButtonLargeClass": "btn-lg", "kcButtonLargeClass": "btn-lg",
"kcButtonDefaultClass": "btn-default" "kcButtonDefaultClass": "btn-default",
"kcFormClass": "form-horizontal",
"kcFormGroupClass": "form-group",
"kcInputWrapperClass": "col-xs-12 col-sm-12 col-md-12 col-lg-12",
"kcLabelClass": "control-label",
"kcInputClass": "form-control",
"kcInputErrorMessageClass": "pf-c-form__helper-text pf-m-error required kc-feedback-text"
} }
}); });

101
src/account/pages/Totp.tsx
View File

@ -3,6 +3,7 @@ import type { PageProps } from "keycloakify/account/pages/PageProps";
import { useGetClassName } from "keycloakify/account/lib/useGetClassName"; import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
import type { KcContext } from "../kcContext"; import type { KcContext } from "../kcContext";
import type { I18n } from "../i18n"; import type { I18n } from "../i18n";
import { MessageKey } from "keycloakify/account/i18n/i18n";
export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) { export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@ -11,7 +12,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
classes classes
}); });
const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext; const { totp, mode, messagesPerField } = kcContext;
const { msg, msgStr } = i18n; const { msg, msgStr } = i18n;
@ -24,13 +25,21 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
return ( return (
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp"> <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp">
<> <>
<div className="row">
<div className="col-md-10">
<h2>{msg("changePasswordHtmlTitle")}</h2>
</div>
<div className="col-md-2 subtitle">
<span className="subtitle">{msg("allFieldsRequired")}</span>
</div>
</div>
<ol id="kc-totp-settings"> <ol id="kc-totp-settings">
<li> <li>
<p>{msg("loginTotpStep1")}</p> <p>{msg("totpStep1")}</p>
<ul id="kc-totp-supported-apps"> <ul id="kc-totp-supported-apps">
{totp.supportedApplications.map(app => ( {totp.supportedApplications.map(app => (
<li>{msg(app as MessageKey)}</li> <li key={app}>{msg(app as MessageKey)}</li>
))} ))}
</ul> </ul>
</li> </li>
@ -38,36 +47,36 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
{mode && mode == "manual" ? ( {mode && mode == "manual" ? (
<> <>
<li> <li>
<p>{msg("loginTotpManualStep2")}</p> <p>{msg("totpManualStep2")}</p>
<p> <p>
<span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span> <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
</p> </p>
<p> <p>
<a href={totp.qrUrl} id="mode-barcode"> <a href={totp.qrUrl} id="mode-barcode">
{msg("loginTotpScanBarcode")} {msg("totpScanBarcode")}
</a> </a>
</p> </p>
</li> </li>
<li> <li>
<p>{msg("loginTotpManualStep3")}</p> <p>{msg("totpManualStep3")}</p>
<p> <p>
<ul> <ul>
<li id="kc-totp-type"> <li id="kc-totp-type">
{msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)} {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
</li> </li>
<li id="kc-totp-algorithm"> <li id="kc-totp-algorithm">
{msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm} {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
</li> </li>
<li id="kc-totp-digits"> <li id="kc-totp-digits">
{msg("loginTotpDigits")}: {totp.policy.digits} {msg("totpDigits")}: {totp.policy.digits}
</li> </li>
{totp.policy.type === "totp" ? ( {totp.policy.type === "totp" ? (
<li id="kc-totp-period"> <li id="kc-totp-period">
{msg("loginTotpInterval")}: {totp.policy.period} {msg("totpInterval")}: {totp.policy.period}
</li> </li>
) : ( ) : (
<li id="kc-totp-counter"> <li id="kc-totp-counter">
{msg("loginTotpCounter")}: {totp.policy.initialCounter} {msg("totpCounter")}: {totp.policy.initialCounter}
</li> </li>
)} )}
</ul> </ul>
@ -76,31 +85,32 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
</> </>
) : ( ) : (
<li> <li>
<p>{msg("loginTotpStep2")}</p> <p>{msg("totpStep2")}</p>
<img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" /> <img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" />
<br /> <br />
<p> <p>
<a href={totp.manualUrl} id="mode-manual"> <a href={totp.manualUrl} id="mode-manual">
{msg("loginTotpUnableToScan")} {msg("totpUnableToScan")}
</a> </a>
</p> </p>
</li> </li>
)} )}
<li> <li>
<p>{msg("loginTotpStep3")}</p> <p>{msg("totpStep3")}</p>
<p>{msg("loginTotpStep3DeviceName")}</p> <p>{msg("totpStep3DeviceName")}</p>
</li> </li>
</ol> </ol>
{/* <form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post"> */}
<form action={url.loginAction} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post"> <form className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
<div className={getClassName("kcFormGroupClass")}> <div className={getClassName("kcFormGroupClass")}>
<div className={getClassName("kcInputWrapperClass")}> <div className="col-sm-2 col-md-2">
<label htmlFor="totp" className={getClassName("kcLabelClass")}> <label htmlFor="totp" className="control-label">
{msg("authenticatorCode")} {msg("authenticatorCode")}
</label>{" "} </label>{" "}
<span className="required">*</span> <span className="required">*</span>
</div> </div>
<div className={getClassName("kcInputWrapperClass")}> <div className="col-sm-10 col-md-10">
<input <input
type="text" type="text"
id="totp" id="totp"
@ -121,13 +131,13 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
</div> </div>
<div className={getClassName("kcFormGroupClass")}> <div className={getClassName("kcFormGroupClass")}>
<div className={getClassName("kcInputWrapperClass")}> <div className="col-sm-2 col-md-2">
<label htmlFor="userLabel" className={getClassName("kcLabelClass")}> <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
{msg("loginTotpDeviceName")} {msg("totpDeviceName")}
</label>{" "} </label>{" "}
{totp.otpCredentials.length >= 1 && <span className="required">*</span>} {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
</div> </div>
<div className={getClassName("kcInputWrapperClass")}> <div className="col-sm-10 col-md-10">
<input <input
type="text" type="text"
id="userLabel" id="userLabel"
@ -144,41 +154,28 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
</div> </div>
</div> </div>
{isAppInitiatedAction ? ( <div className="text-right kcFormGroupClass">
<>
<input
type="submit"
className={clsx(
getClassName("kcButtonClass"),
getClassName("kcButtonPrimaryClass"),
getClassName("kcButtonLargeClass")
)}
id="saveTOTPBtn"
value={msgStr("doSubmit")}
/>
<button
type="submit"
className={clsx(
getClassName("kcButtonClass"),
getClassName("kcButtonDefaultClass"),
getClassName("kcButtonLargeClass"),
getClassName("kcButtonLargeClass")
)}
id="cancelTOTPBtn"
name="cancel-aia"
value="true"
>
{msg("doCancel")}
</button>
</>
) : (
<input <input
type="submit" type="submit"
className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))} className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
id="saveTOTPBtn" id="saveTOTPBtn"
value={msgStr("doSubmit")} value={msgStr("doSave")}
/> />
)} <button
type="submit"
className={clsx(
getClassName("kcButtonClass"),
getClassName("kcButtonDefaultClass"),
getClassName("kcButtonLargeClass"),
getClassName("kcButtonLargeClass")
)}
id="cancelTOTPBtn"
name="cancel-aia"
value="true"
>
{msg("doCancel")}
</button>
</div>
</form> </form>
</> </>
</Template> </Template>