Merge pull request #11 from renanborgez/renan/type-text

Add possibility to show the password as text

Author: renanborgez

.gitignore

@@ -3,3 +3,5 @@
 
 node_modules/
 coverage/
+dist/public*
+dist/index*

README.md

@@ -90,6 +90,7 @@ You can provide a custom `className` to the Nice Input Password and custom `clas
 |:---|:---|:---|:---|
 | label | string or function | undefined | The label showned on top of input element |
 | name | string | undefined | The name used on input element `name={name}` |
+| visible | boolean | false | Make the password visible by changing the input type to text |
 | placeholder | string | (empty string) | The placeholder used on input element `placeholder={placeholder}` |
 | className | string | (empty string) | Optional class to be passed to niceinputpassword context |
 | style | object | undefined | Optional style to be passed to input field |

dist/react-nice-input-password.js

@@ -51,10 +51,11 @@ class App extends React.Component {
         />
         <hr />
 
-        <h2>With levelbar</h2>
+        <h2>With levelbar and visible text</h2>
         <NiceInputPassword
           label="Password"
           name="pass2"
+          visible
           showSecurityLevelBar
           securityLevels={securityLevels}
           value={this.state.pass2}

public/index.jsx

@@ -13,6 +13,7 @@ const propTypes = {
   className: PropTypes.string,
   style: PropTypes.object,
   value: PropTypes.string,
+  visible: PropTypes.bool,
   startAdornment: PropTypes.node,
   endAdornment: PropTypes.node,
   showSecurityLevelBar: PropTypes.bool,
@@ -44,6 +45,7 @@ const defaultProps = {
   showSecurityLevelBar: false,
   showSecurityLevelDescription: false,
   securityLevels: [],
+  visible: false,
   normalClassName: 'none',
   dangerClassName: 'danger',
   warningClassName: 'warning',
@@ -112,6 +114,7 @@ class NiceInputPassword extends React.Component {
       startAdornment,
       endAdornment,
       style,
+      visible,
     } = this.props;
 
     let inputClassName = '';
@@ -175,6 +178,7 @@ class NiceInputPassword extends React.Component {
           value={value}
           style={style}
           startAdornment={startAdornment}
+          visible={visible}
           endAdornment={endAdornment}
           onChange={this.handleChange}
         />

src/NiceInputPassword.jsx

@@ -14,6 +14,7 @@ const propTypes = {
   onChange: PropTypes.func.isRequired,
   startAdornment: PropTypes.node,
   endAdornment: PropTypes.node,
+  visible: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -23,6 +24,7 @@ const defaultProps = {
   style: null,
   startAdornment: null,
   endAdornment: null,
+  visible: false,
 };
 
 const InputLabel = ({
@@ -34,6 +36,7 @@ const InputLabel = ({
   startAdornment,
   endAdornment,
   style,
+  visible,
   onChange,
 }) => (
   <label htmlFor={name} className={className}>
@@ -45,7 +48,7 @@ const InputLabel = ({
         id={name}
         className={className}
         value={value}
-        type="password"
+        type={visible ? 'text' : 'password'}
         style={style}
         placeholder={placeholder}
         onChange={onChange}

src/components/InputLabel.jsx

@@ -10,10 +10,24 @@ describe('components', () => {
       const div = document.createElement('div');
       render(<InputLabel
         label="myLabel"
-        name=""
+        name="myName"
+        onChange={() => {}}
+        value=""
+      />, div);
+    });
+
+    it('renders the password as visible text', () => {
+      const div = document.createElement('div');
+      render(<InputLabel
+        label="myLabel"
+        name="myName"
+        visible
         onChange={() => {}}
         value=""
       />, div);
+
+      const input = div.querySelector('#myName');
+      expect(input.getAttribute('type')).toBe('text');
     });
 
     it('renders with the right properties', () => {