Password input with eye icon to show plaintext

Author: Vitexus

PasswordInput.png

@@ -103,6 +103,17 @@ new \Ease\ui\SignInForm();
 ![Sign In](https://raw.githubusercontent.com/VitexSoftware/Ease-PHP-Bricks/master/SignIn.png "Sign In form")
 
 
+Password Input
+--------------
+
+With eye icon to show plaintext
+
+```php
+new PasswordInput($this->passwordField);
+```
+![Password Input](https://raw.githubusercontent.com/VitexSoftware/Ease-PHP-Bricks/master/PaswordInput.png "Password input")
+
+
 Installation
 ------------
 

README.md

@@ -3,7 +3,7 @@
     <type>org.netbeans.modules.php.project</type>
     <configuration>
         <data xmlns="http://www.netbeans.org/ns/php-project/1">
-            <name>EasePHPbricks</name>
+            <name>EasePHP Bricks</name>
         </data>
     </configuration>
 </project>

nbproject/project.xml

@@ -0,0 +1,45 @@
+<?php
+/*
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+namespace Ease\ui;
+
+/**
+ * Description of PasswordInput
+ *
+ * @author Vítězslav Dvořák <[email protected]>
+ */
+class PasswordInput extends \Ease\Html\DivTag
+{
+
+    /**
+     * Password input 
+     * 
+     * @param string $name       Input name
+     * @param string $value      Plaintext password
+     * @param array  $properties Poroperties for password input
+     */
+    public function __construct($name, $value = null,$properties = [])
+    {
+        $inpass = new \Ease\Html\InputPasswordTag($name, $value);
+        $inpass->setTagID();
+        $inpass->setTagProperties($properties);
+        parent::__construct($inpass, ['class' => 'input-group']);
+        $this->addItem(new \Ease\Html\SpanTag(null,
+            ['id' => $inpass->getTagID().'eye', 'toggle' => '#password-field', 'class' => 'glyphicon glyphicon glyphicon-eye-open']));
+        $this->addJavaScript('
+$("#'.$inpass->getTagID().'eye").click(function() {
+  $("#'.$inpass->getTagID().'eye").toggleClass("glyphicon-eye-open glyphicon-eye-close");
+  var input = $("#'.$inpass->getTagID().'");
+  if (input.attr("type") == "password") {
+    input.attr("type", "text");
+  } else {
+    input.attr("type", "password");
+  }
+});
+');
+    }
+}

src/Ease/ui/PasswordInput.php

@@ -14,8 +14,16 @@
  */
 class SignInForm extends \Ease\TWB\Form
 {
+    /**
+     *
+     * @var string
+     */
     public $userNameField = 'username';
-    public $passwordField = 'passwoerd';
+    /**
+     *
+     * @var string 
+     */
+    public $passwordField = 'password';
 
     public function __construct($formAction = null, $formMethod = 'post',
                                 $tagProperties = null)
@@ -24,7 +32,7 @@ public function __construct($formAction = null, $formMethod = 'post',
             $tagProperties);
         $this->addInput(new \Ease\Html\InputTextTag($this->userNameField),
             _('Username'), _('Login'));
-        $this->addInput(new \Ease\Html\InputPasswordTag($this->passwordField),
+        $this->addInput(new PasswordInput($this->passwordField),
             _('Password'), '');
     }