From 2a015600b2cf4631cbf16ca0802191c0f60c93d3 Mon Sep 17 00:00:00 2001
From: amdi-odoo <amdi@odoo.com>
Date: Fri, 23 Dec 2022 13:04:04 +0000
Subject: [PATCH] [FIX] web,auth_totp,base: fix 2FA views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Web:

Adding a css rule constraint to avoid the rule
from overwriting the o_field_highlight css class
applied on a field in a form view.

Base, auth_totp:

Adding the o_field_highlight class on the 2FA
form fields to display the input bottom border and
thereby more easily identify the fields.

Adding a placeholder to the 2FA password field.

Modifying the 2FA title and toggle font to keep
a consistency between the different page titles.

Task-3083540

closes odoo/odoo#108611

X-original-commit: c128a01490bbbcbf824781f5e8716aa30e65ba5b
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
---
 addons/auth_totp/i18n/auth_totp.pot           | 14 +++++++++++++
 addons/auth_totp/views/res_users_views.xml    | 20 +++++++++++--------
 .../wizard/auth_totp_wizard_views.xml         |  2 +-
 .../src/views/form/form_controller.scss       |  2 +-
 odoo/addons/base/views/res_users_views.xml    |  3 ++-
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/addons/auth_totp/i18n/auth_totp.pot b/addons/auth_totp/i18n/auth_totp.pot
index dde8099e5e9..2ea3d7c72df 100644
--- a/addons/auth_totp/i18n/auth_totp.pot
+++ b/addons/auth_totp/i18n/auth_totp.pot
@@ -32,6 +32,20 @@ msgstr ""
 msgid "2-Factor authentication is now enabled."
 msgstr ""
 
+#. module: auth_totp
+#: model_terms:ir.ui.view,arch_db:auth_totp.view_totp_form
+msgid ""
+"<i title=\"Documentation\" class=\"fa fa-fw o_button_icon fa-info-circle\"/>\n"
+"                                    Learn More"
+msgstr ""
+
+#. module: auth_totp
+#: model_terms:ir.ui.view,arch_db:auth_totp.view_totp_field
+msgid ""
+"<i title=\"Documentation\" class=\"fa fa-fw o_button_icon fa-info-circle\"/>\n"
+"                            Learn More"
+msgstr ""
+
 #. module: auth_totp
 #: model_terms:ir.ui.view,arch_db:auth_totp.view_totp_form
 msgid ""
diff --git a/addons/auth_totp/views/res_users_views.xml b/addons/auth_totp/views/res_users_views.xml
index 88ef66f0394..fd7741c5355 100644
--- a/addons/auth_totp/views/res_users_views.xml
+++ b/addons/auth_totp/views/res_users_views.xml
@@ -23,12 +23,12 @@
                     <field name="totp_enabled" invisible="1"/>
                     <!-- For own user, allow to activate the two-factor Authentication -->
                     <div>
-                        <div class="o_horizontal_separator d-flex align-items-center mt-0">Two-factor Authentication
+                        <div class="o_horizontal_separator d-flex align-items-center mt-2 mb-4 text-uppercase fw-bolder small">Two-factor Authentication
                                 <div attrs="{'invisible': [('totp_enabled', '!=', False)]}">
                                     <button attrs="{'invisible': &quot;[('id', '=', uid)]&quot;}" name="action_totp_enable_wizard"
                                             disabled="1" type="object" class="fa fa-toggle-off o_auth_2fa_btn disabled" aria-label="Enable 2FA"></button>
                                             <button attrs="{'invisible': &quot;[('id', '!=', uid)]&quot;}" name="action_totp_enable_wizard"
-                                            type="object" class="fa fa-toggle-off o_auth_2fa_btn disabled" aria-label="Enable 2FA"></button>
+                                            type="object" class="fa fa-toggle-off o_auth_2fa_btn disabled pe-auto" aria-label="Enable 2FA"></button>
                                 </div>
                                 <button attrs="{'invisible': [('totp_enabled', '=', False)]}" name="action_totp_disable" type="object"
                                 class="fa fa-toggle-on o_auth_2fa_btn text-primary enabled" aria-label="Disable 2FA"></button>
@@ -37,8 +37,10 @@
                                 Two-factor Authentication ("2FA") is a system of double authentication.
                                 The first one is done with your password and the second one with a code you get from a dedicated mobile app.
                                 Popular ones include Authy, Google Authenticator or the Microsoft Authenticator.
-                                <a href="https://www.odoo.com/documentation/master/applications/general/auth/2fa.html"
-                                   title="Learn More" target="_blank">Learn More</a>
+                                <a href="https://www.odoo.com/documentation/master/applications/general/auth/2fa.html" title="Learn More" target="_blank">
+                                    <i title="Documentation" class="fa fa-fw o_button_icon fa-info-circle"></i>
+                                    Learn More
+                                </a>
                                 </span>
                                 <span attrs="{'invisible': [('totp_enabled', '=', False)]}" class="text-muted">This account is protected!</span>
                             </div>
@@ -69,9 +71,9 @@
             <group name="auth" position="after">
                 <field name="totp_enabled" invisible="1"/>
                 <div>
-                    <div class="o_horizontal_separator mt-0">Two-factor Authentication
+                    <div class="o_horizontal_separator mt-2 mb-4 text-uppercase fw-bolder small">Two-factor Authentication
                         <button attrs="{'invisible': [('totp_enabled', '!=', False)]}" name="action_totp_enable_wizard"
-                            type="object" class="fa fa-toggle-off o_auth_2fa_btn mb-1" aria-label="Enable 2FA"/>
+                            type="object" class="fa fa-toggle-off o_auth_2fa_btn" aria-label="Enable 2FA"/>
                         <button attrs="{'invisible': [('totp_enabled', '=', False)]}" name="action_totp_disable"
                             type="object" class="fa fa-toggle-on o_auth_2fa_btn text-primary" aria-label="Disable 2FA"/>
                     </div>
@@ -80,8 +82,10 @@
                         Two-factor Authentication ("2FA") is a system of double authentication.
                         The first one is done with your password and the second one with a code you get from a dedicated mobile app.
                         Popular ones include Authy, Google Authenticator or the Microsoft Authenticator.
-                        <a href="https://www.odoo.com/documentation/master/applications/general/auth/2fa.html"
-                            title="Learn More" target="_blank">Learn More</a>
+                        <a href="https://www.odoo.com/documentation/master/applications/general/auth/2fa.html" title="Learn More" target="_blank">
+                            <i title="Documentation" class="fa fa-fw o_button_icon fa-info-circle"></i>
+                            Learn More
+                        </a>
                     </span>
                     <group name="auth_devices" string="Trusted Devices" attrs="{'invisible': [('totp_trusted_device_ids', '=', [])]}">
                         <div colspan="2">
diff --git a/addons/auth_totp/wizard/auth_totp_wizard_views.xml b/addons/auth_totp/wizard/auth_totp_wizard_views.xml
index 8d59494630f..94a5ffdd1aa 100644
--- a/addons/auth_totp/wizard/auth_totp_wizard_views.xml
+++ b/addons/auth_totp/wizard/auth_totp_wizard_views.xml
@@ -59,7 +59,7 @@
                             <div class="mt-2">
                                 <label for="code" class="px-0">Verification Code</label>
                                 <div class="d-flex align-items-center">
-                                    <field required="True" name="code" autocomplete="off" class="px-0 me-2" placeholder="e.g. 123456"/>
+                                    <field required="True" name="code" autocomplete="off" class="o_field_highlight px-0 me-2" placeholder="e.g. 123456"/>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index aa2c6b293b0..202471a5e4a 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -213,7 +213,7 @@
         padding: $o-input-padding-y $o-input-padding-x;
     }
 
-    &:not(.o_field_highlight) .o_field_widget:not(.o_field_invalid) .o_input:not(:hover):not(:focus) {
+    &:not(.o_field_highlight) .o_field_widget:not(.o_field_invalid):not(.o_field_highlight) .o_input:not(:hover):not(:focus) {
         --o-input-border-color: transparent;
     }
 
diff --git a/odoo/addons/base/views/res_users_views.xml b/odoo/addons/base/views/res_users_views.xml
index 01058a48e77..1d9f0206389 100644
--- a/odoo/addons/base/views/res_users_views.xml
+++ b/odoo/addons/base/views/res_users_views.xml
@@ -60,7 +60,8 @@
                         <h3><strong>Please enter your password to confirm you own this account</strong></h3>
                         <br/>
                         <div>
-                            <field class="col-10 col-md-6 px-0" name="password" autocomplete="current-password" required="True" password="True"/>
+                            <field class="o_field_highlight col-10 col-md-6 px-0" name="password" autocomplete="current-password"
+                                required="True" password="True" placeholder="************"/>
                         </div>
                         <a href="/web/reset_password/" class="btn btn-link" role="button">Forgot password?</a>
                     </sheet>