REACT check password strength react - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution
join us

check password strength using react


 723

Show ResultREACT


4

<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<script type="text/babel">

class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: '',data: []};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
this.setState({value: event.target.value});
}

handleSubmit(event) {

var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

var enoughRegex = new RegExp("(?=.{6,}).*", "g");
var text;

if (false == enoughRegex.test(this.state.value)) {
text = 'More Characters';
} else if (strongRegex.test(this.state.value)) {
text = 'Strong!';
} else if (mediumRegex.test(this.state.value)) {
text = 'Medium!';
} else {
text = 'Weak!';
}

this.setState({data: text})
event.preventDefault();

}

render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Your password:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<button>submit</button>
<h2>{this.state.data}</h2>
</form>
);
}
}

ReactDOM.render(
<App />,
document.getElementById('app')
)

</script>

<div id="app"></div>

</body>
</html>


By        
The power of the user (%)
80%

REACT


3

// you must install npm i react-password-strength-meter

var React = require('react');
var PasswordStrengthMeter = require('react-password-strength-meter');

class App extends React.Component {
constructor(props){
super(props);
this.onChange = this.onChange.bind(this);
}

onChange(event){

}

render() {
return <PasswordStrengthMeter passwordText={"Enter Password"} onChange={this.onChange} />;
}
}

export default App;


By        
The power of the user (%)
6%



The most helpful REACT solutions

How to get client ip address using react ?How to get client ip address using react ?REACT

Click to see more ...

  19.2K     421

how to get the type of a device using react ?how to get the type of a device using react ?REACT

Click to see more ...

  2.1K     220

create digital clock reactcreate digital clock reactREACT

Click to see more ...

  1.6K     141

country dropdown using reactcountry dropdown using reactREACT

Click to see more ...

  1.1K     127

create alarm clock using reactcreate alarm clock using reactREACT

Click to see more ...

  5K     116

How to get latitude and longitude using react/javascript ?How to get latitude and longitude using react/javascript ?REACT

Click to see more ...

  944     108

get client country reactget client country reactREACT

Click to see more ...

  708     82

get ip address reactget ip address reactREACT

Click to see more ...

  932     81

time ago reacttime ago reactREACT

Click to see more ...

  527     74

detect mobile device reactdetect mobile device reactREACT

Click to see more ...

  520     58

Welcome aboard!
We are happy you are here and
wish you good net-raft!