erp5_xhtml_style: Add link to login in ERP5 with Google Account and use...

erp5_xhtml_style: Add link to login in ERP5 with Google Account and use zocial.min.css to display it nicely

Add margin-top to display zocial buttons not too close from other buttons or links

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/erp5.css.css

@@ -1103,3 +1103,7 @@ div.pdf-preview-navigation img.last{
 fieldset > div.large-gadget {
   height: 85vh;
 }
+
+a.zocial {
+  margin-top: 10px;
+}

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/login_form.zpt

@@ -3,6 +3,8 @@
            xmlns:i18n="http://xml.zope.org/namespaces/i18n">
   <tal:block tal:define="form_action string:logged_in;
              global form_id string:login_form;
+             enable_google_login python: getattr(context.getPortalObject().portal_skins, 'erp5_oauth_google_login', None) is not None;
+             css_list python: enable_google_login and ['%s/zocial.min.css' % here.portal_url()] or [];
              js_list python: ['%s/login_form.js' % (here.portal_url(), ), '%s/erp5.js' % (here.portal_url(), )]">
     <tal:block metal:use-macro="here/main_template/macros/master">
       <tal:block metal:fill-slot="main">
@@ -46,12 +48,12 @@
                    i18n:translate="" i18n:domain="ui">I forgot my password!</a>
               </div>
             </div>
-            <tal:block tal:condition="python: getattr(here.getPortalObject().portal_skins, 'erp5_oauth_google_login', None) is not None">
+            <tal:block tal:condition="enable_google_login">
               <div class="field">
                 <label>&nbsp;</label>
                 <div class="input">
                   <a tal:attributes="href string:${here/portal_url}/ERP5Site_redirectToGoogleLoginPage"
-                     i18n:translate="" i18n:domain="ui">Login with Google</a>
+                     i18n:translate="" i18n:domain="ui" class="zocial google">Login with Google</a>
                 </div>
               </div>
             </tal:block>

product/ERP5/bootstrap/erp5_xhtml_style/SkinTemplateItem/portal_skins/erp5_xhtml_style/zocial.min.css.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="File" module="OFS.Image"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>__name__</string> </key>
+            <value> <string>zocial.min.css</string> </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/css</string> </value>
+        </item>
+        <item>
+            <key> <string>precondition</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string>zocial.min.css</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>