Complexité Mot de passe.

app.js

import React, { Component } from 'react';

let mdpfaible = /^[a-z]{1,6}$/g;
let mdpMoyen = /^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z]{7,}$/g;
let mdpFort = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[@@!%*?&])[A-Za-z@@!%*?&]{7,}/g


class Password extends Component{
    constructor(props){
        super(props);
        this.difficulte = {value : 'La difficulé du mot de passe'};
        this.casemotdepasse = this.casemotdepasse.bind(this);
        this.onClick = this.onClick.bind(this);

}

    casemotdepasse(nouveaumotdepasse){
        this.setState({value : nouveaumotdepasse.target.value});
        console.log(nouveaumotdepasse.target.value.match(mdpfaible));

        if (nouveaumotdepasse.target.value.match(mdpfaible)){
            this.difficulte.value = 'Le mot de passe est faible';
        }
        else if (nouveaumotdepasse.target.value.match(mdpMoyen)){
            this.difficulte.value = 'Le mot de passe est moyen.';
        }
        else if (nouveaumotdepasse.target.value.match(mdpFort)){
            this.difficulte.value = 'Le mot de passe est fort.';
        }
        else{
            this.difficulte.value = 'Entrer un mot de passe';
        }
    }

    onClick(nouveaumotdepasse){
        nouveaumotdepasse.preventDefault();
        if (this.difficulte.value === 'Mauvais mot de passe'){
            alert('Le mot de passe est trop faible. Changez-le.')
        }
        else{
            alert('Le mot de passe est accepté.')
        }
    }


    render() {
        return (
            <form>
                <label> Votre mot de passe </label>
                <input ref="test" name="password" type="password" placeholder="password" onChange={this.casemotdepasse.bind(this)}/>
                <p> {this.difficulte.value} </p>
                <input onClick={this.onClick.bind(this)}type ="submit" value="submit"></input>

            </form>
        );
    }
}

export default Password;

consigne.txt

Password complexity
Créer un composant Password qui affiche un texte en fonction de la complexité du mot de passe. Ce composant contient un formulaire avec un champ input, un bouton (de type submit) et une zone de texte (pour le texte sur la complexité).

Le texte à afficher est :

Mot de passe faible (< 6 caractères / tout en minuscule / pas de caractères spéciaux)
Mot de passe moyen (> 6 caractères / minuscules + majuscules / pas de caractères spéciaux)
Mot de passe fort (> 6 caractères / minuscules + majuscules / caractères spéciaux)
De plus, le formulaire ne pourra pas être envoyé si le mot de passe est faible, dans ce cas, une alerte s'affichera avec le message Votre mot de passe est trop faible.

Le composant <Password /> doit être appelé dans le composant <App />

Le code sera disponible sur un gist.

Critéres de validation
Le composant est dans une classe javascript ES6
L'appel du composant ressemble à <Password /> et affiche un input ainsi qu'un bouton
Si le mot de passe est trop faible le formulaire ne s'envoie pas
Le texte sur la complexité du mot de passe évolue en fonction de ce que tape l'utilisateur