import React, {Component} from 'react';

class Password extends Component {

    constructor(props) {
    super(props);
    this.state = {nouveauTexte : ''};

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

        handleChange(e) {

            this.setState({value: e.target.value});

            if((new RegExp(/^[a-z]{1,6}$/g)).test (e.target.value)) {
                this.setState({
                   nouveauTexte : 'Sécurité faible'
                });

            }   else if ((new RegExp(/^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,}$/g)).test (e.target.value)) {
                    this.setState({
                        nouveauTexte : 'Sécurité Moyenne'
                });
            }   else if ((new RegExp(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{6,}$/g)).test (e.target.value)) {
                this.setState({
                    nouveauTexte : 'Sécurité Forte'
                });
            }   else if((new RegExp(/^\s*$/g)).test (e.target.value)) {
                this.setState({
                nouveauTexte : ''
                });
            }
       }




       handleSubmit(e) {
        if(this.state.nouveauTexte == 'Sécurité faible') {
            alert('votre mot de passe est trop faible');
            e.preventDefault();
        }
    }



      render() {
        return(
        <div>
            <h1>
                {this.state.nouveauTexte}
            </h1>
            <form onSubmit={this.handleSubmit}>
                <label>
                    Mot de passe
                    <input type="password" id='pwd' onChange={this.handleChange}/>
                </label>
                    <button type="submit">Submit</button>
            </form>
        </div>
          );
      }
    }



    export default Password;