From 3a8c1e54d5662f584c399dfcea392195fea58377 Mon Sep 17 00:00:00 2001
From: vrockai <vrockai@redhat.com>
Date: Wed, 2 Oct 2013 14:50:27 +0200
Subject: [PATCH] KEYCLOAK-74 fixes for totp related forms

---
 .../theme/default/css/login-register.css      |  2 +-
 .../forms/theme/default/login-config-totp.ftl | 37 ++++++++++---------
 .../resources/forms/theme/default/totp.ftl    | 27 +++++++++++---
 .../keycloak/testsuite/forms/AccountTest.java |  4 +-
 .../testsuite/pages/LoginConfigTotpPage.java  |  2 +-
 5 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
index 0fa24e8a28..8eacd72561 100644
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/css/login-register.css
@@ -348,7 +348,7 @@ a.zocial:before {
     font-size: 1.3em;
 }
 
-.rcue-login-register.reset .form-area {
+.rcue-login-register.reset .form-area, .rcue-login-register.totp .form-area {
   background-image: none;
 }
 .rcue-login-register.reset .form-area p.instruction {
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/login-config-totp.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/login-config-totp.ftl
index 82f82f36fd..9b3cca5326 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/login-config-totp.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/login-config-totp.ftl
@@ -1,42 +1,43 @@
 <#import "template-login-action.ftl" as layout>
-<@layout.registrationLayout bodyClass=""; section>
+<@layout.registrationLayout bodyClass="totp"; section>
     <#if section = "title">
 
-    Config TOTP
+    Google Authenticator Setup
 
     <#elseif section = "header">
 
-    Config TOTP
+    Google Authenticator Setup
+
+    <#elseif section = "feedback">
+    <div class="feedback warning show">
+        <p><strong>Your account is not enabled because you need to set up the Google Authenticator.</strong><br>Please follow the steps below.</p>
+    </div>
 
     <#elseif section = "form">
 
     <div id="form">
-        <h2>To setup Google Authenticator</h2>
-
         <ol>
-            <li>Install Google Authenticator to your device</li>
-            <li>Set up an account in Google Authenticator and scan the QR code below or enter the key<br />
-                <img src="${totp.totpSecretQrCodeUrl}" /> ${totp.totpSecretEncoded}
+            <li>
+                <p><strong>1</strong>Download the <a href="http://code.google.com/p/google-authenticator/" target="_blank">Google Authenticator app</a> in your device.</p>
             </li>
-            <li>Enter a one-time password provided by Google Authenticator and click Save to finish the setup
-
+            <li class="clearfix">
+                <p><strong>2</strong>Create an account in Google Authenticator and scan the barcode or the provided key below.</p>
+                <img src="${totp.totpSecretQrCodeUrl}" alt="Figure: Barcode">
+                <span class="code">${totp.totpSecretEncoded}</span>
+            </li>
+            <li class="clearfix">
+                <p><strong>3</strong>Enter the one-time-password provided by Google Authenticator below and click Submit to finish the setup.</p>
                 <form action="${url.totpUrl}" method="post">
                     <div>
-                        <label for="totp">${rb.getString('authenticatorCode')}</label>
-                        <input type="text" id="totp" name="totp" />
+                        <label for="otp" class="two-lines">One-time-password</label><input type="text" id="totp" name="totp" />
                         <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
                     </div>
-
-                    <input type="submit" value="Submit" />
+                    <input type="submit" class="btn-primary" value="Submit" />
                 </form>
             </li>
         </ol>
     </div>
 
     <#elseif section = "info" >
-
-    <div id="info">
-    </div>
-
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/src/main/resources/META-INF/resources/forms/theme/default/totp.ftl b/forms/src/main/resources/META-INF/resources/forms/theme/default/totp.ftl
index b1f44e7670..63de6ef30f 100755
--- a/forms/src/main/resources/META-INF/resources/forms/theme/default/totp.ftl
+++ b/forms/src/main/resources/META-INF/resources/forms/theme/default/totp.ftl
@@ -3,16 +3,33 @@
 
     <#if section = "header">
 
-    Google Authenticator Setup
+        <#if totp.enabled>
+            <h2>Authenticators</h2>
+        <#else>
+            <h2>Google Authenticator Setup</h2>
+        </#if>
 
     <#elseif section = "content">
 
-    <!--h:messages globalOnly="true" /-->
         <#if totp.enabled>
-        Google Authenticator enabled
-        <#else>
-        <h2>Google Authenticator Setup</h2>
+        <#-- TODO this is only mock page -->
+        <form>
+            <fieldset>
+                <p class="info">You have the following authenticators set up:</p>
+                <table class="list">
+                    <caption>Table of social authenticators</caption>
+                    <tbody>
+                    <tr>
+                        <td class="provider"><span class="social googleplus">Google</span></td>
+                        <td class="soft">Connected as john@google.com</td>
+                        <td class="action"><a href="user-totp-setup.html" class="button">Remove Google</a></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </fieldset>
+        </form>
 
+        <#else>
         <ol>
             <li>
                 <p><strong>1</strong>Download the <a href="http://code.google.com/p/google-authenticator/" target="_blank">Google Authenticator app</a> in your device.</p>
diff --git a/testsuite/src/test/java/org/keycloak/testsuite/forms/AccountTest.java b/testsuite/src/test/java/org/keycloak/testsuite/forms/AccountTest.java
index b901c2e888..3d62d55ed5 100755
--- a/testsuite/src/test/java/org/keycloak/testsuite/forms/AccountTest.java
+++ b/testsuite/src/test/java/org/keycloak/testsuite/forms/AccountTest.java
@@ -143,9 +143,11 @@ public class AccountTest {
 
         Assert.assertTrue(totpPage.isCurrent());
 
+        Assert.assertFalse(driver.getPageSource().contains("Remove Google"));
+
         totpPage.configure(totp.generate(totpPage.getTotpSecret()));
 
-        Assert.assertTrue(driver.getPageSource().contains("Google Authenticator enabled"));
+        Assert.assertTrue(driver.getPageSource().contains("Remove Google"));
     }
 
 }
diff --git a/testsuite/src/test/java/org/keycloak/testsuite/pages/LoginConfigTotpPage.java b/testsuite/src/test/java/org/keycloak/testsuite/pages/LoginConfigTotpPage.java
index 3cfca03986..f2e23003cc 100644
--- a/testsuite/src/test/java/org/keycloak/testsuite/pages/LoginConfigTotpPage.java
+++ b/testsuite/src/test/java/org/keycloak/testsuite/pages/LoginConfigTotpPage.java
@@ -48,7 +48,7 @@ public class LoginConfigTotpPage extends Page {
     }
 
     public boolean isCurrent() {
-        return driver.getTitle().equals("Config TOTP");
+        return driver.getTitle().equals("Google Authenticator Setup");
     }
 
     public void open() {