import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';

// PasswordConfirm
const PasswordConfirm = ({ min }) => {

    const [pass, setPass] = useState('')
    const [passConfirm, setPassConfirm] = useState('')
    console.log(pass, passConfirm) // чтобы не забыть пароль вводимый в первом поле

    const bgColor = { backgroundColor: 'red' }
    const pattern = /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])/g; // регулярное выражение на проверку в пароле: чисел, спецсимволов, малых/больших букв соответственно 
    let isGood, isCorrect

    ((pass.length < min) || !(pattern.test(pass))) && (isGood = bgColor);
    (pass != passConfirm) && (isCorrect = bgColor);

    return (
        <div>
            <h2>PasswordConfirm</h2>
            <p>Введите пароль с использование больших, маленьких букв, цифр и спецсимволов</p>
            <input type="password" value={pass} style={isGood} placeholder={'введите пароль'} onChange={e => setPass(e.target.value)} />
            <br />
            <input type="password" value={passConfirm} style={isCorrect} onChange={e => setPassConfirm(e.target.value)} />
            <br />
        </div>
    )
}

function App() {
    return (
        <div className="App">
            <header>

                {/* PasswordConfirm */}
                <PasswordConfirm min={2} />

            </header>
        </div>
    );
}

export default App;