From 32978d022d2fc910abc4bc19acbf18d3ccad339b Mon Sep 17 00:00:00 2001
From: Stian Thorgersen <stianst@gmail.com>
Date: Tue, 19 Jan 2016 08:52:44 +0100
Subject: [PATCH] KEYCLOAK-1572 Messages on login page are not in line with
 PatternFly

---
 .../resources/theme/base/login/template.ftl   | 24 +++----
 .../keycloak/login/resources/css/login.css    | 65 +++----------------
 .../theme/keycloak/login/theme.properties     |  9 ++-
 3 files changed, 29 insertions(+), 69 deletions(-)

diff --git a/forms/common-themes/src/main/resources/theme/base/login/template.ftl b/forms/common-themes/src/main/resources/theme/base/login/template.ftl
index a637969419..f0d94a06a8 100755
--- a/forms/common-themes/src/main/resources/theme/base/login/template.ftl
+++ b/forms/common-themes/src/main/resources/theme/base/login/template.ftl
@@ -38,18 +38,6 @@
                 <div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}"><#nested "header"></div>
             </div>
 
-            <#if displayMessage && message?has_content>
-                <div id="kc-feedback" class="feedback-${message.type} ${properties.kcFeedBackClass!}">
-                    <div id="kc-feedback-wrapper">
-                        <span class="kc-feedback-text">${message.summary}</span>
-                    </div>
-                </div>
-            <#else>
-                <div id="kc-feedback-placeholder" class="${properties.kcFeedBackPlaceholderClass!}">
-                    <div id="kc-feedback-placeholder-wrapper"></div>
-                </div>
-            </#if>
-
             <#if realm.internationalizationEnabled>
                 <div id="kc-locale" class="${properties.kcLocaleClass!}">
                     <div id="kc-locale-wrapper" class="${properties.kcLocaleWrapperClass!}">
@@ -67,6 +55,18 @@
 
             <div id="kc-content" class="${properties.kcContentClass!}">
                 <div id="kc-content-wrapper" class="${properties.kcContentWrapperClass!}">
+
+                    <#if displayMessage && message?has_content>
+                        <div class="${properties.kcFeedbackAreaClass!}">
+                            <div class="alert alert-${message.type}">
+                                <#if message.type = 'success'><span class="${properties.kcFeedbackSuccessIcon}"></span></#if>
+                                <#if message.type = 'warning'><span class="${properties.kcFeedbackWarningIcon}"></span></#if>
+                                <#if message.type = 'error'><span class="${properties.kcFeedbackErrorIcon}"></span></#if>
+                                <span>${message.summary}</span>
+                            </div>
+                        </div>
+                    </#if>
+
                     <div id="kc-form" class="${properties.kcFormAreaClass!}">
                         <div id="kc-form-wrapper" class="${properties.kcFormAreaWrapperClass!}">
                             <#nested "form">
diff --git a/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css b/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
index 0c05a4b7f9..cbf5a252fa 100644
--- a/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
+++ b/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
@@ -3,6 +3,12 @@
     background-size: 100% auto;
 }
 
+.alert-error {
+    background-color: #ffffff;
+    border-color: #cc0000;
+    color: #333333;
+}
+
 .kc-dropdown{
     position: relative;
     z-index: 9999;
@@ -114,59 +120,10 @@
     display: block;
 }
 
-#kc-feedback-wrapper {
-    display: inline-block;
-    width: auto;
-    background-position: left bottom;
-    background-repeat: no-repeat;
-    padding-bottom: 10px;
-}
-
-#kc-feedback span {
-    display: block;
-    padding: 0.90909090909091em 3.63636363636364em;
-    border-style: solid;
-    border-width: 1px 1px 0px 1px;
-    background-repeat: no-repeat;
-    background-position: 1.27272727272727em center;
-    font-weight: normal;
-    line-height: 1.4em;
-    border-radius: 2px;
-    color: #4d5258;
-    margin-bottom: 0;
-}
-
 #kc-terms-text {
     margin-bottom: 20px;
 }
 
-.feedback-error #kc-feedback-wrapper {
-    background-image: url(../img/feedback-error-arrow-down.png);
-}
-.feedback-error span {
-    border-color: #b91415;
-    background-image: url(../img/feedback-error-sign.png);
-    background-color: #f8e7e7;
-}
-
-.feedback-success #kc-feedback-wrapper {
-    background-image: url(../img/feedback-success-arrow-down.png);
-}
-.feedback-success span {
-    border-color: #4b9e39;
-    background-image: url(../img/feedback-success-sign.png);
-    background-color: #e4f1e1;
-}
-
-.feedback-warning #kc-feedback-wrapper {
-    background-image: url(../img/feedback-warning-arrow-down.png);
-}
-.feedback-warning span {
-    border-color: #f17528;
-    background-image: url(../img/feedback-warning-sign.png);
-    background-color: #fef1e9;
-}
-
 #kc-registration {
     margin-bottom: 15px;
 }
@@ -283,6 +240,10 @@ ol#kc-totp-settings li:first-of-type {
         top: 50px;
         right: 50px;
     }
+
+    .login-pf .container {
+        padding-right: 80px;
+    }
 }
 
 @media (max-width: 767px) {
@@ -300,12 +261,6 @@ ol#kc-totp-settings li:first-of-type {
         text-align: center;
     }
 
-    #kc-feedback {
-        padding-left: 15px;
-        padding-right: 15px;
-        float: none;
-    }
-
     #kc-form {
         float: none;
     }
diff --git a/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties b/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
index b2364e1427..6159872dbc 100644
--- a/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
+++ b/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
@@ -12,12 +12,17 @@ kcContentClass=col-sm-12 col-md-12 col-lg-12 container
 kcContentWrapperClass=row
 
 kcHeaderClass=col-xs-12 col-sm-7 col-md-6 col-lg-5
-kcFeedBackClass=col-xs-12 col-sm-4 col-md-5 col-lg-6
-kcFeedBackPlaceholderClass=col-xs-12 col-sm-4 col-md-5 col-lg-6
+kcFeedbackAreaClass=col-md-12
 kcLocaleClass=col-xs-12 col-sm-1
+kcAlertIconClasserror=pficon pficon-error-circle-o
 
 kcFormAreaClass=col-xs-12 col-sm-8 col-md-8 col-lg-7 login
 
+kcFeedbackErrorIcon=pficon pficon-error-circle-o
+kcFeedbackWarningIcon=pficon pficon-warning-triangle-o
+kcFeedbackSuccessIcon=alert alert-success
+
+
 kcFormClass=form-horizontal
 kcFormGroupClass=form-group
 kcFormGroupErrorClass=has-error