Merge pull request #3423 from ssilvert/otp-low-res
KEYCLOAK-3816: Broken OTP setup with smaller resolutions
This commit is contained in:
Stan Silvert
GitHub
commit
3b8972e027
3 changed files with 69 additions and 94 deletions
|
|
@ -2,66 +2,66 @@
|
|||
<@layout.mainLayout active='totp' bodyClass='totp'; section>
|
||||
|
||||
<#if totp.enabled>
|
||||
<h2>${msg("authenticatorTitle")}</h2>
|
||||
<h2>${msg("authenticatorTitle")}</h2>
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead
|
||||
<tr>
|
||||
<th colspan="2">${msg("configureAuthenticators")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="provider">${msg("mobile")}</td>
|
||||
<td class="action">
|
||||
<a id="remove-mobile" href="${url.totpRemoveUrl}"><i class="pficon pficon-delete"></i></a>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead
|
||||
<tr>
|
||||
<th colspan="2">${msg("configureAuthenticators")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="provider">${msg("mobile")}</td>
|
||||
<td class="action">
|
||||
<a id="remove-mobile" href="${url.totpRemoveUrl}"><i class="pficon pficon-delete"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
<#else>
|
||||
<h2>${msg("authenticatorTitle")}</h2>
|
||||
<h2>${msg("authenticatorTitle")}</h2>
|
||||
|
||||
<hr/>
|
||||
<hr/>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<p>${msg("totpStep1")}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("totpStep2")}</p>
|
||||
<img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/>
|
||||
<span class="code">${totp.totpSecretEncoded}</span>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("totpStep3")}</p>
|
||||
</li>
|
||||
</ol>
|
||||
<ol>
|
||||
<li>
|
||||
<p>${msg("totpStep1")}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("totpStep2")}</p>
|
||||
<p><img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"></p>
|
||||
<p><span class="code">${totp.totpSecretEncoded}</span></p>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("totpStep3")}</p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<hr/>
|
||||
<hr/>
|
||||
|
||||
<form action="${url.totpUrl}" class="form-horizontal" method="post">
|
||||
<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker?html}">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-2 col-md-2">
|
||||
<label for="totp" class="control-label">${msg("authenticatorCode")}</label>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-10 col-md-10">
|
||||
<input type="text" class="form-control" id="totp" name="totp" autocomplete="off" autofocus autocomplete="off">
|
||||
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
|
||||
</div>
|
||||
<form action="${url.totpUrl}" class="form-horizontal" method="post">
|
||||
<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker?html}">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-2 col-md-2">
|
||||
<label for="totp" class="control-label">${msg("authenticatorCode")}</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
|
||||
<div class="">
|
||||
<button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Save">${msg("doSave")}</button>
|
||||
<button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Cancel">${msg("doCancel")}</button>
|
||||
</div>
|
||||
<div class="col-sm-10 col-md-10">
|
||||
<input type="text" class="form-control" id="totp" name="totp" autocomplete="off" autofocus autocomplete="off">
|
||||
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
|
||||
<div class="">
|
||||
<button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Save">${msg("doSave")}</button>
|
||||
<button type="submit" class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" name="submitAction" value="Cancel">${msg("doCancel")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</#if>
|
||||
|
||||
</@layout.mainLayout>
|
||||
|
|
|
|||
|
|
@ -5,41 +5,28 @@
|
|||
<#elseif section = "header">
|
||||
${msg("loginTotpTitle")}
|
||||
<#elseif section = "form">
|
||||
<form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-totp-settings-form" method="post">
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div class="${properties.kcLabelWrapperClass!}">
|
||||
<label for="otp" class="${properties.kcLabelClass!}">${msg("loginTotpOneTime")}</label>
|
||||
</div>
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="text" id="totp" name="totp" autocomplete="off" class="${properties.kcInputClass!}" />
|
||||
</div>
|
||||
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
|
||||
<ol id="kc-totp-settings">
|
||||
<li>
|
||||
<p>${msg("loginTotpStep1")}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("loginTotpStep2")}</p>
|
||||
<img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/>
|
||||
<span class="code">${totp.totpSecretEncoded}</span>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("loginTotpStep3")}</p>
|
||||
</li>
|
||||
</ol>
|
||||
<form action="${url.loginAction}" class="${properties.kcFormClass!}" id="kc-totp-settings-form" method="post">
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="text" id="totp" name="totp" autocomplete="off" class="${properties.kcInputClass!}" />
|
||||
</div>
|
||||
<input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
|
||||
</div>
|
||||
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
|
||||
<div class="${properties.kcFormOptionsWrapperClass!}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
|
||||
<input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<#elseif section = "info" >
|
||||
<ol id="kc-totp-settings">
|
||||
<li>
|
||||
<p>${msg("loginTotpStep1")}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("loginTotpStep2")}</p>
|
||||
<img src="data:image/png;base64, ${totp.totpSecretQrCode}" alt="Figure: Barcode"><br/>
|
||||
<span class="code">${totp.totpSecretEncoded}</span>
|
||||
</li>
|
||||
<li>
|
||||
<p>${msg("loginTotpStep3")}</p>
|
||||
</li>
|
||||
</ol>
|
||||
<input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
|
||||
</form>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
||||
|
|
|
|||
|
|
@ -208,18 +208,6 @@ ol li img {
|
|||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
ol li span {
|
||||
padding: 15px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #eee;
|
||||
top: 46px;
|
||||
left: 270px;
|
||||
right: 50px;
|
||||
position: absolute;
|
||||
font-family: courier, monospace;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
hr + .form-horizontal {
|
||||
border: none;
|
||||
padding-top: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue