[SSE] Added Protection tab. Changed signature settings in the right and left menu.

apps/spreadsheeteditor/main/app.js

@@ -159,6 +159,7 @@ require([
             'Common.Controllers.Chat',
             'Common.Controllers.Comments',
             'Common.Controllers.Plugins'
+            ,'Common.Controllers.Protection'
         ]
     });
 
@@ -187,6 +188,7 @@ require([
         'common/main/lib/controller/Comments',
         'common/main/lib/controller/Chat',
         'common/main/lib/controller/Plugins'
+        ,'common/main/lib/controller/Protection'
     ], function() {
         app.start();
     });

apps/spreadsheeteditor/main/app/controller/DocumentHolder.js

@@ -44,7 +44,6 @@ define([
     'core',
     'common/main/lib/util/utils',
     'common/main/lib/view/CopyWarningDialog',
-    'common/main/lib/view/SignDialog',
     'spreadsheeteditor/main/app/view/DocumentHolder',
     'spreadsheeteditor/main/app/view/HyperlinkSettingsDialog',
     'spreadsheeteditor/main/app/view/ParagraphSettingsAdvanced',
@@ -269,7 +268,6 @@ define([
                 this.api.asc_registerCallback('asc_onShowSpecialPasteOptions', _.bind(this.onShowSpecialPasteOptions, this));
                 this.api.asc_registerCallback('asc_onHideSpecialPasteOptions', _.bind(this.onHideSpecialPasteOptions, this));
             }
-            this.api.asc_registerCallback('asc_onSignatureClick',           _.bind(this.onSignatureClick, this));
             return this;
         },
 
@@ -2440,37 +2438,6 @@ define([
             _conf && view.paraBulletsPicker.selectRecord(_conf.rec, true);
         },
 
-        onSignatureClick: function(guid, width, height) {
-            var me = this;
-            if (_.isUndefined(me.fontStore)) {
-                me.fontStore = new Common.Collections.Fonts();
-                var fonts = SSE.getController('Toolbar').getView('Toolbar').cmbFontName.store.toJSON();
-                var arr = [];
-                _.each(fonts, function(font, index){
-                    if (!font.cloneid) {
-                        arr.push(_.clone(font));
-                    }
-                });
-                me.fontStore.add(arr);
-            }
-
-            var win = new Common.Views.SignDialog({
-                api: me.api,
-                signType: 'visible',
-                fontStore: me.fontStore,
-                signSize: {width: width, height: height},
-                handler: function(dlg, result) {
-                    if (result == 'ok') {
-                        var props = dlg.getSettings();
-                        me.api.asc_Sign(props.certificateId, guid, props.images[0], props.images[1]);
-                    }
-                    Common.NotificationCenter.trigger('edit:complete', me.documentHolder);
-                }
-            });
-
-            win.show();
-        },
-
         SetDisabled: function(state) {
             this._isDisabled = state;
         },

apps/spreadsheeteditor/main/app/controller/LeftMenu.js

@@ -33,8 +33,6 @@
 define([
     'core',
     'common/main/lib/util/Shortcuts',
-    'common/main/lib/view/SignSettingsDialog',
-    'common/main/lib/view/SignDialog',
     'spreadsheeteditor/main/app/view/LeftMenu',
     'spreadsheeteditor/main/app/view/FileMenu'
 ], function () {
@@ -75,9 +73,7 @@ define([
                     'saveas:format': _.bind(this.clickSaveAsFormat, this),
                     'settings:apply': _.bind(this.applySettings, this),
                     'create:new': _.bind(this.onCreateNew, this),
-                    'recent:open': _.bind(this.onOpenRecent, this),
+                    'recent:open': _.bind(this.onOpenRecent, this)
-                    'signature:visible': _.bind(this.addVisibleSign, this),
-                    'signature:invisible': _.bind(this.addInvisibleSign, this)
                 },
                 'Toolbar': {
                     'file:settings': _.bind(this.clickToolbarSettings,this),
@@ -768,41 +764,6 @@ define([
             }
         },
 
-        addVisibleSign: function(menu) {
-            var me = this,
-                win = new Common.Views.SignSettingsDialog({
-                    handler: function(dlg, result) {
-                        if (result == 'ok') {
-                            me.api.asc_AddSignatureLine2(dlg.getSettings());
-                        }
-                        Common.NotificationCenter.trigger('edit:complete', me);
-                    }
-                });
-
-            win.show();
-
-            menu.hide();
-        },
-
-        addInvisibleSign: function(menu) {
-            var me = this,
-                win = new Common.Views.SignDialog({
-                    api: me.api,
-                    signType: 'invisible',
-                    handler: function(dlg, result) {
-                        if (result == 'ok') {
-                            var props = dlg.getSettings();
-                            me.api.asc_Sign(props.certificateId);
-                        }
-                        Common.NotificationCenter.trigger('edit:complete', me);
-                    }
-                });
-
-            win.show();
-
-            menu.hide();
-        },
-
         textNoTextFound        : 'Text not found',
         newDocumentTitle        : 'Unnamed document',
         textItemEntireCell      : 'Entire cell contents',

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -927,6 +927,9 @@ define([
 
                     rightmenuController && rightmenuController.setApi(me.api);
 
+                    if (me.appOptions.isDesktopApp && me.appOptions.isOffline)
+                        application.getController('Common.Controllers.Protection').setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
+
                     if (statusbarController) {
                         statusbarController.getView('Statusbar').changeViewMode(true);
                     }

apps/spreadsheeteditor/main/app/controller/RightMenu.js

@@ -85,11 +85,12 @@ define([
             this._settings[Common.Utils.documentSettingsType.TextArt] =   {panelId: "id-textart-settings",    panel: rightMenu.textartSettings,  btn: rightMenu.btnTextArt,     hidden: 1, locked: false};
             this._settings[Common.Utils.documentSettingsType.Chart] =     {panelId: "id-chart-settings",      panel: rightMenu.chartSettings,    btn: rightMenu.btnChart,       hidden: 1, locked: false};
             this._settings[Common.Utils.documentSettingsType.Table] =     {panelId: "id-table-settings",      panel: rightMenu.tableSettings,    btn: rightMenu.btnTable,       hidden: 1, locked: false};
-            this._settings[Common.Utils.documentSettingsType.Signature] = {panelId: "id-signature-settings",  panel: rightMenu.signatureSettings, btn: rightMenu.btnSignature,  hidden: (rightMenu.signatureSettings) ? 0 : 1, props: {}, locked: false};
+            this._settings[Common.Utils.documentSettingsType.Signature] = {panelId: "id-signature-settings",  panel: rightMenu.signatureSettings, btn: rightMenu.btnSignature,  hidden: 1, props: {}, locked: false};
         },
 
         setApi: function(api) {
             this.api = api;
+            this.api.asc_registerCallback('asc_onUpdateSignatures',     _.bind(this.onApiUpdateSignatures, this));
             this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this));
             Common.NotificationCenter.on('api:disconnect',              _.bind(this.onCoAuthoringDisconnect, this));
             Common.NotificationCenter.on('cells:range',                 _.bind(this.onCellsRange, this));
@@ -290,6 +291,9 @@ define([
                 this.rightmenu.shapeSettings.createDelayedElements();
                 this.onSelectionChanged(this.api.asc_getCellInfo());
             }
+
+            //remove after sdk send event
+            // this.onApiUpdateSignatures([{name: 'Hammish Mitchell', guid: '123', date: '18/05/2017'}, {name: 'Someone Somewhere', guid: '345', date: '18/05/2017'}]);
         },
 
         onDoubleClickOnObject: function(obj) {
@@ -324,6 +328,16 @@ define([
             }
         },
 
+        onApiUpdateSignatures: function(valid, requested){
+            if (!this.rightmenu.signatureSettings) return;
+
+            var disabled = (!valid || valid.length<1) && (!requested || requested.length<1),
+                type = Common.Utils.documentSettingsType.Signature;
+            this._settings[type].hidden = disabled ? 1 : 0;
+            this._settings[type].btn.setDisabled(disabled);
+            this._settings[type].panel.setLocked(this._settings[type].locked);
+        },
+
         SetDisabled: function(disabled, allowSignature) {
             this.setMode({isEdit: !disabled});
             if (this.rightmenu) {
@@ -334,7 +348,6 @@ define([
                 this.rightmenu.tableSettings.disableControls(disabled);
 
                 if (!allowSignature && this.rightmenu.signatureSettings) {
-                    this.rightmenu.signatureSettings.disableControls(disabled);
                     this.rightmenu.btnSignature.setDisabled(disabled);
                 }
 

apps/spreadsheeteditor/main/app/template/SignatureSettings.template

@@ -4,24 +4,38 @@
             <label style="font-size: 18px;"><%= scope.strSignature %></label>
         </td>
     </tr>
-    <tr>
-        <td class="padding-small">
-            <button id="signature-invisible-sign" class="btn btn-text-default" style="width:100%;"><%= scope.strInvisibleSign %></button>
-        </td>
-    </tr>
     <tr>
         <td class="padding-large">
-            <button id="signature-visible-sign" class="btn btn-text-default" style="width:100%;"><%= scope.strVisibleSign %></button>
+            <div id="signature-invisible-sign" style="width:100%;"></div>
         </td>
     </tr>
-    <tr id="signature-requested-sign">
+    <tr class="requested">
-        <td></td>
+        <td class="padding-small">
+            <label class="header"><%= scope.strRequested %></label>
+        </td>
     </tr>
-    <tr id="signature-valid-sign">
+    <tr class="requested">
-        <td></td>
+        <td class="padding-large">
+            <div id="signature-requested-sign"></div>
+        </td>
     </tr>
-    <tr id="signature-invalid-sign">
+    <tr class="valid">
-        <td></td>
+        <td class="padding-small">
+            <label class="header"><%= scope.strValid %></label>
+        </td>
+    </tr>
+    <tr class="valid">
+        <td class="padding-large">
+            <div id="signature-valid-sign"></div>
+        </td>
+    </tr>
+    <tr class="invalid">
+        <td class="padding-small">
+            <label class="header" style="color:#bb3d3d;"><%= scope.strInvalid %></label>
+        </td>
+    </tr>
+    <tr class="invalid">
+        <td><div id="signature-invalid-sign"></div></td>
     </tr>
     <tr class="finish-cell"></tr>
 </table>

apps/spreadsheeteditor/main/app/view/FileMenu.js

@@ -116,6 +116,13 @@ define([
                 canFocused: false
             });
 
+            this.miProtect = new Common.UI.MenuItem({
+                el      : $('#fm-btn-protect',this.el),
+                action  : 'protect',
+                caption : this.btnProtectCaption,
+                canFocused: false
+            });
+
             this.miRecent = new Common.UI.MenuItem({
                 el      : $('#fm-btn-recent',this.el),
                 action  : 'recent',
@@ -158,12 +165,7 @@ define([
                 this.miSaveAs,
                 this.miPrint,
                 this.miRename,
-                new Common.UI.MenuItem({
+                this.miProtect,
-                    el      : $('#fm-btn-protect',this.el),
-                    action  : 'protect',
-                    caption : this.btnProtectCaption,
-                    canFocused: false
-                }),
                 this.miRecent,
                 this.miNew,
                 new Common.UI.MenuItem({
@@ -205,10 +207,12 @@ define([
         show: function(panel) {
             if (this.isVisible() && panel===undefined) return;
 
+            var defPanel = (this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) ? 'saveas' : 'info';
             if (!panel)
-                panel = this.active || ((this.mode.canDownload && (!this.mode.isDesktopApp || !this.mode.isOffline)) ? 'saveas' : 'info');
+                panel = this.active || defPanel;
             this.$el.show();
-            this.selectMenu(panel);
+            this.selectMenu(panel, defPanel);
+
             this.api.asc_enableKeyEvents(false);
 
             this.fireEvent('menu:show', [this]);
@@ -223,8 +227,8 @@ define([
         applyMode: function() {
             this.miPrint[this.mode.canPrint?'show':'hide']();
             this.miRename[(this.mode.canRename && !this.mode.isDesktopApp) ?'show':'hide']();
-            this.items[7][(this.mode.canProtect) ?'show':'hide']();
+            this.miProtect[(this.mode.isEdit && this.mode.isDesktopApp && this.mode.isOffline) ?'show':'hide']();
-            this.items[7].$el.find('+.devider')[!this.mode.isDisconnected?'show':'hide']();
+            this.miProtect.$el.find('+.devider')[!this.mode.isDisconnected?'show':'hide']();
             this.miRecent[this.mode.canOpenRecent?'show':'hide']();
             this.miNew[this.mode.canCreateNew?'show':'hide']();
             this.miNew.$el.find('+.devider')[this.mode.canCreateNew?'show':'hide']();
@@ -262,7 +266,7 @@ define([
                 }
             }
 
-            if (this.mode.canProtect) {
+            if (this.mode.isDesktopApp && this.mode.isOffline) {
                 this.panels['protect'] = (new SSE.Views.FileMenuPanels.ProtectDoc({menu:this})).render();
                 this.panels['protect'].setMode(this.mode);
             }
@@ -296,10 +300,14 @@ define([
             this.document = data.doc;
         },
 
-        selectMenu: function(menu) {
+        selectMenu: function(menu, defMenu) {
             if ( menu ) {
-                var item    = this._getMenuItem(menu),
+                var item = this._getMenuItem(menu),
                     panel   = this.panels[menu];
+                if ( item.isDisabled() ) {
+                    item = this._getMenuItem(defMenu);
+                    panel   = this.panels[defMenu];
+                }
                 if ( item && panel ) {
                     $('.fm-btn',this.el).removeClass('active');
                     item.$el.addClass('active');

apps/spreadsheeteditor/main/app/view/FileMenuPanels.js

@@ -1339,12 +1339,25 @@ define([
         menu: undefined,
 
         template: _.template([
-            '<label id="id-fms-lbl-sign-header" style="font-size: 18px;"><%= scope.strProtect %></label>',
+            '<label id="id-fms-lbl-protect-header" style="font-size: 18px;"><%= scope.strProtect %></label>',
-            '<button id="fms-btn-invisible-sign" class="btn btn-text-default" style="min-width:190px;"><%= scope.strInvisibleSign %></button>',
+            '<div id="id-fms-password">',
-            '<button id="fms-btn-visible-sign" class="btn btn-text-default" style="min-width:190px;"><%= scope.strVisibleSign %></button>',
+                '<label class="header"><%= scope.strEncrypt %></label>',
-            '<div id="id-fms-requested-sign"></div>',
+                '<div id="fms-btn-add-pwd" style="width:190px;"></div>',
-            '<div id="id-fms-valid-sign"></div>',
+                '<table id="id-fms-view-pwd" cols="2" width="300">',
-            '<div id="id-fms-invalid-sign"></div>'
+                    '<tr>',
+                        '<td colspan="2"><span><%= scope.txtEncrypted %></span></td>',
+                    '</tr>',
+                    '<tr>',
+                        '<td><div id="fms-btn-change-pwd" style="width:190px;"></div></td>',
+                        '<td align="right"><div id="fms-btn-delete-pwd" style="width:190px; margin-left:20px;"></div></td>',
+                    '</tr>',
+                '</table>',
+            '</div>',
+            '<div id="id-fms-signature">',
+                '<label class="header"><%= scope.strSignature %></label>',
+                '<div id="fms-btn-invisible-sign" style="width:190px; margin-bottom: 20px;"></div>',
+                '<div id="id-fms-signature-view"></div>',
+            '</div>'
         ].join('')),
 
         initialize: function(options) {
@@ -1352,26 +1365,16 @@ define([
 
             this.menu = options.menu;
 
-            this.templateRequested = _.template([
+            var me = this;
-                '<label class="header <% if (signatures.length<1) { %>hidden<% } %>"><%= header %></label>',
+            this.templateSignature = _.template([
-                '<table>',
+                '<table cols="2" width="300" class="<% if (!hasRequested && !hasSigned) { %>hidden<% } %>"">',
-                '<% _.each(signatures, function(item) { %>',
+                    '<tr>',
-                '<tr>',
+                        '<td colspan="2"><span><%= tipText %></span></td>',
-                '<td><%= Common.Utils.String.htmlEncode(item) %></td>',
+                    '</tr>',
-                '</tr>',
+                    '<tr>',
-                '<% }); %>',
+                        '<td><label class="link signature-view-link">' + me.txtView + '</label></td>',
-                '</table>'
+                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>hidden<% } %>">' + me.txtEdit + '</label></td>',
-            ].join(''));
+                    '</tr>',
-
-            this.templateValid = _.template([
-                '<label class="header <% if (signatures.length<1) { %>hidden<% } %>"><%= header %></label>',
-                '<table>',
-                '<% _.each(signatures, function(item) { %>',
-                '<tr>',
-                '<td><%= Common.Utils.String.htmlEncode(item.name) %></td>',
-                '<td><%= Common.Utils.String.htmlEncode(item.date) %></td>',
-                '</tr>',
-                '<% }); %>',
                 '</table>'
             ].join(''));
         },
@@ -1379,22 +1382,28 @@ define([
         render: function() {
             $(this.el).html(this.template({scope: this}));
 
-            this.btnAddInvisibleSign = new Common.UI.Button({
+            var protection = SSE.getController('Common.Controllers.Protection').getView();
-                el: '#fms-btn-invisible-sign'
-            });
-            this.btnAddInvisibleSign.on('click', _.bind(this.addInvisibleSign, this));
 
-            this.btnAddVisibleSign = new Common.UI.Button({
+            this.btnAddPwd = protection.getButton('add-password');
-                el: '#fms-btn-visible-sign'
+            this.btnAddPwd.render(this.$el.find('#fms-btn-add-pwd'));
-            });
+            this.btnAddPwd.on('click', _.bind(this.closeMenu, this));
-            this.btnAddVisibleSign.on('click', _.bind(this.addVisibleSign, this));
 
-            this.lblSignHeader = $('#id-fms-lbl-sign-header', this.$el);
+            this.btnChangePwd = protection.getButton('change-password');
+            this.btnChangePwd.render(this.$el.find('#fms-btn-change-pwd'));
+            this.btnChangePwd.on('click', _.bind(this.closeMenu, this));
 
-            this.cntRequestedSign = $('#id-fms-requested-sign');
+            this.btnDeletePwd = protection.getButton('del-password');
-            this.cntValidSign = $('#id-fms-valid-sign');
+            this.btnDeletePwd.render(this.$el.find('#fms-btn-delete-pwd'));
-            this.cntInvalidSign = $('#id-fms-invalid-sign');
+            this.btnDeletePwd.on('click', _.bind(this.closeMenu, this));
 
+            this.cntPassword = $('#id-fms-view-pwd');
+
+            this.btnAddInvisibleSign = protection.getButton('signature');
+            this.btnAddInvisibleSign.render(this.$el.find('#fms-btn-invisible-sign'));
+            this.btnAddInvisibleSign.on('click', _.bind(this.closeMenu, this));
+
+            this.cntSignature = $('#id-fms-signature');
+            this.cntSignatureView = $('#id-fms-signature-view');
             if (_.isUndefined(this.scroller)) {
                 this.scroller = new Common.UI.Scroller({
                     el: $(this.el),
@@ -1402,21 +1411,21 @@ define([
                 });
             }
 
+            this.$el.on('click', '.signature-edit-link', _.bind(this.onEdit, this));
+            this.$el.on('click', '.signature-view-link', _.bind(this.onView, this));
+
             return this;
         },
 
         show: function() {
             Common.UI.BaseView.prototype.show.call(this,arguments);
             this.updateSignatures();
+            this.updateEncrypt();
         },
 
         setMode: function(mode) {
             this.mode = mode;
-            if (!this.mode.isEdit) {
+            this.cntSignature.toggleClass('hidden', !this.mode.canProtect);
-                this.btnAddInvisibleSign.setVisible(false);
-                this.btnAddVisibleSign.setVisible(false);
-                this.lblSignHeader.html(this.strSignature);
-            }
         },
 
         setApi: function(o) {
@@ -1424,49 +1433,73 @@ define([
             return this;
         },
 
-        addInvisibleSign: function() {
+        closeMenu: function() {
-            if (this.menu)
+            this.menu && this.menu.hide();
-                this.menu.fireEvent('signature:invisible', [this.menu]);
         },
 
-        addVisibleSign: function() {
+        onEdit: function() {
-            if (this.menu)
+            this.menu && this.menu.hide();
-                this.menu.fireEvent('signature:visible', [this.menu]);
+
+            var me = this;
+            Common.UI.warning({
+                title: this.notcriticalErrorTitle,
+                msg: this.txtEditWarning,
+                buttons: ['ok', 'cancel'],
+                primary: 'ok',
+                callback: function(btn) {
+                    if (btn == 'ok') {
+                        me.api.asc_RemoveAllSignatures();
+                    }
+                }
+            });
+
+        },
+
+        onView: function() {
+            this.menu && this.menu.hide();
+            SSE.getController('RightMenu').rightmenu.SetActivePane(Common.Utils.documentSettingsType.Signature, true);
         },
 
         updateSignatures: function(){
             var requested = this.api.asc_getRequestSignatures(),
-                requested_arr = [],
                 valid = this.api.asc_getSignatures(),
-                valid_arr = [], invalid_arr = [];
+                hasRequested = requested && requested.length>0,
+                hasValid = false,
+                hasInvalid = false;
 
-            _.each(requested, function(item, index){
-                requested_arr.push(item.asc_getSigner1());
-            });
             _.each(valid, function(item, index){
-                var sign = {name: item.asc_getSigner1(), date: '18/05/2017'};
+                if (item.asc_getValid()==0)
-                (item.asc_getValid()==0) ? valid_arr.push(sign) : invalid_arr.push(sign);
+                    hasValid = true;
+                else
+                    hasInvalid = true;
             });
 
-            // requested_arr = ['Hammish Mitchell', 'Someone Somewhere', 'Mary White', 'John Black'];
+            // hasRequested = true;
-            // valid_arr = [{name: 'Hammish Mitchell', guid: '123', date: '18/05/2017'}, {name: 'Someone Somewhere', guid: '345', date: '18/05/2017'}];
+            // hasValid = true;
-            // invalid_arr = [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}];
+            // hasInvalid = true;
 
-            this.cntRequestedSign.html(this.templateRequested({signatures: requested_arr, header: this.strRequested}));
+            var tipText = (hasInvalid) ? this.txtSignedInvalid : (hasValid ? this.txtSigned : "");
-            this.cntValidSign.html(this.templateValid({signatures: valid_arr, header: this.strValid}));
+            if (hasRequested)
-            this.cntInvalidSign.html(this.templateValid({signatures: invalid_arr, header: this.strInvalid}));
+                tipText = this.txtRequestedSignatures + (tipText!="" ? "<br><br>" : "")+ tipText;
 
-            this.btnAddInvisibleSign.setDisabled(valid_arr.length>0 || invalid_arr.length>0);
+            this.cntSignatureView.html(this.templateSignature({tipText: tipText, hasSigned: (hasValid || hasInvalid), hasRequested: hasRequested}));
-            this.btnAddVisibleSign.setDisabled(valid_arr.length>0 || invalid_arr.length>0);
+        },
+
+        updateEncrypt: function() {
+            this.cntPassword.toggleClass('hidden', this.btnAddPwd.isVisible());
         },
 
         strProtect: 'Protect Document',
-        strInvisibleSign: 'Add invisible digital signature',
+        strSignature: 'Signature',
-        strVisibleSign: 'Add visible signature',
+        txtView: 'View signatures',
-        strRequested: 'Requested signatures',
+        txtEdit: 'Edit document',
-        strValid: 'Valid signatures',
+        txtSigned: 'Valid signatures has been added to the document. The document is protected from editing.',
-        strInvalid: 'Invalid signatures',
+        txtSignedInvalid: 'Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.',
-        strSignature: 'Signature'
+        txtRequestedSignatures: 'This document needs to be signed.',
+        notcriticalErrorTitle: 'Warning',
+        txtEditWarning: 'Editing will remove the signatures from the document.<br>Are you sure you want to continue?',
+        strEncrypt: 'Password',
+        txtEncrypted: 'This document has been protected by password'
 
     }, SSE.Views.FileMenuPanels.ProtectDoc || {}));
 

apps/spreadsheeteditor/main/app/view/SignatureSettings.js

@@ -43,9 +43,7 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common/main/lib/component/Button',
+    'common/main/lib/component/Button'
-    'common/main/lib/view/SignDialog',
-    'common/main/lib/view/SignSettingsDialog'
 ], function (menuTemplate, $, _, Backbone) {
     'use strict';
 
@@ -64,11 +62,7 @@ define([
         },
 
         initialize: function () {
-            var me = this;
-
             this._state = {
-                DisabledControls: false,
-                DisabledInsertControls: false,
                 requestedSignatures: undefined,
                 validSignatures: undefined,
                 invalidSignatures: undefined,
@@ -76,39 +70,6 @@ define([
                 ready: false
             };
             this._locked = false;
-            this.lockedControls = [];
-
-            this._noApply = false;
-            this._originalProps = null;
-
-            this.templateRequested = _.template([
-                '<td class="padding-large <% if (signatures.length<1) { %>hidden<% } %>">',
-                '<table class="<% if (signatures.length<1) { %>hidden<% } %>" style="width:100%">',
-                    '<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>',
-                    '<% _.each(signatures, function(item) { %>',
-                    '<tr>',
-                        '<td style="padding-bottom: 5px;"><label class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.name) %></label></td>',
-                        '<td style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-sign-link" data-value="<%= item.guid %>">' + this.strSign + '</label></td>',
-                    '</tr>',
-                    '<% }); %>',
-                '</table>',
-                '</td>'
-            ].join(''));
-
-            this.templateValid = _.template([
-                '<td class="padding-large <% if (signatures.length<1) { %>hidden<% } %>"">',
-                '<table class="<% if (signatures.length<1) { %>hidden<% } %>" style="width:100%">',
-                    '<tr><td colspan="2" class="padding-large"><label class="header"><%= header %></label></td></tr>',
-                    '<% _.each(signatures, function(item) { %>',
-                    '<tr>',
-                        '<td><div class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.name) %></div></td>',
-                        '<td rowspan="2" style="padding: 0 5px; vertical-align: top; text-align: right;"><label class="link-solid signature-view-link" data-value="<%= item.guid %>">' + this.strView + '</label></td>',
-                    '</tr>',
-                    '<tr><td style="padding-bottom: 3px;"><label class="signature-sign-name"><%= Common.Utils.String.htmlEncode(item.date) %></label></td></tr>',
-                    '<% }); %>',
-                '</table>',
-                '</td>'
-            ].join(''));
 
             this.render();
         },
@@ -118,24 +79,59 @@ define([
                 scope: this
             }));
 
-            this.btnAddInvisibleSign = new Common.UI.Button({
+            var protection = SSE.getController('Common.Controllers.Protection').getView();
-                el: this.$el.find('#signature-invisible-sign')
+            this.btnAddInvisibleSign = protection.getButton('signature');
+            this.btnAddInvisibleSign.render(this.$el.find('#signature-invisible-sign'));
+
+            this.viewRequestedList = new Common.UI.DataView({
+                el: $('#signature-requested-sign'),
+                enableKeyEvents: false,
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="signature-item requested">',
+                        '<div class="caret img-commonctrl"></div>',
+                        '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '</div>'
+                ].join(''))
             });
-            this.btnAddInvisibleSign.on('click', _.bind(this.addInvisibleSign, this));
-            this.lockedControls.push(this.btnAddInvisibleSign);
 
-            this.btnAddVisibleSign = new Common.UI.Button({
+            this.viewValidList = new Common.UI.DataView({
-                el: this.$el.find('#signature-visible-sign')
+                el: $('#signature-valid-sign'),
+                enableKeyEvents: false,
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="signature-item">',
+                        '<div class="caret img-commonctrl"></div>',
+                        '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                        '<div class="date"><%= Common.Utils.String.htmlEncode(date) %></div>',
+                    '</div>'
+                ].join(''))
             });
-            this.btnAddVisibleSign.on('click', _.bind(this.addVisibleSign, this));
-            this.lockedControls.push(this.btnAddVisibleSign);
 
-            this.cntRequestedSign = $('#signature-requested-sign');
+            this.viewInvalidList = new Common.UI.DataView({
-            this.cntValidSign = $('#signature-valid-sign');
+                el: $('#signature-invalid-sign'),
-            this.cntInvalidSign = $('#signature-invalid-sign');
+                enableKeyEvents: false,
+                itemTemplate: _.template([
+                    '<div id="<%= id %>" class="signature-item">',
+                        '<div class="caret img-commonctrl"></div>',
+                        '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                        '<div class="date"><%= Common.Utils.String.htmlEncode(date) %></div>',
+                    '</div>'
+                ].join(''))
+            });
 
-            this.$el.on('click', '.signature-sign-link', _.bind(this.onSign, this));
+            this.viewRequestedList.on('item:click', _.bind(this.onSelectSignature, this));
-            this.$el.on('click', '.signature-view-link', _.bind(this.onViewSignature, this));
+            this.viewValidList.on('item:click', _.bind(this.onSelectSignature, this));
+            this.viewInvalidList.on('item:click', _.bind(this.onSelectSignature, this));
+
+            this.signatureMenu = new Common.UI.Menu({
+                menuAlign   : 'tr-br',
+                items: [
+                    { caption: this.strSign,   value: 0 },
+                    { caption: this.strDetails,value: 1 },
+                    { caption: this.strSetup,  value: 2 },
+                    { caption: this.strDelete, value: 3 }
+                ]
+            });
+            this.signatureMenu.on('item:click', _.bind(this.onMenuSignatureClick, this));
         },
 
         setApi: function(api) {
@@ -150,32 +146,12 @@ define([
         ChangeSettings: function(props) {
             if (!this._state.requestedSignatures || !this._state.validSignatures || !this._state.invalidSignatures)
                 this.updateSignatures(this.api.asc_getSignatures(), this.api.asc_getRequestSignatures());
-
-            this.disableControls(this._locked);
         },
 
         setLocked: function (locked) {
             this._locked = locked;
         },
 
-        disableControls: function(disable) {
-            if (this._state.DisabledControls!==disable) {
-                this._state.DisabledControls = disable;
-                this.$linksSign && this.$linksSign.toggleClass('disabled', disable);
-                this.$linksView && this.$linksView.toggleClass('disabled', disable);
-            }
-            this.disableInsertControls(disable);
-        },
-
-        disableInsertControls: function(disable) {
-            if (this._state.DisabledInsertControls!==disable) {
-                this._state.DisabledInsertControls = disable;
-                _.each(this.lockedControls, function(item) {
-                    item.setDisabled(disable);
-                });
-            }
-        },
-
         setMode: function(mode) {
             this.mode = mode;
         },
@@ -184,7 +160,7 @@ define([
             if (!this._state.ready) return;
 
             this.updateSignatures(valid, requested);
-            this.showSignatureTooltip(this._state.validSignatures.length>0 || this._state.invalidSignatures.length>0);
+            this.showSignatureTooltip(this._state.validSignatures.length>0, this._state.invalidSignatures.length>0);
         },
 
         updateSignatures: function(valid, requested){
@@ -194,127 +170,147 @@ define([
             me._state.invalidSignatures = [];
 
             _.each(requested, function(item, index){
-                me._state.requestedSignatures.push({name: item.asc_getSigner1(), guid: item.asc_getGuid()});
+                me._state.requestedSignatures.push({name: item.asc_getSigner1(), guid: item.asc_getGuid(), requested: true});
             });
             _.each(valid, function(item, index){
-                var sign = {name: item.asc_getSigner1(), guid: item.asc_getId(), date: '18/05/2017'};
+                var sign = {name: item.asc_getSigner1(), guid: item.asc_getId(), date: '18/05/2017', invisible: !item.asc_getVisible()};
                 (item.asc_getValid()==0) ? me._state.validSignatures.push(sign) : me._state.invalidSignatures.push(sign);
             });
 
-            // me._state.requestedSignatures = [{name: 'Hammish Mitchell', guid: '123'}, {name: 'Someone Somewhere', guid: '123'}, {name: 'Mary White', guid: '123'}, {name: 'John Black', guid: '123'}];
+            // me._state.requestedSignatures = [{name: 'Hammish Mitchell', guid: '123', requested: true}, {name: 'Someone Somewhere', guid: '123', requested: true}, {name: 'Mary White', guid: '123', requested: true}, {name: 'John Black', guid: '123', requested: true}];
-            // me._state.validSignatures = [{name: 'Hammish Mitchell', guid: '123', date: '18/05/2017'}, {name: 'Someone Somewhere', guid: '345', date: '18/05/2017'}];
+            // me._state.validSignatures = [{name: 'Hammish Mitchell', guid: '123', date: '18/05/2017', invisible: true}, {name: 'Someone Somewhere', guid: '345', date: '18/05/2017'}];
             // me._state.invalidSignatures = [{name: 'Mary White', guid: '111', date: '18/05/2017'}, {name: 'John Black', guid: '456', date: '18/05/2017'}];
 
-            this.cntRequestedSign.html(this.templateRequested({signatures: me._state.requestedSignatures, header: this.strRequested}));
+            this.viewRequestedList.store.reset(me._state.requestedSignatures);
-            this.cntValidSign.html(this.templateValid({signatures: me._state.validSignatures, header: this.strValid}));
+            this.viewValidList.store.reset(me._state.validSignatures);
-            this.cntInvalidSign.html(this.templateValid({signatures: me._state.invalidSignatures, header: this.strInvalid}));
+            this.viewInvalidList.store.reset(me._state.invalidSignatures);
 
-            this.$linksSign = $('.signature-sign-link', this.$el);
+            this.$el.find('.requested').toggleClass('hidden', me._state.requestedSignatures.length<1);
-            var width = this.$linksSign.width();
+            this.$el.find('.valid').toggleClass('hidden', me._state.validSignatures.length<1);
-            $('.signature-sign-name', this.cntRequestedSign).css('max-width', 170-width);
+            this.$el.find('.invalid').toggleClass('hidden', me._state.invalidSignatures.length<1);
-
-            this.$linksView = $('.signature-view-link', this.$el);
-            width = this.$linksView.width();
-            $('.signature-sign-name', this.cntValidSign).css('max-width', 170-width);
-            $('.signature-sign-name', this.cntInvalidSign).css('max-width', 170-width);
 
             me.disableEditing(me._state.validSignatures.length>0 || me._state.invalidSignatures.length>0);
         },
 
-        addVisibleSign: function(btn) {
+        onSelectSignature: function(picker, item, record, e){
-            var me = this,
+            if (!record) return;
-                win = new Common.Views.SignSettingsDialog({
+
-                    handler: function(dlg, result) {
+            var btn = $(e.target);
-                        if (result == 'ok') {
+            if (btn && btn.hasClass('caret')) {
-                            me.api.asc_AddSignatureLine2(dlg.getSettings());
+                var menu = this.signatureMenu;
-                        }
+                if (menu.isVisible()) {
-                        me.fireEvent('editcomplete', me);
+                    menu.hide();
+                    return;
+                }
+
+                var showPoint, me = this,
+                    currentTarget = $(e.currentTarget),
+                    parent = $(this.el),
+                    offset = currentTarget.offset(),
+                    offsetParent = parent.offset();
+
+                showPoint = [offset.left - offsetParent.left + currentTarget.width(), offset.top - offsetParent.top + currentTarget.height()/2];
+
+                var menuContainer = parent.find('#menu-signature-container');
+                if (!menu.rendered) {
+                    if (menuContainer.length < 1) {
+                        menuContainer = $('<div id="menu-signature-container" style="position: absolute; z-index: 10000;"><div class="dropdown-toggle" data-toggle="dropdown"></div></div>', menu.id);
+                        parent.append(menuContainer);
                     }
-                });
+                    menu.render(menuContainer);
+                    menu.cmpEl.attr({tabindex: "-1"});
 
-            win.show();
+                    menu.on({
-        },
+                        'show:after': function(cmp) {
-
+                            if (cmp && cmp.menuAlignEl)
-        addInvisibleSign: function(btn) {
+                                cmp.menuAlignEl.toggleClass('over', true);
-            var me = this,
+                        },
-                win = new Common.Views.SignDialog({
+                        'hide:after': function(cmp) {
-                    api: me.api,
+                            if (cmp && cmp.menuAlignEl)
-                    signType: 'invisible',
+                                cmp.menuAlignEl.toggleClass('over', false);
-                    handler: function(dlg, result) {
-                        if (result == 'ok') {
-                            var props = dlg.getSettings();
-                            me.api.asc_Sign(props.certificateId);
                         }
-                        me.fireEvent('editcomplete', me);
+                    });
-                    }
+                }
-                });
+                var requested = record.get('requested'),
+                    signed = (this._state.validSignatures.length>0 || this._state.invalidSignatures.length>0);
+                menu.items[0].setVisible(requested);
+                menu.items[1].setVisible(!requested);
+                menu.items[2].setVisible(requested || !record.get('invisible'));
+                menu.items[3].setVisible(!requested);
+                menu.items[0].setDisabled(this._locked);
+                menu.items[3].setDisabled(this._locked);
+                menu.items[2].cmpEl.attr('data-value', signed ? 1 : 0); // view or edit signature settings
+                menu.cmpEl.attr('data-value', record.get('guid'));
 
-            win.show();
+                menuContainer.css({left: showPoint[0], top: showPoint[1]});
+
+                menu.menuAlignEl = currentTarget;
+                menu.setOffset(-20, -currentTarget.height()/2 + 3);
+                menu.show();
+                _.delay(function() {
+                    menu.cmpEl.focus();
+                }, 10);
+                e.stopPropagation();
+                e.preventDefault();
+            } else {
+                this.api.asc_gotoSignature(record.get('guid'));
+            }
         },
 
-        onSign: function(event) {
+        onMenuSignatureClick:  function(menu, item) {
-             var me = this,
+            var guid = menu.cmpEl.attr('data-value');
-                 target = $(event.currentTarget);
+            switch (item.value) {
-
+                case 0:
-             if (target.hasClass('disabled')) return;
+                    Common.NotificationCenter.trigger('protect:sign', guid);
-
+                    break;
-             if (_.isUndefined(me.fontStore)) {
+                case 1:
-                 me.fontStore = new Common.Collections.Fonts();
+                    this.api.asc_ViewCertificate(guid);
-                 var fonts = SSE.getController('Toolbar').getView('Toolbar').cmbFontName.store.toJSON();
+                    break;
-                 var arr = [];
+                case 2:
-                 _.each(fonts, function(font, index){
+                    Common.NotificationCenter.trigger('protect:signature', 'visible', !!parseInt(item.cmpEl.attr('data-value')), guid);// can edit settings for requested signature
-                     if (!font.cloneid) {
+                    break;
-                         arr.push(_.clone(font));
+                case 3:
-                     }
+                    this.api.asc_RemoveSignature(guid);
-                 });
+                    break;
-                 me.fontStore.add(arr);
+            }
-             }
-
-             var win = new Common.Views.SignDialog({
-                 api: me.api,
-                 signType: 'visible',
-                 fontStore: me.fontStore,
-                 handler: function(dlg, result) {
-                     if (result == 'ok') {
-                         var props = dlg.getSettings();
-                         me.api.asc_Sign(props.certificateId, target.attr('data-value'), props.images[0], props.images[1]);
-                     }
-                     me.fireEvent('editcomplete', me);
-                 }
-             });
-             win.show();
-        },
-
-        onViewSignature: function(event) {
-            var target = $(event.currentTarget);
-            if (target.hasClass('disabled')) return;
-
-            this.api.asc_ViewCertificate(target.attr('data-value'));
         },
 
         onDocumentReady: function() {
             this._state.ready = true;
 
             this.updateSignatures(this.api.asc_getSignatures(), this.api.asc_getRequestSignatures());
-            this.showSignatureTooltip(this._state.validSignatures.length>0 || this._state.invalidSignatures.length>0, this._state.requestedSignatures.length>0);
+            this.showSignatureTooltip(this._state.validSignatures.length>0, this._state.invalidSignatures.length>0, this._state.requestedSignatures.length>0);
         },
 
-        showSignatureTooltip: function(hasSigned, hasRequested) {
+        showSignatureTooltip: function(hasValid, hasInvalid, hasRequested) {
-            if (!hasSigned && !hasRequested) return;
+            if (!hasValid && !hasInvalid && !hasRequested) return;
+
+            var tipText = (hasInvalid) ? this.txtSignedInvalid : (hasValid ? this.txtSigned : "");
+            if (hasRequested)
+                tipText = this.txtRequestedSignatures + "<br><br>" + tipText;
 
             var me = this,
                 tip = new Common.UI.SynchronizeTip({
                     target  : SSE.getController('RightMenu').getView('RightMenu').btnSignature.btnEl,
-                    text    : (hasSigned) ? this.txtSignedDocument : this.txtRequestedSignatures,
+                    text    : tipText,
-                    showLink: hasSigned,
+                    showLink: hasValid || hasInvalid,
                     textLink: this.txtContinueEditing,
                     placement: 'left'
                 });
             tip.on({
                 'dontshowclick': function() {
-                    tip.close();
+                    Common.UI.warning({
-                    // me.api.editSingedDoc();
+                        title: me.notcriticalErrorTitle,
-                    // me.disableEditing(false); // call in the asc_onUpdateSignatures event callback.
+                        msg: me.txtEditWarning,
+                        buttons: ['ok', 'cancel'],
+                        primary: 'ok',
+                        callback: function(btn) {
+                            if (btn == 'ok') {
+                                tip.close();
+                                me.api.asc_RemoveAllSignatures();
+                            }
+                        }
+                    });
                 },
                 'closeclick': function() {
                     tip.close();
@@ -332,31 +328,32 @@ define([
                     rightMenuController.rightmenu.clearSelection();
                 rightMenuController.SetDisabled(disable, true);
                 SSE.getController('Toolbar').DisableToolbar(disable, disable);
+                SSE.getController('Statusbar').SetDisabled(disable);
                 SSE.getController('Common.Controllers.ReviewChanges').SetDisabled(disable);
                 SSE.getController('DocumentHolder').SetDisabled(disable);
-                SSE.getController('Statusbar').SetDisabled(disable);
 
                 var leftMenu = SSE.getController('LeftMenu').leftMenu;
                 leftMenu.btnComments.setDisabled(disable);
                 var comments = SSE.getController('Common.Controllers.Comments');
                 if (comments)
                     comments.setPreviewMode(disable);
-
-                this.disableInsertControls(disable);
             }
         },
 
         strSignature: 'Signature',
-        strInvisibleSign: 'Add invisible digital signature',
-        strVisibleSign: 'Add visible signature',
         strRequested: 'Requested signatures',
         strValid: 'Valid signatures',
         strInvalid: 'Invalid signatures',
         strSign: 'Sign',
-        strView: 'View',
+        strDetails: 'Signature Details',
-        txtSignedDocument: 'This document has been signed. It should not be edited.',
+        strSetup: 'Signature Setup',
-        txtRequestedSignatures: 'This document has requested signatures.',
+        txtSigned: 'Valid signatures has been added to the document. The document is protected from editing.',
-        txtContinueEditing: 'Edit anyway'
+        txtSignedInvalid: 'Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.',
+        txtRequestedSignatures: 'This document needs to be signed.',
+        txtContinueEditing: 'Edit anyway',
+        notcriticalErrorTitle: 'Warning',
+        txtEditWarning: 'Editing will remove the signatures from the document.<br>Are you sure you want to continue?',
+        strDelete: 'Remove Signature'
 
     }, SSE.Views.SignatureSettings || {}));
 });

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -2078,6 +2078,8 @@ define([
         textTabFile: 'File',
         textTabHome: 'Home',
         textTabInsert: 'Insert',
-        textSurface: 'Surface'
+        textSurface: 'Surface',
+        tipChangeChart: 'Change Chart Type',
+        textTabProtect: 'Protection'
     }, SSE.Views.Toolbar || {}));
 });

apps/spreadsheeteditor/main/app_dev.js

@@ -149,6 +149,7 @@ require([
             'Common.Controllers.Chat',
             'Common.Controllers.Comments',
             'Common.Controllers.Plugins'
+            ,'Common.Controllers.Protection'
         ]
     });
 
@@ -177,6 +178,7 @@ require([
         'common/main/lib/controller/Comments',
         'common/main/lib/controller/Chat',
         'common/main/lib/controller/Plugins'
+        ,'common/main/lib/controller/Protection'
     ], function() {
         window.compareVersions = true;
         app.start();

apps/spreadsheeteditor/main/locale/en.json

@@ -102,12 +102,29 @@
   "Common.Views.OpenDialog.txtTab": "Tab",
   "Common.Views.OpenDialog.txtTitle": "Choose %1 options",
   "Common.Views.OpenDialog.txtTitleProtected": "Protected File",
+  "Common.Views.PasswordDialog.cancelButtonText": "Cancel",
+  "Common.Views.PasswordDialog.okButtonText": "OK",
+  "Common.Views.PasswordDialog.txtPassword": "Password",
+  "Common.Views.PasswordDialog.txtTitle": "Set Password",
+  "Common.Views.PasswordDialog.txtDescription": "A Password is required to open this document",
+  "Common.Views.PasswordDialog.txtRepeat": "Repeat password",
+  "Common.Views.PasswordDialog.txtIncorrectPwd": "Confirmation password is not identical",
   "Common.Views.PluginDlg.textLoading": "Loading",
   "Common.Views.Plugins.groupCaption": "Plugins",
   "Common.Views.Plugins.strPlugins": "Plugins",
   "Common.Views.Plugins.textLoading": "Loading",
   "Common.Views.Plugins.textStart": "Start",
   "Common.Views.Plugins.textStop": "Stop",
+  "Common.Views.Protection.txtAddPwd": "Add password",
+  "Common.Views.Protection.txtEncrypt": "Encrypt",
+  "Common.Views.Protection.txtSignature": "Signature",
+  "Common.Views.Protection.hintAddPwd": "Encrypt with password",
+  "Common.Views.Protection.hintPwd": "Change or delete password",
+  "Common.Views.Protection.hintSignature": "Add digital signature or signature line",
+  "Common.Views.Protection.txtChangePwd": "Change password",
+  "Common.Views.Protection.txtDeletePwd": "Delete password",
+  "Common.Views.Protection.txtInvisibleSignature": "Add digital signature",
+  "Common.Views.Protection.txtSignatureLine": "Signature line",
   "Common.Views.RenameDialog.cancelButtonText": "Cancel",
   "Common.Views.RenameDialog.okButtonText": "Ok",
   "Common.Views.RenameDialog.textName": "File name",
@@ -1159,12 +1176,16 @@
   "SSE.Views.FileMenuPanels.Settings.txtGeneral": "General",
   "SSE.Views.FileMenuPanels.Settings.txtPageSettings": "Page Settings",
   "SSE.Views.FileMenuPanels.ProtectDoc.strProtect": "Protect Document",
-  "SSE.Views.FileMenuPanels.ProtectDoc.strInvisibleSign": "Add invisible digital signature",
-  "SSE.Views.FileMenuPanels.ProtectDoc.strVisibleSign": "Add visible signature",
-  "SSE.Views.FileMenuPanels.ProtectDoc.strRequested": "Requested signatures",
-  "SSE.Views.FileMenuPanels.ProtectDoc.strValid": "Valid signatures",
-  "SSE.Views.FileMenuPanels.ProtectDoc.strInvalid": "Invalid signatures",
   "SSE.Views.FileMenuPanels.ProtectDoc.strSignature": "Signature",
+  "SSE.Views.FileMenuPanels.ProtectDoc.txtView": "View signatures",
+  "SSE.Views.FileMenuPanels.ProtectDoc.txtEdit": "Edit document",
+  "SSE.Views.FileMenuPanels.ProtectDoc.txtSigned": "Valid signatures has been added to the document. The document is protected from editing.",
+  "SSE.Views.FileMenuPanels.ProtectDoc.txtSignedInvalid": "Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.",
+  "SSE.Views.FileMenuPanels.ProtectDoc.txtRequestedSignatures": "This document needs to be signed.",
+  "SSE.Views.FileMenuPanels.ProtectDoc.notcriticalErrorTitle": "Warning",
+  "SSE.Views.FileMenuPanels.ProtectDoc.txtEditWarning": "Editing will remove the signatures from the document.<br>Are you sure you want to continue?",
+  "SSE.Views.FileMenuPanels.ProtectDoc.strEncrypt": "Password",
+  "SSE.Views.FileMenuPanels.ProtectDoc.txtEncrypted": "This document has been protected by password",
   "SSE.Views.FormatSettingsDialog.textCancel": "Cancel",
   "SSE.Views.FormatSettingsDialog.textCategory": "Category",
   "SSE.Views.FormatSettingsDialog.textDecimal": "Decimal",
@@ -1463,13 +1484,19 @@
   "SSE.Views.ShapeSettings.txtPapyrus": "Papyrus",
   "SSE.Views.ShapeSettings.txtWood": "Wood",
   "SSE.Views.SignatureSettings.strSignature": "Signature",
-  "SSE.Views.SignatureSettings.strInvisibleSign": "Add invisible digital signature",
-  "SSE.Views.SignatureSettings.strVisibleSign": "Add visible signature",
   "SSE.Views.SignatureSettings.strRequested": "Requested signatures",
   "SSE.Views.SignatureSettings.strValid": "Valid signatures",
   "SSE.Views.SignatureSettings.strInvalid": "Invalid signatures",
   "SSE.Views.SignatureSettings.strSign": "Sign",
-  "SSE.Views.SignatureSettings.strView": "View",
+  "SSE.Views.SignatureSettings.strDetails": "Signature Details",
+  "SSE.Views.SignatureSettings.strDelete": "Remove Signature",
+  "SSE.Views.SignatureSettings.strSetup": "Signature Setup",
+  "SSE.Views.SignatureSettings.txtSigned": "Valid signatures has been added to the document. The document is protected from editing.",
+  "SSE.Views.SignatureSettings.txtSignedInvalid": "Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.",
+  "SSE.Views.SignatureSettings.txtRequestedSignatures": "This document needs to be signed.",
+  "SSE.Views.SignatureSettings.txtContinueEditing": "Edit anyway",
+  "SSE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
+  "SSE.Views.SignatureSettings.txtEditWarning": "Editing will remove the signatures from the document.<br>Are you sure you want to continue?",
   "SSE.Views.ShapeSettingsAdvanced.cancelButtonText": "Cancel",
   "SSE.Views.ShapeSettingsAdvanced.okButtonText": "OK",
   "SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
@@ -1695,6 +1722,7 @@
   "SSE.Views.Toolbar.textTabFile": "File",
   "SSE.Views.Toolbar.textTabHome": "Home",
   "SSE.Views.Toolbar.textTabInsert": "Insert",
+  "SSE.Views.Toolbar.textTabProtect": "Protection",
   "SSE.Views.Toolbar.textTopBorders": "Top Borders",
   "SSE.Views.Toolbar.textUnderline": "Underline",
   "SSE.Views.Toolbar.textWinLossSpark": "Win/Loss",

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -520,6 +520,25 @@
                 font: 12px tahoma, arial, verdana, sans-serif;
             }
         }
+
+        #panel-protect {
+            label, span {
+                font-size: 12px;
+            }
+
+            padding: 30px 30px;
+
+            .header {
+                font-weight: bold;
+                margin: 30px 0 10px;
+            }
+
+            table {
+                td {
+                    padding: 5px 0;
+                }
+            }
+        }
     }
 }
 
@@ -538,31 +557,3 @@
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
 }
-
-#panel-protect {
-    #file-menu-panel & {
-        padding: 30px 30px;
-    }
-
-
-    button {
-        display: block;
-        width: auto;
-        margin-top: 20px;
-    }
-
-    label {
-        font: 12px tahoma, arial, verdana, sans-serif;
-    }
-
-    .header {
-        font-weight: bold;
-        margin: 30px 0 10px;
-    }
-
-    table {
-        td {
-            padding: 5px 5px;
-        }
-    }
-}

apps/spreadsheeteditor/main/resources/less/rightmenu.less

@@ -336,8 +336,54 @@ button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -
     .combo-template(60px);
 }
 
-.signature-sign-name {
+#signature-requested-sign,
+#signature-valid-sign,
+#signature-invalid-sign {
+    height: 100%;
     overflow: hidden;
-    text-overflow: ellipsis;
+    margin: 0 -10px 0 -15px;
-    white-space: nowrap;
+
+    .item {
+        display: block;
+        border: none;
+        width: 100%;
+        .box-shadow(none);
+        margin: 0;
+
+        &:hover,
+        &.over {
+            background-color: @secondary;
+        }
+    }
+
+    .signature-item {
+        padding: 5px 2px 5px 15px;
+        text-overflow: ellipsis;
+
+        .name {
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            cursor: pointer;
+            max-width: 160px;
+            text-overflow: ellipsis;
+        }
+
+        .caret {
+            width: 23px;
+            height: 14px;
+            border: 0;
+            background-position: -43px -150px;
+            margin: 8px 15px;
+            display: inline-block;
+            position: absolute;
+            right: 0;
+        }
+
+        &.requested {
+            .caret {
+                margin: 0 15px;
+            }
+        }
+    }
 }