Fixes to login forms

2014-02-07 17:23:13 +00:00 · 2014-02-07 17:23:13 +00:00 · 5ff965c7b7
commit 5ff965c7b7
parent a89a1d524c
10 changed files with 92 additions and 155 deletions
--- a/forms/common-themes/src/main/resources/theme/login/base/error.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/error.ftl
@ -1,6 +1,5 @@
-<#-- TODO: Only a placeholder, implementation needed -->
 <#import "template.ftl" as layout>
-<@layout.registrationLayout; section>
+<@layout.registrationLayout displayMessage=false; section>
    <#if section = "title">
    ${rb.errorTitle}

@ -9,8 +8,7 @@

    <#elseif section = "form">
    <div id="kc-error-message">
-        <p class="instruction">${rb.errorGenericMsg}</p>
-        <p id="error-summary" class="instruction second">${message.summary}</p>
+        <p class="instruction">${message.summary}</p>
    </div>
    </#if>
 </@layout.registrationLayout>
--- 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
@ -9,23 +9,23 @@
    <#elseif section = "form">
    <ol id="kc-totp-settings">
        <li>
-            <p><strong>1</strong>${rb.loginTotpStep1_1} <a href="http://code.google.com/p/google-authenticator/" target="_blank">${rb.loginTotpStep1_2}</a> ${rb.loginTotpStep1_3}</p>
+            <p>${rb.loginTotpStep1_1} <a href="http://code.google.com/p/google-authenticator/" target="_blank">${rb.loginTotpStep1_2}</a> ${rb.loginTotpStep1_3}</p>
        </li>
-        <li class="clearfix">
-            <p><strong>2</strong>${rb.loginTotpStep2}</p>
+        <li>
+            <p>${rb.loginTotpStep2}</p>
            <img src="${totp.totpSecretQrCodeUrl}" alt="Figure: Barcode">
            <span class="code">${totp.totpSecretEncoded}</span>
        </li>
-        <li class="clearfix">
-            <p><strong>3</strong>${rb.loginTotpStep3}</p>
-            <form action="${url.loginUpdateTotpUrl}" method="post">
-                <div class="field-wrapper">
-                    <label for="otp" class="two-lines">${rb.loginTotpOneTime}</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="${rb.submit}" />
-            </form>
+        <li>
+            <p>${rb.loginTotpStep3}</p>
        </li>
    </ol>
+    <form action="${url.loginUpdateTotpUrl}" id="kc-totp-settings-form" method="post">
+        <div class="field-wrapper">
+            <label for="otp" class="two-lines">${rb.loginTotpOneTime}</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="${rb.submit}" />
+    </form>
    </#if>
 </@layout.registrationLayout>
--- 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
@ -6,15 +6,8 @@
    <#elseif section = "header">
    ${rb.loginProfileTitle}

-    <#elseif section = "feedback">
-    <div id="kc-feedback" class="feedback warning show">
-        <p><strong>${rb.loginProfileWarning}</strong><br>${rb.loginProfileWarningFollow}</p>
-    </div>
    <#elseif section = "form">
    <form id="kc-update-profile-form" action="${url.loginUpdateProfileUrl}" method="post">
-        <div class="feedback error bottom-left">
-            <p><strong>${rb.loginProfileError}</strong><br>${rb.loginProfileErrorSteps}</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!''}" />
--- 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
@ -7,7 +7,7 @@
    ${rb.emailVerifyTitle}

    <#elseif section = "form">
-    <div id="kc-verify-email" class="app-form">
+    <div id="kc-verify-email">
        <p class="instruction">
            ${rb.emailVerifyInstr}
        </p>
--- a/forms/common-themes/src/main/resources/theme/login/base/login.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/login.ftl
@ -9,7 +9,7 @@
    <#elseif section = "form">
    <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" />
+            <label for="username">${rb.username}</label><input id="username" name="username" value="${login.username!''}" type="text" autofocus />
        </div>
        <div class="field-wrapper">
            <label for="password">${rb.password}</label><input id="password" name="password" type="password" />
--- 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,5 +1,5 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout bodyClass="register" displaySeparator=true; section>
+<@layout.registrationLayout displaySeparator=true; section>
    <#if section = "title">
    ${rb.registerWith} ${realm.name}

--- a/forms/common-themes/src/main/resources/theme/login/base/template.ftl
+++ b/forms/common-themes/src/main/resources/theme/login/base/template.ftl
@ -1,4 +1,4 @@
-<#macro registrationLayout bodyClass="" displaySeparator=false displaySocial=false>
+<#macro registrationLayout bodyClass="" displaySeparator=false displaySocial=false displayMessage=true>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

@ -25,8 +25,8 @@
        <div class="background-area">
            <div class="form-area ${displaySocial?string('social','')} ${displaySeparator?string('separator','')} clearfix">
                <div class="section app-form">
-                    <#if message?has_content>
-                        <div class="feedback ${message.type} bottom-left show">
+                    <#if displayMessage && message?has_content>
+                        <div class="feedback ${message.type}">
                            <p><strong>${message.summary}</strong></p>
                        </div>
                    </#if>
--- a/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/styles.css
+++ b/forms/common-themes/src/main/resources/theme/login/rcue/resources/css/styles.css
@ -35,9 +35,6 @@ strong {
 .hidden {
    display: none;
 }
-.feedback.show {
-    display: inline-block !important;
-}
 .pull-right {
    float: right;
 }
@ -274,77 +271,6 @@ button.primary:enabled:active {
    width: 20em;
    font-weight: normal;
 }
-.feedback-aligner {
-    position: absolute;
-    top: 1.5em;
-    text-align: center;
-    width: 100%;
-    height: 0;
-    z-index: 100;
-}
-.feedback-aligner .feedback {
-    position: relative;
-    display: inline-block;
-    text-align: left;
-    border-width: 1px;
-}
-.feedback-aligner .feedback p {
-    border-width: 1px;
-}
-.feedback {
-    position: absolute;
-    opacity: 0;
-    transition: opacity 0.33s ease-in-out;
-    -moz-transition: opacity 0.33s ease-in-out;
-    -webkit-transition: opacity 0.33s ease-in-out;
-}
-.feedback p {
-    padding: 0.90909090909091em 3.63636363636364em;
-    border-style: solid;
-    border-width: 1px 1px 0px 1px;
-    background-repeat: no-repeat;
-    background-position: 1.2em center;
-    font-size: 1.1em;
-    line-height: 1.4em;
-    border-radius: 2px;
-    color: #4d5258;
-    margin-bottom: 0;
-}
-.feedback.show {
-    opacity: 1;
-}
-.feedback.bottom-left {
-    background-position: left bottom;
-    background-repeat: no-repeat;
-    padding-bottom: 1em;
-}
-.feedback.bottom-left p {
-    background-position: 1.27272727272727em center;
-}
-.feedback.error {
-    background-image: url(../img/feedback-error-arrow-down.png);
-}
-.feedback.error p {
-    border-color: #b91415;
-    background-image: url(../img/feedback-error-sign.png);
-    background-color: #f8e7e7;
-}
-.feedback.success {
-    background-image: url(../img/feedback-success-arrow-down.png);
-}
-.feedback.success p {
-    border-color: #4b9e39;
-    background-image: url(../img/feedback-success-sign.png);
-    background-color: #e4f1e1;
-}
-.feedback.warning {
-    background-image: url(../img/feedback-warning-arrow-down.png);
-}
-.feedback.warning p {
-    border-color: #f17528;
-    background-image: url(../img/feedback-warning-sign.png);
-    background-color: #fef1e9;
-}
 button,
 a.button {
    background-color: #eeeeee;
@ -574,7 +500,7 @@ body {
 }

 body.kc-login-register {
-    background-image: url("../img/login-screen-background.jpg");
+    background-image: url("../img/login-bkgrnd.png");
 }

 .kc-title {
@ -728,11 +654,6 @@ body.kc-login-register {
    right: 4.09090909090909em;
    top: -0.636363636363636em;
 }
-.kc-login-register .feedback.bottom-left {
-    left: 35.7em;
-    bottom: 17em;
-    min-width: 35em;
-}
 .kc-login-register input.error[type="text"],
 .kc-login-register input.error[type="password"],
 .kc-login-register input.error[type="email"] {
@ -940,58 +861,35 @@ a.zocial:before {
    font-size: 1.3em;
 }

-.kc-login-register.totp .form-area {
-    background-image: none;
-}
 .kc-login-register.reset .form-area p.instruction {
    font-size: 1.3em;
    line-height: 1.3em;
    margin-bottom: 1.81818181818182em;
 }
-.kc-login-register.totp {
-    min-height: 0;
-}
-.kc-login-register.totp ol li {
-    margin-bottom: 3em;
-    width: 100%;
-}
-.kc-login-register.totp ol li p {
-    font-size: 1.3em;
-    margin-bottom: 1.92307692307692em;
-}
-.kc-login-register.totp ol li p strong {
-    text-indent: -1em;
-    float: left;
-    font-size: 1.84615384615385em;
-    font-weight: normal;
-    margin-top: -0.20833333333333em;
-    color: #999;
-}
-.kc-login-register.totp ol li img {
-    border: 7px solid #fff;
-    width: 150px;
-}
-.kc-login-register.totp ol li .code {
-    font-size: 1.3em;
-    margin-left: 1.53846153846154em;
-}
-.kc-login-register.totp ol li form {
-    width: 357px;
-}
-.kc-login-register.totp ol li form input[type="text"] {
-    width: 22em;
-}
-.kc-login-register.totp ol li form input[type="submit"] {
-    float: right;
+ol#kc-totp-settings {
+    list-style: decimal;
+    padding-left: 2em;
 }

-.kc-login-register.totp ol li:last-child {
-    margin-bottom: 0;
+ol#kc-totp-settings li {
+    margin-bottom: 1em;
+    font-size: 1.5em;
 }
-.kc-login-register.totp .content {
-    position: inherit;
-    margin-top: 16em;
+
+ol#kc-totp-settings img {
+    margin: 1em 0;
 }
+
+ol#kc-totp-settings span.code {
+    display: block;
+}
+
+form#kc-totp-settings-form {
+    margin-top: 3em;
+    width: 38.9em;
+}
+
+
 .kc-login-register.email .background-area .section {
    width: 41.2em;
 }
@ -1001,8 +899,54 @@ a.zocial:before {
 .kc-login-register.email label {
    width: 6.78571428571429em;
 }
-.kc-login-register.email .feedback.bottom-left {
-    left: 38.3em;
+
+
+.feedback {
+    background-position: left bottom;
+    background-repeat: no-repeat;
+    padding-bottom: 1em;
+
+    position: absolute;
+    top: -7.7em;
+    left: 35em;
+    white-space: nowrap;
+}
+.feedback p {
+    padding: 0.90909090909091em 3.63636363636364em;
+    border-style: solid;
+    border-width: 1px 1px 0px 1px;
+    background-repeat: no-repeat;
+    background-position: 1.27272727272727em center;
+    font-size: 1.1em;
+    line-height: 1.4em;
+    border-radius: 2px;
+    color: #4d5258;
+    margin-bottom: 0;
+}
+
+.feedback.error {
+    background-image: url(../img/feedback-error-arrow-down.png);
+}
+.feedback.error p {
+    border-color: #b91415;
+    background-image: url(../img/feedback-error-sign.png);
+    background-color: #f8e7e7;
+}
+.feedback.success {
+    background-image: url(../img/feedback-success-arrow-down.png);
+}
+.feedback.success p {
+    border-color: #4b9e39;
+    background-image: url(../img/feedback-success-sign.png);
+    background-color: #e4f1e1;
+}
+.feedback.warning {
+    background-image: url(../img/feedback-warning-arrow-down.png);
+}
+.feedback.warning p {
+    border-color: #f17528;
+    background-image: url(../img/feedback-warning-sign.png);
+    background-color: #fef1e9;
 }

 .zocial.google {
@ -1011,3 +955,5 @@ a.zocial:before {
 .zocial.google:before {
  content: "+" !important;
 }
+
+
--- a/forms/common-themes/src/main/resources/theme/login/rcue/resources/img/login-bkgrnd.png
+++ b/forms/common-themes/src/main/resources/theme/login/rcue/resources/img/login-bkgrnd.png
--- a/forms/common-themes/src/main/resources/theme/login/rcue/theme.properties
+++ b/forms/common-themes/src/main/resources/theme/login/rcue/theme.properties
@ -1,2 +1,2 @@
 parent=base
-styles=css/reset.css ../lib/zocial/zocial.css css/styles.css
+styles=css/reset.css lib/zocial/zocial.css css/styles.css