From 33b99172296340939683a57ea8a40c8b5f685350 Mon Sep 17 00:00:00 2001
From: George Litos <giorgoslytos@gmail.com>
Date: Mon, 19 Feb 2024 08:58:27 +0200
Subject: [PATCH] fix: locales in account totp page

---
 src/account/TemplateProps.ts            |   8 +-
 src/account/kcContext/KcContext.ts      |   2 +
 src/account/kcContext/kcContextMocks.ts |   4 +-
 src/account/lib/useGetClassName.ts      |   8 +-
 src/account/pages/Totp.tsx              | 101 ++++++++++++------------
 5 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/src/account/TemplateProps.ts b/src/account/TemplateProps.ts
index 1f20c599..c19f3312 100644
--- a/src/account/TemplateProps.ts
+++ b/src/account/TemplateProps.ts
@@ -18,4 +18,10 @@ export type ClassKey =
     | "kcButtonPrimaryClass"
     | "kcButtonLargeClass"
     | "kcButtonDefaultClass"
-    | "kcContentWrapperClass";
+    | "kcContentWrapperClass"
+    | "kcFormClass"
+    | "kcFormGroupClass"
+    | "kcInputWrapperClass"
+    | "kcLabelClass"
+    | "kcInputClass"
+    | "kcInputErrorMessageClass";
diff --git a/src/account/kcContext/KcContext.ts b/src/account/kcContext/KcContext.ts
index 9b8a75cd..ca356144 100644
--- a/src/account/kcContext/KcContext.ts
+++ b/src/account/kcContext/KcContext.ts
@@ -160,6 +160,8 @@ export declare namespace KcContext {
             totpSecret: string;
             otpCredentials: { id: string; userLabel: string }[];
         };
+        mode?: "qr" | "manual" | undefined | null;
+        isAppInitiatedAction: boolean;
         url: {
             accountUrl: string;
             passwordUrl: string;
diff --git a/src/account/kcContext/kcContextMocks.ts b/src/account/kcContext/kcContextMocks.ts
index 0d85c572..0c7b7c52 100644
--- a/src/account/kcContext/kcContextMocks.ts
+++ b/src/account/kcContext/kcContextMocks.ts
@@ -211,7 +211,7 @@ export const kcContextMocks: KcContext[] = [
             manualUrl: "#",
             totpSecret: "G4nsI8lQagRMUchH8jEG",
             otpCredentials: [],
-            supportedApplications: ["FreeOTP", "Google Authenticator"],
+            supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
             policy: {
                 algorithm: "HmacSHA1",
                 digits: 6,
@@ -220,6 +220,8 @@ export const kcContextMocks: KcContext[] = [
                 period: 30
             }
         },
+        mode: "qr",
+        isAppInitiatedAction: false,
         "stateChecker": ""
     })
 ];
diff --git a/src/account/lib/useGetClassName.ts b/src/account/lib/useGetClassName.ts
index f0ee87af..15397ade 100644
--- a/src/account/lib/useGetClassName.ts
+++ b/src/account/lib/useGetClassName.ts
@@ -9,6 +9,12 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
         "kcContentWrapperClass": "row",
         "kcButtonPrimaryClass": "btn-primary",
         "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"
     }
 });
diff --git a/src/account/pages/Totp.tsx b/src/account/pages/Totp.tsx
index 66c0594a..8ce4eb15 100644
--- a/src/account/pages/Totp.tsx
+++ b/src/account/pages/Totp.tsx
@@ -3,6 +3,7 @@ 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";
+import { MessageKey } from "keycloakify/account/i18n/i18n";
 
 export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -11,7 +12,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
         classes
     });
 
-    const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
+    const { totp, mode, messagesPerField } = kcContext;
 
     const { msg, msgStr } = i18n;
 
@@ -24,13 +25,21 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
     return (
         <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">
                     <li>
-                        <p>{msg("loginTotpStep1")}</p>
+                        <p>{msg("totpStep1")}</p>
 
                         <ul id="kc-totp-supported-apps">
                             {totp.supportedApplications.map(app => (
-                                <li>{msg(app as MessageKey)}</li>
+                                <li key={app}>{msg(app as MessageKey)}</li>
                             ))}
                         </ul>
                     </li>
@@ -38,36 +47,36 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                     {mode && mode == "manual" ? (
                         <>
                             <li>
-                                <p>{msg("loginTotpManualStep2")}</p>
+                                <p>{msg("totpManualStep2")}</p>
                                 <p>
                                     <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
                                 </p>
                                 <p>
                                     <a href={totp.qrUrl} id="mode-barcode">
-                                        {msg("loginTotpScanBarcode")}
+                                        {msg("totpScanBarcode")}
                                     </a>
                                 </p>
                             </li>
                             <li>
-                                <p>{msg("loginTotpManualStep3")}</p>
+                                <p>{msg("totpManualStep3")}</p>
                                 <p>
                                     <ul>
                                         <li id="kc-totp-type">
-                                            {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
+                                            {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
                                         </li>
                                         <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 id="kc-totp-digits">
-                                            {msg("loginTotpDigits")}: {totp.policy.digits}
+                                            {msg("totpDigits")}: {totp.policy.digits}
                                         </li>
                                         {totp.policy.type === "totp" ? (
                                             <li id="kc-totp-period">
-                                                {msg("loginTotpInterval")}: {totp.policy.period}
+                                                {msg("totpInterval")}: {totp.policy.period}
                                             </li>
                                         ) : (
                                             <li id="kc-totp-counter">
-                                                {msg("loginTotpCounter")}: {totp.policy.initialCounter}
+                                                {msg("totpCounter")}: {totp.policy.initialCounter}
                                             </li>
                                         )}
                                     </ul>
@@ -76,31 +85,32 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                         </>
                     ) : (
                         <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" />
                             <br />
                             <p>
                                 <a href={totp.manualUrl} id="mode-manual">
-                                    {msg("loginTotpUnableToScan")}
+                                    {msg("totpUnableToScan")}
                                 </a>
                             </p>
                         </li>
                     )}
                     <li>
-                        <p>{msg("loginTotpStep3")}</p>
-                        <p>{msg("loginTotpStep3DeviceName")}</p>
+                        <p>{msg("totpStep3")}</p>
+                        <p>{msg("totpStep3DeviceName")}</p>
                     </li>
                 </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("kcInputWrapperClass")}>
-                            <label htmlFor="totp" className={getClassName("kcLabelClass")}>
+                        <div className="col-sm-2 col-md-2">
+                            <label htmlFor="totp" className="control-label">
                                 {msg("authenticatorCode")}
                             </label>{" "}
                             <span className="required">*</span>
                         </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
+                        <div className="col-sm-10 col-md-10">
                             <input
                                 type="text"
                                 id="totp"
@@ -121,13 +131,13 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                     </div>
 
                     <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcInputWrapperClass")}>
+                        <div className="col-sm-2 col-md-2">
                             <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
-                                {msg("loginTotpDeviceName")}
+                                {msg("totpDeviceName")}
                             </label>{" "}
                             {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
                         </div>
-                        <div className={getClassName("kcInputWrapperClass")}>
+                        <div className="col-sm-10 col-md-10">
                             <input
                                 type="text"
                                 id="userLabel"
@@ -144,41 +154,28 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                         </div>
                     </div>
 
-                    {isAppInitiatedAction ? (
-                        <>
-                            <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>
-                        </>
-                    ) : (
+                    <div className="text-right kcFormGroupClass">
                         <input
                             type="submit"
                             className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
                             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>
             </>
         </Template>