From f49d20e47c09ba2b6cbb0c6f88c60429533ef763 Mon Sep 17 00:00:00 2001
From: giorgoslytos <giorgoslytos@gmail.com>
Date: Mon, 19 Feb 2024 11:57:03 +0200
Subject: [PATCH] feat: Totp account page fixed and completed

---
 src/account/kcContext/KcContext.ts      |   1 +
 src/account/kcContext/kcContextMocks.ts |   1 +
 src/account/pages/Totp.tsx              | 339 ++++++++++++++----------
 stories/account/pages/Totp.stories.tsx  |  62 +++++
 4 files changed, 260 insertions(+), 143 deletions(-)

diff --git a/src/account/kcContext/KcContext.ts b/src/account/kcContext/KcContext.ts
index ca356144..1cce3b2c 100644
--- a/src/account/kcContext/KcContext.ts
+++ b/src/account/kcContext/KcContext.ts
@@ -138,6 +138,7 @@ export declare namespace KcContext {
     export type Totp = Common & {
         pageId: "totp.ftl";
         totp: {
+            enabled: boolean;
             totpSecretEncoded: string;
             qrUrl: string;
             policy: {
diff --git a/src/account/kcContext/kcContextMocks.ts b/src/account/kcContext/kcContextMocks.ts
index 0c7b7c52..6f52d8d3 100644
--- a/src/account/kcContext/kcContextMocks.ts
+++ b/src/account/kcContext/kcContextMocks.ts
@@ -204,6 +204,7 @@ export const kcContextMocks: KcContext[] = [
         ...kcContextCommonMock,
         "pageId": "totp.ftl",
         totp: {
+            enabled: true,
             totpSecretEncoded: "KVVF G2BY N4YX S6LB IUYT K2LH IFYE 4SBV",
             qrUrl: "#",
             totpSecretQrCode:
diff --git a/src/account/pages/Totp.tsx b/src/account/pages/Totp.tsx
index 8ce4eb15..838d0bf7 100644
--- a/src/account/pages/Totp.tsx
+++ b/src/account/pages/Totp.tsx
@@ -12,7 +12,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
         classes
     });
 
-    const { totp, mode, messagesPerField } = kcContext;
+    const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
 
     const { msg, msgStr } = i18n;
 
@@ -27,156 +27,209 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
             <>
                 <div className="row">
                     <div className="col-md-10">
-                        <h2>{msg("changePasswordHtmlTitle")}</h2>
+                        <h2>{msg("authenticatorTitle")}</h2>
                     </div>
-                    <div className="col-md-2 subtitle">
-                        <span className="subtitle">{msg("allFieldsRequired")}</span>
-                    </div>
-                </div>
-                <ol id="kc-totp-settings">
-                    <li>
-                        <p>{msg("totpStep1")}</p>
-
-                        <ul id="kc-totp-supported-apps">
-                            {totp.supportedApplications.map(app => (
-                                <li key={app}>{msg(app as MessageKey)}</li>
-                            ))}
-                        </ul>
-                    </li>
-
-                    {mode && mode == "manual" ? (
-                        <>
-                            <li>
-                                <p>{msg("totpManualStep2")}</p>
-                                <p>
-                                    <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
-                                </p>
-                                <p>
-                                    <a href={totp.qrUrl} id="mode-barcode">
-                                        {msg("totpScanBarcode")}
-                                    </a>
-                                </p>
-                            </li>
-                            <li>
-                                <p>{msg("totpManualStep3")}</p>
-                                <p>
-                                    <ul>
-                                        <li id="kc-totp-type">
-                                            {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
-                                        </li>
-                                        <li id="kc-totp-algorithm">
-                                            {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
-                                        </li>
-                                        <li id="kc-totp-digits">
-                                            {msg("totpDigits")}: {totp.policy.digits}
-                                        </li>
-                                        {totp.policy.type === "totp" ? (
-                                            <li id="kc-totp-period">
-                                                {msg("totpInterval")}: {totp.policy.period}
-                                            </li>
-                                        ) : (
-                                            <li id="kc-totp-counter">
-                                                {msg("totpCounter")}: {totp.policy.initialCounter}
-                                            </li>
-                                        )}
-                                    </ul>
-                                </p>
-                            </li>
-                        </>
-                    ) : (
-                        <li>
-                            <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("totpUnableToScan")}
-                                </a>
-                            </p>
-                        </li>
-                    )}
-                    <li>
-                        <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 className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className="col-sm-2 col-md-2">
-                            <label htmlFor="totp" className="control-label">
-                                {msg("authenticatorCode")}
-                            </label>{" "}
+                    {totp.otpCredentials.length === 0 && (
+                        <div className="subtitle col-md-2">
                             <span className="required">*</span>
+                            {msg("requiredFields")}
                         </div>
-                        <div className="col-sm-10 col-md-10">
-                            <input
-                                type="text"
-                                id="totp"
-                                name="totp"
-                                autoComplete="off"
-                                className={getClassName("kcInputClass")}
-                                aria-invalid={messagesPerField.existsError("totp")}
-                            />
-
-                            {messagesPerField.existsError("totp") && (
-                                <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
-                                    {messagesPerField.get("totp")}
-                                </span>
+                    )}
+                </div>
+                {totp.enabled && (
+                    <table className="table table-bordered table-striped">
+                        <thead>
+                            {totp.otpCredentials.length > 1 ? (
+                                <tr>
+                                    <th colSpan={4}>{msg("configureAuthenticators")}</th>
+                                </tr>
+                            ) : (
+                                <tr>
+                                    <th colSpan={3}>{msg("configureAuthenticators")}</th>
+                                </tr>
                             )}
-                        </div>
-                        <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
-                        {mode && <input type="hidden" id="mode" value={mode} />}
-                    </div>
+                        </thead>
+                        <tbody>
+                            {totp.otpCredentials.map((credential, index) => (
+                                <tr key={index}>
+                                    <td className="provider">{msg("mobile")}</td>
+                                    {totp.otpCredentials.length > 1 && <td className="provider">{credential.id}</td>}
+                                    <td className="provider">{credential.userLabel || ""}</td>
+                                    <td className="action">
+                                        <form action={url.totpUrl} method="post" className="form-inline">
+                                            <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                                            <input type="hidden" id="submitAction" name="submitAction" value="Delete" />
+                                            <input type="hidden" id="credentialId" name="credentialId" value={credential.id} />
+                                            <button id={`remove-mobile-${index}`} className="btn btn-default">
+                                                <i className="pficon pficon-delete"></i>
+                                            </button>
+                                        </form>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                )}
+                {!totp.enabled && (
+                    <div>
+                        <hr />
+                        <ol id="kc-totp-settings">
+                            <li>
+                                <p>{msg("totpStep1")}</p>
 
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className="col-sm-2 col-md-2">
-                            <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
-                                {msg("totpDeviceName")}
-                            </label>{" "}
-                            {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
-                        </div>
-                        <div className="col-sm-10 col-md-10">
-                            <input
-                                type="text"
-                                id="userLabel"
-                                name="userLabel"
-                                autoComplete="off"
-                                className={getClassName("kcInputClass")}
-                                aria-invalid={messagesPerField.existsError("userLabel")}
-                            />
-                            {messagesPerField.existsError("userLabel") && (
-                                <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
-                                    {messagesPerField.get("userLabel")}
-                                </span>
-                            )}
-                        </div>
-                    </div>
+                                <ul id="kc-totp-supported-apps">
+                                    {totp.supportedApplications.map(app => (
+                                        <li key={app}>{msg(app as MessageKey)}</li>
+                                    ))}
+                                </ul>
+                            </li>
 
-                    <div className="text-right kcFormGroupClass">
-                        <input
-                            type="submit"
-                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
-                            id="saveTOTPBtn"
-                            value={msgStr("doSave")}
-                        />
-                        <button
-                            type="submit"
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonDefaultClass"),
-                                getClassName("kcButtonLargeClass"),
-                                getClassName("kcButtonLargeClass")
+                            {mode && mode == "manual" ? (
+                                <>
+                                    <li>
+                                        <p>{msg("totpManualStep2")}</p>
+                                        <p>
+                                            <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+                                        </p>
+                                        <p>
+                                            <a href={totp.qrUrl} id="mode-barcode">
+                                                {msg("totpScanBarcode")}
+                                            </a>
+                                        </p>
+                                    </li>
+                                    <li>
+                                        <p>{msg("totpManualStep3")}</p>
+                                        <p>
+                                            <ul>
+                                                <li id="kc-totp-type">
+                                                    {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
+                                                </li>
+                                                <li id="kc-totp-algorithm">
+                                                    {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                                </li>
+                                                <li id="kc-totp-digits">
+                                                    {msg("totpDigits")}: {totp.policy.digits}
+                                                </li>
+                                                {totp.policy.type === "totp" ? (
+                                                    <li id="kc-totp-period">
+                                                        {msg("totpInterval")}: {totp.policy.period}
+                                                    </li>
+                                                ) : (
+                                                    <li id="kc-totp-counter">
+                                                        {msg("totpCounter")}: {totp.policy.initialCounter}
+                                                    </li>
+                                                )}
+                                            </ul>
+                                        </p>
+                                    </li>
+                                </>
+                            ) : (
+                                <li>
+                                    <p>{msg("totpStep2")}</p>
+                                    <p>
+                                        <img
+                                            id="kc-totp-secret-qr-code"
+                                            src={`data:image/png;base64, ${totp.totpSecretQrCode}`}
+                                            alt="Figure: Barcode"
+                                        />
+                                    </p>
+                                    <p>
+                                        <a href={totp.manualUrl} id="mode-manual">
+                                            {msg("totpUnableToScan")}
+                                        </a>
+                                    </p>
+                                </li>
                             )}
-                            id="cancelTOTPBtn"
-                            name="cancel-aia"
-                            value="true"
-                        >
-                            {msg("doCancel")}
-                        </button>
+                            <li>
+                                <p>{msg("totpStep3")}</p>
+                                <p>{msg("totpStep3DeviceName")}</p>
+                            </li>
+                        </ol>
+                        <hr />
+                        <form action={url.totpUrl} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
+                            <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                            <div className={getClassName("kcFormGroupClass")}>
+                                <div className="col-sm-2 col-md-2">
+                                    <label htmlFor="totp" className="control-label">
+                                        {msg("authenticatorCode")}
+                                    </label>
+                                    <span className="required">*</span>
+                                </div>
+                                <div className="col-sm-10 col-md-10">
+                                    <input
+                                        type="text"
+                                        id="totp"
+                                        name="totp"
+                                        autoComplete="off"
+                                        className={getClassName("kcInputClass")}
+                                        aria-invalid={messagesPerField.existsError("totp")}
+                                    />
+
+                                    {messagesPerField.existsError("totp") && (
+                                        <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                            {messagesPerField.get("totp")}
+                                        </span>
+                                    )}
+                                </div>
+                                <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
+                                {mode && <input type="hidden" id="mode" value={mode} />}
+                            </div>
+
+                            <div className={getClassName("kcFormGroupClass")}>
+                                <div className="col-sm-2 col-md-2">
+                                    <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
+                                        {msg("totpDeviceName")}
+                                    </label>
+                                    {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
+                                </div>
+                                <div className="col-sm-10 col-md-10">
+                                    <input
+                                        type="text"
+                                        id="userLabel"
+                                        name="userLabel"
+                                        autoComplete="off"
+                                        className={getClassName("kcInputClass")}
+                                        aria-invalid={messagesPerField.existsError("userLabel")}
+                                    />
+                                    {messagesPerField.existsError("userLabel") && (
+                                        <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                            {messagesPerField.get("userLabel")}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div id="kc-form-buttons" className={clsx(getClassName("kcFormGroupClass"), "text-right")}>
+                                <div className={getClassName("kcInputWrapperClass")}>
+                                    <input
+                                        type="submit"
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonPrimaryClass"),
+                                            getClassName("kcButtonLargeClass")
+                                        )}
+                                        id="saveTOTPBtn"
+                                        value={msgStr("doSave")}
+                                    />
+                                    <button
+                                        type="submit"
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonDefaultClass"),
+                                            getClassName("kcButtonLargeClass"),
+                                            getClassName("kcButtonLargeClass")
+                                        )}
+                                        id="cancelTOTPBtn"
+                                        name="submitAction"
+                                        value="Cancel"
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
                     </div>
-                </form>
+                )}
             </>
         </Template>
     );
diff --git a/stories/account/pages/Totp.stories.tsx b/stories/account/pages/Totp.stories.tsx
index 4807f799..265d76a6 100644
--- a/stories/account/pages/Totp.stories.tsx
+++ b/stories/account/pages/Totp.stories.tsx
@@ -25,6 +25,68 @@ export const Default = () => (
     <PageStory
         kcContext={{
             totp: {
+                enabled: false,
+                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
+                totpSecretQrCode:
+                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                otpCredentials: []
+            },
+            url: {
+                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                logUrl: "http://localhost:8080/realms/master/account/log",
+                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                accountUrl: "http://localhost:8080/realms/master/account/",
+                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                totpUrl: "http://localhost:8080/realms/master/account/totp",
+                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
+                passwordUrl: "http://localhost:8080/realms/master/account/password"
+            }
+        }}
+    />
+);
+
+export const WithTotpEnabled = () => (
+    <PageStory
+        kcContext={{
+            totp: {
+                enabled: true,
+                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
+                totpSecretQrCode:
+                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                otpCredentials: []
+            },
+            url: {
+                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                logUrl: "http://localhost:8080/realms/master/account/log",
+                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                accountUrl: "http://localhost:8080/realms/master/account/",
+                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                totpUrl: "http://localhost:8080/realms/master/account/totp",
+                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
+                passwordUrl: "http://localhost:8080/realms/master/account/password"
+            }
+        }}
+    />
+);
+
+export const WithManualMode = () => (
+    <PageStory
+        kcContext={{
+            mode: "manual",
+            totp: {
+                enabled: false,
                 totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
                 totpSecret: "8ubHJRTUtb2ayv0GAqgT",
                 manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",