From 1cebe997740484d41e3a619af8d7b05504bf37a4 Mon Sep 17 00:00:00 2001
From: Viliam Rockai <vrockai@redhat.com>
Date: Tue, 4 Feb 2014 15:52:06 +0100
Subject: [PATCH] KEYCLOAK-282 Login forms HTML refactoring

---
 .../main/resources/theme/login/base/error.ftl |   9 +-
 .../theme/login/base/login-config-totp.ftl    |  47 ++---
 .../theme/login/base/login-oauth-grant.ftl    |  12 +-
 .../theme/login/base/login-reset-password.ftl |  14 +-
 .../resources/theme/login/base/login-totp.ftl |  11 +-
 .../login/base/login-update-password.ftl      |  29 +--
 .../theme/login/base/login-update-profile.ftl |  42 ++--
 .../login/base/login-username-reminder.ftl    |  19 +-
 .../theme/login/base/login-verify-email.ftl   |   8 +-
 .../main/resources/theme/login/base/login.ftl |  35 ++--
 .../resources/theme/login/base/register.ftl   |  20 +-
 .../resources/theme/login/base/template.ftl   |  18 +-
 .../login/keycloak/resources/css/styles.css   |   7 +-
 .../theme/login/rcue/resources/css/forms.css  |   4 +-
 .../rcue/resources/css/login-register.css     | 181 +++++++++---------
 15 files changed, 189 insertions(+), 267 deletions(-)

diff --git a/forms/common-themes/src/main/resources/theme/login/base/error.ftl b/forms/common-themes/src/main/resources/theme/login/base/error.ftl
index 78b8284cbe..1988f600cc 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/error.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/error.ftl
@@ -2,22 +2,15 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass=""; section>
     <#if section = "title">
-
     We're sorry...
 
     <#elseif section = "header">
-
     We're <strong>sorry</strong> ...
 
     <#elseif section = "form">
-
+    <div id="kc-error-message">
         <p class="instruction">Something happened and we could not process your request.</p>
         <p id="error-summary" class="instruction second">${message.summary}</p>
-
-    <#elseif section = "info" >
-
-    <div id="info">
     </div>
-
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login-config-totp.ftl b/forms/common-themes/src/main/resources/theme/login/base/login-config-totp.ftl
index a3872aed8c..149f4ebacc 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login-config-totp.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login-config-totp.ftl
@@ -1,38 +1,31 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass=""; section>
     <#if section = "title">
-
     Google Authenticator Setup
 
     <#elseif section = "header">
-
     Google Authenticator Setup
 
     <#elseif section = "form">
-
-    <div id="form">
-        <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>
-            </li>
-            <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.loginUpdateTotpUrl}" method="post">
-                    <div>
-                        <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" class="btn-primary" value="Submit" />
-                </form>
-            </li>
-        </ol>
-    </div>
-
-    <#elseif section = "info" >
+    <ol id="kc-totp-settings">
+        <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 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.loginUpdateTotpUrl}" method="post">
+                <div class="field-wrapper">
+                    <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" class="btn-primary" value="Submit" />
+            </form>
+        </li>
+    </ol>
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login-oauth-grant.ftl b/forms/common-themes/src/main/resources/theme/login/base/login-oauth-grant.ftl
index 389a934886..73f3047449 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login-oauth-grant.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login-oauth-grant.ftl
@@ -2,17 +2,15 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass="oauth"; section>
     <#if section = "title">
-
     OAuth Grant
 
     <#elseif section = "header">
-
     <strong>Keycloak</strong> Central Login
 
     <#elseif section = "form">
-    <div class="content-area">
+    <div id="kc-oauth" class="content-area">
         <p class="instruction"><strong>${oauth.client}</strong> requests access to:</p>
-        <ul>
+        <ul id="kc-oauth-list">
             <#list oauth.realmRolesRequested as role>
                 <li>
                     <span><#if role.description??>${role.description}<#else>${role.name}</#if></span>
@@ -36,11 +34,5 @@
             <input type="submit" class="btn-secondary" name="cancel" value="Cancel">
         </form>
     </div>
-
-    <#elseif section = "info" >
-
-    <div id="info">
-    </div>
-
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login-reset-password.ftl b/forms/common-themes/src/main/resources/theme/login/base/login-reset-password.ftl
index 226c04b38a..e00f3c3aa1 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login-reset-password.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login-reset-password.ftl
@@ -1,25 +1,23 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass=""; section>
     <#if section = "title">
-
     ${rb.emailForgotHeader}
 
     <#elseif section = "header">
-
     ${rb.emailForgotHeader}
 
     <#elseif section = "form">
-
-    <div id="form">
+    <div id="kc-reset-password">
         <p class="instruction">${rb.emailInstruction}</p>
         <form action="${url.loginPasswordResetUrl}" method="post">
-        	<div>
-      	    	<label for="email">${rb.email}</label><input type="text" id="email" name="email" />
-			</div>
+            <div class="field-wrapper">
+                <label for="email">${rb.email}</label><input type="text" id="email" name="email" />
+            </div>
             <input class="btn-primary" type="submit" value="Submit" />
         </form>
     </div>
+
     <#elseif section = "info" >
-        <p><a href="${url.loginUrl}">&laquo; Back to Login</a></p>
+    <p><a href="${url.loginUrl}">&laquo; Back to Login</a></p>
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login-totp.ftl b/forms/common-themes/src/main/resources/theme/login/base/login-totp.ftl
index 4416e57700..48c18bc3dc 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login-totp.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login-totp.ftl
@@ -2,20 +2,17 @@
 <@layout.registrationLayout bodyClass=""; section>
 
     <#if section = "title">
-
     Log in to ${realm.name}
 
     <#elseif section = "header">
-
     Log in to <strong>${realm.name}</strong>
 
     <#elseif section = "form">
-
-    <form action="${url.loginAction}" method="post">
+    <form id="kc-totp-login-form" action="${url.loginAction}" method="post">
         <input id="username" name="username" value="${login.username!''}" type="hidden" />
         <input id="password" name="password" value="${login.password!''}" type="hidden" />
 
-        <div>
+        <div class="field-wrapper">
             <label for="totp">${rb.authenticatorCode}</label><input id="totp" name="totp" type="text" />
         </div>
 
@@ -28,10 +25,10 @@
     </form>
 
     <#elseif section = "info">
-
         <#if realm.registrationAllowed>
+        <div id="kc-totp-register-link">
         <p>${rb.noAccount} <a href="${url.registrationUrl}">${rb.register}</a>.</p>
         </#if>
-
+        </div>
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login-update-password.ftl b/forms/common-themes/src/main/resources/theme/login/base/login-update-password.ftl
index 7738cd7573..922f801dcc 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login-update-password.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login-update-password.ftl
@@ -1,32 +1,21 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass=""; section>
     <#if section = "title">
-
     ${rb.emailUpdateHeader}
 
     <#elseif section = "header">
-
     ${rb.emailUpdateHeader}
 
     <#elseif section = "form">
+    <form id="kc-passwd-update-form" action="${url.loginUpdatePasswordUrl}" method="post">
+        <div class="field-wrapper">
+            <label for="password-new">${rb.passwordNew}</label><input type="password" id="password-new" name="password-new" />
+        </div>
+        <div class="field-wrapper">
+            <label for="password-confirm" class="two-lines">${rb.passwordConfirm}</label><input type="password" id="password-confirm" name="password-confirm" />
+        </div>
 
-    <div id="form">
-        <form action="${url.loginUpdatePasswordUrl}" method="post">
-        	<div>
-            	<label for="password-new">${rb.passwordNew}</label><input type="password" id="password-new" name="password-new" />
-        	</div>
-        	<div>
-        	    <label for="password-confirm" class="two-lines">${rb.passwordConfirm}</label><input type="password" id="password-confirm" name="password-confirm" />
-	        </div>
-
-            <input class="btn-primary" type="submit" value="Submit" />
-        </form>
-    </div>
-
-    <#elseif section = "info" >
-
-    <div id="info">
-    </div>
-
+        <input class="btn-primary" type="submit" value="Submit" />
+    </form>
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login-update-profile.ftl b/forms/common-themes/src/main/resources/theme/login/base/login-update-profile.ftl
index a235ec3ac4..05e09faf65 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login-update-profile.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login-update-profile.ftl
@@ -1,37 +1,31 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass=""; section>
     <#if section = "title">
-
     Update Account Information
 
     <#elseif section = "header">
-
-    <h2>Update Account Information</h2>
+    Update Account Information
 
     <#elseif section = "feedback">
-    <div class="feedback warning show">
+    <div id="kc-feedback" class="feedback warning show">
         <p><strong>Your account is not enabled because you need to update your account information.</strong><br>Please follow the steps below.</p>
     </div>
     <#elseif section = "form">
-
-    <div id="form">
-        <form action="${url.loginUpdateProfileUrl}" method="post">
-            <div class="feedback error bottom-left">
-                <p><strong>Some required fields are empty or incorrect.</strong><br>Please correct the fields in red.</p>
-            </div>
-            <p class="subtitle">All fields required</p>
-	        <div>
-    	        <label for="email">${rb.email}</label><input type="text" id="email" name="email" value="${user.email!''}" />
-	        </div>
-            <div>
-                <label for="firstName">${rb.firstName}</label><input type="text" id="firstName" name="firstName" value="${user.firstName!''}" />
-            </div>
-            <div>
-                <label for="lastName">${rb.lastName}</label><input type="text" id="lastName" name="lastName" value="${user.lastName!''}" />
-            </div>
-
-            <input class="btn-primary" type="submit" value="Submit" />
-        </form>
-    </div>
+    <form id="kc-update-profile-form" action="${url.loginUpdateProfileUrl}" method="post">
+        <div class="feedback error bottom-left">
+            <p><strong>Some required fields are empty or incorrect.</strong><br>Please correct the fields in red.</p>
+        </div>
+        <p class="subtitle">All fields required</p>
+        <div class="field-wrapper">
+            <label for="email">${rb.email}</label><input type="text" id="email" name="email" value="${user.email!''}" />
+        </div class="field-wrapper">
+        <div class="field-wrapper">
+            <label for="firstName">${rb.firstName}</label><input type="text" id="firstName" name="firstName" value="${user.firstName!''}" />
+        </div>
+        <div class="field-wrapper">
+            <label for="lastName">${rb.lastName}</label><input type="text" id="lastName" name="lastName" value="${user.lastName!''}" />
+        </div>
+        <input class="btn-primary" type="submit" value="Submit" />
+    </form>
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login-username-reminder.ftl b/forms/common-themes/src/main/resources/theme/login/base/login-username-reminder.ftl
index 32d6c79d47..696772f113 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login-username-reminder.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login-username-reminder.ftl
@@ -1,25 +1,20 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass=""; section>
     <#if section = "title">
-
     ${rb.emailUsernameForgotHeader}
 
     <#elseif section = "header">
-
     ${rb.emailUsernameForgotHeader}
 
     <#elseif section = "form">
-
-    <div id="form">
+    <form id="kc-username-reminder-form" action="${url.loginUsernameReminderUrl}" method="post">
         <p class="instruction">${rb.emailUsernameInstruction}</p>
-        <form action="${url.loginUsernameReminderUrl}" method="post">
-        	<div>
-      	    	<label for="email">${rb.email}</label><input type="text" id="email" name="email" />
-			</div>
-            <input class="btn-primary" type="submit" value="Submit" />
-        </form>
-    </div>
+        <div class="field-wrapper">
+            <label for="email">${rb.email}</label><input type="text" id="email" name="email" />
+        </div>
+        <input class="btn-primary" type="submit" value="Submit" />
+    </form>
     <#elseif section = "info" >
-        <p><a href="${url.loginUrl}">&laquo; Back to Login</a></p>
+    <p><a href="${url.loginUrl}">&laquo; Back to Login</a></p>
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login-verify-email.ftl b/forms/common-themes/src/main/resources/theme/login/base/login-verify-email.ftl
index 3785ba3689..b595c64252 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login-verify-email.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login-verify-email.ftl
@@ -1,16 +1,13 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass="email"; section>
     <#if section = "title">
-
     Email verification
 
     <#elseif section = "header">
-
     Email verification
 
     <#elseif section = "form">
-
-    <div class="app-form">
+    <div id="kc-verify-email" class="app-form">
         <p class="instruction">
             Your account is not enabled. An email with instructions to verify your email address has been sent to you.
         </p>
@@ -18,8 +15,5 @@
             <a href="${url.loginEmailVerificationUrl}">Click here</a> to re-send the email.
         </p>
     </div>
-
-    <#elseif section = "info" >
-
     </#if>
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/login.ftl b/forms/common-themes/src/main/resources/theme/login/base/login.ftl
index 98cefa40ac..b960d006de 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/login.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login.ftl
@@ -1,33 +1,25 @@
+<#ftl strip_whitespace=true strip_text=true>
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass=""; section>
-    <#if section = "title">
-
-    Log in to ${realm.name}
+    <#if section = "title">Log in to ${realm.name}
 
     <#elseif section = "header">
-
     Log in to <strong>${(realm.name)!''}</strong>
 
     <#elseif section = "form">
-
-    <div id="form">
-        <form action="${url.loginAction}" method="post">
-            <div>
-                <label for="username">${rb.username}</label><input id="username" name="username" value="${login.username!''}" type="text" autofocus />
-            </div>
-
-            <div>
-                <label for="password">${rb.password}</label><input id="password" name="password" type="password" />
-            </div>
-
-                <input class="btn-primary" name="login" type="submit" value="Log In"/>
-                <input class="btn-secondary" name="cancel" type="submit" value="Cancel"/>
-        </form>
-    </div>
+    <form id="kc-form-login" action="${url.loginAction}" method="post">
+        <div class="field-wrapper">
+            <label for="username">${rb.username}</label><input id="username" name="username" value="${login.username!''}" type="text" />
+        </div>
+        <div class="field-wrapper">
+            <label for="password">${rb.password}</label><input id="password" name="password" type="password" />
+        </div>
+        <input class="btn-primary" name="login" type="submit" value="Log In"/>
+        <input class="btn-secondary" name="cancel" type="submit" value="Cancel"/>
+    </form>
 
     <#elseif section = "info" >
-
-    <div id="info">
+    <div id="kc-login-actions">
         <#if realm.registrationAllowed>
             <p>${rb.noAccount} <a href="${url.registrationUrl}">${rb.register}</a>.</p>
         </#if>
@@ -35,6 +27,5 @@
             <p>Forgot <a href="${url.loginUsernameReminderUrl}">Username</a> / <a href="${url.loginPasswordResetUrl}">Password</a>?</p>
         </#if>
     </div>
-
     </#if>
 </@layout.registrationLayout>
diff --git a/forms/common-themes/src/main/resources/theme/login/base/register.ftl b/forms/common-themes/src/main/resources/theme/login/base/register.ftl
index 35af01ddd2..a656a6d4b4 100755
--- a/forms/common-themes/src/main/resources/theme/login/base/register.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/register.ftl
@@ -1,34 +1,30 @@
 <#import "template.ftl" as layout>
 <@layout.registrationLayout bodyClass="register" ; section>
-
     <#if section = "title">
-
     ${rb.registerWith} ${realm.name}
 
     <#elseif section = "header">
-
     ${rb.registerWith} <strong>${realm.name}</strong>
 
     <#elseif section = "form">
-
-    <form action="${url.registrationAction}" method="post">
+    <form id="kc-register-form" action="${url.registrationAction}" method="post">
         <p class="subtitle">${rb.allRequired}</p>
-        <div>
+        <div class="field-wrapper">
             <label for="firstName">${rb.firstName}</label><input type="text" id="firstName" name="firstName" value="${register.formData.firstName!''}" />
         </div>
-        <div>
+        <div class="field-wrapper">
             <label for="lastName">${rb.lastName}</label><input type="text" id="lastName" name="lastName" value="${register.formData.lastName!''}" />
         </div>
-        <div>
+        <div class="field-wrapper">
             <label for="email">${rb.email}</label><input type="text" id="email" name="email" value="${register.formData.email!''}" />
         </div>
-        <div>
+        <div class="field-wrapper">
             <label for="username">${rb.username}</label><input type="text" id="username" name="username" value="${register.formData.username!''}" />
         </div>
-        <div>
+        <div class="field-wrapper">
             <label for="password">${rb.password}</label><input type="password" id="password" name="password" />
         </div>
-        <div>
+        <div class="field-wrapper">
             <label for="password-confirm">${rb.passwordConfirm}</label><input type="password" id="password-confirm" name="password-confirm" />
         </div>
 
@@ -36,9 +32,7 @@
     </form>
 
     <#elseif section = "info">
-
     <p>${rb.alreadyHaveAccount} <a href="${url.loginUrl}">${rb.logIn}</a>.</p>
 
     </#if>
-
 </@layout.registrationLayout>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/base/template.ftl b/forms/common-themes/src/main/resources/theme/login/base/template.ftl
index f5a3799ada..98f30af07a 100644
--- a/forms/common-themes/src/main/resources/theme/login/base/template.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/template.ftl
@@ -5,7 +5,7 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title><#nested "title"></title>
-    <link rel="icon" href="${url.resourcesPath}/img/favicon.ico">
+    <link rel="icon" href="${url.resourcesPath}/img/favicon.ico" />
     <#if properties.styles?has_content>
         <#list properties.styles?split(' ') as style>
             <link href="${url.resourcesPath}/${style}" rel="stylesheet" />
@@ -18,14 +18,10 @@
     </#if>
 </head>
 
-<body class="rcue-login-register ${bodyClass}">
-    <div class="rcue-logo"></div>
-
+<body class="kc-login-register ${bodyClass}">
+    <h1 class="kc-title">KeyCloak</h1>
     <div class="content">
-        <h2>
-            <#nested "header">
-        </h2>
-
+        <h2 id="kc-header"><#nested "header"></h2>
         <div class="background-area">
             <#if !forceSeparator && realm?has_content>
                 <#assign drawSeparator = realm.registrationAllowed>
@@ -41,7 +37,6 @@
                     </#if>
                     <#nested "form">
                 </div>
-
                 <#if social.displaySocialProviders>
                     <div class="section social-login"> <span>or</span>
                         <p>${rb.logInWith}</p>
@@ -52,20 +47,15 @@
                         </ul>
                     </div>
                 </#if>
-
                 <div class="section info-area">
                     <#nested "info">
                 </div>
             </div>
         </div>
-
         <p class="powered">
             <a href="http://www.keycloak.org">${rb.poweredByKeycloak}</a>
         </p>
     </div>
-
-    <#nested "content">
-
 </body>
 </html>
 </#macro>
\ No newline at end of file
diff --git a/forms/common-themes/src/main/resources/theme/login/keycloak/resources/css/styles.css b/forms/common-themes/src/main/resources/theme/login/keycloak/resources/css/styles.css
index 5988a486ae..f767d53699 100644
--- a/forms/common-themes/src/main/resources/theme/login/keycloak/resources/css/styles.css
+++ b/forms/common-themes/src/main/resources/theme/login/keycloak/resources/css/styles.css
@@ -1,4 +1,5 @@
-body.rcue-login-register {
-    background: #083556;
-    background-image: none;
+@IMPORT url("../../rcue/css/styles.css");
+
+body {
+    xbackground: #083556 !important;
 }
diff --git a/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/forms.css b/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/forms.css
index c51693c4cf..e2c1999aba 100644
--- a/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/forms.css
+++ b/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/forms.css
@@ -189,11 +189,11 @@ button.primary:enabled:active {
   box-shadow: inset 0 0 5px 3px #0074ae;
 }
 /* Code from Gabriel */
-.rcue-login-register.register .two-fields input[type="text"] {
+.kc-login-register.register .two-fields input[type="text"] {
   width: 121px;
   min-width: 0;
 }
-.rcue-login-register.register .two-fields input + input {
+.kc-login-register.register .two-fields input + input {
   margin-left: 10px;
 }
 .search-comp {
diff --git a/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/login-register.css b/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/login-register.css
index 89222dbf73..64786a3df5 100644
--- a/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/login-register.css
+++ b/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/login-register.css
@@ -4,13 +4,14 @@ body {
   min-width: 120em;
 }
 
-body.rcue-login-register {
+body.kc-login-register {
     background-image: url("../img/login-screen-background.jpg");
 }
 
-div.rcue-logo {
+.kc-title {
     background-image: url("../img/keycloak-logo.png");
     background-repeat: no-repeat;
+    text-indent: -9999px;
     height: 37px;
     width: 150px;
     position: absolute;
@@ -18,7 +19,7 @@ div.rcue-logo {
     right: 6.4em;
 }
 
-.rcue-login-register {
+.kc-login-register {
   background-color: #1D2226;
   background-position: top left;
   background-size: auto;
@@ -32,18 +33,18 @@ div.rcue-logo {
 
 }
 
-.rcue-login-register h1 a {
+.kc-login-register h1 a {
   position: absolute;
   top: 5em;
   right: 6.4em;
 }
-.rcue-login-register .content {
+.kc-login-register .content {
   position: absolute;
   bottom: 10%;
   width: 100%;
   min-width: 76em;
 }
-.rcue-login-register h2 {
+.kc-login-register h2 {
   padding-left: 4.34782608695652em;
   font-family: "Overpass", sans-serif;
   font-size: 2.3em;
@@ -51,10 +52,10 @@ div.rcue-logo {
   text-transform: uppercase;
   letter-spacing: 0.005em;
 }
-.rcue-login-register h2 strong {
+.kc-login-register h2 strong {
   font-weight: bold;
 }
-.rcue-login-register .background-area {
+.kc-login-register .background-area {
   border-top: 0.1em rgba(255, 255, 255, 0.05) solid;
   border-bottom: 0.1em rgba(255, 255, 255, 0.05) solid;
   background-color: rgba(0, 0, 0, 0.3);
@@ -63,115 +64,115 @@ div.rcue-logo {
   width: 100%;
   min-width: 120em;
 }
-.rcue-login-register .form-area.separator,
-.rcue-login-register .form-area.social,
-.rcue-login-register .form-area.social.separator {
+.kc-login-register .form-area.separator,
+.kc-login-register .form-area.social,
+.kc-login-register .form-area.social.separator {
   background-repeat: no-repeat;
   background-position: 42.7em center;
 }
-.rcue-login-register .form-area.separator {
+.kc-login-register .form-area.separator {
   background-image: url(../img/login-register-separator.png);
   background-position: 43.2em center;
 }
-.rcue-login-register .form-area.social {
+.kc-login-register .form-area.social {
   background-image: url(../img/login-register-social.png);
 }
-.rcue-login-register .form-area.social.separator {
+.kc-login-register .form-area.social.separator {
   background-image: url(../img/login-register-social-separator.png);
 }
-.rcue-login-register .background-area .section {
+.kc-login-register .background-area .section {
   float: left;
   padding: 0 4.5em 0 4.6em;
   width: auto;
   position: relative;
 }
-.rcue-login-register .background-area .section,
-.rcue-login-register .background-area .social .section {
+.kc-login-register .background-area .section,
+.kc-login-register .background-area .social .section {
   padding-top: 1.5em;
   padding-bottom: 1.5em;
 }
-.rcue-login-register .background-area .section h3 {
+.kc-login-register .background-area .section h3 {
   display: none;
 }
-.rcue-login-register .background-area .section:first-child {
+.kc-login-register .background-area .section:first-child {
   padding-right: 4.5em;
 }
-.rcue-login-register .section > p {
+.kc-login-register .section > p {
   font-size: 1.3em;
   margin-bottom: 1.53846153846154em;
   line-height: 1.3em;
 }
-.rcue-login-register .section.app-form {
+.kc-login-register .section.app-form {
   padding-left: 0;
   position: relative;
 }
-.rcue-login-register form > div {
+.kc-login-register form > div {
   margin-bottom: 1em;
 }
-.rcue-login-register label,
-.rcue-login-register .social-login > p {
+.kc-login-register label,
+.kc-login-register .social-login > p {
   display: inline-block;
   font-size: 1.4em;
   font-weight: 400;
 }
-.rcue-login-register label {
+.kc-login-register label {
   width: 8.21428571428571em;
 }
-.rcue-login-register label.two-lines {
+.kc-login-register label.two-lines {
   float: left;
   margin-top: -0.14285714285714em;
   line-height: 1.1em;
 }
-.rcue-login-register input[type="text"],
-.rcue-login-register input[type="password"] {
+.kc-login-register input[type="text"],
+.kc-login-register input[type="password"] {
   width: 24.7272727272727em;
   /* 272px */
 
 }
-.rcue-login-register form > div.aside-btn {
+.kc-login-register form > div.aside-btn {
   float: left;
   font-size: 1.1em;
   margin-left: 10.4545454545454em;
   margin-top: 0.90909090909091em;
   margin-bottom: 0;
 }
-.rcue-login-register form > div.aside-btn label {
+.kc-login-register form > div.aside-btn label {
   font-size: 1em;
   width: auto;
 }
-.rcue-login-register form > div.aside-btn input[type="checkbox"] {
+.kc-login-register form > div.aside-btn input[type="checkbox"] {
   margin-bottom: 0.54545454545455em;
   /* 6px */
 }
-.rcue-login-register form > input[type="button"],
-.rcue-login-register form > input[type="submit"]{
+.kc-login-register form > input[type="button"],
+.kc-login-register form > input[type="submit"]{
   float: right;
   margin-top: 0.76923076923077em;
   margin-left: 0.90909090909091em;
   /* 10px */
 
 }
-.rcue-login-register p.subtitle {
+.kc-login-register p.subtitle {
   font-size: 1.1em;
   color: #999;
   position: absolute;
   right: 4.09090909090909em;
   top: -0.636363636363636em;
 }
-.rcue-login-register .feedback.bottom-left {
+.kc-login-register .feedback.bottom-left {
   left: 35.7em;
   bottom: 17em;
   min-width: 35em;
 }
-.rcue-login-register input.error[type="text"],
-.rcue-login-register input.error[type="password"],
-.rcue-login-register input.error[type="email"] {
+.kc-login-register input.error[type="text"],
+.kc-login-register input.error[type="password"],
+.kc-login-register input.error[type="email"] {
   background-color: #F8E7E7;
 }
-.rcue-login-register .section.social-login > span {
+.kc-login-register .section.social-login > span {
   display: none;
 }
-.rcue-login-register .section.social-login > p {
+.kc-login-register .section.social-login > p {
   float: left;
   margin-top: 0.28571428571429em;
   /* 14px */
@@ -180,32 +181,32 @@ div.rcue-logo {
   /* 95px */
 
 }
-.rcue-login-register .section.social-login > ul {
+.kc-login-register .section.social-login > ul {
   float: left;
 }
-.rcue-login-register .section.social-login li {
+.kc-login-register .section.social-login li {
   margin-bottom: 2em;
 }
-.rcue-login-register .section.social-login li:last-child {
+.kc-login-register .section.social-login li:last-child {
   margin-bottom: 0;
 }
-.rcue-login-register .section.info-area {
+.kc-login-register .section.info-area {
   padding-right: 0;
 }
-.rcue-login-register .section.info-area p,
-.rcue-login-register .section.info-area li {
+.kc-login-register .section.info-area p,
+.kc-login-register .section.info-area li {
   font-size: 1.4em;
   margin-bottom: 1.64285714285714em;
 }
-.rcue-login-register .section.info-area li {
+.kc-login-register .section.info-area li {
   color: #999;
   margin-bottom: 1em;
 }
-.rcue-login-register .section.info-area li:last-child {
+.kc-login-register .section.info-area li:last-child {
   margin-bottom: 0;
 }
 @media screen and (min-width: 1280px) {
-  .rcue-login-register {
+  .kc-login-register {
     background-size: 100% auto;
   }
 }
@@ -265,19 +266,19 @@ a.zocial:before {
   /* 32px */
 }
 /* Register page */
-.rcue-login-register.register label {
+.kc-login-register.register label {
   width: 7.5em;
   /* 105px */
 
 }
-.rcue-login-register.register input[type="text"],
-.rcue-login-register.register input[type="email"],
-.rcue-login-register.register input[type="password"] {
+.kc-login-register.register input[type="text"],
+.kc-login-register.register input[type="email"],
+.kc-login-register.register input[type="password"] {
   width: 22.9090909090909em;
   /* 252px */
 
 }
-.rcue-login-register.register form > div.aside-btn {
+.kc-login-register.register form > div.aside-btn {
   margin-left: 9.54545454545454em;
   /* 105px */
 
@@ -285,111 +286,111 @@ a.zocial:before {
   /* 138px */
 
 }
-.rcue-login-register.register form > div.aside-btn p {
+.kc-login-register.register form > div.aside-btn p {
   line-height: 1.3em;
 }
-.rcue-login-register p.powered {
+.kc-login-register p.powered {
   font-size: 1.1em;
   margin-top: 1.27272727272727em;
   text-align: right;
   margin-right: 5.81818181818182em;
 }
-.rcue-login-register p.powered a {
+.kc-login-register p.powered a {
   color: #666;
 }
-.rcue-login-register p.powered a:hover {
+.kc-login-register p.powered a:hover {
   color: #0099D3;
 }
 /* Forgot Password page */
-.rcue-login-register.reset .background-area .section.app-form {
+.kc-login-register.reset .background-area .section.app-form {
   width: 43.2em;
 }
-.rcue-login-register.oauth .form-actions {
+.kc-login-register.oauth .form-actions {
     margin-bottom: 0;
     margin-top: 2em;
 }
-.rcue-login-register .background-area .content-area {
+.kc-login-register .background-area .content-area {
     width: 50em;
 }
-.rcue-login-register .background-area .content-area ul {
+.kc-login-register .background-area .content-area ul {
     border-bottom: 1px solid #34393C;
     margin-bottom: 2em;
 }
-.rcue-login-register .background-area .content-area ul li {
+.kc-login-register .background-area .content-area ul li {
     border-top: 1px solid #34393C;
     padding: 2em;
     position: relative;
 }
-.rcue-login-register .background-area .content-area ul li span {
+.kc-login-register .background-area .content-area ul li span {
     font-size: 1.3em;
     line-height: 1.3em;
 }
 
-.rcue-login-register .background-area .content-area ul li span:first-child {
+.kc-login-register .background-area .content-area ul li span:first-child {
     padding-right: 11.5384615384615em;
 }
 
-.rcue-login-register .background-area .content-area ul li span.parent {
+.kc-login-register .background-area .content-area ul li span.parent {
     position: absolute;
     left: 26em;
     top: 1.53846153846154em;
     width: 12.3076923076923em;
 }
 
-.rcue-login-register .background-area .content-area ul li span.icon-info {
+.kc-login-register .background-area .content-area ul li span.icon-info {
     float: right;
     margin-top: 0.5em;
 }
-.rcue-login-register .background-area .content-area p.terms {
+.kc-login-register .background-area .content-area p.terms {
     color: #999999;
     font-size: 1.1em;
     line-height: 1.3em;
 }
 
-.rcue-login-register.reset p.subtitle {
+.kc-login-register.reset p.subtitle {
     margin-bottom: 10px;
     position: inherit;
     text-align: right;
 }
 
-.rcue-login-register .background-area p.instruction {
+.kc-login-register .background-area p.instruction {
     font-size: 1.3em;
     line-height: 1.3em;
     margin-bottom: 1.53846em;
 }
 
-.rcue-login-register .background-area p.instruction.instruction.second {
+.kc-login-register .background-area p.instruction.instruction.second {
     color: #999999;
 }
-.rcue-login-register .background-area p.instruction + .instruction.second {
+.kc-login-register .background-area p.instruction + .instruction.second {
     margin-top: -1.23077em;
 }
 
-.rcue-login-register .background-area a.link-right {
+.kc-login-register .background-area a.link-right {
     float: right;
     font-size: 1.3em;
 }
 
-.rcue-login-register.totp .form-area {
+.kc-login-register.totp .form-area {
   background-image: none;
 }
-.rcue-login-register.reset .form-area p.instruction {
+.kc-login-register.reset .form-area p.instruction {
   font-size: 1.3em;
   line-height: 1.3em;
   margin-bottom: 1.81818181818182em;
 }
-.rcue-login-register.totp {
+.kc-login-register.totp {
   min-height: 0;
 }
-.rcue-login-register.totp ol li {
+.kc-login-register.totp ol li {
   margin-bottom: 3em;
   width: 100%;
 }
-.rcue-login-register.totp ol li p {
+.kc-login-register.totp ol li p {
   font-size: 1.3em;
   margin-bottom: 1.92307692307692em;
 }
-.rcue-login-register.totp ol li p strong {
+.kc-login-register.totp ol li p strong {
   text-indent: -1em;
   float: left;
   font-size: 1.84615384615385em;
@@ -397,40 +398,40 @@ a.zocial:before {
   margin-top: -0.20833333333333em;
   color: #999;
 }
-.rcue-login-register.totp ol li img {
+.kc-login-register.totp ol li img {
   border: 7px solid #fff;
   width: 150px;
 }
-.rcue-login-register.totp ol li .code {
+.kc-login-register.totp ol li .code {
   font-size: 1.3em;
   margin-left: 1.53846153846154em;
 }
-.rcue-login-register.totp ol li form {
+.kc-login-register.totp ol li form {
   width: 357px;
 }
-.rcue-login-register.totp ol li form input[type="text"] {
+.kc-login-register.totp ol li form input[type="text"] {
     width: 22em;
 }
-.rcue-login-register.totp ol li form input[type="submit"] {
+.kc-login-register.totp ol li form input[type="submit"] {
     float: right;
 }
 
-.rcue-login-register.totp ol li:last-child {
+.kc-login-register.totp ol li:last-child {
   margin-bottom: 0;
 }
-.rcue-login-register.totp .content {
+.kc-login-register.totp .content {
   position: inherit;
   margin-top: 16em;
 }
-.rcue-login-register.email .background-area .section {
+.kc-login-register.email .background-area .section {
   width: 41.2em;
 }
-.rcue-login-register.email .background-area .section.email {
+.kc-login-register.email .background-area .section.email {
   width: 45.8em;
 }
-.rcue-login-register.email label {
+.kc-login-register.email label {
   width: 6.78571428571429em;
 }
-.rcue-login-register.email .feedback.bottom-left {
+.kc-login-register.email .feedback.bottom-left {
   left: 38.3em;
 }