pr review comment
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
parent
00fc01ab06
commit
236f22a472
1 changed files with 172 additions and 166 deletions
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue