React quest_2

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Password from './Password.js'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
        <Password />
      </div>
    );
  }
}

export default App;

Password.js

import React, {Component} from 'react';
const weakPass = RegExp("(.*[a-z])(?!.[A-Z])");
const midPass = RegExp("^(?=.*[a-z])(?=.*[A-Z])(?!.*[^A-Za-z])");
const strongPass = RegExp("^(?=.*[a-z])(?=.*[A-Z])(?!.*[/d])");

class Password extends Component {

  constructor(props) {
    super(props);
    this.state = {
      value: '',
      message: 'Votre mot de passe est faible'
    };
  }

  handleChange(event) {
    this.setState({value: event.target.value});
    if (weakPass.test(event.target.value) && event.target.value.length < 6 ) {
      this.setState({message : `Votre mot de passe ${event.target.value} est faible.`});
    } else if (midPass.test(event.target.value) && event.target.value.length > 6) {
      this.setState({message : `Votre mot de passe ${event.target.value} est moyen.`});
    } else if (strongPass.test(event.target.value) && event.target.value.length > 6) {
      this.setState({message : `Votre mot de passe ${event.target.value} est fort !`});
    }
  }

  notGoodPass() {
    if (weakPass.test(this.state.value) && this.state.value.length < 6) {
      alert('Votre mot de passe est trop faible.');
    }
  }

  render() {
    return(
      <div>
        <p>Testez votre mot de passe :</p>
        <form onSubmit={this.handleSubmit}>
          <label>
            Mot de Passe :
            <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)} />
          </label>
          <div onClick = {this.notGoodPass.bind(this)}>
            <input id= "#tooWeak" type="submit" value="Submit" />
          </div>
        </form>
        <p>{this.state.message}</p>
      </div>
      );
  }
}

export default Password;