Skip to content
This repository was archived by the owner on Jun 23, 2023. It is now read-only.

Commit 4917415

Browse files
authored
Merge pull request #11 from renanborgez/renan/type-text
Add possibility to show the password as text
2 parents 1be6577 + 572ba3b commit 4917415

File tree

7 files changed

+29
-4
lines changed

7 files changed

+29
-4
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@
33

44
node_modules/
55
coverage/
6+
dist/public*
7+
dist/index*

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ You can provide a custom `className` to the Nice Input Password and custom `clas
9090
|:---|:---|:---|:---|
9191
| label | string or function | undefined | The label showned on top of input element |
9292
| name | string | undefined | The name used on input element `name={name}` |
93+
| visible | boolean | false | Make the password visible by changing the input type to text |
9394
| placeholder | string | (empty string) | The placeholder used on input element `placeholder={placeholder}` |
9495
| className | string | (empty string) | Optional class to be passed to niceinputpassword context |
9596
| style | object | undefined | Optional style to be passed to input field |

dist/react-nice-input-password.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/index.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,11 @@ class App extends React.Component {
5151
/>
5252
<hr />
5353

54-
<h2>With levelbar</h2>
54+
<h2>With levelbar and visible text</h2>
5555
<NiceInputPassword
5656
label="Password"
5757
name="pass2"
58+
visible
5859
showSecurityLevelBar
5960
securityLevels={securityLevels}
6061
value={this.state.pass2}

src/NiceInputPassword.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const propTypes = {
1313
className: PropTypes.string,
1414
style: PropTypes.object,
1515
value: PropTypes.string,
16+
visible: PropTypes.bool,
1617
startAdornment: PropTypes.node,
1718
endAdornment: PropTypes.node,
1819
showSecurityLevelBar: PropTypes.bool,
@@ -44,6 +45,7 @@ const defaultProps = {
4445
showSecurityLevelBar: false,
4546
showSecurityLevelDescription: false,
4647
securityLevels: [],
48+
visible: false,
4749
normalClassName: 'none',
4850
dangerClassName: 'danger',
4951
warningClassName: 'warning',
@@ -112,6 +114,7 @@ class NiceInputPassword extends React.Component {
112114
startAdornment,
113115
endAdornment,
114116
style,
117+
visible,
115118
} = this.props;
116119

117120
let inputClassName = '';
@@ -175,6 +178,7 @@ class NiceInputPassword extends React.Component {
175178
value={value}
176179
style={style}
177180
startAdornment={startAdornment}
181+
visible={visible}
178182
endAdornment={endAdornment}
179183
onChange={this.handleChange}
180184
/>

src/components/InputLabel.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const propTypes = {
1414
onChange: PropTypes.func.isRequired,
1515
startAdornment: PropTypes.node,
1616
endAdornment: PropTypes.node,
17+
visible: PropTypes.bool,
1718
};
1819

1920
const defaultProps = {
@@ -23,6 +24,7 @@ const defaultProps = {
2324
style: null,
2425
startAdornment: null,
2526
endAdornment: null,
27+
visible: false,
2628
};
2729

2830
const InputLabel = ({
@@ -34,6 +36,7 @@ const InputLabel = ({
3436
startAdornment,
3537
endAdornment,
3638
style,
39+
visible,
3740
onChange,
3841
}) => (
3942
<label htmlFor={name} className={className}>
@@ -45,7 +48,7 @@ const InputLabel = ({
4548
id={name}
4649
className={className}
4750
value={value}
48-
type="password"
51+
type={visible ? 'text' : 'password'}
4952
style={style}
5053
placeholder={placeholder}
5154
onChange={onChange}

src/components/InputLabel.test.jsx

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,24 @@ describe('components', () => {
1010
const div = document.createElement('div');
1111
render(<InputLabel
1212
label="myLabel"
13-
name=""
13+
name="myName"
14+
onChange={() => {}}
15+
value=""
16+
/>, div);
17+
});
18+
19+
it('renders the password as visible text', () => {
20+
const div = document.createElement('div');
21+
render(<InputLabel
22+
label="myLabel"
23+
name="myName"
24+
visible
1425
onChange={() => {}}
1526
value=""
1627
/>, div);
28+
29+
const input = div.querySelector('#myName');
30+
expect(input.getAttribute('type')).toBe('text');
1731
});
1832

1933
it('renders with the right properties', () => {

0 commit comments

Comments
 (0)