Password.js

app.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
import Author from './test';
import Password from './password';


class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          <Author name='maco' />
        </p>
        <p className="Form">
          <Password />
        </p>
      </div>
    );
  }
}


export default App;

password

import React, {Component} from 'react'; 


var regularExpression1 = new RegExp(/^(?=.*[!@#$%^&*])[\w!@#$%^&*]{6,}$/);
var regularExpression = new RegExp (/^[\w*]{6,}$/);



  class Password extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: 'Entrez un mot de passe'};
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
      
    handleChange(event) {
      if(regularExpression1.test(event.target.value)){
        this.setState({value: 'Mot de passe Fort'});
      }
        else if(regularExpression.test(event.target.value)){
          this.setState({value : 'Mot de passe Moyen'});
        }
        else this.setState({value : 'Mot de passe Faible'});
        
      }
  
      handleSubmit(event) {
        if(this.state.value == 'Mot de passe Faible'){
        alert('Mot de passe trop faible');
        event.preventDefault();
        }
        else
        alert('Mot de passe enregistré');
        event.preventDefault();
      }
  
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Password : 
            <input type="text" onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
          <div>
          {this.state.value}
        </div>
        </form>

      );
    }
  }



export default Password;