pr review comment

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-07-09 12:26:58 +02:00 committed by Stan Silvert
parent 00fc01ab06
commit 236f22a472

View file

@ -6,74 +6,80 @@
${msg("recovery-code-config-header")}
<#elseif section = "form">
<!-- warning -->
<div class="pf-c-alert pf-m-warning pf-m-inline ${properties.kcRecoveryCodesWarning!}" aria-label="Warning alert">
<div class="pf-c-alert__icon">
<i class="pficon-warning-triangle-o" aria-hidden="true"></i>
</div>
<h4 class="pf-c-alert__title">
<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-c-alert__description">
</h4>
<div class="pf-v5-c-alert__description">
<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">
<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 ${properties.kcRecoveryCodesList!}" role="list">
<#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
<li><span>${code?counter}:</span> ${code[0..3]}-${code[4..7]}-${code[8..]}</li>
<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-c-button pf-m-link" type="button">
<i class="pficon-print"></i> ${msg("recovery-codes-print")}
</button>
<button id="downloadRecoveryCodes" class="pf-c-button pf-m-link" type="button">
<i class="pficon-save"></i> ${msg("recovery-codes-download")}
</button>
<button id="copyRecoveryCodes" class="pf-c-button pf-m-link" type="button">
<i class="pficon-blueprint"></i> ${msg("recovery-codes-copy")}
</button>
</div>
<div class="${properties.kcRecoveryCodesActions!}">
<button id="printRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button">
<i class="fas fa-print"></i> ${msg("recovery-codes-print")}
</button>
<button id="downloadRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button">
<i class="fas fa-download"></i> ${msg("recovery-codes-download")}
</button>
<button id="copyRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button">
<i class="fas fa-copy"></i> ${msg("recovery-codes-copy")}
</button>
</div>
<!-- confirmation checkbox -->
<div class="${properties.kcFormOptionsClass!}">
<input class="${properties.kcCheckInputClass!}" type="checkbox" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck"
<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>
/>
<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/>
<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"
<#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!} ${properties.kcButtonLargeClass!}"
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>
id="saveRecoveryAuthnCodesBtn" value="${msg("recovery-codes-action-complete")}"
disabled
/>
</#if>
</form>
<script>
/* copy recovery codes */
function copyRecoveryCodes() {
<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++) {
@ -83,15 +89,15 @@
tmpTextarea.select();
document.execCommand("copy");
document.body.removeChild(tmpTextarea);
}
}
var copyButton = document.getElementById("copyRecoveryCodes");
copyButton && copyButton.addEventListener("click", function () {
var copyButton = document.getElementById("copyRecoveryCodes");
copyButton && copyButton.addEventListener("click", function () {
copyRecoveryCodes();
});
});
/* download recovery codes */
function formatCurrentDateTime() {
/* download recovery codes */
function formatCurrentDateTime() {
var dt = new Date();
var options = {
month: 'long',
@ -103,9 +109,9 @@
};
return dt.toLocaleString('en-US', options);
}
}
function parseRecoveryCodeList() {
function parseRecoveryCodeList() {
var recoveryCodes = document.querySelectorAll("#kc-recovery-codes-list li");
var recoveryCodeList = "";
@ -115,9 +121,9 @@
}
return recoveryCodeList;
}
}
function buildDownloadContent() {
function buildDownloadContent() {
var recoveryCodeList = parseRecoveryCodeList();
var dt = new Date();
var options = {
@ -134,9 +140,9 @@
recoveryCodeList + "\n" +
"${msg("recovery-codes-download-file-description")}\n\n" +
"${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime();
}
}
function setUpDownloadLinkAndDownload(filename, text) {
function setUpDownloadLinkAndDownload(filename, text) {
var el = document.createElement('a');
el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
el.setAttribute('download', filename);
@ -144,17 +150,17 @@
document.body.appendChild(el);
el.click();
document.body.removeChild(el);
}
}
function downloadRecoveryCodes() {
function downloadRecoveryCodes() {
setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
}
}
var downloadButton = document.getElementById("downloadRecoveryCodes");
downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
var downloadButton = document.getElementById("downloadRecoveryCodes");
downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
/* print recovery codes */
function buildPrintContent() {
/* print recovery codes */
function buildPrintContent() {
var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
var styles =
`@page { size: auto; margin-top: 0; }
@ -170,17 +176,17 @@
"<p>${msg("recovery-codes-download-file-description")}</p>" +
"<p>${msg("recovery-codes-download-file-date")} " + formatCurrentDateTime() + "</p>" +
"</body></html>";
}
}
function printRecoveryCodes() {
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>
var printButton = document.getElementById("printRecoveryCodes");
printButton && printButton.addEventListener("click", printRecoveryCodes);
</script>
</#if>
</@layout.registrationLayout>