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

apps/presentationeditor/main/app.js

@@ -156,6 +156,7 @@ require([
             ,'Common.Controllers.Plugins'
             ,'Common.Controllers.ExternalDiagramEditor'
             ,'Common.Controllers.ReviewChanges'
+            ,'Common.Controllers.Protection'
         ]
     });
 
@@ -188,6 +189,7 @@ require([
         'presentationeditor/main/app/view/ChartSettings',
         'common/main/lib/controller/ExternalDiagramEditor'
         ,'common/main/lib/controller/ReviewChanges'
+        ,'common/main/lib/controller/Protection'
     ], function() {
         app.start();
     });

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

@@ -43,7 +43,6 @@
 define([
     'core',
     'common/main/lib/util/Shortcuts',
-    'common/main/lib/view/SignDialog',
     'presentationeditor/main/app/view/LeftMenu',
     'presentationeditor/main/app/view/FileMenu'
 ], function () {
@@ -84,8 +83,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:invisible': _.bind(this.addInvisibleSign, this)
                 },
                 'Toolbar': {
                     'file:settings': _.bind(this.clickToolbarSettings,this),
@@ -559,25 +557,6 @@ define([
             }
         },
 
-        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();
-        },
-
         onMenuChange: function (value) {
             if ('hide' === value) {
                 if (this.leftMenu.btnComments.isActive() && this.api) {

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

@@ -885,6 +885,9 @@ define([
 
                     reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
 
+                    if (me.appOptions.isDesktopApp && me.appOptions.isOffline)
+                        application.getController('Common.Controllers.Protection').setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api);
+
                     var viewport = this.getApplication().getController('Viewport').getView('Viewport');
 
                     viewport.applyEditorMode();

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

@@ -79,11 +79,12 @@ define([
             this._settings[Common.Utils.documentSettingsType.Shape] =     {panelId: "id-shape-settings",      panel: rightMenu.shapeSettings,    btn: rightMenu.btnShape,       hidden: 1, locked: false};
             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.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_onCountPages',           _.bind(this.onApiCountPages, this));
             this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onCoAuthoringDisconnect, this));
             Common.NotificationCenter.on('api:disconnect',              _.bind(this.onCoAuthoringDisconnect, this));
@@ -222,7 +223,6 @@ define([
                 this.rightmenu.chartSettings.disableControls(disabled);
 
                 if (!allowSignature && this.rightmenu.signatureSettings) {
-                    this.rightmenu.signatureSettings.disableControls(disabled);
                     this.rightmenu.btnSignature.setDisabled(disabled);
                 }
 
@@ -289,6 +289,8 @@ define([
                     this.onFocusObject(selectedElements, !Common.localStorage.getBool("pe-hide-right-settings"));
                 }
             }
+            //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) {
@@ -305,6 +307,16 @@ define([
             }
         },
 
+        onApiUpdateSignatures: function(valid){
+            if (!this.rightmenu.signatureSettings) return;
+
+            var disabled = (!valid || valid.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);
+        },
+
         onApiCountPages: function(count) {
             if (this._state.no_slides !== (count<=0) && this.editMode) {
                 this._state.no_slides = (count<=0);

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -2077,10 +2077,15 @@ define([
 
             if ( config.isEdit ) {
                 var tab = {action: 'review', caption: me.toolbar.textTabCollaboration};
-                var $panel = this.getApplication().getController('Common.Controllers.ReviewChanges').createToolbarPanel();
+                var $panel = me.getApplication().getController('Common.Controllers.ReviewChanges').createToolbarPanel();
-
+                if ( $panel )
-                if ( $panel ) {
                     me.toolbar.addTab(tab, $panel, 3);
+
+                if (config.isDesktopApp && config.isOffline) {
+                    tab = {action: 'protect', caption: me.toolbar.textTabProtect};
+                    $panel = me.getApplication().getController('Common.Controllers.Protection').createToolbarPanel();
+                    if ( $panel )
+                        me.toolbar.addTab(tab, $panel, 4);
                 }
             }
         },

apps/presentationeditor/main/app/template/SignatureSettings.template

@@ -6,14 +6,26 @@
     </tr>
     <tr>
         <td class="padding-large">
-            <button id="signature-invisible-sign" class="btn btn-text-default" style="width:100%;"><%= scope.strInvisibleSign %></button>
+            <div id="signature-invisible-sign" style="width:100%;"></div>
         </td>
     </tr>
-    <tr id="signature-valid-sign">
+    <tr class="valid">
-        <td></td>
+        <td class="padding-small">
+            <label class="header"><%= scope.strValid %></label>
+        </td>
     </tr>
-    <tr id="signature-invalid-sign">
+    <tr class="valid">
-        <td></td>
+        <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/presentationeditor/main/app/view/DocumentHolder.js

@@ -38,7 +38,6 @@ define([
     'common/main/lib/util/utils',
     'common/main/lib/component/Menu',
     'common/main/lib/view/CopyWarningDialog',
-    'common/main/lib/view/SignDialog',
     'presentationeditor/main/app/view/HyperlinkSettingsDialog',
 //    'common/main/lib/view/InsertTableDialog',
     'presentationeditor/main/app/view/ParagraphSettingsAdvanced',

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

@@ -129,6 +129,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',
@@ -164,12 +171,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({
@@ -216,10 +218,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]);
@@ -234,8 +238,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']();
@@ -271,7 +275,7 @@ define([
                 }
             }
 
-            if (this.mode.canProtect) {
+            if (this.mode.isDesktopApp && this.mode.isOffline) {
                 this.$el.find('#fm-btn-create, #fm-btn-back, #fm-btn-create+.devider').hide();
                 this.panels['protect'] = (new PE.Views.FileMenuPanels.ProtectDoc({menu:this})).render();
                 this.panels['protect'].setMode(this.mode);
@@ -305,10 +309,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/presentationeditor/main/app/view/FileMenuPanels.js

@@ -869,10 +869,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">',
-            '<div id="id-fms-valid-sign"></div>',
+                '<label class="header"><%= scope.strEncrypt %></label>',
-            '<div id="id-fms-invalid-sign"></div>'
+                '<div id="fms-btn-add-pwd" style="width:190px;"></div>',
+                '<table id="id-fms-view-pwd" cols="2" width="300">',
+                    '<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) {
@@ -880,15 +895,16 @@ define([
 
             this.menu = options.menu;
 
-            this.templateValid = _.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 (!hasSigned) { %>hidden<% } %>"">',
-                '<% _.each(signatures, function(item) { %>',
+                    '<tr>',
-                '<tr>',
+                        '<td colspan="2"><span><%= tipText %></span></td>',
-                '<td><%= Common.Utils.String.htmlEncode(item.name) %></td>',
+                    '</tr>',
-                '<td><%= Common.Utils.String.htmlEncode(item.date) %></td>',
+                    '<tr>',
-                '</tr>',
+                        '<td><label class="link signature-view-link">' + me.txtView + '</label></td>',
-                '<% }); %>',
+                        '<td align="right"><label class="link signature-edit-link <% if (!hasSigned) { %>hidden<% } %>">' + me.txtEdit + '</label></td>',
+                    '</tr>',
                 '</table>'
             ].join(''));
         },
@@ -896,16 +912,28 @@ define([
         render: function() {
             $(this.el).html(this.template({scope: this}));
 
-            this.btnAddInvisibleSign = new Common.UI.Button({
+            var protection = PE.getController('Common.Controllers.Protection').getView();
-                el: '#fms-btn-invisible-sign'
-            });
-            this.btnAddInvisibleSign.on('click', _.bind(this.addInvisibleSign, this));
 
-            this.lblSignHeader = $('#id-fms-lbl-sign-header', this.$el);
+            this.btnAddPwd = protection.getButton('add-password');
+            this.btnAddPwd.render(this.$el.find('#fms-btn-add-pwd'));
+            this.btnAddPwd.on('click', _.bind(this.closeMenu, this));
 
-            this.cntValidSign = $('#id-fms-valid-sign');
+            this.btnChangePwd = protection.getButton('change-password');
-            this.cntInvalidSign = $('#id-fms-invalid-sign');
+            this.btnChangePwd.render(this.$el.find('#fms-btn-change-pwd'));
+            this.btnChangePwd.on('click', _.bind(this.closeMenu, this));
 
+            this.btnDeletePwd = protection.getButton('del-password');
+            this.btnDeletePwd.render(this.$el.find('#fms-btn-delete-pwd'));
+            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),
@@ -913,20 +941,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.lblSignHeader.html(this.strSignature);
-            }
         },
 
         setApi: function(o) {
@@ -934,34 +963,66 @@ define([
             return this;
         },
 
-        addInvisibleSign: function() {
+        closeMenu: function() {
-            if (this.menu)
+            this.menu && this.menu.hide();
-                this.menu.fireEvent('signature:invisible', [this.menu]);
+        },
+
+        onEdit: function() {
+            this.menu && this.menu.hide();
+
+            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();
+            PE.getController('RightMenu').rightmenu.SetActivePane(Common.Utils.documentSettingsType.Signature, true);
         },
 
         updateSignatures: function(){
             var valid = this.api.asc_getSignatures(),
-                valid_arr = [], invalid_arr = [];
+                hasValid = false,
+                hasInvalid = false;
 
             _.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;
             });
 
-            // 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.cntValidSign.html(this.templateValid({signatures: valid_arr, header: this.strValid}));
+            var tipText = (hasInvalid) ? this.txtSignedInvalid : (hasValid ? this.txtSigned : "");
-            this.cntInvalidSign.html(this.templateValid({signatures: invalid_arr, header: this.strInvalid}));
+            this.cntSignatureView.html(this.templateSignature({tipText: tipText, hasSigned: (hasValid || hasInvalid)}));
+        },
 
-            this.btnAddInvisibleSign.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',
-        strValid: 'Valid signatures',
+        txtView: 'View signatures',
-        strInvalid: 'Invalid signatures',
+        txtEdit: 'Edit document',
-        strSignature: 'Signature'
+        txtSigned: 'Valid signatures has been added to the document. The document is protected from editing.',
+        txtSignedInvalid: 'Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.',
+        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'
 
     }, PE.Views.FileMenuPanels.ProtectDoc || {}));
 

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

@@ -43,8 +43,7 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common/main/lib/component/Button',
+    'common/main/lib/component/Button'
-    'common/main/lib/view/SignDialog'
 ], function (menuTemplate, $, _, Backbone) {
     'use strict';
 
@@ -63,36 +62,14 @@ define([
         },
 
         initialize: function () {
-            var me = this;
-
             this._state = {
-                DisabledControls: false,
+                requestedSignatures: undefined,
-                DisabledInsertControls: false,
                 validSignatures: undefined,
                 invalidSignatures: undefined,
                 DisabledEditing: false,
                 ready: false
             };
             this._locked = false;
-            this.lockedControls = [];
-
-            this._noApply = false;
-            this._originalProps = null;
-
-            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();
         },
@@ -102,16 +79,45 @@ define([
                 scope: this
             }));
 
-            this.btnAddInvisibleSign = new Common.UI.Button({
+            var protection = PE.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.viewValidList = new Common.UI.DataView({
+                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.btnAddInvisibleSign.on('click', _.bind(this.addInvisibleSign, this));
-            this.lockedControls.push(this.btnAddInvisibleSign);
 
-            this.cntValidSign = $('#signature-valid-sign');
+            this.viewInvalidList = new Common.UI.DataView({
-            this.cntInvalidSign = $('#signature-invalid-sign');
+                el: $('#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-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.strDetails,value: 1 },
+                    { caption: this.strDelete, value: 3 }
+                ]
+            });
+            this.signatureMenu.on('item:click', _.bind(this.onMenuSignatureClick, this));
         },
 
         setApi: function(api) {
@@ -126,31 +132,12 @@ define([
         ChangeSettings: function(props) {
             if (!this._state.validSignatures || !this._state.invalidSignatures)
                 this.updateSignatures(this.api.asc_getSignatures());
-
-            this.disableControls(this._locked);
         },
 
         setLocked: function (locked) {
             this._locked = locked;
         },
 
-        disableControls: function(disable) {
-            if (this._state.DisabledControls!==disable) {
-                this._state.DisabledControls = 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;
         },
@@ -159,7 +146,7 @@ define([
             if (!this._state.ready) return;
 
             this.updateSignatures(valid);
-            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){
@@ -172,67 +159,119 @@ define([
                 (item.asc_getValid()==0) ? me._state.validSignatures.push(sign) : me._state.invalidSignatures.push(sign);
             });
 
-            // 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.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.$linksView = $('.signature-view-link', this.$el);
+            this.$el.find('.valid').toggleClass('hidden', me._state.validSignatures.length<1);
-            var width = this.$linksView.width();
+            this.$el.find('.invalid').toggleClass('hidden', me._state.invalidSignatures.length<1);
-            $('.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);
         },
 
-        addInvisibleSign: function(btn) {
+        onSelectSignature: function(picker, item, record, e){
-            var me = this,
+            if (!record) return;
-                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);
-                        }
-                        me.fireEvent('editcomplete', me);
-                    }
-                });
 
-            win.show();
+            var btn = $(e.target);
+            if (btn && btn.hasClass('caret')) {
+                var menu = this.signatureMenu;
+                if (menu.isVisible()) {
+                    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"});
+
+                    menu.on({
+                        'show:after': function(cmp) {
+                            if (cmp && cmp.menuAlignEl)
+                                cmp.menuAlignEl.toggleClass('over', true);
+                        },
+                        'hide:after': function(cmp) {
+                            if (cmp && cmp.menuAlignEl)
+                                cmp.menuAlignEl.toggleClass('over', false);
+                        }
+                    });
+                }
+                menu.items[1].setDisabled(this._locked);
+                menu.cmpEl.attr('data-value', record.get('guid'));
+
+                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();
+            }
         },
 
-        onViewSignature: function(event) {
+        onMenuSignatureClick:  function(menu, item) {
-            var target = $(event.currentTarget);
+            var guid = menu.cmpEl.attr('data-value');
-            if (target.hasClass('disabled')) return;
+            switch (item.value) {
-
+                case 1:
-            this.api.asc_ViewCertificate(target.attr('data-value'));
+                    this.api.asc_ViewCertificate(guid);
+                    break;
+                case 3:
+                    this.api.asc_RemoveSignature(guid);
+                    break;
+            }
         },
 
         onDocumentReady: function() {
             this._state.ready = true;
 
-            this.updateSignatures(this.api.asc_getSignatures());
+            this.updateSignatures(this.api.asc_getSignatures(), this.api.asc_getRequestSignatures());
-            this.showSignatureTooltip(this._state.validSignatures.length>0 || this._state.invalidSignatures.length>0);
+            this.showSignatureTooltip(this._state.validSignatures.length>0, this._state.invalidSignatures.length>0);
         },
 
-        showSignatureTooltip: function(hasSigned) {
+        showSignatureTooltip: function(hasValid, hasInvalid) {
-            if (!hasSigned) return;
+            if (!hasValid && !hasInvalid) return;
+
+            var tipText = (hasInvalid) ? this.txtSignedInvalid : (hasValid ? this.txtSigned : "");
 
             var me = this,
                 tip = new Common.UI.SynchronizeTip({
                     target  : PE.getController('RightMenu').getView('RightMenu').btnSignature.btnEl,
-                    text    : this.txtSignedDocument,
+                    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.me.disableEditing(false);
+                        msg: me.txtEditWarning,
+                        buttons: ['ok', 'cancel'],
+                        primary: 'ok',
+                        callback: function(btn) {
+                            if (btn == 'ok') {
+                                tip.close();
+                                me.api.asc_RemoveAllSignatures();
+                            }
+                        }
+                    });
                 },
                 'closeclick': function() {
                     tip.close();
@@ -259,18 +298,19 @@ define([
                 var comments = PE.getController('Common.Controllers.Comments');
                 if (comments)
                     comments.setPreviewMode(disable);
-
-                this.disableInsertControls(disable);
             }
         },
 
         strSignature: 'Signature',
-        strInvisibleSign: 'Add invisible digital signature',
         strValid: 'Valid signatures',
         strInvalid: 'Invalid signatures',
-        strView: 'View',
+        strDetails: 'Signature Details',
-        txtSignedDocument: 'This document has been signed. It should not be edited.',
+        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.',
+        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'
 
     }, PE.Views.SignatureSettings || {}));
 });

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

@@ -1863,7 +1863,8 @@ define([
             textTabInsert: 'Insert',
             textSurface: 'Surface',
             textShowPresenterView: 'Show presenter view',
-            textTabCollaboration: 'Collaboration'
+            textTabCollaboration: 'Collaboration',
+            textTabProtect: 'Protection'
         }
     }()), PE.Views.Toolbar || {}));
 });

apps/presentationeditor/main/app_dev.js

@@ -147,6 +147,7 @@ require([
             ,'Common.Controllers.Plugins'
             ,'Common.Controllers.ExternalDiagramEditor'
             ,'Common.Controllers.ReviewChanges'
+            ,'Common.Controllers.Protection'
         ]
     });
 
@@ -179,6 +180,7 @@ require([
         'presentationeditor/main/app/view/ChartSettings',
         'common/main/lib/controller/ExternalDiagramEditor'
         ,'common/main/lib/controller/ReviewChanges'
+        ,'common/main/lib/controller/Protection'
     ], function() {
         window.compareVersions = true;
         app.start();

apps/presentationeditor/main/locale/en.json

@@ -116,12 +116,29 @@
   "Common.Views.OpenDialog.txtPassword": "Password",
   "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",
@@ -901,6 +918,16 @@
   "PE.Views.FileMenuPanels.DocumentInfo.txtTitle": "Presentation Title",
   "PE.Views.FileMenuPanels.DocumentRights.txtBtnAccessRights": "Change access rights",
   "PE.Views.FileMenuPanels.DocumentRights.txtRights": "Persons who have rights",
+  "PE.Views.FileMenuPanels.ProtectDoc.strProtect": "Protect Document",
+  "PE.Views.FileMenuPanels.ProtectDoc.strSignature": "Signature",
+  "PE.Views.FileMenuPanels.ProtectDoc.txtView": "View signatures",
+  "PE.Views.FileMenuPanels.ProtectDoc.txtEdit": "Edit document",
+  "PE.Views.FileMenuPanels.ProtectDoc.txtSigned": "Valid signatures has been added to the document. The document is protected from editing.",
+  "PE.Views.FileMenuPanels.ProtectDoc.txtSignedInvalid": "Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.",
+  "PE.Views.FileMenuPanels.ProtectDoc.notcriticalErrorTitle": "Warning",
+  "PE.Views.FileMenuPanels.ProtectDoc.txtEditWarning": "Editing will remove the signatures from the document.<br>Are you sure you want to continue?",
+  "PE.Views.FileMenuPanels.ProtectDoc.strEncrypt": "Password",
+  "PE.Views.FileMenuPanels.ProtectDoc.txtEncrypted": "This document has been protected by password",
   "PE.Views.FileMenuPanels.Settings.okButtonText": "Apply",
   "PE.Views.FileMenuPanels.Settings.strAlignGuides": "Turn on alignment guides",
   "PE.Views.FileMenuPanels.Settings.strAutoRecover": "Turn on autorecover",
@@ -936,11 +963,6 @@
   "PE.Views.FileMenuPanels.Settings.txtLast": "View Last",
   "PE.Views.FileMenuPanels.Settings.txtPt": "Point",
   "PE.Views.FileMenuPanels.Settings.txtSpellCheck": "Spell Checking",
-  "PE.Views.FileMenuPanels.ProtectDoc.strProtect": "Protect Document",
-  "PE.Views.FileMenuPanels.ProtectDoc.strInvisibleSign": "Add invisible digital signature",
-  "PE.Views.FileMenuPanels.ProtectDoc.strValid": "Valid signatures",
-  "PE.Views.FileMenuPanels.ProtectDoc.strInvalid": "Invalid signatures",
-  "PE.Views.FileMenuPanels.ProtectDoc.strSignature": "Signature",
   "PE.Views.HyperlinkSettingsDialog.cancelButtonText": "Cancel",
   "PE.Views.HyperlinkSettingsDialog.okButtonText": "OK",
   "PE.Views.HyperlinkSettingsDialog.strDisplay": "Display",
@@ -1083,11 +1105,6 @@
   "PE.Views.ShapeSettings.txtNoBorders": "No Line",
   "PE.Views.ShapeSettings.txtPapyrus": "Papyrus",
   "PE.Views.ShapeSettings.txtWood": "Wood",
-  "PE.Views.SignatureSettings.strSignature": "Signature",
-  "PE.Views.SignatureSettings.strInvisibleSign": "Add invisible digital signature",
-  "PE.Views.SignatureSettings.strValid": "Valid signatures",
-  "PE.Views.SignatureSettings.strInvalid": "Invalid signatures",
-  "PE.Views.SignatureSettings.strView": "View",
   "PE.Views.ShapeSettingsAdvanced.cancelButtonText": "Cancel",
   "PE.Views.ShapeSettingsAdvanced.okButtonText": "OK",
   "PE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
@@ -1122,6 +1139,17 @@
   "PE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
   "PE.Views.ShapeSettingsAdvanced.textWidth": "Width",
   "PE.Views.ShapeSettingsAdvanced.txtNone": "None",
+  "PE.Views.SignatureSettings.strSignature": "Signature",
+  "PE.Views.SignatureSettings.strValid": "Valid signatures",
+  "PE.Views.SignatureSettings.strInvalid": "Invalid signatures",
+  "PE.Views.SignatureSettings.strSign": "Sign",
+  "PE.Views.SignatureSettings.strDetails": "Signature Details",
+  "PE.Views.SignatureSettings.strDelete": "Remove Signature",
+  "PE.Views.SignatureSettings.txtSigned": "Valid signatures has been added to the document. The document is protected from editing.",
+  "PE.Views.SignatureSettings.txtSignedInvalid": "Some of the digital signatures in document are invalid or could not be verified. The document is protected from editing.",
+  "PE.Views.SignatureSettings.txtContinueEditing": "Edit anyway",
+  "PE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
+  "PE.Views.SignatureSettings.txtEditWarning": "Editing will remove the signatures from the document.<br>Are you sure you want to continue?",
   "PE.Views.SlideSettings.strBackground": "Background color",
   "PE.Views.SlideSettings.strColor": "Color",
   "PE.Views.SlideSettings.strDelay": "Delay",
@@ -1397,6 +1425,7 @@
   "PE.Views.Toolbar.textTabHome": "Home",
   "PE.Views.Toolbar.textTabInsert": "Insert",
   "PE.Views.Toolbar.textTabCollaboration": "Collaboration",
+  "PE.Views.Toolbar.textTabProtect": "Protection",
   "PE.Views.Toolbar.textTitleError": "Error",
   "PE.Views.Toolbar.textUnderline": "Underline",
   "PE.Views.Toolbar.textZoom": "Zoom",

apps/presentationeditor/main/resources/less/leftmenu.less

@@ -452,6 +452,25 @@
                 font-size: 12px;
             }
         }
+
+        #panel-protect {
+            label, span {
+                font-size: 12px;
+            }
+
+            padding: 30px 30px;
+
+            .header {
+                font-weight: bold;
+                margin: 30px 0 10px;
+            }
+
+            table {
+                td {
+                    padding: 5px 0;
+                }
+            }
+        }
     }
 }
 
@@ -469,32 +488,4 @@
     -webkit-transform: rotate(180deg);
     -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-size: 12px;
-    }
-
-    .header {
-        font-weight: bold;
-        margin: 30px 0 10px;
-    }
-
-    table {
-        td {
-            padding: 5px 5px;
-        }
-    }
 }

apps/presentationeditor/main/resources/less/rightmenu.less

@@ -206,8 +206,54 @@ button:active:not(.disabled) .btn-change-shape    {background-position: -56px  -
     background-position: -100px -150px;
 }
 
-.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;
+            }
+        }
+    }
 }