[IMP] base, totp: simplify form layout and improve responsiveness

Some of the TOTP-related forms contained an attempt at making a centered
modal pop-up, using a bootstrap `card` that would also serve to
emphasize that the interaction was sensitive and security-related.
Some of the "footer buttons" were moved inside the form to make it
more obvious that they were part of the interaction flow.

However some of this caused breakages of responsiveness and did not yield
a really satisfactory result anyway.

This commit switches back to using regular non-centered forms. It looks
quite ugly because the content is better suited for a narrow modal, but
it means less surprises in terms of layout and less responsiveness
issues.

closes odoo/odoo#58541

Signed-off-by: Olivier Dony (odo) <odo@openerp.com>

2 files changed, 5 insertions, 9 deletions

diff --git a/addons/auth_totp_portal/static/src/js/totp_frontend.js b/addons/auth_totp_portal/static/src/js/totp_frontend.js
index cb249e63d65..5f55970344c 100644
--- a/addons/auth_totp_portal/static/src/js/totp_frontend.js
+++ b/addons/auth_totp_portal/static/src/js/totp_frontend.js
@@ -13,7 +13,7 @@ function fromField(f, record) {
     switch (f.getAttribute('name')) {
     case 'qrcode':
         const qrcode = document.createElement('img');
-        qrcode.setAttribute('class', 'img img-fluid offset-1 offset-lg-2');
+        qrcode.setAttribute('class', 'img img-fluid offset-1');
         qrcode.setAttribute('src', 'data:image/png;base64,' + record['qrcode']);
         return qrcode;
     case 'url':
@@ -24,7 +24,7 @@ function fromField(f, record) {
     case 'code':
         const code = document.createElement('input');
         code.setAttribute('name', 'code');
-        code.setAttribute('class', 'form-control');
+        code.setAttribute('class', 'form-control col-10 col-md-6');
         code.setAttribute('placeholder', '6-digit code');
         code.required = true;
         code.maxLength = 6;
@@ -108,10 +108,6 @@ class Button {
             // because Dialog doesnt' call() click on the descriptor object
             this.click = this._click.bind(this);
         }
-        if (!button_node.closest('footer')) {
-            // remove non-footer buttons, otherwise they will appear twice
-            button_node.parentNode.removeChild(button_node);
-        }
     }
     async _click() {
         if (!this.input.reportValidity()) {
@@ -191,7 +187,7 @@ publicWidget.registry.TOTPButton = publicWidget.Widget.extend({
         codeInput.addEventListener('input', () => codeInput.setCustomValidity(''));
 
         const buttons = [];
-        for(const button of body.querySelectorAll('button')) {
+        for(const button of doc.querySelectorAll('footer button')) {
             buttons.push(new Button(this, model, record.id, codeInput, button));
         }
 
diff --git a/addons/auth_totp_portal/static/tests/totp_portal.js b/addons/auth_totp_portal/static/tests/totp_portal.js
index ec26366e9ad..6424647aabe 100644
--- a/addons/auth_totp_portal/static/tests/totp_portal.js
+++ b/addons/auth_totp_portal/static/tests/totp_portal.js
@@ -12,7 +12,7 @@ tour.register('totportal_tour_setup', {
     trigger: 'button#auth_totp_portal_enable',
 }, {
     content: "Check that we have to enter enhanced security mode",
-    trigger: '.card-title:contains("confirm your password")',
+    trigger: 'div:contains("confirm your password")',
     run: () => {},
 }, {
     content: "Input password",
@@ -84,7 +84,7 @@ tour.register('totportal_login_enabled', {
     trigger: 'button#auth_totp_portal_disable',
 }, {
     content: "Check that we have to enter enhanced security mode",
-    trigger: '.card-title:contains("confirm your password")',
+    trigger: 'div:contains("confirm your password")',
     run: () => {},
 }, {
     content: "Input password",