pr review comment

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

themes/src/main/resources/theme/base/login/login-recovery-authn-code-config.ftl

@@ -5,182 +5,188 @@
 <#if section = "header">
     ${msg("recovery-code-config-header")}
 <#elseif section = "form">
-    <!-- warning -->
+        <!-- warning -->
-    <div class="pf-c-alert pf-m-warning pf-m-inline ${properties.kcRecoveryCodesWarning!}" aria-label="Warning alert">
+<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-c-alert__icon">
+<div class="pf-v5-c-alert__icon">
-            <i class="pficon-warning-triangle-o" aria-hidden="true"></i>
+    <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
-        </div>
+</div>
-        <h4 class="pf-c-alert__title">
+<h4 class="pf-v5-c-alert__title">
-            <span class="pf-screen-reader">Warning alert:</span>
+    <span class="pf-screen-reader">Warning alert:</span>
-            ${msg("recovery-code-config-warning-title")}
+    ${msg("recovery-code-config-warning-title")}
-        </h4>
+</h4>
-        <div class="pf-c-alert__description">
+<div class="pf-v5-c-alert__description">
-            <p>${msg("recovery-code-config-warning-message")}</p>
+    <p>${msg("recovery-code-config-warning-message")}</p>
-        </div>
+</div>
-    </div>
+</div>
 
-    <ol id="kc-recovery-codes-list" class="${properties.kcRecoveryCodesList!}">
+<div class="pf-v5-c-panel pf-m-raised">
-        <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
+<div class="pf-v5-c-panel__main">
-            <li><span>${code?counter}:</span> ${code[0..3]}-${code[4..7]}-${code[8..]}</li>
+    <div class="pf-v5-c-panel__main-body">
+        <ol id="kc-recovery-codes-list" class="pf-v5-c-list ${properties.kcRecoveryCodesList!}" role="list">
+            <#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
+            <li>${code[0..3]}-${code[4..7]}-${code[8..]}</li>
         </#list>
     </ol>
+</div>
+</div>
+        </div>
 
-    <!-- actions -->
+        <!-- actions -->
-    <div class="${properties.kcRecoveryCodesActions!}">
+<div class="${properties.kcRecoveryCodesActions!}">
-        <button id="printRecoveryCodes" class="pf-c-button pf-m-link" type="button">
+<button id="printRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button">
-            <i class="pficon-print"></i> ${msg("recovery-codes-print")}
+    <i class="fas fa-print"></i> ${msg("recovery-codes-print")}
-        </button>
+</button>
-        <button id="downloadRecoveryCodes" class="pf-c-button pf-m-link" type="button">
+<button id="downloadRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button">
-            <i class="pficon-save"></i> ${msg("recovery-codes-download")}
+    <i class="fas fa-download"></i> ${msg("recovery-codes-download")}
-        </button>
+</button>
-        <button id="copyRecoveryCodes" class="pf-c-button pf-m-link" type="button">
+<button id="copyRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button">
-            <i class="pficon-blueprint"></i> ${msg("recovery-codes-copy")}
+    <i class="fas fa-copy"></i> ${msg("recovery-codes-copy")}
-        </button>
+</button>
-    </div>
+</div>
 
-    <!-- confirmation checkbox -->
+        <!-- confirmation checkbox -->
-    <div class="${properties.kcFormOptionsClass!}">
+<div class="${properties.kcFormOptionsClass!} pf-v5-u-mt-md">
-        <input class="${properties.kcCheckInputClass!}" type="checkbox" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck"
+<input class="${properties.kcCheckInputClass!}" type="checkbox" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck"
-        onchange="document.getElementById('saveRecoveryAuthnCodesBtn').disabled = !this.checked;"
+       onchange="document.getElementById('saveRecoveryAuthnCodesBtn').disabled = !this.checked;"
-        />
+/>
-        <label for="kcRecoveryCodesConfirmationCheck">${msg("recovery-codes-confirmation-message")}</label>
+<label for="kcRecoveryCodesConfirmationCheck">${msg("recovery-codes-confirmation-message")}</label>
-    </div>
+</div>
 
-    <form action="${url.loginAction}" class="${properties.kcFormGroupClass!}" id="kc-recovery-codes-settings-form" method="post">
+<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="generatedRecoveryAuthnCodes" value="${recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}" />
-        <input type="hidden" name="generatedAt" value="${recoveryAuthnCodesConfigBean.generatedAt?c}" />
+<input type="hidden" name="generatedAt" value="${recoveryAuthnCodesConfigBean.generatedAt?c}" />
-        <input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
+<input type="hidden" id="userLabel" name="userLabel" value="${msg("recovery-codes-label-default")}" />
-        <@passwordCommons.logoutOtherSessions/>
+<@passwordCommons.logoutOtherSessions/>
 
-        <#if isAppInitiatedAction??>
+<#if isAppInitiatedAction??>
-            <input type="submit"
+<input type="submit"
-            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
+       class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
-            id="saveRecoveryAuthnCodesBtn" value="${msg("recovery-codes-action-complete")}"
+       id="saveRecoveryAuthnCodesBtn" value="${msg("recovery-codes-action-complete")}"
-            disabled
+disabled
-            />
+/>
-            <button type="submit"
+<button type="submit"
-                class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}"
+        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")}"
+id="saveRecoveryAuthnCodesBtn" value="${msg("recovery-codes-action-complete")}"
-            disabled
+disabled
-            />
+/>
-        </#if>
-    </form>
-
-    <script>
-        /* copy recovery codes  */
-        function copyRecoveryCodes() {
-            var tmpTextarea = document.createElement("textarea");
-            var codes = document.querySelectorAll("#kc-recovery-codes-list li");
-            for (i = 0; i < codes.length; i++) {
-                tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\n";
-            }
-            document.body.appendChild(tmpTextarea);
-            tmpTextarea.select();
-            document.execCommand("copy");
-            document.body.removeChild(tmpTextarea);
-        }
-
-        var copyButton = document.getElementById("copyRecoveryCodes");
-        copyButton && copyButton.addEventListener("click", function () {
-            copyRecoveryCodes();
-        });
-
-        /* download recovery codes  */
-        function formatCurrentDateTime() {
-            var dt = new Date();
-            var options = {
-                month: 'long',
-                day: 'numeric',
-                year: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                timeZoneName: 'short'
-            };
-
-            return dt.toLocaleString('en-US', options);
-        }
-
-        function parseRecoveryCodeList() {
-            var recoveryCodes = document.querySelectorAll("#kc-recovery-codes-list li");
-            var recoveryCodeList = "";
-
-            for (var i = 0; i < recoveryCodes.length; i++) {
-                var recoveryCodeLiElement = recoveryCodes[i].innerText;
-                recoveryCodeList += recoveryCodeLiElement + "\r\n";
-            }
-
-            return recoveryCodeList;
-        }
-
-        function buildDownloadContent() {
-            var recoveryCodeList = parseRecoveryCodeList();
-            var dt = new Date();
-            var 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) {
-            var 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());
-        }
-
-        var downloadButton = document.getElementById("downloadRecoveryCodes");
-        downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
-
-        /* print recovery codes */
-        function buildPrintContent() {
-            var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
-            var styles =
-                `@page { size: auto;  margin-top: 0; }
-                body { width: 480px; }
-                div { list-style-type: none; 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() {
-            var w = window.open();
-            w.document.write(buildPrintContent());
-            w.print();
-            w.close();
-        }
-
-        var printButton = document.getElementById("printRecoveryCodes");
-        printButton && printButton.addEventListener("click", printRecoveryCodes);
-    </script>
 </#if>
-</@layout.registrationLayout>
+        </form>
+
+<script>
+/* copy recovery codes  */
+function copyRecoveryCodes() {
+    var tmpTextarea = document.createElement("textarea");
+            var codes = document.querySelectorAll("#kc-recovery-codes-list li");
+    for (i = 0; i < codes.length; i++) {
+        tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\n";
+    }
+    document.body.appendChild(tmpTextarea);
+    tmpTextarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(tmpTextarea);
+}
+
+var copyButton = document.getElementById("copyRecoveryCodes");
+copyButton && copyButton.addEventListener("click", function () {
+    copyRecoveryCodes();
+});
+
+/* download recovery codes  */
+function formatCurrentDateTime() {
+    var dt = new Date();
+    var options = {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        timeZoneName: 'short'
+    };
+
+    return dt.toLocaleString('en-US', options);
+}
+
+function parseRecoveryCodeList() {
+            var recoveryCodes = document.querySelectorAll("#kc-recovery-codes-list li");
+    var recoveryCodeList = "";
+
+    for (var i = 0; i < recoveryCodes.length; i++) {
+        var recoveryCodeLiElement = recoveryCodes[i].innerText;
+        recoveryCodeList += recoveryCodeLiElement + "\r\n";
+    }
+
+    return recoveryCodeList;
+}
+
+function buildDownloadContent() {
+    var recoveryCodeList = parseRecoveryCodeList();
+    var dt = new Date();
+    var 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) {
+    var 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());
+}
+
+var downloadButton = document.getElementById("downloadRecoveryCodes");
+downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+/* print recovery codes */
+function buildPrintContent() {
+    var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
+    var styles =
+        `@page { size: auto;  margin-top: 0; }
+        body { width: 480px; }
+        div { list-style-type: none; 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() {
+    var w = window.open();
+    w.document.write(buildPrintContent());
+    w.print();
+    w.close();
+}
+
+var printButton = document.getElementById("printRecoveryCodes");
+printButton && printButton.addEventListener("click", printRecoveryCodes);
+</script>
+        </#if>
+        </@layout.registrationLayout>