[IMP] auth_oauth: Update the tutorial 'Sign in with gmail'

13 files changed, 108 insertions, 22 deletions

diff --git a/addons/auth_oauth/res_config.py b/addons/auth_oauth/res_config.py
index 6f05ae10f3a..c7f14ba6199 100644
--- a/addons/auth_oauth/res_config.py
+++ b/addons/auth_oauth/res_config.py
@@ -9,9 +9,17 @@ _logger = logging.getLogger(__name__)
 class base_config_settings(osv.TransientModel):
     _inherit = 'base.config.settings'
 
+    def get_uri(self, cr, uid, context=None):
+        return "%s/auth_oauth/signin" % (self.pool['ir.config_parameter'].get_param(cr, uid, 'web.base.url', context=context))
+
+    def _get_server_uri(self, cr, uid, ids, name, arg, context=None):
+        return dict.fromkeys(ids, self.get_uri(cr, uid, context))
+
     _columns = {
         'auth_oauth_google_enabled' : fields.boolean('Allow users to sign in with Google'),
         'auth_oauth_google_client_id' : fields.char('Client ID'),
+        'server_uri_google': fields.function(_get_server_uri, type='char', string='Server uri'),
+        'auth_oauth_tutorial_enabled': fields.boolean('Show tutorial'),
     }
 
     def default_get(self, cr, uid, fields, context=None):
@@ -25,6 +33,7 @@ class base_config_settings(osv.TransientModel):
         return {
             'auth_oauth_google_enabled': rg[0]['enabled'],
             'auth_oauth_google_client_id': rg[0]['client_id'],
+            'server_uri_google': self.get_uri(cr, uid, context)
         }
 
     def set_oauth_providers(self, cr, uid, ids, context=None):
diff --git a/addons/auth_oauth/res_config.xml b/addons/auth_oauth/res_config.xml
index 1fe1e8e1506..63f83d3ef4f 100644
--- a/addons/auth_oauth/res_config.xml
+++ b/addons/auth_oauth/res_config.xml
@@ -6,31 +6,106 @@
             <field name="model">base.config.settings</field>
             <field name="inherit_id" ref="base_setup.view_general_configuration"/>
             <field name="arch" type="xml">
-                <xpath expr="//field[@name='module_auth_oauth']/.." position="inside">
-                    <div attrs="{'invisible':[('module_auth_oauth','=',False)]}">
-                        <div name="google">
+            <xpath expr="//group[@name='google']/label" position="before">
+                <label for="id" string="Authentication" attrs="{'invisible':[('module_auth_oauth','=',False)]}"/>
+                <div attrs="{'invisible':[('module_auth_oauth','=',False)]}">
+                    <div name="google" id="top">
+                        <div>
+                            <field name="auth_oauth_google_enabled"/>
+                            <label for="auth_oauth_google_enabled" string="Allow users to sign in with Google"/>
+                        </div>
+                        <div attrs="{'invisible':[('auth_oauth_google_enabled','=',False)]}">
                             <div>
-                                <field name="auth_oauth_google_enabled" class="oe_inline"/>
-                                <label for="auth_oauth_google_enabled"/>
+                                <label for="auth_oauth_tutorial_enabled" string="Show Tutorial"/>
+                                <field name="auth_oauth_tutorial_enabled"/>
+                            </div>
+                            <div attrs="{'invisible':[('auth_oauth_tutorial_enabled','=',False)]}">
+                                <h2>
+                                    To setup the sign in process with Google, you have to perform 
+                                    the following steps first.
+                                </h2>
+                                <ol>
+                                    <li>
+                                        Connect to your Google account and go to 
+                                        <a href="https://console.developers.google.com/">
+                                            https://console.developers.google.com/</a>
+                                    </li>
+                                    <li>
+                                        Click on <b>Create Project</b> and enter the project name and 
+                                        other details.
+                                        <div class="mb8">
+                                            <img src='/auth_oauth/static/src/img/steps_1.png'/>
+                                        </div>
+                                        <div class="mb8">
+                                            <img src='/auth_oauth/static/src/img/steps_2.png'/>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        Click on <b>Use Google APIs</b>
+                                        <div class="mb8">
+                                            <img src='/auth_oauth/static/src/img/steps_3.png'/>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        On the left side menu, select the sub menu <b>Credentials</b> 
+                                        (from <b>API Manager</b>) then select <b>OAuth consent screen</b>.
+                                        <div class="mb8">
+                                            <img src='/auth_oauth/static/src/img/steps_4.png'/>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        Fill in your address, email and the product name (for example odoo) 
+                                        and then save.
+                                        <div class="mb8">
+                                            <img src='/auth_oauth/static/src/img/steps_5.png'/>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        Then click on <b>Add Credentials</b> and select the second option 
+                                        (OAuth 2.0 Client ID).
+                                        <div class="mb8">
+                                            <img src='/auth_oauth/static/src/img/steps_6.png'/>
+                                        </div>
+                                        <div class="mb8">
+                                            <img class="mt8" src='/auth_oauth/static/src/img/steps_7.png'/>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        Check that the application type is set on <b>Web Application</b>. 
+                                        Now configure the allowed pages on which you will be redirected.
+                                    </li>
+                                    <li>
+                                        To achieve this, complete the field <b>Authorized redirect URIs</b>.
+                                        Copy paste the following link in the box<b>:
+                                        <field name="server_uri_google"/></b>
+                                        <div class="clearfix"></div>Then click on <b>Create</b>.
+                                        <div class="mb8">
+                                            <img class="mt8" src='/auth_oauth/static/src/img/steps_8.png'/>
+                                        </div>
+                                    </li>
+                                    <li>
+                                        Once done, you receive two information (your <b>Client ID</b> and <b>
+                                        Client Secret</b>). You have to insert your <b>Client ID</b> in 
+                                        the field below.
+                                        <div class="mb8">
+                                            <img src='/auth_oauth/static/src/img/steps_9.png'/>
+                                        </div>
+                                    </li>
+                                    <div>
+                                        <a onclick="document.getElementById('top').scrollIntoView();">
+                                            Return to Top</a>
+                                    </div>
+                               </ol>
                             </div>
-                            <div attrs="{'invisible':[('auth_oauth_google_enabled','=',False)]}">
-                                <blockquote>
-                                    To setup the signin process with Google, first you have to perform the following steps:<br/>
-                                    <br/>
-                                    - Go to the <a href="https://code.google.com/apis/console/">Google APIs console</a><br/>
-                                    - Create a new project<br/>
-                                    - Go to Api Access<br/>
-                                    - Create an oauth client_id<br/>
-                                    - Edit settings and set both Authorized Redirect URIs and Authorized JavaScript Origins to your hostname.<br/>
-                                    <br/>
-                                    Now copy paste the client_id here: <field name="auth_oauth_google_client_id" class="oe_inline" placeholder="e.g. 1234-xyz.apps.googleusercontent.com"/>
-                                </blockquote>
+                            <div class="o_row">
+                                <label for="auth_oauth_google_client_id" string="Google Client ID:"/>
+                                <field name="auth_oauth_google_client_id" placeholder="e.g. 1234-xyz.apps.googleusercontent.com"/>
                             </div>
                         </div>
                     </div>
-                </xpath>
+                </div>
+            </xpath>
             </field>
         </record>
-
     </data>
 </openerp>
diff --git a/addons/auth_oauth/static/src/img/steps_1.png b/addons/auth_oauth/static/src/img/steps_1.png
new file mode 100644
index 00000000000..e566bd57e21
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_1.png
diff --git a/addons/auth_oauth/static/src/img/steps_2.png b/addons/auth_oauth/static/src/img/steps_2.png
new file mode 100644
index 00000000000..d8efa8a9069
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_2.png
diff --git a/addons/auth_oauth/static/src/img/steps_3.png b/addons/auth_oauth/static/src/img/steps_3.png
new file mode 100644
index 00000000000..e22da632c70
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_3.png
diff --git a/addons/auth_oauth/static/src/img/steps_4.png b/addons/auth_oauth/static/src/img/steps_4.png
new file mode 100644
index 00000000000..9b53656af8b
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_4.png
diff --git a/addons/auth_oauth/static/src/img/steps_5.png b/addons/auth_oauth/static/src/img/steps_5.png
new file mode 100644
index 00000000000..86010d2c13d
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_5.png
diff --git a/addons/auth_oauth/static/src/img/steps_6.png b/addons/auth_oauth/static/src/img/steps_6.png
new file mode 100644
index 00000000000..bf9aecb5adc
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_6.png
diff --git a/addons/auth_oauth/static/src/img/steps_7.png b/addons/auth_oauth/static/src/img/steps_7.png
new file mode 100644
index 00000000000..064b81a97d8
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_7.png
diff --git a/addons/auth_oauth/static/src/img/steps_8.png b/addons/auth_oauth/static/src/img/steps_8.png
new file mode 100644
index 00000000000..b1ec01739fa
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_8.png
diff --git a/addons/auth_oauth/static/src/img/steps_9.png b/addons/auth_oauth/static/src/img/steps_9.png
new file mode 100644
index 00000000000..72053a474ab
--- /dev/null
+++ b/addons/auth_oauth/static/src/img/steps_9.png
diff --git a/addons/base_setup/res_config.py b/addons/base_setup/res_config.py
index 43ebbf2bd18..7ec3da83060 100644
--- a/addons/base_setup/res_config.py
+++ b/addons/base_setup/res_config.py
@@ -16,7 +16,7 @@ class base_config_settings(osv.osv_memory):
             help="""Share or embbed any screen of Odoo."""),
         'module_portal': fields.boolean('Activate the customer portal',
             help="""Give your customers access to their documents."""),
-        'module_auth_oauth': fields.boolean('Use external authentication providers, sign in with Google...'),
+        'module_auth_oauth': fields.boolean('Use external authentication providers (OAuth)'),
         'module_base_import': fields.boolean("Allow users to import data from CSV/XLS/XLSX/ODS files"),
         'module_google_drive': fields.boolean('Attach Google documents to any record',
                                               help="""This installs the module google_docs."""),
diff --git a/addons/base_setup/res_config_view.xml b/addons/base_setup/res_config_view.xml
index f4d6e79fd34..d502b164a60 100644
--- a/addons/base_setup/res_config_view.xml
+++ b/addons/base_setup/res_config_view.xml
@@ -44,8 +44,10 @@
                     <group name="authentication">
                         <label for="id" string="Authentication"/>
                         <div>
-                            <field name="module_auth_oauth" class="oe_inline"/>
-                            <label for="module_auth_oauth"/>
+                            <div>
+                                <field name="module_auth_oauth"/>
+                                <label for="module_auth_oauth"/>
+                            </div>
                         </div>
                     </group>
                     <group>