OD-746 [Feature] Added show password function

build.html

@@ -16,6 +16,7 @@
         <div class="form-group clearfix">
           <div class="col-sm-12 fl-password">
             <input type="password" class="form-control profile_password focus-outline" name="Password" placeholder="Enter your password" autocomplete="new-password" />
+            <i class="fa fa-eye hidden"></i>
           </div>
         </div>
 

css/build.css

@@ -36,6 +36,13 @@ input.form-control {
   -webkit-appearance: none;
 }
 
+[data-widget-package="com.fliplet.login-data-source"] .fa-eye {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+  display: inline-block;
+}
+
 .fl-login-form .fl-email:before {
   content: "\f0e0";
   display: inline-block;

interface.html

@@ -52,6 +52,17 @@
             <span class="text-helper">Users will use the password on this field to log in.</span>
           </div>
         </div>
+        <div class="form-group col-sm-4 control-label hidden" id="show-password-checkbox">
+          <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">
+            <input type="checkbox" class="password-show-checkbox" id="password-show-checkbox-{{id}}">
+            <label for="password-show-checkbox-{{id}}">
+              <span class="check"><i class="fa fa-check"></i></span>
+              <span class="hide-field">Yes, please.</span>
+            </label>
+          </div>
+        </div>
         <div class="allow-reset-password">
           <div class="form-group">
             <label class="col-sm-4 control-label">Do you want to allow users to reset their password?</label>

js/build.js

@@ -1,6 +1,8 @@
 Fliplet.Widget.instance('login-ds', function(data) {
   var $container = $(this);
-
+  var $passwordInput = $container.find('.profile_password');
+  var $showPasswordButton = $container.find('.fa-eye');
+  var isPaswordShown = false;
   var dataSourceEntry; // Data source entry after user verify email
 
   // Do not track login related redirects
@@ -16,7 +18,6 @@ Fliplet.Widget.instance('login-ds', function(data) {
     email: '',
     createdAt: null
   };
-
   var CODE_VALID = 30;
   var APP_NAME = Fliplet.Env.get('appName');
   var APP_VALIDATION_DATA_DIRECTORY_ID = parseInt(data.dataSource, 10);
@@ -284,6 +285,22 @@ Fliplet.Widget.instance('login-ds', function(data) {
       }
     });
 
+    $passwordInput.on('input', function(event) {
+      $(event.target).next('.fa-eye').toggleClass('hidden', !data.showPassword || !$(event.target).val());
+
+      if (!event.target.value) {
+        $passwordInput.attr('type', 'password');
+        $showPasswordButton.removeClass('fa-eye-slash');
+        $showPasswordButton.addClass('fa-eye');
+      }
+    });
+
+    $showPasswordButton.on('click', function() {
+      isPaswordShown = !isPaswordShown;
+      $passwordInput.attr('type', isPaswordShown ? 'text' : 'password');
+      $showPasswordButton.toggleClass('fa-eye-slash', isPaswordShown);
+    });
+
     $container.on('submit', '.form-verify-email', function(event) {
       event.preventDefault();
 

js/interface.js

@@ -8,11 +8,12 @@ var $dataColumnsPass = $('#passColumn');
 var validInputEventName = 'interface-validate';
 var page = Fliplet.Widget.getPage();
 var omitPages = page ? [page.id] : [];
-
 var currentDataSource;
 var initialLoadingDone = false;
 var defaultExpireTimeout = 2880;
 
+$('.password-show-checkbox').prop('checked', data.showPassword || false);
+
 var defaultEmailTemplate = $('#email-template-default').html();
 
 var fields = [
@@ -147,6 +148,7 @@ function initDataSourceProvider(currentDataSourceId) {
 
         $('#select-email-field').toggleClass('hidden', !dataSource.id);
         $('#select-pass-field').toggleClass('hidden', !dataSource.id);
+        $('#show-password-checkbox').toggleClass('hidden', !dataSource.id);
       }
     }
   });
@@ -187,6 +189,7 @@ function setReadableExpirePeriod(value) {
 function convertTimeToMinutes() {
   var inputValue = $('#expire-timeout').val();
   var selectValue = $('#time-value').val();
+
   return inputValue * selectValue;
 }
 
@@ -211,10 +214,13 @@ function checkSecurityRules() {
 }
 
 function save(notifyComplete) {
+  data.showPassword = $('.password-show-checkbox').is(':checked');
+
   // Get and save values to data
   _.forEach(fields, function(fieldId) {
     if (fieldId === 'expireTimeout') {
       data[fieldId] = $('#expire-timeout').val() ? convertTimeToMinutes() : defaultExpireTimeout;
+
       return;
     }
 
@@ -239,6 +245,7 @@ function save(notifyComplete) {
         matchColumn: data.emailColumn
       }
     };
+
     definition.validation = validation;
 
     // Update definition to make sure the password never gets sent
@@ -253,6 +260,7 @@ function save(notifyComplete) {
 
     // Update data source definitions
     var options = { id: data.dataSource, definition: definition };
+
     updateDataSource = Fliplet.DataSources.update(options);
   }
 
@@ -288,6 +296,7 @@ function syncTempColumns(columnType) {
 $('#emailColumn, #passColumn').on('change', function() {
   var selectedValue = $(this).val();
   var selectedText = $(this).find('option:selected').text();
+
   $(this).parents('.select-proxy-display').find('.select-value-proxy').html(selectedText);
 
   syncTempColumns($(this).attr('id'));