Merge pull request #1240 from ONLYOFFICE/feature/Bug_49948

Bug 49948

apps/common/main/lib/component/InputField.js

@@ -191,6 +191,7 @@ define([
             },
 
             checkPasswordType: function(){
+                if(this.type == 'text') return;
                 if (this._input.val() !== '') {
                     (this._input.attr('type') !== 'password') && this._input.attr('type', 'password');
                 } else {
@@ -436,7 +437,7 @@ define([
             template: _.template([
                 '<div class="input-field input-field-btn" style="<%= style %>">',
                     '<input ',
-                        'type="<%= type %>" ',
+                        'type="text" ',
                         'name="<%= name %>" ',
                         'spellcheck="<%= spellcheck %>" ',
                         'class="form-control <%= cls %>" ',
@@ -482,6 +483,7 @@ define([
 
                     this._button = new Common.UI.Button({
                         el: this.cmpEl.find('button'),
+                        iconCls: this.options.iconCls,
                         hint: this.options.btnHint || ''
                     });
                     this._button.on('click', _.bind(this.onButtonClick, this));
@@ -512,6 +514,8 @@ define([
                 }
 
                 me.rendered = true;
+                if (me.value)
+                    me.setValue(me.value);
 
                 return this;
             },
@@ -541,4 +545,106 @@ define([
             }
         }
     })());
+
+    Common.UI.InputFieldBtnPassword = Common.UI.InputFieldBtn.extend(_.extend((function() {
+        return {
+            options: {
+                id: null,
+                cls: '',
+                style: '',
+                value: '',
+                name: '',
+                validation: null,
+                allowBlank: true,
+                placeHolder: '',
+                blankError: null,
+                spellcheck: false,
+                maskExp: '',
+                validateOnChange: false,
+                validateOnBlur: true,
+                disabled: false,
+                editable: true,
+                iconCls: 'btn-sheet-view',
+                btnHint: '',
+                repeatInput: null,
+                showPwdOnClick: true
+            },
+
+            initialize : function(options) {
+                options = options || {};
+                options.btnHint = options.btnHint || this.textHintShowPwd;
+
+                Common.UI.InputFieldBtn.prototype.initialize.call(this, options);
+
+                this.hidePwd = true;
+                this.repeatInput= this.options.repeatInput;
+            },
+
+            render: function (parentEl) {
+                Common.UI.InputFieldBtn.prototype.render.call(this, parentEl);
+
+                this._btnElm = this._button.$el;
+                this._input.on('input', _.bind(this.checkPasswordType, this));
+                if(this.options.showPwdOnClick)
+                    this._button.on('click', _.bind(this.passwordClick, this));
+                else
+                    this._btnElm.on('mousedown', _.bind(this.passwordShow, this));
+
+                return this;
+            },
+
+            passwordClick: function (e)
+            {
+                if(this.hidePwd) {
+                    this.passwordShow(e);
+                    this.hidePwd = false;
+                }
+                else {
+                    this.passwordHide(e);
+                    this.hidePwd = true;
+                }
+            },
+
+            passwordShow: function (e) {
+                if (this.disabled) return;
+                this._button.setIconCls('hide-password');
+                this.type = 'text';
+
+                this._input.attr('type', this.type);
+                if(this.repeatInput) {
+                    this.repeatInput.type = this.type;
+                    this.repeatInput._input.attr('type', this.type);
+                }
+
+                if(this.options.showPwdOnClick) {
+                    this._button.updateHint(this.textHintHidePwd);
+                }
+                else {
+                    this._btnElm.on('mouseup', _.bind(this.passwordHide, this));
+                    this._btnElm.on('mouseout', _.bind(this.passwordHide, this));
+                }
+            },
+
+            passwordHide: function (e) {
+                this._button.setIconCls('btn-sheet-view');
+                this.type = 'password';
+
+                (this._input.val() !== '') && this._input.attr('type', this.type);
+                if(this.repeatInput) {
+                    this.repeatInput.type = this.type;
+                    (this.repeatInput._input.val() !== '') && this.repeatInput._input.attr('type', this.type);
+                }
+
+                if(this.options.showPwdOnClick) {
+                    this._button.updateHint(this.textHintShowPwd);
+                }
+                else {
+                    this._btnElm.off('mouseup', this.passwordHide);
+                    this._btnElm.off('mouseout', this.passwordHide);
+                }
+            },
+            textHintShowPwd: 'Show password',
+            textHintHidePwd: 'Hide password'
+        }
+    })(), Common.UI.InputFieldBtnPassword || {}));
 });

apps/common/main/lib/view/OpenDialog.js

@@ -200,10 +200,11 @@ define([
                 this.previewInner = this.previewScrolled.find('div:first-child');
 
                 if (this.type == Common.Utils.importTextType.DRM) {
-                    this.inputPwd = new Common.UI.InputField({
+                    this.inputPwd = new Common.UI.InputFieldBtnPassword({
                         el: $('#id-password-txt'),
                         type: 'password',
                         validateOnBlur: false,
+                        showPwdOnClick: true,
                         validation  : function(value) {
                             return me.txtIncorrectPwd;
                         }

apps/common/main/lib/view/PasswordDialog.js

@@ -93,14 +93,7 @@ define([
             if (this.$window) {
                 var me = this;
                 this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
-                    this.inputPwd = new Common.UI.InputField({
+
-                        el: $('#id-password-txt'),
-                        type: 'password',
-                        allowBlank  : false,
-                        style       : 'width: 100%;',
-                        maxLength: 255,
-                        validateOnBlur: false
-                    });
                     this.repeatPwd = new Common.UI.InputField({
                         el: $('#id-repeat-txt'),
                         type: 'password',
@@ -112,6 +105,15 @@ define([
                             return me.txtIncorrectPwd;
                         }
                     });
+                    this.inputPwd = new Common.UI.InputFieldBtnPassword({
+                        el: $('#id-password-txt'),
+                        type: 'password',
+                        allowBlank  : false,
+                        style       : 'width: 100%;',
+                        maxLength: 255,
+                        validateOnBlur: false,
+                        repeatInput: this.repeatPwd
+                    });
             }
         },
 

apps/documenteditor/main/locale/en.json

@@ -168,6 +168,8 @@
   "Common.UI.ExtendedColorDialog.textNew": "New",
   "Common.UI.ExtendedColorDialog.textRGBErr": "The entered value is incorrect.<br>Please enter a numeric value between 0 and 255.",
   "Common.UI.HSBColorPicker.textNoColor": "No Color",
+  "Common.UI.InputFieldBtnPassword.textHintHidePwd": "Hide password",
+  "Common.UI.InputFieldBtnPassword.textHintShowPwd": "Show password",
   "Common.UI.SearchDialog.textHighlight": "Highlight results",
   "Common.UI.SearchDialog.textMatchCase": "Case sensitive",
   "Common.UI.SearchDialog.textReplaceDef": "Enter the replacement text",

apps/presentationeditor/main/locale/en.json

@@ -61,6 +61,8 @@
   "Common.UI.ExtendedColorDialog.textNew": "New",
   "Common.UI.ExtendedColorDialog.textRGBErr": "The entered value is incorrect.<br>Please enter a numeric value between 0 and 255.",
   "Common.UI.HSBColorPicker.textNoColor": "No Color",
+  "Common.UI.InputFieldBtnPassword.textHintHidePwd": "Hide password",
+  "Common.UI.InputFieldBtnPassword.textHintShowPwd": "Show password",
   "Common.UI.SearchDialog.textHighlight": "Highlight results",
   "Common.UI.SearchDialog.textMatchCase": "Case sensitive",
   "Common.UI.SearchDialog.textReplaceDef": "Enter the replacement text",

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

@@ -111,14 +111,7 @@ define([
 
             var me = this;
             this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
-            this.inputPwd = new Common.UI.InputField({
+
-                el: $('#id-password-txt'),
-                type: 'password',
-                allowBlank  : true,
-                style       : 'width: 100%;',
-                maxLength: 255,
-                validateOnBlur: false
-            });
             this.repeatPwd = new Common.UI.InputField({
                 el: $('#id-repeat-txt'),
                 type: 'password',
@@ -131,6 +124,17 @@ define([
                 }
             });
 
+            this.inputPwd = new Common.UI.InputFieldBtnPassword({
+                el: $('#id-password-txt'),
+                type: 'password',
+                allowBlank  : true,
+                style       : 'width: 100%;',
+                maxLength: 255,
+                validateOnBlur: false,
+                repeatInput: this.repeatPwd,
+                showPwdOnClick: true
+            });
+
             if (this.type == 'sheet') {
                 this.optionsList = new Common.UI.ListView({
                     el: $('#protect-dlg-options', this.$window),

apps/spreadsheeteditor/main/locale/en.json

@@ -114,6 +114,8 @@
   "Common.UI.ExtendedColorDialog.textNew": "New",
   "Common.UI.ExtendedColorDialog.textRGBErr": "The entered value is incorrect.<br>Please enter a numeric value between 0 and 255.",
   "Common.UI.HSBColorPicker.textNoColor": "No Color",
+  "Common.UI.InputFieldBtnPassword.textHintHidePwd": "Hide password",
+  "Common.UI.InputFieldBtnPassword.textHintShowPwd": "Show password",
   "Common.UI.SearchDialog.textHighlight": "Highlight results",
   "Common.UI.SearchDialog.textMatchCase": "Case sensitive",
   "Common.UI.SearchDialog.textReplaceDef": "Enter the replacement text",

apps/spreadsheeteditor/main/locale/ru.json

@@ -114,6 +114,8 @@
   "Common.UI.ExtendedColorDialog.textNew": "Новый",
   "Common.UI.ExtendedColorDialog.textRGBErr": "Введено некорректное значение.<br>Пожалуйста, введите числовое значение от 0 до 255.",
   "Common.UI.HSBColorPicker.textNoColor": "Без цвета",
+  "Common.UI.InputFieldBtnPassword.textHintShowPwd": "Показать пароль",
+  "Common.UI.InputFieldBtnPassword.textHintHidePwd": "Скрыть пароль",
   "Common.UI.SearchDialog.textHighlight": "Выделить результаты",
   "Common.UI.SearchDialog.textMatchCase": "С учетом регистра",
   "Common.UI.SearchDialog.textReplaceDef": "Введите текст для замены",