Materialize login form errors (#10565)

* fixes #10563 - materialize login form errors

* updates expected screenshots

* cleanup css

plugins/Login/javascripts/login.js

@@ -60,7 +60,7 @@
             var ajaxDone = function (response) {
                 $('.loadingPiwik').hide();
 
-                var isSuccess = response.indexOf('message_error') === -1,
+                var isSuccess = response.indexOf('piwik-notification') === -1,
                     fadeOutIds = '.resetForm .message_container';
                 if (isSuccess) {
                     fadeOutIds += ',#reset_form,#reset_form_nav';
@@ -72,6 +72,7 @@
                     }
 
                     $('.resetForm .message_container').html(response).fadeIn(300);
+                    piwikHelper.compileAngularComponents('.resetForm .message_container');
                 });
             };
 

plugins/Login/stylesheets/login.less

@@ -76,21 +76,11 @@
 
     /* MESSAGE
     ***********************/
-    .message_error,
     .message {
         margin: 0 auto;
-        border: 1px solid;
+        border: 1px solid #e6db55;
         padding: 12px;
-    }
-
-    .message_error {
-        background-color: #ffebe8;
-        border-color: #c00;
-    }
-
-    .message {
         background-color: #ffffe0;
-        border-color: #e6db55;
     }
 
     /* NAVIGATION

plugins/Login/templates/_formErrors.twig

 
 {% if formErrors is defined and formErrors is not empty %}
-    <div class="message_error">
+    <div piwik-notification
+         noclear="true"
+         context="error">
         {% for data in formErrors %}
             <strong>{{ 'General_Error'|translate }}</strong>: {{ data|raw }}
             <br/>

plugins/Login/templates/login.twig

@@ -72,7 +72,9 @@
                         {{ include('@Login/_formErrors.twig', {formErrors: form_data.errors } )  }}
 
                         {% if AccessErrorString %}
-                            <div class="message_error">
+                            <div piwik-notification
+                                 noclear="true"
+                                 context="error">
                                 <strong>{{ 'General_Error'|translate }}</strong>: {{ AccessErrorString|raw }}<br/>
                             </div>
                         {% endif %}