[IMP] portal: add a generic signature widget to be used in customer portal

This generic widget allow to confirm and sign documents on the customer
portal. Purpose is to reuse it in sale customer portal and online quotes
notably. It is made generic to call a route using parameters given to the
widget. It also supports access token to ease its use in various customer
portal pages where the customer is not always connected but is granted
access through an access token.

6 files changed, 168 insertions, 1 deletions

diff --git a/addons/portal/__manifest__.py b/addons/portal/__manifest__.py
index d932cb2f025..6f1c0186a86 100644
--- a/addons/portal/__manifest__.py
+++ b/addons/portal/__manifest__.py
@@ -24,5 +24,6 @@ a dependency towards website edition and customization capabilities.""",
     ],
     'qweb': [
         'static/src/xml/portal_chatter.xml',
+        'static/src/xml/portal_signature.xml',
     ],
 }
diff --git a/addons/portal/static/src/js/portal_signature.js b/addons/portal/static/src/js/portal_signature.js
new file mode 100644
index 00000000000..eb58234907c
--- /dev/null
+++ b/addons/portal/static/src/js/portal_signature.js
@@ -0,0 +1,118 @@
+odoo.define('portal.signature_form', function (require){
+    "use strict";
+
+    require('web_editor.ready');
+
+    var ajax = require('web.ajax');
+    var base = require('web_editor.base');
+    var core = require('web.core');
+    var Widget = require("web.Widget");
+    var rpc = require("web.rpc");
+
+    var qweb = core.qweb;
+
+    var SignatureForm = Widget.extend({
+        template: 'portal.portal_signature',
+        events: {
+            'click #o_portal_sign_clear': 'clearSign',
+            'click .o_portal_sign_submit': 'submitSign',
+            'init #o_portal_sign_accept': 'initSign',
+        },
+
+        init: function(parent, options) {
+            this._super.apply(this, arguments);
+            this.options = _.extend(options || {}, {
+                csrf_token: odoo.csrf_token,
+            });
+        },
+
+        willStart: function() {
+            return this._loadTemplates();
+        },
+
+        start: function() {
+            this.initSign();
+        },
+
+        // Signature
+        initSign: function () {
+            this.$("#o_portal_signature").empty().jSignature({
+                'decor-color': '#D1D0CE',
+                'color': '#000',
+                'background-color': '#fff',
+            });
+            this.empty_sign = this.$("#o_portal_signature").jSignature('getData', 'image');
+        },
+
+        clearSign: function () {
+            this.$("#o_portal_signature").jSignature('reset');
+        },
+
+        submitSign: function (ev) {
+            ev.preventDefault();
+
+            // extract data
+            var self = this;
+            var $confirm_btn = self.$el.find('button[type="submit"]');
+
+            // process : display errors, or submit
+            var partner_name = self.$("#o_portal_sign_name").val();
+            var signature = self.$("#o_portal_signature").jSignature('getData', 'image');
+            var is_empty = signature ? this.empty_sign[1] === signature[1] : true;
+
+            this.$('#o_portal_sign_name').toggleClass('has-error', !partner_name);
+            this.$('#o_portal_sign_draw').toggleClass('panel-danger', is_empty).toggleClass('panel-default', !is_empty);
+            if (is_empty || ! partner_name) {
+                return false;
+            }
+
+            $confirm_btn.prepend('<i class="fa fa-spinner fa-spin"></i> ');
+            $confirm_btn.attr('disabled', true);
+
+            return rpc.query({
+                route: this.options.callUrl,
+                params: {
+                    'res_id': this.options.resId,
+                    'access_token': this.options.accessToken,
+                    'partner_name': partner_name,
+                    'signature': signature ? signature[1] : false,
+                },
+            }).then(function (data) {
+                self.$('.fa-spinner').remove();
+                self.$('#o_portal_sign_accept').prepend('<div>PROUT' + data + '</div>');
+                if (data.error) {
+                    $confirm_btn.attr('disabled', false);
+                }
+                else if (data.success) {
+                    $confirm_btn.remove();
+                    var $prout = qweb.render("portal.portal_signature_success", {widget: data});
+                    self.$('#o_portal_sign_draw').parent().replaceWith($prout);
+                }
+            });
+        },
+
+        //--------------------------------------------------------------------------
+        // Private
+        //--------------------------------------------------------------------------
+
+        /**
+         * @private
+         * @returns {Deferred}
+         */
+        _loadTemplates: function () {
+            return ajax.loadXML('/portal/static/src/xml/portal_signature.xml', qweb);
+        },
+    });
+
+    base.ready().then(function () {
+        $('.o_portal_signature_form').each(function () {
+            var $elem = $(this);
+            var form = new SignatureForm(null, $elem.data());
+            form.appendTo($elem);
+        });
+    });
+
+    return {
+        SignatureForm: SignatureForm,
+    };
+});
diff --git a/addons/portal/static/src/xml/portal_signature.xml b/addons/portal/static/src/xml/portal_signature.xml
new file mode 100644
index 00000000000..a82d7ec89aa
--- /dev/null
+++ b/addons/portal/static/src/xml/portal_signature.xml
@@ -0,0 +1,30 @@
+<templates id="template" xml:space="preserve">
+    <t t-name="portal.portal_signature">
+        <form id="o_portal_sign_accept" method="POST">
+            <input type="hidden" name="csrf_token" t-att-value="widget.options.csrf_token"/>
+            <div class="form-group">
+                <label class="control-label" for="name">Your Name</label>
+                <input type="text" name="partner_name" id="o_portal_sign_name" class="form-control" t-att-value="widget.options.partnerName"/>
+            </div>
+            <div class="panel panel-default mt16 mb0" id="o_portal_sign_draw">
+                <div class="panel-heading">
+                    <div class="pull-right">
+                        <a id="o_portal_sign_clear" class="btn btn-xs">Clear</a>
+                    </div>
+                    <strong>Draw your signature</strong>
+                </div>
+                <div id="o_portal_signature" class="panel-body" style="padding: 0"/>
+            </div>
+            <div>
+              <button type="submit" class="btn btn-primary o_portal_sign_submit">Sign &amp; Confirm</button>
+            </div>
+        </form>
+    </t>
+    <t t-name="portal.portal_signature_success">
+        <div class="alert alert-success" role="alert">
+            <strong>Well done!</strong><br />
+            <span t-esc="widget.success_msg"/>
+            <a t-att-href="widget.redirect_url">Click here to see your document.</a>
+        </div>
+    </t>
+</templates>
\ No newline at end of file
diff --git a/addons/portal/views/assets.xml b/addons/portal/views/assets.xml
index 9101cba2124..aaf2f6ec3e8 100644
--- a/addons/portal/views/assets.xml
+++ b/addons/portal/views/assets.xml
@@ -11,6 +11,8 @@
             <script type="text/javascript" src="/portal/static/src/js/portal.js"></script>
             <script type="text/javascript" src="/portal/static/src/js/portal_tour.js"></script>
             <script type="text/javascript" src="/portal/static/src/js/portal_chatter.js"></script>
+            <script type="text/javascript" src="/portal/static/src/js/portal_signature.js"></script>
+            <script type="text/javascript" src="/web/static/lib/jSignature/jSignatureCustom.js"></script>
         </xpath>
     </template>
 </odoo>
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 0c5bcf6c1c6..ce5ca4c2951 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -354,4 +354,21 @@
         </div>
     </template>
 
+    <!--
+        Container signature template for frontend
+        :partner-name string: customer name that signs
+        :res-model string: model of the signed document
+        :res-id stringied int: id of the signed document
+        :call-url string: url to call once clicking on the sign button
+        :access-token string: access token for customer portal
+    -->
+
+    <template id="portal_signature" name="Ask Signature">
+        <div t-att-class="'o_portal_signature_form'"
+            t-att-data-partner-name="partner_name"
+            t-att-data-res-model="object._name"
+            t-att-data-res-id="object.id"
+            t-att-data-call-url="callUrl"
+            t-att-data-access-token="accessToken"/>
+    </template>
 </odoo>
diff --git a/addons/website_quote/views/website_quote_templates.xml b/addons/website_quote/views/website_quote_templates.xml
index 6931631528c..f7c9ef5a58b 100644
--- a/addons/website_quote/views/website_quote_templates.xml
+++ b/addons/website_quote/views/website_quote_templates.xml
@@ -3,7 +3,6 @@
 
   <template id="assets_frontend" inherit_id="website.assets_frontend" name="Website Quote frontend assets">
     <xpath expr="." position="inside">
-      <script type="text/javascript" src="/web/static/lib/jSignature/jSignatureCustom.js"></script>
       <script type="text/javascript" src="/website_quote/static/src/js/website_quotation.js"></script>
       <link rel='stylesheet' href='/website_quote/static/src/css/website_quotation.css'/>
     </xpath>