libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

* removed duplicated javascript and fixed formatting

Browse source 
* addressed PR comments

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-07-15 12:18:50 +02:00 committed by Stan Silvert
parent 236f22a472
commit 505a1e8c92
3 changed files with 321 additions and 340 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,46 +6,40 @@
${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 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-v5-c-alert__title">
<h4 class="pf-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">
<div class="pf-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 ${properties.kcRecoveryCodesList!}" role="list">
<ol id="kc-recovery-codes-list" class="${properties.kcRecoveryCodesList!}">
<#list recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code>
<li>${code[0..3]}-${code[4..7]}-${code[8..]}</li>
<li><span>${code?counter}:</span> ${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">
<i class="fas fa-print"></i> ${msg("recovery-codes-print")}
<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-v5-c-button pf-m-link" type="button">
<i class="fas fa-download"></i> ${msg("recovery-codes-download")}
<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-v5-c-button pf-m-link" type="button">
<i class="fas fa-copy"></i> ${msg("recovery-codes-copy")}
<button id="copyRecoveryCodes" class="pf-c-button pf-m-link" type="button">
<i class="pficon-blueprint"></i> ${msg("recovery-codes-copy")}
</button>
</div>
<!-- confirmation checkbox -->
<div class="${properties.kcFormOptionsClass!} pf-v5-u-mt-md">
<div class="${properties.kcFormOptionsClass!}">
<input class="${properties.kcCheckInputClass!}" type="checkbox" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck"
onchange="document.getElementById('saveRecoveryAuthnCodesBtn').disabled = !this.checked;"
/>
@ -65,7 +59,7 @@
disabled
/>
<button type="submit"
class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} pf-m-link
class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}"
id="cancelRecoveryAuthnCodesBtn" name="cancel-aia" value="true" />${msg("recovery-codes-action-cancel")}
</button>
<#else>

63
themes/src/main/resources/theme/keycloak.v2/login/login-recovery-authn-code-config.ftl
View file

@ -22,7 +22,7 @@
<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">
<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>
@ -33,13 +33,13 @@
<!-- actions -->
<div class="${properties.kcRecoveryCodesActions!}">
<button id="printRecoveryCodes" class="pf-v5-c-button pf-m-link" type="button">
<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">
<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">
<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>
@ -65,8 +65,8 @@
disabled
/>
<button type="submit"
class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}"
id="cancelRecoveryAuthnCodesBtn" name="cancel-aia" value="true" />${msg("recovery-codes-action-cancel")}
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"
@ -80,26 +80,17 @@ disabled
<script>
/* copy recovery codes */
function copyRecoveryCodes() {
var tmpTextarea = document.createElement("textarea");
var codes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
for (i = 0; i < codes.length; i++) {
tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\n";
}
document.body.appendChild(tmpTextarea);
const tmpTextarea = document.createElement("textarea");
document.body.appendChild(parseRecoveryCodeList());
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 = {
const dt = new Date();
const options = {
month: 'long',
day: 'numeric',
year: 'numeric',
@ -112,21 +103,23 @@ function formatCurrentDateTime() {
}
function parseRecoveryCodeList() {
var recoveryCodes = document.querySelectorAll(".kc-recovery-codes-list li");
var recoveryCodeList = "";
const recoveryCodes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
const recoveryCodeList = "";
for (var i = 0; i < recoveryCodes.length; i++) {
var recoveryCodeLiElement = recoveryCodes[i].innerText;
recoveryCodeList += recoveryCodeLiElement + "\r\n";
for (let i = 0; i < recoveryCodes.length; i++) {
const recoveryCodeLiElement = recoveryCodes[i].innerText;
<#noparse>
recoveryCodeList += `${i}: ${recoveryCodeLiElement}\r\n`;
</#noparse>
}
return recoveryCodeList;
}
function buildDownloadContent() {
var recoveryCodeList = parseRecoveryCodeList();
var dt = new Date();
var options = {
const recoveryCodeList = parseRecoveryCodeList();
const dt = new Date();
const options = {
month: 'long',
day: 'numeric',
year: 'numeric',
@ -143,7 +136,7 @@ function buildDownloadContent() {
}
function setUpDownloadLinkAndDownload(filename, text) {
var el = document.createElement('a');
const el = document.createElement('a');
el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
el.setAttribute('download', filename);
el.style.display = 'none';
@ -156,16 +149,13 @@ 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 =
const recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').parentNode.innerHTML;
const styles =
`@page { size: auto; margin-top: 0; }
body { width: 480px; }
div { list-style-type: none; font-family: monospace }
div { font-family: monospace }
p:first-of-type { margin-top: 48px }`;
return printFileContent =
@ -179,14 +169,11 @@ function buildPrintContent() {
}
function printRecoveryCodes() {
var w = window.open();
const 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>

2
themes/src/main/resources/theme/keycloak.v2/login/resources/css/styles.css
View file

@ -69,7 +69,7 @@ div.kc-logo-text span {
border-color: transparent black transparent transparent;
}
.kc-recovery-codes-list {
#kc-recovery-codes-list {
columns: 2;
}