FormValidator: Add option to show/hide password - refs BT#18449

main/admin/user_add.php

@@ -16,7 +16,7 @@ api_protect_limit_for_session_admin();
 $is_platform_admin = api_is_platform_admin() ? 1 : 0;
 
 $message = null;
-$htmlHeadXtra[] = api_get_password_checker_js('#username', '#password');
+$htmlHeadXtra[] = api_get_password_checker_js('#username', '#add-user__input-password');
 $htmlHeadXtra[] = api_get_css_asset('cropper/dist/cropper.min.css');
 $htmlHeadXtra[] = api_get_asset('cropper/dist/cropper.min.js');
 $htmlHeadXtra[] = '
@@ -55,16 +55,6 @@ function updateStatus(){
             document.getElementById("id_platform_admin").style.display="none";
     }
 }
-function ShowHidePassword() {
-
-        if ($(\'#showPassword\').prop(\'checked\')) {
-            $(\'#password\').attr(\'type\',\'text\');
-            $(\'.showPasswordEye\').removeClass(\'fa-eye\').addClass(\'fa-eye-slash\');
-        } else {
-            $(\'#password\').attr(\'type\',\'password\');
-            $(\'.showPasswordEye\').addClass(\'fa-eye\').removeClass(\'fa-eye-slash\');
-        }
-}
 </script>';
 
 if (!empty($_GET['message'])) {
@@ -219,22 +209,12 @@ $group[] = $form->createElement(
         'id' => 'password',
         'autocomplete' => 'new-password',
         'onkeydown' => 'javascript: password_switch_radio_button();',
+        'show_hide' => true,
         //'required' => 'required'
     ]
 );
 
 $form->addGroup($group, 'password', get_lang('Password'));
-$form->addElement(
-    'checkbox',
-    'showPassword',
-    get_lang('ShowOrHide')." ".get_lang('Password')." ".
-    Display::returnFontAwesomeIcon('eye', null, true, 'showPasswordEye'),
-    '',
-    [
-        'id' => 'showPassword',
-        'onchange' => 'javascript: ShowHidePassword();',
-    ]
-);
 $form->addPasswordRule('password', 'password');
 $form->addGroupRule('password', get_lang('EnterPassword'), 'required', null, 1);
 

main/inc/lib/pear/HTML/QuickForm/password.php

@@ -95,4 +95,36 @@ class HTML_QuickForm_password extends HTML_QuickForm_text
         return ('' != $value ? '**********' : ' ').
             $this->_getPersistantData();
     }
+
+    /**
+     * @return string
+     */
+    public function toHtml()
+    {
+        if (parent::isFrozen()) {
+            return parent::getFrozenHtml();
+        }
+
+        $input = '<input '.$this->_getAttrString($this->_attributes).' />';
+
+        if (empty($this->_attributes['show_hide'])) {
+            return $input;
+        }
+
+        $this->removeAttribute('show_hide');
+
+        $label = get_lang('ShowOrHide');
+        $pwdId = $this->_attributes['id'];
+        $id = $pwdId.'_toggle';
+
+        return '<div class="input-group" id="add-user__input-password">
+                '.$input.'
+                <span class="input-group-addon">
+                    <input type="checkbox" title="'.$label.'" aria-label="'.$label.'" id="'.$id.'">
+                </span>
+            </div>
+            <script>document.getElementById(\''.$id.'\').onchange = function () {
+                document.getElementById(\''.$pwdId.'\').setAttribute(\'type\', this.checked ? \'text\' : \'password\')
+            };</script>';
+    }
 }