IBX-11973: Added validation to login and forgot password screens

src/bundle/Resources/encore/ibexa.js.config.js

@@ -250,7 +250,6 @@ module.exports = (Encore) => {
         .addEntry('ibexa-admin-ui-login-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),
             path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'),
-            path.resolve(__dirname, '../public/js/scripts/login.js'),
         ])
         .addEntry('ibexa-admin-ui-reset-password-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'),

src/bundle/Resources/public/scss/_inputs.scss

@@ -1,6 +1,7 @@
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/custom.scss' as *;
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *;
 @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/mixins/inputs' as *;
+@use '@ids-assets/scss/variables/colors' as *;
 @use 'sass:color';
 
 .form-control {
@@ -50,6 +51,10 @@
         border-color: var(--ibexa-input-disabled-border-color, #{$ibexa-color-dark-200});
     }
 
+    &.ids-input--error {
+        border-color: var(--ids-input-error-border-color, #{$color-error-80});
+    }
+
     &--text,
     &--textarea,
     &--date {

src/bundle/Resources/views/themes/admin/account/forgot_password/index.html.twig

@@ -10,7 +10,15 @@
     {% if form_forgot_user_password is defined %}
         {{ form_start(form_forgot_user_password, {'attr': {'class': 'ibexa-form-validate ibexa-login__forgot-password-form'}}) }}
         <fieldset>
-            {{ form_row(form_forgot_user_password.email, {'attr': {'class': 'ibexa-login__input'}}) }}
+            {{ form_row(form_forgot_user_password.email, {
+                'attr': {
+                    'class': 'ibexa-login__input',
+                    'error': form_forgot_user_password.email.vars.errors is not empty,
+                },
+                'label_attr': {
+                    'class': form_forgot_user_password.email.vars.errors is not empty ? 'ids-label--error' : '',
+                },
+            }) }}
         </fieldset>
         {{ form_widget(form_forgot_user_password.reset, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium ibexa-login__btn ibexa-login__btn--reset-password'}}) }}
 

src/bundle/Resources/views/themes/admin/account/forgot_password/index_with_login.html.twig

@@ -10,7 +10,14 @@
     {% if form_forgot_user_password_with_login is defined %}
         {{ form_start(form_forgot_user_password_with_login, {'attr': {'class': 'ibexa-form-validate'} }) }}
         <fieldset>
-            {{ form_row(form_forgot_user_password_with_login.login) }}
+            {{ form_row(form_forgot_user_password_with_login.login, {
+                'attr': {
+                    'error': form_forgot_user_password_with_login.login.vars.errors is not empty,
+                },
+                'label_attr': {
+                    'class': form_forgot_user_password_with_login.login.vars.errors is not empty ? 'ids-label--error' : '',
+                },
+            }) }}
         </fieldset>
         {{ form_widget(form_forgot_user_password_with_login.reset, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium ibexa-login__btn ibexa-login__btn--reset-password'}}) }}
 

src/bundle/Resources/views/themes/admin/account/login/index.html.twig

@@ -3,16 +3,23 @@
 {% set is_sso = false %}
 
 {%- block content -%}
+    {% set blank_fields = error is not null and error.blankFields is defined ? error.blankFields : [] %}
+    {% set has_username_error = 'username' in blank_fields %}
+    {% set has_password_error = 'password' in blank_fields %}
+    {% set show_error_alert = error is not null and blank_fields is empty %}
+    {% set username_label = 'authentication.login'|trans|desc('Login') %}
+    {% set password_label = 'authentication.password'|trans|desc('Password') %}
+
     {# TODO: change to <twig:ibexa:label when ready #}
     <div class="ibexa-login__actions-headline">{{ 'base.sign_in'|trans|desc('Sign in to Cohesivo') }}</div>
 
     {% block login_form %}
         {{ ibexa_twig_component_group('admin-ui-login-form-before') }}
 
-        <form action="{{ path( 'login_check' ) }}" method="post" role="form">
+        <form action="{{ path( 'login_check' ) }}" method="post" role="form" novalidate>
             <fieldset>
                 {% block login_form_errors %}
-                    {% if error %}
+                    {% if show_error_alert %}
                         <div class="ibexa-login__errors-container">
                             {% include '@ibexadesign/ui/component/alert/alert.html.twig' with {
                                 type: 'error',
@@ -23,9 +30,9 @@
                 {% endblock %}
 
                 {% block login_form_fields %}
-                    <div class="form-group{% if error %} has-error{% endif %}">
+                    <div class="form-group{% if has_username_error or show_error_alert %} has-error{% endif %}">
                         <div class="ibexa-login__input-label-wrapper">
-                            <twig:ibexa:label for="username">{{ 'authentication.login'|trans|desc('Login') }}</twig:ibexa:label>
+                            <twig:ibexa:label for="username" :error="has_username_error">{{ username_label }}</twig:ibexa:label>
                         </div>
                         {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
                             type: 'text',
@@ -35,15 +42,26 @@
                                 name: '_username',
                                 value: last_username,
                                 required: true,
+                                error: has_username_error,
                                 autofocus: true,
                                 autocomplete: 'on',
                                 placeholder: ' '
                             }
                         } only -%}
+                        {% if has_username_error %}
+                            <div class="ibexa-form-error">
+                                <em class="ibexa-form-error__row">
+                                    <svg class="ibexa-icon ibexa-icon--small-medium ibexa-form-error__icon">
+                                        <use xlink:href="{{ ibexa_icon_path('notice') }}"></use>
+                                    </svg>
+                                    {{ 'error.required.field'|trans({ '%fieldName%': username_label }, 'forms')|desc('%fieldName% cannot be empty.') }}
+                                </em>
+                            </div>
+                        {% endif %}
                     </div>
-                    <div class="form-group{% if error %} has-error{% endif %} position-relative">
+                    <div class="form-group{% if has_password_error or show_error_alert %} has-error{% endif %} position-relative">
                         <div class="ibexa-login__input-label-wrapper">
-                            <twig:ibexa:label for="password">{{ 'authentication.password'|trans|desc('Password') }}</twig:ibexa:label>
+                            <twig:ibexa:label for="password" :error="has_password_error">{{ password_label }}</twig:ibexa:label>
                         </div>
                         {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with {
                             type: 'password',
@@ -52,9 +70,20 @@
                                 class: 'ibexa-login__input ibexa-login__input--password',
                                 name: '_password',
                                 required: true,
+                                error: has_password_error,
                                 placeholder: ' '
                             }
                         } only -%}
+                        {% if has_password_error %}
+                            <div class="ibexa-form-error">
+                                <em class="ibexa-form-error__row">
+                                    <svg class="ibexa-icon ibexa-icon--small-medium ibexa-form-error__icon">
+                                        <use xlink:href="{{ ibexa_icon_path('notice') }}"></use>
+                                    </svg>
+                                    {{ 'error.required.field'|trans({ '%fieldName%': password_label }, 'forms')|desc('%fieldName% cannot be empty.') }}
+                                </em>
+                            </div>
+                        {% endif %}
                     </div>
 
                     <input type="hidden" name="_csrf_token" value="{{ csrf_token("authenticate") }}" />
@@ -68,7 +97,6 @@
                         type="primary"
                         htmlType="submit"
                         class="ibexa-login__btn ibexa-login__btn--sign-in"
-                        :disabled="true"
                     >
                         {{ 'authentication.sign_in'|trans|desc('Sign in') }}
                     </twig:ibexa:button>
@@ -80,7 +108,6 @@
                             type="secondary"
                             htmlType="submit"
                             class="ibexa-login__btn"
-                            :disabled="true"
                         >
                             {{ 'authentication.sso'|trans|desc('Sign in with SSO') }}
                         </twig:ibexa:button>

src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig

@@ -26,18 +26,12 @@
         {% set requirements = content_type is defined ? ibexa_password_requirements(content_type) : [] %}
         {% set requirement_identifiers = requirements|map((requirement) => requirement.identifier) %}
 
-        {% set password_errors = [] %}
-        {% for error in new_password_form.vars.errors %}
-            {% set password_errors = password_errors|merge([error]) %}
-        {% endfor %}
-        {% for error in new_password_form.first.vars.errors %}
-            {% set password_errors = password_errors|merge([error]) %}
-        {% endfor %}
-
-        {% set policy_errors = password_errors|filter((error) => error.cause.code|default(null) in requirement_identifiers) %}
-        {% set other_errors = password_errors|filter((error) => error.cause.code|default(null) not in requirement_identifiers) %}
+        {% set new_password_errors = new_password_form.first.vars.errors %}
+        {% set confirm_password_errors = new_password_form.second.vars.errors %}
+        {% set policy_errors = new_password_errors|filter((error) => error.cause.code|default(null) in requirement_identifiers) %}
         {% set failed_requirement_identifiers = policy_errors|map((error) => error.cause.code) %}
-        {% set can_mark_requirements = form_reset_user_password.vars.submitted and other_errors is empty %}
+        {% set can_mark_requirements = form_reset_user_password.vars.submitted
+            and new_password_errors|length == policy_errors|length %}
 
         {% if requirements is not empty %}
             <div class="ibexa-password-requirements">
@@ -65,24 +59,30 @@
 
         {{ form_start(form_reset_user_password, {'attr': {'class': 'ibexa-form-validate'} }) }}
         <fieldset>
-            <div class="form-group{% if policy_errors is not empty %} has-error{% endif %}">
-                {{ form_label(new_password_form.first) }}
-                {{ form_widget(new_password_form.first, policy_errors is not empty
+            <div class="form-group{% if new_password_errors is not empty %} has-error{% endif %}">
+                {{ form_label(new_password_form.first, null, new_password_errors is not empty
+                    ? { label_attr: { class: 'ids-label--error' } }
+                    : {}
+                ) }}
+                {{ form_widget(new_password_form.first, new_password_errors is not empty
                     ? { attr: { class: 'is-invalid', error: true } }
                     : {}
                 ) }}
-                {% if policy_errors is not empty %}
-                    {{ reset_password_macros.password_field_errors(policy_errors) }}
+                {% if new_password_errors is not empty %}
+                    {{ reset_password_macros.password_field_errors(new_password_errors) }}
                 {% endif %}
             </div>
-            <div class="form-group{% if other_errors is not empty %} has-error{% endif %}">
-                {{ form_label(new_password_form.second) }}
-                {{ form_widget(new_password_form.second, other_errors is not empty
+            <div class="form-group{% if confirm_password_errors is not empty %} has-error{% endif %}">
+                {{ form_label(new_password_form.second, null, confirm_password_errors is not empty
+                    ? { label_attr: { class: 'ids-label--error' } }
+                    : {}
+                ) }}
+                {{ form_widget(new_password_form.second, confirm_password_errors is not empty
                     ? { attr: { class: 'is-invalid', error: true } }
                     : {}
                 ) }}
-                {% if other_errors is not empty %}
-                    {{ reset_password_macros.password_field_errors(other_errors) }}
+                {% if confirm_password_errors is not empty %}
+                    {{ reset_password_macros.password_field_errors(confirm_password_errors) }}
                 {% endif %}
             </div>
         </fieldset>