From 8f08bacf02731bbd88baffe57634a64e047d79da Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <Julia.Radzhabova@onlyoffice.com>
Date: Fri, 19 May 2017 17:33:13 +0300
Subject: [PATCH] [DE] Sign document with visible signature.

---
 .../main/app/controller/LeftMenu.js           |  1 +
 .../main/app/view/SignDialog.js               | 54 +++++++++++++++----
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/apps/documenteditor/main/app/controller/LeftMenu.js b/apps/documenteditor/main/app/controller/LeftMenu.js
index b655d975d..7a299673b 100644
--- a/apps/documenteditor/main/app/controller/LeftMenu.js
+++ b/apps/documenteditor/main/app/controller/LeftMenu.js
@@ -698,6 +698,7 @@ define([
             var me = this,
                 win = new DE.Views.SignDialog({
                     api: me.api,
+                    signType: 'invisible',
                     handler: function(dlg, result) {
                         if (result == 'ok') {
                             var props = dlg.getSettings();
diff --git a/apps/documenteditor/main/app/view/SignDialog.js b/apps/documenteditor/main/app/view/SignDialog.js
index 78b4ac7a1..9f78fde18 100644
--- a/apps/documenteditor/main/app/view/SignDialog.js
+++ b/apps/documenteditor/main/app/view/SignDialog.js
@@ -60,13 +60,32 @@ define([
                 title: this.textTitle
             }, options || {});
 
+            this.api = this.options.api;
+            this.signType = this.options.signType || 'invisible';
+
             this.template = [
-                '<div class="box" style="height: 200px;">',
-                    '<div class="input-row">',
-                        '<label>' + this.textPurpose + '</label>',
+                '<div class="box" style="height: ' + ((this.signType == 'invisible') ? '132px;' : '260px;') + '">',
+                    '<div id="id-dlg-sign-invisible">',
+                        '<div class="input-row">',
+                            '<label>' + this.textPurpose + '</label>',
+                        '</div>',
+                        '<div id="id-dlg-sign-purpose" class="input-row"></div>',
                     '</div>',
-                    '<div id="id-dlg-sign-purpose" class="input-row" style="margin-bottom: 30px;"></div>',
-                    '<table>',
+                    '<div id="id-dlg-sign-visible">',
+                        '<div class="input-row">',
+                            '<label>' + this.textInputName + '</label>',
+                        '</div>',
+                        '<div id="id-dlg-sign-name" class="input-row"></div>',
+                        '<div class="input-row">',
+                            '<label>' + this.textUseImage + '</label>',
+                        '</div>',
+                        '<button id="id-dlg-sign-image" class="btn btn-text-default" style="">' + this.textSelectImage + '</button>',
+                        '<div class="input-row" style="margin-top: 10px;">',
+                            '<label style="font-weight: bold;">' + this.textSignature + '</label>',
+                        '</div>',
+                        '<div style="border: 1px solid #cbcbcb;"><div id="signature-preview-img" style="width: 100%; height: 50px;position: relative;"></div></div>',
+                    '</div>',
+                    '<table style="margin-top: 30px;">',
                         '<tr>',
                             '<td><label style="font-weight: bold;margin-bottom: 3px;">' + this.textCertificate + '</label></td>' +
                             '<td rowspan="2" style="vertical-align: top; padding-left: 30px;"><button id="id-dlg-sign-change" class="btn btn-text-default" style="">' + this.textChange + '</button></td>',
@@ -86,7 +105,6 @@ define([
             ].join(''));
 
             this.options.tpl = _.template(this.template)(this.options);
-            this.api = this.options.api;
 
             Common.UI.Window.prototype.initialize.call(this, this.options);
         },
@@ -102,13 +120,22 @@ define([
                 style       : 'width: 100%;'
             });
 
-            me.cntCertificate = $('#id-dlg-sign-certificate');
+            me.inputName = new Common.UI.InputField({
+                el          : $('#id-dlg-sign-name'),
+                style       : 'width: 100%;'
+            });
 
             me.btnChangeCertificate = new Common.UI.Button({
                 el: '#id-dlg-sign-change'
             });
             me.btnChangeCertificate.on('click', _.bind(me.onChangeCertificate, me));
 
+            me.cntCertificate = $('#id-dlg-sign-certificate');
+            me.cntVisibleSign = $('#id-dlg-sign-visible');
+            me.cntInvisibleSign = $('#id-dlg-sign-invisible');
+
+            (me.signType == 'visible') ? me.cntInvisibleSign.addClass('hidden') : me.cntVisibleSign.addClass('hidden');
+
             $window.find('.dlg-btn').on('click', _.bind(me.onBtnClick, me));
             $window.find('input').on('keypress', _.bind(me.onKeyPress, me));
         },
@@ -135,8 +162,11 @@ define([
 
         getSettings: function () {
             var me      = this, props;
-
-            // props.asc_putPurpose(me.inputPurpose.getValue());
+            if (me.signType == 'invisible') {
+                // props.asc_putPurpose(me.inputPurpose.getValue());
+            } else {
+                // props.asc_putName(me.inputName.getValue());
+            }
 
             return props;
         },
@@ -168,7 +198,11 @@ define([
         textValid:          'Valid from %1 to %2',
         textChange:         'Change',
         cancelButtonText:   'Cancel',
-        okButtonText:       'Ok'
+        okButtonText:       'Ok',
+        textInputName:      'Input signer name',
+        textUseImage:       'or click \'Select Image\' to use a picture as signature',
+        textSelectImage:    'Select Image',
+        textSignature:      'Signature looks as'
 
     }, DE.Views.SignDialog || {}))
 });
\ No newline at end of file