[REF] *: BS4, adapt forms

The 'form-horizontal' class have been removed; the '.form-group'
elements must now use the 'row' class for an horizontal layout.

The 'control-label' class was renamed to 'col-form-label'.

The 'help-block' class was renamed to 'form-text'.

The 'has-error' and 'has-success' classes have been removed and
replaced by a new system using the :valid and :invalid pseudo-classes,
when a parent has the 'was-validated' class. While this system is great,
it is not straightforward to use it in Odoo. Fortunately, BS4 provides
the 'is-valid' and 'is-invalid' classes as fallback. This commit
replaces the 'has-error' and 'has-success' classes by 'o_has_error' and
'o_has_success' classes (for JS compatibility) and use the 'is-*'
fallback classes. (The 'has-warning' class has no equivalent but was
unused in Odoo anyway).

2 files changed, 18 insertions, 18 deletions

diff --git a/addons/payment/static/src/js/payment_form.js b/addons/payment/static/src/js/payment_form.js
index f498599fb3c..2a0e805891a 100644
--- a/addons/payment/static/src/js/payment_form.js
+++ b/addons/payment/static/src/js/payment_form.js
@@ -65,16 +65,16 @@ odoo.define('payment.payment_form', function (require) {
                         if ($(element).attr('type') == 'hidden') {
                             return true;
                         }
-                        $(element).closest('div.form-group').removeClass('has-error');
+                        $(element).closest('div.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
                         $(element).siblings( ".o_invalid_field" ).remove();
                         //force check of forms validity (useful for Firefox that refill forms automatically on f5)
                         $(element).trigger("focusout");
                         if (element.dataset.isRequired && element.value.length === 0) {
-                                $(element).closest('div.form-group').addClass('has-error');
+                                $(element).closest('div.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
                                 $(element).closest('div.form-group').append('<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>');
                                 wrong_input = true;
                         }
-                        else if ($(element).closest('div.form-group').hasClass('has-error')) {
+                        else if ($(element).closest('div.form-group').hasClass('o_has_error')) {
                             wrong_input = true;
                             $(element).closest('div.form-group').append('<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>');
                         }
@@ -228,17 +228,17 @@ odoo.define('payment.payment_form', function (require) {
                     if ($(element).attr('type') == 'hidden') {
                         return true;
                     }
-                    $(element).closest('div.form-group').removeClass('has-error');
+                    $(element).closest('div.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
                     $(element).siblings( ".o_invalid_field" ).remove();
                     //force check of forms validity (useful for Firefox that refill forms automatically on f5)
                     $(element).trigger("focusout");
                     if (element.dataset.isRequired && element.value.length === 0) {
-                            $(element).closest('div.form-group').addClass('has-error');
+                            $(element).closest('div.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
                             var message = '<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>';
                             $(element).closest('div.form-group').append(message);
                             wrong_input = true;
                     }
-                    else if ($(element).closest('div.form-group').hasClass('has-error')) {
+                    else if ($(element).closest('div.form-group').hasClass('o_has_error')) {
                         wrong_input = true;
                         var message = '<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>';
                         $(element).closest('div.form-group').append(message);
diff --git a/addons/payment/static/src/js/payment_portal.js b/addons/payment/static/src/js/payment_portal.js
index eeae7758916..0753af1b3eb 100644
--- a/addons/payment/static/src/js/payment_portal.js
+++ b/addons/payment/static/src/js/payment_portal.js
@@ -15,13 +15,13 @@ $(document).ready(function () {
             $(this).parent('.form-group').children('.card_placeholder').removeClass().addClass('card_placeholder');
         }
         if (valid_value) {
-            $(this).parent('.form-group').addClass('has-success');
-            $(this).parent('.form-group').removeClass('has-error');
+            $(this).parent('.form-group').addClass('o_has_success').find('.form-control, .custom-select').addClass('is-valid');
+            $(this).parent('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
             $(this).siblings('.o_invalid_field').remove();
         }
         else {
-            $(this).parent('.form-group').addClass('has-error');
-            $(this).parent('.form-group').removeClass('has-success');
+            $(this).parent('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            $(this).parent('.form-group').removeClass('o_has_success').find('.form-control, .custom-select').removeClass('is-valid');
         }
     });
 
@@ -30,13 +30,13 @@ $(document).ready(function () {
         var card_type = $.payment.cardType(cc_nbr);
         var valid_value = $.payment.validateCardCVC(this.value, card_type);
         if (valid_value) {
-            $(this).parent('.form-group').addClass('has-success');
-            $(this).parent('.form-group').removeClass('has-error');
+            $(this).parent('.form-group').addClass('o_has_success').find('.form-control, .custom-select').addClass('is-valid');
+            $(this).parent('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
             $(this).siblings('.o_invalid_field').remove();
         }
         else {
-            $(this).parent('.form-group').addClass('has-error');
-            $(this).parent('.form-group').removeClass('has-success');
+            $(this).parent('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            $(this).parent('.form-group').removeClass('o_has_success').find('.form-control, .custom-select').removeClass('is-valid');
         }
     });
 
@@ -46,13 +46,13 @@ $(document).ready(function () {
         var year = expiry_value.year || '';
         var valid_value = $.payment.validateCardExpiry(month, year);
         if (valid_value) {
-            $(this).parent('.form-group').addClass('has-success');
-            $(this).parent('.form-group').removeClass('has-error');
+            $(this).parent('.form-group').addClass('o_has_success').find('.form-control, .custom-select').addClass('is-valid');
+            $(this).parent('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
             $(this).siblings('.o_invalid_field').remove();
         }
         else {
-            $(this).parent('.form-group').addClass('has-error');
-            $(this).parent('.form-group').removeClass('has-success');
+            $(this).parent('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+            $(this).parent('.form-group').removeClass('o_has_success').find('.form-control, .custom-select').removeClass('is-valid');
         }
     });