[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.

2 files changed, 148 insertions, 0 deletions

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