From fec2440f05c3898efac0a98542cddd9e1107f7d8 Mon Sep 17 00:00:00 2001
From: skrupnyk <serhii.kr@upplabs.com>
Date: Mon, 14 Mar 2022 18:10:21 +0200
Subject: [PATCH 1/9] added show password function

---
 css/form.css                                    |  7 +++++++
 js/build.templates.js                           |  2 +-
 js/components/password.js                       | 15 +++++++++++++++
 js/interface.templates.js                       |  2 +-
 templates/components/password.build.hbs         |  2 ++
 templates/configurations/password.interface.hbs | 12 ++++++++++++
 6 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/css/form.css b/css/form.css
index 31fe6149..a3dae13a 100644
--- a/css/form.css
+++ b/css/form.css
@@ -7,6 +7,13 @@
   opacity: 0.65;
 }
 
+.fa-eye {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+  display: inline-block;
+}
+
 .fl-form.form-offline .cover-form {
   position: absolute;
   top: 0;
diff --git a/js/build.templates.js b/js/build.templates.js
index 96d9903e..cfa4f25c 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -59,7 +59,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa fa-eye\" v-on:click=\"showingPassword()\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n    <i v-if=\"canShowPassword && passwordConfirmation\" class=\"fa fa-eye\" v-on:click=\"showingPassword()\"></i>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/components/password.js b/js/components/password.js
index 4a9baa58..be16826b 100644
--- a/js/components/password.js
+++ b/js/components/password.js
@@ -21,6 +21,10 @@ Fliplet.FormBuilder.field('password', {
       type: Boolean,
       default: false
     },
+    canShowPassword: {
+      type: Boolean,
+      default: false
+    },
     passwordConfirmation: {
       type: String,
       default: ''
@@ -110,6 +114,17 @@ Fliplet.FormBuilder.field('password', {
     }
   },
   methods: {
+    showingPassword: function() {
+      var $passwordInputs = $("input[autocomplete='new-password']");
+
+      $.each($passwordInputs, function(i, val) {
+        if ($(val).prop('type') === 'password') {
+          $(val).attr('type', 'text');
+        } else {
+          $(val).attr('type', 'password');
+        }
+      });
+    },
     generateRandomPassword: function(length) {
       var alphabet = 'abcdefghijklmnopqrstuvwxyz!#$%&*-ABCDEFGHIJKLMNOP1234567890';
       var password = '';
diff --git a/js/interface.templates.js b/js/interface.templates.js
index 8a1d9ad6..d3120450 100644
--- a/js/interface.templates.js
+++ b/js/interface.templates.js
@@ -60,7 +60,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.paragraph"] = H
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\r\n  <label>Description</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\r\n</div>\r\n<div class=\"form-group\">\r\n  <label>Placeholder</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should the password be encrypted?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-yes\" name=\"hash-option\" v-bind:value=\"true\" v-model=\"hash\">\r\n    <label for=\"hash-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Encrypt the password before storing\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-no\" name=\"hash-option\" v-bind:value=\"false\" v-model=\"hash\">\r\n    <label for=\"hash-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Store the password as plain text\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should a password be automatically generated when submitting a new entry?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-yes\" name=\"autogenerate-option\" v-bind:value=\"true\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - a secure password will be randomly generated\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-no\" name=\"autogenerate-option\" v-bind:value=\"false\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The user will manually enter a password\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"autogenerate\">\r\n  <label>Autogenerated password length</label>\r\n  <input class=\"form-control\" type=\"number\" v-model=\"autogenerateLength\" v-on:change=\"validatePasswordLength\" placeholder=\"Password length\" min=\"8\" max=\"32\" step=\"1\" :required=\"autogenerate\" />\r\n  <p class=\"help-block\">Must be at least 8 characters</p>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"!autogenerate\">\r\n  <label>Ask users to confirm the password before submitting?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-yes\" name=\"confirm-option\" v-bind:value=\"true\" v-model=\"confirm\">\r\n    <label for=\"confirm-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Add a password confirmation field\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-no\" name=\"confirm-option\" v-bind:value=\"false\" v-model=\"confirm\">\r\n    <label for=\"confirm-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Don't add anything else\r\n    </label>\r\n  </div>\r\n</div>\r\n";
+    return "<div class=\"form-group\">\r\n  <label>Description</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\r\n</div>\r\n<div class=\"form-group\">\r\n  <label>Placeholder</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should the password be encrypted?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-yes\" name=\"hash-option\" v-bind:value=\"true\" v-model=\"hash\">\r\n    <label for=\"hash-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Encrypt the password before storing\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-no\" name=\"hash-option\" v-bind:value=\"false\" v-model=\"hash\">\r\n    <label for=\"hash-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Store the password as plain text\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should a password be automatically generated when submitting a new entry?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-yes\" name=\"autogenerate-option\" v-bind:value=\"true\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - a secure password will be randomly generated\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-no\" name=\"autogenerate-option\" v-bind:value=\"false\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The user will manually enter a password\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"autogenerate\">\r\n  <label>Autogenerated password length</label>\r\n  <input class=\"form-control\" type=\"number\" v-model=\"autogenerateLength\" v-on:change=\"validatePasswordLength\" placeholder=\"Password length\" min=\"8\" max=\"32\" step=\"1\" :required=\"autogenerate\" />\r\n  <p class=\"help-block\">Must be at least 8 characters</p>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"!autogenerate\">\r\n  <label>Ask users to confirm the password before submitting?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-yes\" name=\"confirm-option\" v-bind:value=\"true\" v-model=\"confirm\">\r\n    <label for=\"confirm-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Add a password confirmation field\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-no\" name=\"confirm-option\" v-bind:value=\"false\" v-model=\"confirm\">\r\n    <label for=\"confirm-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Don't add anything else\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Do you want to allow users to show/hide their password when typing?</label>\r\n  <p class=\"help-block\"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>\r\n  <div class=\"checkbox checkbox-icon password-show-checkbox\">\r\n    <input type=\"checkbox\" :name=\"name\" v-model=\"canShowPassword\" id=\"password-show-checkbox\">\r\n    <label for=\"password-show-checkbox\">\r\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span>\r\n      <span class=\"hide-field\">Yes, please.</span>\r\n    </label>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.select"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/templates/components/password.build.hbs b/templates/components/password.build.hbs
index 3251f402..5b41c4e1 100644
--- a/templates/components/password.build.hbs
+++ b/templates/components/password.build.hbs
@@ -14,6 +14,7 @@
   :placeholder="fieldPlaceholder"
   tabindex="0"
 />
+<i v-if="canShowPassword && value" class="fa fa-eye" v-on:click="showingPassword()"></i>
 <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>
 
 <div v-if="isFocused || $v.value.$model" class="panel password-checker" :class="validationClass.password">
@@ -77,6 +78,7 @@
       v-on:input="onPasswordConfirmationInput($event)"
       tabindex="0"
     />
+    <i v-if="canShowPassword && passwordConfirmation" class="fa fa-eye" v-on:click="showingPassword()"></i>
   </div>
   <div class="col-xs-12">
     <div v-if="isFocused || $v.value.$model" class="panel password-checker" :class="validationClass.passwordConfirmation">
diff --git a/templates/configurations/password.interface.hbs b/templates/configurations/password.interface.hbs
index 016e9422..6b42f918 100644
--- a/templates/configurations/password.interface.hbs
+++ b/templates/configurations/password.interface.hbs
@@ -60,3 +60,15 @@
     </label>
   </div>
 </div>
+
+<div class="form-group">
+  <label>Do you want to allow users to show/hide their password when typing?</label>
+  <p class="help-block"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>
+  <div class="checkbox checkbox-icon password-show-checkbox">
+    <input type="checkbox" :name="name" v-model="canShowPassword" id="password-show-checkbox">
+    <label for="password-show-checkbox">
+      <span class="check"><i class="fa fa-check"></i></span>
+      <span class="hide-field">Yes, please.</span>
+    </label>
+  </div>
+</div>

From c2b28dba1bb3cd6bcc53f4bb2cb1f1d190f9cc3b Mon Sep 17 00:00:00 2001
From: skrupnyk <serhii.kr@upplabs.com>
Date: Mon, 14 Mar 2022 21:32:31 +0200
Subject: [PATCH 2/9] refactor

---
 js/build.templates.js                   | 2 +-
 js/components/password.js               | 8 ++------
 templates/components/password.build.hbs | 4 ++--
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/js/build.templates.js b/js/build.templates.js
index cfa4f25c..a5d6a31c 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -59,7 +59,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa fa-eye\" v-on:click=\"showingPassword()\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n    <i v-if=\"canShowPassword && passwordConfirmation\" class=\"fa fa-eye\" v-on:click=\"showingPassword()\"></i>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n    <i v-if=\"canShowPassword && passwordConfirmation\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/components/password.js b/js/components/password.js
index be16826b..db45edae 100644
--- a/js/components/password.js
+++ b/js/components/password.js
@@ -114,15 +114,11 @@ Fliplet.FormBuilder.field('password', {
     }
   },
   methods: {
-    showingPassword: function() {
+    showPassword: function() {
       var $passwordInputs = $("input[autocomplete='new-password']");
 
       $.each($passwordInputs, function(i, val) {
-        if ($(val).prop('type') === 'password') {
-          $(val).attr('type', 'text');
-        } else {
-          $(val).attr('type', 'password');
-        }
+        $(val).prop('type') === 'password' ? $(val).attr('type', 'text') : $(val).attr('type', 'password');
       });
     },
     generateRandomPassword: function(length) {
diff --git a/templates/components/password.build.hbs b/templates/components/password.build.hbs
index 5b41c4e1..4d6b5167 100644
--- a/templates/components/password.build.hbs
+++ b/templates/components/password.build.hbs
@@ -14,7 +14,7 @@
   :placeholder="fieldPlaceholder"
   tabindex="0"
 />
-<i v-if="canShowPassword && value" class="fa fa-eye" v-on:click="showingPassword()"></i>
+<i v-if="canShowPassword && value" class="fa fa-eye" v-on:click="showPassword()"></i>
 <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>
 
 <div v-if="isFocused || $v.value.$model" class="panel password-checker" :class="validationClass.password">
@@ -78,7 +78,7 @@
       v-on:input="onPasswordConfirmationInput($event)"
       tabindex="0"
     />
-    <i v-if="canShowPassword && passwordConfirmation" class="fa fa-eye" v-on:click="showingPassword()"></i>
+    <i v-if="canShowPassword && passwordConfirmation" class="fa fa-eye" v-on:click="showPassword()"></i>
   </div>
   <div class="col-xs-12">
     <div v-if="isFocused || $v.value.$model" class="panel password-checker" :class="validationClass.passwordConfirmation">

From 24f78ab05bb6ac1eeb8549bd0405bd67f9a5bb4c Mon Sep 17 00:00:00 2001
From: skrupnyk <serhii.kr@upplabs.com>
Date: Mon, 14 Mar 2022 21:57:34 +0200
Subject: [PATCH 3/9] refactor

---
 js/components/password.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/components/password.js b/js/components/password.js
index db45edae..5445fd25 100644
--- a/js/components/password.js
+++ b/js/components/password.js
@@ -117,8 +117,8 @@ Fliplet.FormBuilder.field('password', {
     showPassword: function() {
       var $passwordInputs = $("input[autocomplete='new-password']");
 
-      $.each($passwordInputs, function(i, val) {
-        $(val).prop('type') === 'password' ? $(val).attr('type', 'text') : $(val).attr('type', 'password');
+      $.each($passwordInputs, function(i, el) {
+        $(el).prop('type') === 'password' ? $(el).attr('type', 'text') : $(el).attr('type', 'password');
       });
     },
     generateRandomPassword: function(length) {

From 2baef47b105958d429825ba1bb559ff9619bbfe0 Mon Sep 17 00:00:00 2001
From: skrupnyk <serhii.kr@upplabs.com>
Date: Tue, 15 Mar 2022 12:00:36 +0200
Subject: [PATCH 4/9] added slash eye icon, refactor

---
 css/form.css                            | 2 +-
 js/build.templates.js                   | 2 +-
 js/components/password.js               | 5 +++--
 templates/components/password.build.hbs | 4 ++--
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/css/form.css b/css/form.css
index a3dae13a..9f862d68 100644
--- a/css/form.css
+++ b/css/form.css
@@ -7,7 +7,7 @@
   opacity: 0.65;
 }
 
-.fa-eye {
+.fa-eye, .fa-eye-slash {
   position: absolute;
   top: 15px;
   right: 30px;
diff --git a/js/build.templates.js b/js/build.templates.js
index a5d6a31c..82bff1bf 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -59,7 +59,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n    <i v-if=\"canShowPassword && passwordConfirmation\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline input-password\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline input-password\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n    <i v-if=\"canShowPassword && passwordConfirmation\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/components/password.js b/js/components/password.js
index 5445fd25..e5b8310c 100644
--- a/js/components/password.js
+++ b/js/components/password.js
@@ -115,10 +115,11 @@ Fliplet.FormBuilder.field('password', {
   },
   methods: {
     showPassword: function() {
-      var $passwordInputs = $("input[autocomplete='new-password']");
+      var $passwordInputs = $('.input-password');
 
       $.each($passwordInputs, function(i, el) {
-        $(el).prop('type') === 'password' ? $(el).attr('type', 'text') : $(el).attr('type', 'password');
+        $(el).attr('type', $(el).prop('type') === 'password' ? 'text' : 'password');
+        $('.fa-eye').toggleClass('fa-eye-slash', $(el).prop('type') === 'text');
       });
     },
     generateRandomPassword: function(length) {
diff --git a/templates/components/password.build.hbs b/templates/components/password.build.hbs
index 4d6b5167..0598bc5b 100644
--- a/templates/components/password.build.hbs
+++ b/templates/components/password.build.hbs
@@ -1,7 +1,7 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
 <input
   type="password"
-  class="form-control focus-outline"
+  class="form-control focus-outline input-password"
   :readonly="autogenerate"
   autocomplete="new-password"
   v-on:change="updateValue()"
@@ -70,7 +70,7 @@
   <div class="col-xs-12">
     <input
       type="password"
-      class="form-control focus-outline"
+      class="form-control focus-outline input-password"
       v-model.lazy="$v.passwordConfirmation.$model"
       id="confirmPassword"
       autocomplete="new-password"

From 3b3b262d36457cabb04d263f142bfa8bb173be1e Mon Sep 17 00:00:00 2001
From: skrupnyk <serhii.kr@upplabs.com>
Date: Tue, 15 Mar 2022 12:25:00 +0200
Subject: [PATCH 5/9] refactor

---
 js/components/password.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/components/password.js b/js/components/password.js
index e5b8310c..249582df 100644
--- a/js/components/password.js
+++ b/js/components/password.js
@@ -118,8 +118,10 @@ Fliplet.FormBuilder.field('password', {
       var $passwordInputs = $('.input-password');
 
       $.each($passwordInputs, function(i, el) {
-        $(el).attr('type', $(el).prop('type') === 'password' ? 'text' : 'password');
-        $('.fa-eye').toggleClass('fa-eye-slash', $(el).prop('type') === 'text');
+        var $passwordInput = $(el);
+
+        $passwordInput.attr('type', $passwordInput.prop('type') === 'password' ? 'text' : 'password');
+        $('.fa-eye').toggleClass('fa-eye-slash', $passwordInput.prop('type') === 'text');
       });
     },
     generateRandomPassword: function(length) {

From cbf230f20331bd890d9a789d0f086d34896244df Mon Sep 17 00:00:00 2001
From: skrupnyk <serhii.kr@upplabs.com>
Date: Tue, 24 May 2022 17:45:54 +0300
Subject: [PATCH 6/9] updated

---
 js/build.templates.js                           |  2 +-
 js/components/password.js                       | 10 +++-------
 js/interface.templates.js                       |  2 +-
 templates/components/password.build.hbs         |  1 -
 templates/configurations/password.interface.hbs |  8 ++++----
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/js/build.templates.js b/js/build.templates.js
index 82bff1bf..3dbadb88 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -59,7 +59,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline input-password\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline input-password\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n    <i v-if=\"canShowPassword && passwordConfirmation\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline input-password\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline input-password\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/components/password.js b/js/components/password.js
index 249582df..5117d581 100644
--- a/js/components/password.js
+++ b/js/components/password.js
@@ -115,14 +115,10 @@ Fliplet.FormBuilder.field('password', {
   },
   methods: {
     showPassword: function() {
-      var $passwordInputs = $('.input-password');
+      var $passwordInput = $('.input-password');
 
-      $.each($passwordInputs, function(i, el) {
-        var $passwordInput = $(el);
-
-        $passwordInput.attr('type', $passwordInput.prop('type') === 'password' ? 'text' : 'password');
-        $('.fa-eye').toggleClass('fa-eye-slash', $passwordInput.prop('type') === 'text');
-      });
+      $passwordInput.attr('type', $passwordInput.prop('type') === 'password' ? 'text' : 'password');
+      $('.fa-eye').toggleClass('fa-eye-slash', $passwordInput.prop('type') === 'text');
     },
     generateRandomPassword: function(length) {
       var alphabet = 'abcdefghijklmnopqrstuvwxyz!#$%&*-ABCDEFGHIJKLMNOP1234567890';
diff --git a/js/interface.templates.js b/js/interface.templates.js
index d3120450..922442f6 100644
--- a/js/interface.templates.js
+++ b/js/interface.templates.js
@@ -60,7 +60,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.paragraph"] = H
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\r\n  <label>Description</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\r\n</div>\r\n<div class=\"form-group\">\r\n  <label>Placeholder</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should the password be encrypted?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-yes\" name=\"hash-option\" v-bind:value=\"true\" v-model=\"hash\">\r\n    <label for=\"hash-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Encrypt the password before storing\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-no\" name=\"hash-option\" v-bind:value=\"false\" v-model=\"hash\">\r\n    <label for=\"hash-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Store the password as plain text\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should a password be automatically generated when submitting a new entry?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-yes\" name=\"autogenerate-option\" v-bind:value=\"true\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - a secure password will be randomly generated\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-no\" name=\"autogenerate-option\" v-bind:value=\"false\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The user will manually enter a password\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"autogenerate\">\r\n  <label>Autogenerated password length</label>\r\n  <input class=\"form-control\" type=\"number\" v-model=\"autogenerateLength\" v-on:change=\"validatePasswordLength\" placeholder=\"Password length\" min=\"8\" max=\"32\" step=\"1\" :required=\"autogenerate\" />\r\n  <p class=\"help-block\">Must be at least 8 characters</p>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"!autogenerate\">\r\n  <label>Ask users to confirm the password before submitting?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-yes\" name=\"confirm-option\" v-bind:value=\"true\" v-model=\"confirm\">\r\n    <label for=\"confirm-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Add a password confirmation field\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-no\" name=\"confirm-option\" v-bind:value=\"false\" v-model=\"confirm\">\r\n    <label for=\"confirm-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Don't add anything else\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Do you want to allow users to show/hide their password when typing?</label>\r\n  <p class=\"help-block\"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>\r\n  <div class=\"checkbox checkbox-icon password-show-checkbox\">\r\n    <input type=\"checkbox\" :name=\"name\" v-model=\"canShowPassword\" id=\"password-show-checkbox\">\r\n    <label for=\"password-show-checkbox\">\r\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span>\r\n      <span class=\"hide-field\">Yes, please.</span>\r\n    </label>\r\n  </div>\r\n</div>\r\n";
+    return "<div class=\"form-group\">\r\n  <label>Description</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\r\n</div>\r\n<div class=\"form-group\">\r\n  <label>Placeholder</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should the password be encrypted?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-yes\" name=\"hash-option\" v-bind:value=\"true\" v-model=\"hash\">\r\n    <label for=\"hash-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Encrypt the password before storing\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-no\" name=\"hash-option\" v-bind:value=\"false\" v-model=\"hash\">\r\n    <label for=\"hash-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Store the password as plain text\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should a password be automatically generated when submitting a new entry?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-yes\" name=\"autogenerate-option\" v-bind:value=\"true\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - a secure password will be randomly generated\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-no\" name=\"autogenerate-option\" v-bind:value=\"false\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The user will manually enter a password\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"autogenerate\">\r\n  <label>Autogenerated password length</label>\r\n  <input class=\"form-control\" type=\"number\" v-model=\"autogenerateLength\" v-on:change=\"validatePasswordLength\" placeholder=\"Password length\" min=\"8\" max=\"32\" step=\"1\" :required=\"autogenerate\" />\r\n  <p class=\"help-block\">Must be at least 8 characters</p>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"!autogenerate\">\r\n  <label>Ask users to confirm the password before submitting?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-yes\" name=\"confirm-option\" v-bind:value=\"true\" v-model=\"confirm\" :disabled=\"canShowPassword\">\r\n    <label for=\"confirm-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong :class=\"{'text-muted': canShowPassword}\">Yes</strong> - Add a password confirmation field\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-no\" name=\"confirm-option\" v-bind:value=\"false\" v-model=\"confirm\">\r\n    <label for=\"confirm-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Don't add anything else\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Do you want to allow users to show/hide their password when typing?</label>\r\n  <p class=\"help-block\"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>\r\n  <div class=\"checkbox checkbox-icon password-show-checkbox\">\r\n    <input type=\"checkbox\" :name=\"name\" v-model=\"canShowPassword\" id=\"password-show-checkbox\" :disabled=\"confirm\">\r\n    <label for=\"password-show-checkbox\">\r\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span>\r\n      <span class=\"hide-field\" :class=\"{'text-muted': confirm}\">Yes, please.</span>\r\n    </label>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.select"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/templates/components/password.build.hbs b/templates/components/password.build.hbs
index 0598bc5b..05ddcd66 100644
--- a/templates/components/password.build.hbs
+++ b/templates/components/password.build.hbs
@@ -78,7 +78,6 @@
       v-on:input="onPasswordConfirmationInput($event)"
       tabindex="0"
     />
-    <i v-if="canShowPassword && passwordConfirmation" class="fa fa-eye" v-on:click="showPassword()"></i>
   </div>
   <div class="col-xs-12">
     <div v-if="isFocused || $v.value.$model" class="panel password-checker" :class="validationClass.passwordConfirmation">
diff --git a/templates/configurations/password.interface.hbs b/templates/configurations/password.interface.hbs
index 6b42f918..3b7dc412 100644
--- a/templates/configurations/password.interface.hbs
+++ b/templates/configurations/password.interface.hbs
@@ -48,9 +48,9 @@
 <div class="form-group" v-if="!autogenerate">
   <label>Ask users to confirm the password before submitting?</label>
   <div class="radio radio-icon">
-    <input type="radio" id="confirm-yes" name="confirm-option" v-bind:value="true" v-model="confirm">
+    <input type="radio" id="confirm-yes" name="confirm-option" v-bind:value="true" v-model="confirm" :disabled="canShowPassword">
     <label for="confirm-yes">
-      <span class="check"><i class="fa fa-circle"></i></span> <strong>Yes</strong> - Add a password confirmation field
+      <span class="check"><i class="fa fa-circle"></i></span> <strong :class="{'text-muted': canShowPassword}">Yes</strong> - Add a password confirmation field
     </label>
   </div>
   <div class="radio radio-icon">
@@ -65,10 +65,10 @@
   <label>Do you want to allow users to show/hide their password when typing?</label>
   <p class="help-block"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>
   <div class="checkbox checkbox-icon password-show-checkbox">
-    <input type="checkbox" :name="name" v-model="canShowPassword" id="password-show-checkbox">
+    <input type="checkbox" :name="name" v-model="canShowPassword" id="password-show-checkbox" :disabled="confirm">
     <label for="password-show-checkbox">
       <span class="check"><i class="fa fa-check"></i></span>
-      <span class="hide-field">Yes, please.</span>
+      <span class="hide-field" :class="{'text-muted': confirm}">Yes, please.</span>
     </label>
   </div>
 </div>

From 094bc645cc4eac135f9db2d08171a65d1f871907 Mon Sep 17 00:00:00 2001
From: SerhiyKr <serhii.kr@upplabs.com>
Date: Thu, 26 May 2022 19:39:00 +0300
Subject: [PATCH 7/9] fix $ refactor

---
 js/build.templates.js                   |  2 +-
 js/components/password.js               | 11 +++++------
 templates/components/password.build.hbs |  4 ++--
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/js/build.templates.js b/js/build.templates.js
index 3dbadb88..12969d5b 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -59,7 +59,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  type=\"password\"\r\n  class=\"form-control focus-outline input-password\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa fa-eye\" v-on:click=\"showPassword()\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline input-password\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  :type=\"isShowPassword ? 'text' : 'password'\"\r\n  class=\"form-control focus-outline input-password\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa\" :class=\"!isShowPassword ? 'fa-eye' : 'fa-eye-slash'\" v-on:click=\"isShowPassword = !isShowPassword\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline input-password\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/components/password.js b/js/components/password.js
index 5117d581..0b18f85f 100644
--- a/js/components/password.js
+++ b/js/components/password.js
@@ -60,6 +60,7 @@ Fliplet.FormBuilder.field('password', {
   data: function() {
     return {
       isFocused: false,
+      isShowPassword: false,
       passwordMinLength: 8,
       defaultClass: 'panel-default',
       invalidClass: 'panel-danger',
@@ -114,12 +115,6 @@ Fliplet.FormBuilder.field('password', {
     }
   },
   methods: {
-    showPassword: function() {
-      var $passwordInput = $('.input-password');
-
-      $passwordInput.attr('type', $passwordInput.prop('type') === 'password' ? 'text' : 'password');
-      $('.fa-eye').toggleClass('fa-eye-slash', $passwordInput.prop('type') === 'text');
-    },
     generateRandomPassword: function(length) {
       var alphabet = 'abcdefghijklmnopqrstuvwxyz!#$%&*-ABCDEFGHIJKLMNOP1234567890';
       var password = '';
@@ -151,6 +146,10 @@ Fliplet.FormBuilder.field('password', {
         this.value = oldVal;
         this.updateValue();
       }
+
+      if (!newVal) {
+        this.isShowPassword = false;
+      }
     },
     '$v.passwordConfirmation.$invalid': function(value) {
       if (!value) {
diff --git a/templates/components/password.build.hbs b/templates/components/password.build.hbs
index 05ddcd66..0edbf14c 100644
--- a/templates/components/password.build.hbs
+++ b/templates/components/password.build.hbs
@@ -1,6 +1,6 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
 <input
-  type="password"
+  :type="isShowPassword ? 'text' : 'password'"
   class="form-control focus-outline input-password"
   :readonly="autogenerate"
   autocomplete="new-password"
@@ -14,7 +14,7 @@
   :placeholder="fieldPlaceholder"
   tabindex="0"
 />
-<i v-if="canShowPassword && value" class="fa fa-eye" v-on:click="showPassword()"></i>
+<i v-if="canShowPassword && value" class="fa" :class="!isShowPassword ? 'fa-eye' : 'fa-eye-slash'" v-on:click="isShowPassword = !isShowPassword"></i>
 <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>
 
 <div v-if="isFocused || $v.value.$model" class="panel password-checker" :class="validationClass.password">

From 938117cd492ea19d5f62d3b0eef8110e598dd515 Mon Sep 17 00:00:00 2001
From: SerhiyKr <serhii.kr@upplabs.com>
Date: Thu, 26 May 2022 20:02:32 +0300
Subject: [PATCH 8/9] refactor

---
 js/build.templates.js                   | 2 +-
 templates/components/password.build.hbs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/build.templates.js b/js/build.templates.js
index 12969d5b..95d55f5d 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -59,7 +59,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  :type=\"isShowPassword ? 'text' : 'password'\"\r\n  class=\"form-control focus-outline input-password\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa\" :class=\"!isShowPassword ? 'fa-eye' : 'fa-eye-slash'\" v-on:click=\"isShowPassword = !isShowPassword\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline input-password\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  :type=\"isShowPassword ? 'text' : 'password'\"\r\n  class=\"form-control focus-outline input-password\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa\" :class=\"isShowPassword ? 'fa-eye-slash' : 'fa-eye'\" v-on:click=\"isShowPassword = !isShowPassword\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline input-password\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/templates/components/password.build.hbs b/templates/components/password.build.hbs
index 0edbf14c..5b1d76a3 100644
--- a/templates/components/password.build.hbs
+++ b/templates/components/password.build.hbs
@@ -14,7 +14,7 @@
   :placeholder="fieldPlaceholder"
   tabindex="0"
 />
-<i v-if="canShowPassword && value" class="fa" :class="!isShowPassword ? 'fa-eye' : 'fa-eye-slash'" v-on:click="isShowPassword = !isShowPassword"></i>
+<i v-if="canShowPassword && value" class="fa" :class="isShowPassword ? 'fa-eye-slash' : 'fa-eye'" v-on:click="isShowPassword = !isShowPassword"></i>
 <p class="text-danger" v-if="$v.value.required === false && $v.value.$dirty">Field is required.</p>
 
 <div v-if="isFocused || $v.value.$model" class="panel password-checker" :class="validationClass.password">

From 343895ec823ed25a3d86d4ebf359633372072d84 Mon Sep 17 00:00:00 2001
From: SerhiyKr <serhii.kr@upplabs.com>
Date: Tue, 7 Jun 2022 18:18:30 +0300
Subject: [PATCH 9/9] refactor

---
 css/form.css                                    | 2 +-
 js/build.templates.js                           | 2 +-
 js/interface.templates.js                       | 2 +-
 templates/components/password.build.hbs         | 4 ++--
 templates/configurations/password.interface.hbs | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/css/form.css b/css/form.css
index 9f862d68..32be82c0 100644
--- a/css/form.css
+++ b/css/form.css
@@ -7,7 +7,7 @@
   opacity: 0.65;
 }
 
-.fa-eye, .fa-eye-slash {
+.fl-form .fa-eye, .fl-form .fa-eye-slash {
   position: absolute;
   top: 15px;
   right: 30px;
diff --git a/js/build.templates.js b/js/build.templates.js
index 95d55f5d..afb9e97f 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -59,7 +59,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.components.paragraph"] = Handl
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  :type=\"isShowPassword ? 'text' : 'password'\"\r\n  class=\"form-control focus-outline input-password\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa\" :class=\"isShowPassword ? 'fa-eye-slash' : 'fa-eye'\" v-on:click=\"isShowPassword = !isShowPassword\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline input-password\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
+    return "<div v-if=\"description\" class=\"help-block description\">{{ description }}</div>\r\n<input\r\n  :type=\"isShowPassword ? 'text' : 'password'\"\r\n  class=\"form-control focus-outline\"\r\n  :readonly=\"autogenerate\"\r\n  autocomplete=\"new-password\"\r\n  v-on:change=\"updateValue()\"\r\n  v-on:input=\"onInput($event)\"\r\n  v-on:focus=\"isFocused = true\"\r\n  v-on:blur=\"isFocused = false\"\r\n  v-model.trim=\"$v.value.$model\"\r\n  :name=\"name\"\r\n  :id=\"name\"\r\n  :placeholder=\"fieldPlaceholder\"\r\n  tabindex=\"0\"\r\n/>\r\n<i v-if=\"canShowPassword && value\" class=\"fa\" :class=\"isShowPassword ? 'fa-eye-slash' : 'fa-eye'\" v-on:click=\"isShowPassword = !isShowPassword\"></i>\r\n<p class=\"text-danger\" v-if=\"$v.value.required === false && $v.value.$dirty\">Field is required.</p>\r\n\r\n<div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.password\">\r\n  <div class=\"panel-heading\">Password requirements</div>\r\n  <div class=\"panel-body\">\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.$model.length >= passwordMinLength\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must be at least 8 characters.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsUppercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\"/>\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 uppercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsLowercase && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 lowercase character.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsNumber && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 number.</span>\r\n    </div>\r\n    <div class=\"requirement\">\r\n      <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.value.containsSpecial && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n      <label class=\"requirement-marker\">\r\n        <i class=\"fa fa-check\"></i>\r\n      </label>\r\n      <span>Password must contain at least 1 symbol.</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group row clearfix\" v-if=\"confirm\">\r\n  <br />\r\n  <div class=\"col-xs-12\">\r\n    <label class=\"control-label\" for=\"confirmPassword\">Confirm password\r\n      <template v-if=\"required\">\r\n        <span class=\"required-info\">*</span>\r\n      </template>\r\n    </label>\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <input\r\n      type=\"password\"\r\n      class=\"form-control focus-outline\"\r\n      v-model.lazy=\"$v.passwordConfirmation.$model\"\r\n      id=\"confirmPassword\"\r\n      autocomplete=\"new-password\"\r\n      v-on:change=\"updatePasswordConfirmation()\"\r\n      v-on:input=\"onPasswordConfirmationInput($event)\"\r\n      tabindex=\"0\"\r\n    />\r\n  </div>\r\n  <div class=\"col-xs-12\">\r\n    <div v-if=\"isFocused || $v.value.$model\" class=\"panel password-checker\" :class=\"validationClass.passwordConfirmation\">\r\n      <div class=\"panel-heading\">Password confirmation</div>\r\n      <div class=\"panel-body\">\r\n        <div class=\"requirement\">\r\n          <input type=\"checkbox\" class=\"hidden\" :checked=\"$v.passwordConfirmation.sameAsPassword && $v.value.$model\" readonly=\"readonly\" tabindex=\"-1\" />\r\n          <label class=\"requirement-marker\">\r\n            <i class=\"fa fa-check\"></i>\r\n          </label>\r\n          <span>Password confirmation must match.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.components.radio"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/interface.templates.js b/js/interface.templates.js
index 922442f6..85a73db1 100644
--- a/js/interface.templates.js
+++ b/js/interface.templates.js
@@ -60,7 +60,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.configurations.paragraph"] = H
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.password"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"form-group\">\r\n  <label>Description</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\r\n</div>\r\n<div class=\"form-group\">\r\n  <label>Placeholder</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should the password be encrypted?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-yes\" name=\"hash-option\" v-bind:value=\"true\" v-model=\"hash\">\r\n    <label for=\"hash-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Encrypt the password before storing\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-no\" name=\"hash-option\" v-bind:value=\"false\" v-model=\"hash\">\r\n    <label for=\"hash-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Store the password as plain text\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should a password be automatically generated when submitting a new entry?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-yes\" name=\"autogenerate-option\" v-bind:value=\"true\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - a secure password will be randomly generated\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-no\" name=\"autogenerate-option\" v-bind:value=\"false\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The user will manually enter a password\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"autogenerate\">\r\n  <label>Autogenerated password length</label>\r\n  <input class=\"form-control\" type=\"number\" v-model=\"autogenerateLength\" v-on:change=\"validatePasswordLength\" placeholder=\"Password length\" min=\"8\" max=\"32\" step=\"1\" :required=\"autogenerate\" />\r\n  <p class=\"help-block\">Must be at least 8 characters</p>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"!autogenerate\">\r\n  <label>Ask users to confirm the password before submitting?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-yes\" name=\"confirm-option\" v-bind:value=\"true\" v-model=\"confirm\" :disabled=\"canShowPassword\">\r\n    <label for=\"confirm-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong :class=\"{'text-muted': canShowPassword}\">Yes</strong> - Add a password confirmation field\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-no\" name=\"confirm-option\" v-bind:value=\"false\" v-model=\"confirm\">\r\n    <label for=\"confirm-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Don't add anything else\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Do you want to allow users to show/hide their password when typing?</label>\r\n  <p class=\"help-block\"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>\r\n  <div class=\"checkbox checkbox-icon password-show-checkbox\">\r\n    <input type=\"checkbox\" :name=\"name\" v-model=\"canShowPassword\" id=\"password-show-checkbox\" :disabled=\"confirm\">\r\n    <label for=\"password-show-checkbox\">\r\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span>\r\n      <span class=\"hide-field\" :class=\"{'text-muted': confirm}\">Yes, please.</span>\r\n    </label>\r\n  </div>\r\n</div>\r\n";
+    return "<div class=\"form-group\">\r\n  <label>Description</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"description\" placeholder=\"Description text\" />\r\n</div>\r\n<div class=\"form-group\">\r\n  <label>Placeholder</label>\r\n  <input class=\"form-control\" type=\"text\" v-model.trim=\"placeholder\" placeholder=\"Placeholder text\" />\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should the password be encrypted?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-yes\" name=\"hash-option\" v-bind:value=\"true\" v-model=\"hash\">\r\n    <label for=\"hash-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - Encrypt the password before storing\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"hash-no\" name=\"hash-option\" v-bind:value=\"false\" v-model=\"hash\">\r\n    <label for=\"hash-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Store the password as plain text\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Should a password be automatically generated when submitting a new entry?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-yes\" name=\"autogenerate-option\" v-bind:value=\"true\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>Yes</strong> - a secure password will be randomly generated\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"autogenerate-no\" name=\"autogenerate-option\" v-bind:value=\"false\" v-model=\"autogenerate\">\r\n    <label for=\"autogenerate-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - The user will manually enter a password\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"autogenerate\">\r\n  <label>Autogenerated password length</label>\r\n  <input class=\"form-control\" type=\"number\" v-model=\"autogenerateLength\" v-on:change=\"validatePasswordLength\" placeholder=\"Password length\" min=\"8\" max=\"32\" step=\"1\" :required=\"autogenerate\" />\r\n  <p class=\"help-block\">Must be at least 8 characters</p>\r\n</div>\r\n\r\n<div class=\"form-group\" v-if=\"!autogenerate\">\r\n  <label>Ask users to confirm the password before submitting?</label>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-yes\" name=\"confirm-option\" v-bind:value=\"true\" v-model=\"confirm\" :disabled=\"canShowPassword\">\r\n    <label for=\"confirm-yes\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong :class=\"{ 'text-muted': canShowPassword }\">Yes</strong> - Add a password confirmation field\r\n    </label>\r\n  </div>\r\n  <div class=\"radio radio-icon\">\r\n    <input type=\"radio\" id=\"confirm-no\" name=\"confirm-option\" v-bind:value=\"false\" v-model=\"confirm\">\r\n    <label for=\"confirm-no\">\r\n      <span class=\"check\"><i class=\"fa fa-circle\"></i></span> <strong>No</strong> - Don't add anything else\r\n    </label>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"form-group\">\r\n  <label>Do you want to allow users to show/hide their password when typing?</label>\r\n  <p class=\"help-block\"><small>An icon will be shown in the password field, allowing users to toggle between masked characters and plain text.</small></p>\r\n  <div class=\"checkbox checkbox-icon password-show-checkbox\">\r\n    <input type=\"checkbox\" :name=\"name\" v-model=\"canShowPassword\" id=\"password-show-checkbox\" :disabled=\"confirm\">\r\n    <label for=\"password-show-checkbox\">\r\n      <span class=\"check\"><i class=\"fa fa-check\"></i></span>\r\n      <span class=\"hide-field\" :class=\"{ 'text-muted': confirm }\">Yes, please.</span>\r\n    </label>\r\n  </div>\r\n</div>\r\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.configurations.select"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/templates/components/password.build.hbs b/templates/components/password.build.hbs
index 5b1d76a3..04c53928 100644
--- a/templates/components/password.build.hbs
+++ b/templates/components/password.build.hbs
@@ -1,7 +1,7 @@
 <div v-if="description" class="help-block description">\{{ description }}</div>
 <input
   :type="isShowPassword ? 'text' : 'password'"
-  class="form-control focus-outline input-password"
+  class="form-control focus-outline"
   :readonly="autogenerate"
   autocomplete="new-password"
   v-on:change="updateValue()"
@@ -70,7 +70,7 @@
   <div class="col-xs-12">
     <input
       type="password"
-      class="form-control focus-outline input-password"
+      class="form-control focus-outline"
       v-model.lazy="$v.passwordConfirmation.$model"
       id="confirmPassword"
       autocomplete="new-password"
diff --git a/templates/configurations/password.interface.hbs b/templates/configurations/password.interface.hbs
index 3b7dc412..abdcb7d6 100644
--- a/templates/configurations/password.interface.hbs
+++ b/templates/configurations/password.interface.hbs
@@ -50,7 +50,7 @@
   <div class="radio radio-icon">
     <input type="radio" id="confirm-yes" name="confirm-option" v-bind:value="true" v-model="confirm" :disabled="canShowPassword">
     <label for="confirm-yes">
-      <span class="check"><i class="fa fa-circle"></i></span> <strong :class="{'text-muted': canShowPassword}">Yes</strong> - Add a password confirmation field
+      <span class="check"><i class="fa fa-circle"></i></span> <strong :class="{ 'text-muted': canShowPassword }">Yes</strong> - Add a password confirmation field
     </label>
   </div>
   <div class="radio radio-icon">
@@ -68,7 +68,7 @@
     <input type="checkbox" :name="name" v-model="canShowPassword" id="password-show-checkbox" :disabled="confirm">
     <label for="password-show-checkbox">
       <span class="check"><i class="fa fa-check"></i></span>
-      <span class="hide-field" :class="{'text-muted': confirm}">Yes, please.</span>
+      <span class="hide-field" :class="{ 'text-muted': confirm }">Yes, please.</span>
     </label>
   </div>
 </div>