Internet_Security/public/js/main.js

const main = document.querySelector("#main");
const resultMail = document.querySelector("#result_mail");
const passwordTest = document.querySelector("#password_test");
const resultPassword = document.querySelector("#result_password");
const passwordManage = document.querySelector("#password_manage");
const security2AF = document.querySelector("#security_2AF");
const cookie = document.querySelector("#cookie");

const commonPassword = RegExp("(1234567890|123456789|12345678|1234567|123456|12345|1234|123|password|test|qwerty|azerty|iloveyou|admin|welcome|abc123|football|monkey|!@#\\$%\\^&\\*)");
const mailRegex = new RegExp("(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])");


document.querySelectorAll("input").forEach(el => {
    el.addEventListener("change", (() => {
        el.classList.remove("error");
    }));
});

main.querySelector("#email").addEventListener("keyup", e => {
    if (e.key === "Enter")
        mailValid();
});

let observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        window.scrollTo({top: entries[0].target.getBoundingClientRect().top + window.scrollY,
            left: 0,
            behavior: 'smooth'});
}, { rootMargin: "0px", threshold: 0.2 });

for (let e of [main, resultMail, passwordTest, resultPassword, passwordManage, security2AF, cookie])
    observer.observe(e);

resultMail.querySelector("a").addEventListener("click", () => {
    passwordTest.classList.remove("hide");
    passwordTest.scrollIntoView({"behavior": "smooth"});
});

passwordTest.querySelector("#password").addEventListener("keyup", e => {
    if (e.key === "Enter")
        passwordCheck();
})

resultPassword.querySelector("img").addEventListener("click", () => {
    passwordManage.classList.remove("hide");
    passwordManage.scrollIntoView({"behavior": "smooth"});
})

passwordManage.querySelector(".arrowdown").addEventListener("click", () => {
    security2AF.classList.remove("hide");
    security2AF.scrollIntoView({"behavior": "smooth"});
})

security2AF.querySelector(".arrowdown").addEventListener("click", () => {
    cookie.classList.remove("hide");
    cookie.scrollIntoView({"behavior": "smooth"});
})


function mailValid() {
    let input = main.querySelector("#email");
    if (mailRegex.test(input.value)) {
        resultMail.classList.remove("hide");
        resultMail.scrollIntoView({"behavior": "smooth"});
    } else {
        input.classList.add("error");
    }
}

function passwordCheck() {
    let passInout = passwordTest.querySelector("#password")
    let pass = passInout.value;
    if (pass === "")
        passInout.classList.add("error")
    else {
        let secLevel = {
            length: false,
            uppercase: false,
            lowercase: false,
            number: false,
            special: false,
            identical: false,
            commonly: false
        }
        if (pass.length >= 8)
            secLevel.length = true
        if (pass.match("[A-Z]"))
            secLevel.uppercase = true
        if (pass.match("[a-z]"))
            secLevel.lowercase = true
        if (pass.match("[0-9]"))
            secLevel.number = true
        if (pass.match("\\W"))
            secLevel.special = true
        if (!pass.match("(.)\\1"))
            secLevel.identical = true
        if (!commonPassword.test(pass))
            secLevel.commonly = true
        resultPassword.querySelectorAll("li").forEach(el => {
            if (secLevel[el.id]) {
                if (el.classList.contains("red"))
                    el.classList.remove("red");
                el.classList.add("green");
            } else {
                if (el.classList.contains("green"))
                    el.classList.remove("green");
                el.classList.add("red");
            }
        })
        resultPassword.classList.remove("hide");
        resultPassword.scrollIntoView({"behavior": "smooth"});
    }
}

function mailCheck(mail) {

}