From 3c237760b6addc2f869863fad1e3b9dd23262cb6 Mon Sep 17 00:00:00 2001
From: Stan Silvert <ssilvert@redhat.com>
Date: Tue, 25 Oct 2016 08:38:29 -0400
Subject: [PATCH] KEYCLOAK-3816: Broken OTP setup with smaller resolutions

---
 .../resources/theme/base/account/totp.ftl     | 96 +++++++++----------
 .../theme/base/login/login-config-totp.ftl    | 55 ++++-------
 .../account/resources/css/account.css         | 12 ---
 3 files changed, 69 insertions(+), 94 deletions(-)

diff --git a/themes/src/main/resources/theme/base/account/totp.ftl b/themes/src/main/resources/theme/base/account/totp.ftl
index 8ab36fa8b7..4b96dd8b34 100755
--- a/themes/src/main/resources/theme/base/account/totp.ftl
+++ b/themes/src/main/resources/theme/base/account/totp.ftl
@@ -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>
diff --git a/themes/src/main/resources/theme/base/login/login-config-totp.ftl b/themes/src/main/resources/theme/base/login/login-config-totp.ftl
index 07a88019f0..914ecb53c1 100755
--- a/themes/src/main/resources/theme/base/login/login-config-totp.ftl
+++ b/themes/src/main/resources/theme/base/login/login-config-totp.ftl
@@ -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>
diff --git a/themes/src/main/resources/theme/keycloak/account/resources/css/account.css b/themes/src/main/resources/theme/keycloak/account/resources/css/account.css
index be0c31e608..22edb493b8 100644
--- a/themes/src/main/resources/theme/keycloak/account/resources/css/account.css
+++ b/themes/src/main/resources/theme/keycloak/account/resources/css/account.css
@@ -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;