IBX-3972: Fixed reset and change password validation messages styling

For more details see https://issues.ibexa.co/browse/IBX-3972 and #2094 * Added proper styling for frontend validation in reset/change password forms * Removed duplicated errors from change password form * Cleaned up redundant form blocks --------- Co-authored-by: Michał Grabowski <[email protected]>
ezsystems · Mar 1, 2023 · 4ba6fbb · 4ba6fbb
1 parent 3be546d
commit 4ba6fbb
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 42 deletions.
diff --git a/src/bundle/Resources/public/scss/_forms.scss b/src/bundle/Resources/public/scss/_forms.scss
@@ -67,35 +67,14 @@ form:not(.form-inline) {
         @include label-required();
     }
 
-    &.is-invalid {
-        .ez-field__label-wrapper,
-        .ez-field__label {
-            color: $ibexa-color-danger;
-        }
-
-        .ez-field__data {
-            position: relative;
-
-            &:before {
-                content: '!';
-                position: absolute;
-                top: 0;
-                left: calculateRem(-20px);
-                width: calculateRem(20px);
-                background: $ibexa-color-primary;
-                color: $ibexa-white;
-                text-align: center;
-                font-size: calculateRem(16px);
-                border-top-left-radius: $ibexa-border-radius;
-                border-bottom-left-radius: $ibexa-border-radius;
-            }
+    .ez-data-source__input {
+        &.is-invalid {
+            @include input-invalid;
         }
     }
 
     &__error {
-        display: inline-block;
-        margin-left: calculateRem(8px);
-        color: $ibexa-color-danger;
+        @include error-under-label();
     }
 }
 

diff --git a/src/bundle/Resources/public/scss/_login.scss b/src/bundle/Resources/public/scss/_login.scss
@@ -7,8 +7,13 @@
     }
 
     .ez-field__error {
-        margin-left: 0;
-        color: $ibexa-color-warning-dark;
+        @include error-under-label();
+    }
+
+    &__form-input {
+        &.is-invalid {
+            @include input-invalid;
+        }
     }
 
     &__image-col {
@@ -106,13 +111,18 @@
 
     &__btn {
         &--sign-in,
-        &--reset-password {
+        &--reset-password,
+        &--change-password {
             padding: calculateRem(10px) calculateRem(80px);
         }
 
         &--cancel {
             padding: calculateRem(10px) calculateRem(24px);
         }
+
+        &--change-password {
+            margin-top: calculateRem(32px);
+        }
     }
 
     &__copright {

diff --git a/src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig
@@ -1,17 +1,7 @@
 {# @todo move to view/user/preferences in the future #}
 
-{% use 'bootstrap_4_layout.html.twig' %}
-
 {% trans_default_domain 'change_user_password' %}
 
-{%- block form_errors -%}
-    {%- if errors|length > 0 -%}
-        {%- for error in errors -%}
-            <em class="ez-field__error">{{ error.message }}</em>
-        {%- endfor -%}
-    {%- endif -%}
-{%- endblock -%}
-
 {% block form_row -%}
     {% set widget_wrapper_attr = widget_wrapper_attr|default({})|merge({'class': (widget_wrapper_attr.class|default('') ~ ' ez-field__data')|trim}) %}
     {% set wrapper_class = 'ez-field form-group' %}

diff --git a/src/bundle/Resources/views/themes/admin/account/change_password/index.html.twig b/src/bundle/Resources/views/themes/admin/account/change_password/index.html.twig
@@ -1,6 +1,9 @@
 {% extends '@ezdesign/ui/base.html.twig' %}
 
-{% form_theme form_change_user_password '@ezdesign/account/change_password/form_fields.html.twig'  %}
+{% form_theme form_change_user_password with [
+    '@ezdesign/account/form_fields.html.twig',
+    '@ezdesign/account/change_password/form_fields.html.twig'
+] %}
 
 {% trans_default_domain 'user_change_password' %}
 

diff --git a/src/bundle/Resources/views/themes/admin/account/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/account/form_fields.html.twig
@@ -41,8 +41,10 @@
     {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ez-login__form-input')|trim}) %}
     {% set wrapper_attr = wrapper_attr|default({})|merge({'class': (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %}
     <div{% with { attr: wrapper_attr } %}{{ block('attributes') }}{% endwith %}>
-        {{ block('form_errors') }}
-        {{ block('form_label') }}
+        <div class="ez-field__label-wrapper">
+            {{ block('form_label') }}
+            {{ block('form_errors') }}
+        </div>
         {{- form_widget(form, {'attr': attr}) -}}
     </div>
 {%- endblock %}
diff --git a/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig b/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig
@@ -9,7 +9,7 @@
         <fieldset>
             {{ form_widget(form_reset_user_password.new_password) }}
         </fieldset>
-        {{ form_widget(form_reset_user_password.update, {'attr': {'class': 'btn btn-primary'}}) }}
+        {{ form_widget(form_reset_user_password.update, {'attr': {'class': 'btn btn-primary ez-login__btn--change-password'}}) }}
         {{ form_end(form_reset_user_password) }}
     {% endif %}