From 0a5a08229fcb9de8e8cbe2fbc13da51968749f7a Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Mon, 15 Jul 2024 14:47:29 +0200
Subject: [PATCH] Added template overrides (#31106)

* Added template overrides

fixes: #31021
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* pr review comment

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

* * removed duplicated javascript and fixed formatting
* addressed PR comments

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 .../login-recovery-authn-code-config.ftl      | 179 ++++++++++++++++++
 .../login/resources/css/styles.css            |   7 +
 .../login/select-authenticator.ftl            |  36 ++++
 3 files changed, 222 insertions(+)
 create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl
 create mode 100644 themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl

diff --git a/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl b/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl
new file mode 100644
index 0000000000..e895cf137f
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl
@@ -0,0 +1,179 @@
+<#import "template.ftl" as layout>
+<#import "password-commons.ftl" as passwordCommons>
+<@layout.registrationLayout; section>
+
+<#if section = "header">
+    ${msg("recovery-code-config-header")}
+<#elseif section = "form">
+    <!-- warning -->
+    <div class="pf-v5-c-alert pf-m-warning pf-m-inline pf-v5-u-mb-md ${properties.kcRecoveryCodesWarning!}" aria-label="Warning alert">
+        <div class="pf-v5-c-alert__icon">
+            <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
+        </div>
+        <h4 class="pf-v5-c-alert__title">
+            <span class="pf-screen-reader">Warning alert:</span>
+            ${msg("recovery-code-config-warning-title")}
+        </h4>
+        <div class="pf-v5-c-alert__description">
+            <p>${msg("recovery-code-config-warning-message")}</p>
+        </div>
+    </div>
+
+    <div class="pf-v5-c-panel pf-m-raised">
+        <div class="pf-v5-c-panel__main">
+            <div class="pf-v5-c-panel__main-body">
+            <ol id="kc-recovery-codes-list" class="pf-v5-c-list" role="list">
+                <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
+                    <li>${code[0..3]}-${code[4..7]}-${code[8..]}</li>
+                </#list>
+            </ol>
+            </div>
+        </div>
+    </div>
+
+    <!-- actions -->
+    <div class="${properties.kcRecoveryCodesActions!}">
+        <button id="printRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button" onclick="printRecoveryCodes()">
+            <i class="fas fa-print"></i> ${msg("recovery-codes-print")}
+        </button>
+        <button id="downloadRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button" onclick="downloadRecoveryCodes()">
+            <i class="fas fa-download"></i> ${msg("recovery-codes-download")}
+        </button>
+        <button id="copyRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button" onclick="copyRecoveryCodes()">
+            <i class="fas fa-copy"></i> ${msg("recovery-codes-copy")}
+        </button>
+    </div>
+
+    <!-- confirmation checkbox -->
+    <div class="${properties.kcFormOptionsClass!} pf-v5-u-mt-md">
+        <input class="${properties.kcCheckInputClass!}" type="checkbox" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck"
+        onchange="document.getElementById('saveRecoveryAuthnCodesBtn').disabled = !this.checked;"
+        />
+        <label for="kcRecoveryCodesConfirmationCheck">${msg("recovery-codes-confirmation-message")}</label>
+    </div>
+
+    <form action="${url.loginAction}" class="${properties.kcFormGroupClass!}" id="kc-recovery-codes-settings-form" method="post">
+        <input type="hidden" name="generatedRecoveryAuthnCodes" value="${recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}" />
+        <input type="hidden" name="generatedAt" value="${recoveryAuthnCodesConfigBean.generatedAt?c}" />
+        <input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
+        <@passwordCommons.logoutOtherSessions/>
+
+        <#if isAppInitiatedAction??>
+            <input type="submit"
+            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
+            id="saveRecoveryAuthnCodesBtn" value="${msg("recovery-codes-action-complete")}"
+            disabled
+            />
+            <button type="submit"
+                class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} pf-m-link"
+                id="cancelRecoveryAuthnCodesBtn" name="cancel-aia" value="true">${msg("recovery-codes-action-cancel")}
+            </button>
+        <#else>
+            <input type="submit"
+            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
+            id="saveRecoveryAuthnCodesBtn" value="${msg("recovery-codes-action-complete")}"
+            disabled
+            />
+        </#if>
+    </form>
+
+    <script>
+        /* copy recovery codes  */
+        function copyRecoveryCodes() {
+            const tmpTextarea = document.createElement("textarea");
+            document.body.appendChild(parseRecoveryCodeList());
+            tmpTextarea.select();
+            document.execCommand("copy");
+            document.body.removeChild(tmpTextarea);
+        }
+
+        /* download recovery codes  */
+        function formatCurrentDateTime() {
+            const dt = new Date();
+            const options = {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZoneName: 'short'
+            };
+
+            return dt.toLocaleString('en-US', options);
+        }
+
+        function parseRecoveryCodeList() {
+            const recoveryCodes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
+            const recoveryCodeList = "";
+
+            for (let i = 0; i < recoveryCodes.length; i++) {
+                const recoveryCodeLiElement = recoveryCodes[i].innerText;
+                <#noparse>
+                recoveryCodeList += `${i}: ${recoveryCodeLiElement}\r\n`;
+                </#noparse>
+            }
+
+            return recoveryCodeList;
+        }
+
+        function buildDownloadContent() {
+            const recoveryCodeList = parseRecoveryCodeList();
+            const dt = new Date();
+            const options = {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric',
+                hour: 'numeric',
+                minute: 'numeric',
+                timeZoneName: 'short'
+            };
+
+            return fileBodyContent =
+                "${msg("recovery-codes-download-file-header")}\n\n" +
+                recoveryCodeList + "\n" +
+                "${msg("recovery-codes-download-file-description")}\n\n" +
+                "${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime();
+        }
+
+        function setUpDownloadLinkAndDownload(filename, text) {
+            const el = document.createElement('a');
+            el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+            el.setAttribute('download', filename);
+            el.style.display = 'none';
+            document.body.appendChild(el);
+            el.click();
+            document.body.removeChild(el);
+        }
+
+        function downloadRecoveryCodes() {
+            setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+        }
+
+        /* print recovery codes */
+        function buildPrintContent() {
+            const recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').parentNode.innerHTML;
+            const styles =
+                `@page { size: auto;  margin-top: 0; }
+                body { width: 480px; }
+                div { font-family: monospace }
+                p:first-of-type { margin-top: 48px }`;
+
+            return printFileContent =
+                "<html><style>" + styles + "</style><body>" +
+                "<title>kc-download-recovery-codes</title>" +
+                "<p>${msg("recovery-codes-download-file-header")}</p>" +
+                "<div>" + recoveryCodeListHTML + "</div>" +
+                "<p>${msg("recovery-codes-download-file-description")}</p>" +
+                "<p>${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime() + "</p>" +
+                "</body></html>";
+        }
+
+        function printRecoveryCodes() {
+            const w = window.open();
+            w.document.write(buildPrintContent());
+            w.print();
+            w.close();
+        }
+    </script>
+</#if>
+</@layout.registrationLayout>
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
index 9e816fcf7d..3d58c96acb 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
+++ b/themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
@@ -69,3 +69,10 @@ div.kc-logo-text span {
     border-color: transparent black transparent transparent;
 }
 
+#kc-recovery-codes-list {
+    columns: 2;
+}
+
+#certificate_subjectDN {
+    overflow-wrap: break-word
+}
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl b/themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl
new file mode 100644
index 0000000000..f14db8e929
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak.v2/login/select-authenticator.ftl
@@ -0,0 +1,36 @@
+<#import "template.ftl" as layout>
+<@layout.registrationLayout displayInfo=false; section>
+    <#if section = "header" || section = "show-username">
+        <#if section = "header">
+            ${msg("loginChooseAuthenticator")}
+        </#if>
+    <#elseif section = "form">
+
+        <form id="kc-select-credential-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
+            <ul class="pf-v5-c-data-list" role="list">
+                <#list auth.authenticationSelections as authenticationSelection>
+                <li class="pf-v5-c-data-list__item pf-m-clickable">
+                    <div class="pf-v5-c-data-list__item-row" onclick="document.forms[0].submit()">
+                        <div class="pf-v5-c-data-list__item-content">
+                            <div class="pf-v5-c-data-list__cell pf-m-icon">
+                                <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
+                            </div>
+                            <div class="pf-v5-c-data-list__cell pf-m-no-fill">
+                                <h2 class="pf-v5-u-font-family-heading">${msg('${authenticationSelection.displayName}')}</h2>
+                            </div>
+                            <div class="pf-v5-c-data-list__cell pf-m-no-fill">
+                                ${msg('${authenticationSelection.helpText}')}
+                            </div>
+                        </div>
+                        <div class="pf-v5-c-data-list__item-action">
+                            <i class="${properties.kcSelectAuthListItemArrowIconClass!}" aria-hidden="true"></i>
+                        </div>
+                    </div>
+                </li>
+            </#list>
+            </ul>
+        </form>
+
+    </#if>
+</@layout.registrationLayout>
+