diff options
Diffstat (limited to 'account/totp.ftl')
| -rw-r--r-- | account/totp.ftl | 144 |
1 files changed, 96 insertions, 48 deletions
diff --git a/account/totp.ftl b/account/totp.ftl index 987fe24..c112bec 100644 --- a/account/totp.ftl +++ b/account/totp.ftl @@ -3,7 +3,7 @@ <div class="row"> <div class="col-md-10"> - <h2>${msg("authenticatorTitle")}</h2> + <h1 class="first-header">${msg("authenticatorTitle")}</h1> </div> <#if totp.otpCredentials?size == 0> <div class="col-md-2 subtitle"> @@ -51,59 +51,71 @@ <hr/> - <ol> - <li> - <p>${msg("totpStep1")}</p> + <div class="d-flex justify-content-center flex-row"> - <ul> - <#list totp.policy.supportedApplications as app> - <li>${app}</li> - </#list> - </ul> - </li> - - <#if mode?? && mode = "manual"> - <li> - <p>${msg("totpManualStep2")}</p> + <div <#if mode?? && mode = "manual">class="d-flex align-items-center"</#if>> + <#if mode?? && mode = "manual"> <p><span id="kc-totp-secret-key">${totp.totpSecretEncoded}</span></p> - <p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p> - </li> - <li> - <p>${msg("totpManualStep3")}</p> - <ul> - <li id="kc-totp-type">${msg("totpType")}: ${msg("totp." + totp.policy.type)}</li> - <li id="kc-totp-algorithm">${msg("totpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li> - <li id="kc-totp-digits">${msg("totpDigits")}: ${totp.policy.digits}</li> - <#if totp.policy.type = "totp"> - <li id="kc-totp-period">${msg("totpInterval")}: ${totp.policy.period}</li> - <#elseif totp.policy.type = "hotp"> - <li id="kc-totp-counter">${msg("totpCounter")}: ${totp.policy.initialCounter}</li> - </#if> - </ul> - </li> - <#else> - <li> - <p>${msg("totpStep2")}</p> - <p><img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"></p> - <p><a href="${totp.manualUrl}" id="mode-manual">${msg("totpUnableToScan")}</a></p> - </li> - </#if> - <li> - <p>${msg("totpStep3")}</p> - <p>${msg("totpStep3DeviceName")}</p> - </li> - </ol> + <#else> + <p><img id="qr-code" src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"></p> + </#if> + </div> + + <div class=""> + <ol> + <li> + <p>${msg("totpStep1")}</p> + + <ul> + <#list totp.policy.supportedApplications as app> + <li>${app}</li> + </#list> + </ul> + </li> + + <#if mode?? && mode = "manual"> + <li> + <p>${msg("totpManualStep2")}</p> + <p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p> + </li> + <li> + <p>${msg("totpManualStep3")}</p> + <ul> + <li id="kc-totp-type">${msg("totpType")}: ${msg("totp." + totp.policy.type)}</li> + <li id="kc-totp-algorithm">${msg("totpAlgorithm")}: ${totp.policy.getAlgorithmKey()}</li> + <li id="kc-totp-digits">${msg("totpDigits")}: ${totp.policy.digits}</li> + <#if totp.policy.type = "totp"> + <li id="kc-totp-period">${msg("totpInterval")}: ${totp.policy.period}</li> + <#elseif totp.policy.type = "hotp"> + <li id="kc-totp-counter">${msg("totpCounter")}: ${totp.policy.initialCounter}</li> + </#if> + </ul> + </li> + <#else> + <li> + <p>${msg("totpStep2")}</p> + <p><a href="${totp.manualUrl}" id="mode-manual">${msg("totpUnableToScan")}</a></p> + </li> + </#if> + <li> + <p>${msg("totpStep3")}</p> + <p>${msg("totpStep3DeviceName")}</p> + </li> + </ol> + </div> + + </div> <hr/> <form action="${url.totpUrl}" class="form-horizontal" method="post"> <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}"> - <div class="form-group"> - <div class="col-sm-2 col-md-2"> + <div class="form-group row"> + <div class="col-2 col-md-2"> <label for="totp" class="control-label">${msg("authenticatorCode")}</label> <span class="required">*</span> </div> - <div class="col-sm-10 col-md-10"> + <div class="col-10 col-md-10"> <input type="text" class="form-control" id="totp" name="totp" autocomplete="off" autofocus> <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}"/> </div> @@ -111,18 +123,18 @@ </div> - <div class="form-group" ${messagesPerField.printIfExists('userLabel',properties.kcFormGroupErrorClass!)}"> - <div class="col-sm-2 col-md-2"> + <div class="form-group row" ${messagesPerField.printIfExists('userLabel',properties.kcFormGroupErrorClass!)}"> + <div class="col-2 col-md-2"> <label for="userLabel" class="control-label">${msg("totpDeviceName")}</label> <#if totp.otpCredentials?size gte 1><span class="required">*</span></#if> </div> - <div class="col-sm-10 col-md-10"> + <div class="col-10 col-md-10"> <input type="text" class="form-control" id="userLabel" name="userLabel" autocomplete="off"> </div> </div> <div class="form-group"> - <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit"> + <div id="kc-form-buttons" class="offset-md-2 col-md-10 px-0 submit"> <div class=""> <button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" @@ -138,4 +150,40 @@ </form> </#if> + <script> + function recolorImage(r, g, b, r2, g2, b2) { + var img1 = document.getElementById("qr-code"); + var img = new Image(); + img.width = img1.width; + img.height = img1.height; + img.src = img1.src; + var c = document.createElement('canvas'); + var ctx = c.getContext("2d"); + var w = img.width; + var h = img.height; + + c.width = w; + c.height = h; + + ctx.drawImage(img, 0, 0, w, h); + var imageData = ctx.getImageData(0, 0, w, h); + + for (var i = 0; i < imageData.data.length; i += 4) { + if (imageData.data[i] == r && imageData.data[i + 1] == g && imageData.data[i + 2] == b) { + imageData.data[i] = r2; + imageData.data[i + 1] = g2; + imageData.data[i + 2] = b2; + } + } + + ctx.putImageData(imageData, 0, 0); + img1.src = c.toDataURL('image/png'); + } + + window.addEventListener('load', (event) => { + recolorImage(255, 255, 255, 249, 249, 249); + }); + + </script> + </@layout.mainLayout> |