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 socket = io.connect();

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'});
}, { threshold: 0.1 });

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)) {
        socket.emit("checkMail", {"email": input.value});
    } 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"});
    }
}

socket.on("resultMail", (data) => {
    if (data == null) {
        passwordTest.classList.remove("hide");
        passwordTest.scrollIntoView({"behavior": "smooth"});
        window.alert("Internal error, can't check your email !");
    } else {
        let ul = resultMail.querySelector("ul");
        if (data.length === 0) {
            ul.innerHTML = "";
            resultMail.querySelector("ul").insertAdjacentHTML("beforeend", "<li>Any breaches detected !</li>");
        } else {
            ul.innerHTML = "";
            for (let breach of JSON.parse(data)) {
                ul.insertAdjacentHTML("beforeend", `<li class="warning">${breach.Name}</li>`);
            }
        }
        resultMail.classList.remove("hide");
        resultMail.scrollIntoView({"behavior": "smooth"});
    }
})