[REF] web, *: redesign login screens

* auth_signup, auth_oauth

4 files changed, 55 insertions, 26 deletions

diff --git a/addons/auth_oauth/data/auth_oauth_data.xml b/addons/auth_oauth/data/auth_oauth_data.xml
index 8ee65946d84..67c1c98e7cc 100644
--- a/addons/auth_oauth/data/auth_oauth_data.xml
+++ b/addons/auth_oauth/data/auth_oauth_data.xml
@@ -7,7 +7,7 @@
             <field name="scope">userinfo</field>
             <field name="validation_endpoint">https://accounts.odoo.com/oauth2/tokeninfo</field>
             <field name="data_endpoint"></field>
-            <field name="css_class">zocial openerp</field>
+            <field name="css_class">fa fa-fw o_custom_icon</field>
             <field name="body">Log in with Odoo.com</field>
             <field name="enabled" eval="True"/>
         </record>
@@ -17,8 +17,8 @@
             <field name="scope">public_profile,email</field>
             <field name="validation_endpoint">https://graph.facebook.com/me</field>
             <field name="data_endpoint">https://graph.facebook.com/me?fields=id,name,email</field>
-            <field name="css_class">fa fa-facebook-square</field>
-            <field name="body">Log in with facebook</field>
+            <field name="css_class">fa fa-fw fa-facebook-square</field>
+            <field name="body">Log in with Facebook</field>
         </record>
         <record id="provider_google" model="auth.oauth.provider">
             <field name="name">Google OAuth2</field>
@@ -26,7 +26,7 @@
             <field name="scope">https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile</field>
             <field name="validation_endpoint">https://www.googleapis.com/oauth2/v1/tokeninfo</field>
             <field name="data_endpoint">https://www.googleapis.com/oauth2/v1/userinfo</field>
-            <field name="css_class">fa fa-google-plus-square</field>
+            <field name="css_class">fa fa-fw fa-google-plus-square</field>
             <field name="body">Log in with Google</field>
         </record>
 
diff --git a/addons/auth_oauth/models/auth_oauth.py b/addons/auth_oauth/models/auth_oauth.py
index de27556140c..2dbea1f85ec 100644
--- a/addons/auth_oauth/models/auth_oauth.py
+++ b/addons/auth_oauth/models/auth_oauth.py
@@ -18,6 +18,6 @@ class AuthOAuthProvider(models.Model):
     validation_endpoint = fields.Char(string='Validation URL', required=True)  # OAuth provider URL to validate tokens
     data_endpoint = fields.Char(string='Data URL')
     enabled = fields.Boolean(string='Allowed')
-    css_class = fields.Char(string='CSS class', default='zocial')
+    css_class = fields.Char(string='CSS class', default='fa fa-fw fa-sign-in text-primary')
     body = fields.Char(required=True)
     sequence = fields.Integer()
diff --git a/addons/auth_oauth/static/src/scss/auth_oauth.scss b/addons/auth_oauth/static/src/scss/auth_oauth.scss
new file mode 100644
index 00000000000..3225d521ace
--- /dev/null
+++ b/addons/auth_oauth/static/src/scss/auth_oauth.scss
@@ -0,0 +1,17 @@
+.o_auth_oauth_providers {
+    .fa-facebook-square {
+        color: #3b5998;
+    }
+
+    .fa-google-plus-square {
+        color: #de564a;
+    }
+
+    .o_custom_icon {
+        margin: 0 0.15em;
+        @include size(1em);
+        border: 3px solid #875A7B;
+        border-radius: 100%;
+        transform: translateY(2px);
+    }
+}
diff --git a/addons/auth_oauth/views/auth_oauth_templates.xml b/addons/auth_oauth/views/auth_oauth_templates.xml
index bdc5cf4f244..37fb23ecdd3 100644
--- a/addons/auth_oauth/views/auth_oauth_templates.xml
+++ b/addons/auth_oauth/views/auth_oauth_templates.xml
@@ -1,35 +1,47 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-        <template id="auth_oauth.providers" name="OAuth Providers">
-            <div t-foreach="providers" t-as="p">
-                <a t-att-href="p['auth_link']" class="btn btn-link" role="button">
-                    <i t-att-class="p['css_class']"/>
-                    <t t-esc="p['body']"/>
-                </a>
-            </div>
+        <template id="assets_frontend" inherit_id="web.assets_frontend" name="OAuth Providers Assets">
+            <xpath expr="//link[last()]" position="after">
+                <link rel="stylesheet" type="text/scss" href="/auth_oauth/static/src/scss/auth_oauth.scss"/>
+            </xpath>
         </template>
 
-        <template id="auth_oauth.login" inherit_id="web.login" name="OAuth Login buttons">
-            <xpath expr="//button[@type='submit']" position="before">
-                <div class="float-right">
-                    <t t-call="auth_oauth.providers"/>
+        <template id="providers" name="OAuth Providers">
+            <t t-if="len(providers) &gt; 0">
+                <em class="d-block text-center text-muted small my-3">- or -</em>
+                <div class="o_auth_oauth_providers list-group mt-1 mb-1 text-left">
+                    <a t-foreach="providers" t-as="p" class="list-group-item list-group-item-action py-2" t-att-href="p['auth_link']">
+                        <i t-att-class="p['css_class']"/>
+                        <t t-esc="p['body']"/>
+                    </a>
                 </div>
+            </t>
+        </template>
+
+        <template id="login" inherit_id="web.login" name="OAuth Login buttons">
+            <xpath expr="//form" position="before">
+                <t t-set="form_small" t-value="True"/>
+            </xpath>
+            <xpath expr="//div[hasclass('o_login_auth')]" position="inside">
+                <t t-call="auth_oauth.providers"/>
             </xpath>
         </template>
 
-        <template id="auth_oauth.signup" inherit_id="auth_signup.signup" name="OAuth Signup buttons">
-            <xpath expr="//button[@type='submit']" position="before">
-                <div class="float-right">
-                    <t t-call="auth_oauth.providers"/>
-                </div>
+        <template id="signup" inherit_id="auth_signup.signup" name="OAuth Signup buttons">
+            <xpath expr="//form" position="before">
+                <t t-set="form_small" t-value="True"/>
+            </xpath>
+            <xpath expr="//div[hasclass('o_login_auth')]" position="inside">
+                <t t-call="auth_oauth.providers"/>
             </xpath>
         </template>
 
-        <template id="auth_oauth.reset_password" inherit_id="auth_signup.reset_password" name="OAuth Reset Password buttons">
-            <xpath expr="//button[@type='submit']" position="before">
-                <div class="float-right">
-                    <t t-call="auth_oauth.providers"/>
-                </div>
+        <template id="reset_password" inherit_id="auth_signup.reset_password" name="OAuth Reset Password buttons">
+            <xpath expr="//form" position="before">
+                <t t-set="form_small" t-value="True"/>
+            </xpath>
+            <xpath expr="//div[hasclass('o_login_auth')]" position="inside">
+                <t t-call="auth_oauth.providers"/>
             </xpath>
         </template>
 </odoo>