OD-746 [Feature] Added show password function

css/form.css

@@ -7,6 +7,13 @@
   opacity: 0.65;
 }
 
+.fl-form .fa-eye, .fl-form .fa-eye-slash {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+  display: inline-block;
+}
+
 .fl-form.form-offline .cover-form {
   position: absolute;
   top: 0;

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: ''
@@ -56,6 +60,7 @@ Fliplet.FormBuilder.field('password', {
   data: function() {
     return {
       isFocused: false,
+      isShowPassword: false,
       passwordMinLength: 8,
       defaultClass: 'panel-default',
       invalidClass: 'panel-danger',
@@ -141,6 +146,10 @@ Fliplet.FormBuilder.field('password', {
         this.value = oldVal;
         this.updateValue();
       }
+
+      if (!newVal) {
+        this.isShowPassword = false;
+      }
     },
     '$v.passwordConfirmation.$invalid': function(value) {
       if (!value) {

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"
   :readonly="autogenerate"
   autocomplete="new-password"
@@ -14,6 +14,7 @@
   :placeholder="fieldPlaceholder"
   tabindex="0"
 />
+<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">

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">
@@ -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" :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>
+    </label>
+  </div>
+</div>