diff --git a/public/css/main.css b/public/css/main.css index 63562ee..361146a 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -161,7 +161,7 @@ input:focus{ } .hide{ - display : none; + /*display: none;*/ } h2#cookie_text{ @@ -173,3 +173,150 @@ h2#cookie_text{ color: #001bff; cursor: pointer; } + +.green:before{ + content: '✅ '; + margin-right: 3vw; +} + + +.red{ + background: rgba(252, 214, 214, 0.54); + border: 0.2vw solid red; +} + +.red:before { + content: '❌ '; + margin-right: 3vw; +} + +.green { + background: rgba(218, 252, 214, 0.53); + border: 0.2vw solid green; +} + +div#result_password ul{ + padding : 0vw 15vw; + list-style: none; +} + +div#result_password li{ + padding: 0.75vw; +} + +div#result_password p{ + text-align: center; +} + +div#result_password h1{ + padding: 2vh 0; +} + +.arrowdown{ + cursor: pointer; + width: 10%; + display: block; + margin: auto; + animation: animationFrames linear 2s; + animation-iteration-count: infinite; + transform-origin: 50% 50%; + -webkit-animation: animationFrames linear 2s; + -webkit-animation-iteration-count: infinite; + -webkit-transform-origin: 50% 50%; + -moz-animation: animationFrames linear 2s; + -moz-animation-iteration-count: infinite; + -moz-transform-origin: 50% 50%; + -o-animation: animationFrames linear 2s; + -o-animation-iteration-count: infinite; + -o-transform-origin: 50% 50%; + -ms-animation: animationFrames linear 2s; + -ms-animation-iteration-count: infinite; + -ms-transform-origin: 50% 50%; +} + +@keyframes animationFrames{ + 0% { + transform: translate(-1px,1px) ; + } + 50% { + transform: translate(-1px,16px) ; + } + 100% { + transform: translate(-1px,0px) ; + } +} + +@-moz-keyframes animationFrames{ + 0% { + -moz-transform: translate(-1px,1px) ; + } + 50% { + -moz-transform: translate(-1px,16px) ; + } + 100% { + -moz-transform: translate(-1px,0px) ; + } +} + +@-webkit-keyframes animationFrames { + 0% { + -webkit-transform: translate(-1px,1px) ; + } + 50% { + -webkit-transform: translate(-1px,16px) ; + } + 100% { + -webkit-transform: translate(-1px,0px) ; + } +} + +@-o-keyframes animationFrames { + 0% { + -o-transform: translate(-1px,1px) ; + } + 50% { + -o-transform: translate(-1px,16px) ; + } + 100% { + -o-transform: translate(-1px,0px) ; + } +} + +@-ms-keyframes animationFrames { + 0% { + -ms-transform: translate(-1px,1px) ; + } + 50% { + -ms-transform: translate(-1px,16px) ; + } + 100% { + -ms-transform: translate(-1px,0px) ; + } +} + +div.mainflex{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + +} + +div.mainflex div{ + width: 20%; +} + +div.mainflex div img{ + width: 30%; + display: block; + margin: auto; +} + +div.mainflex div p{ + text-align: center; +} + +div.mainflex div img:hover{ + width: 35%; + transition-duration: 1s; +} \ No newline at end of file diff --git a/public/images/1password.png b/public/images/1password.png new file mode 100644 index 0000000..34464d3 Binary files /dev/null and b/public/images/1password.png differ diff --git a/public/images/Dashlane.png b/public/images/Dashlane.png new file mode 100644 index 0000000..9c54ee2 Binary files /dev/null and b/public/images/Dashlane.png differ diff --git a/public/images/KeePass.png b/public/images/KeePass.png new file mode 100644 index 0000000..c0ca5a3 Binary files /dev/null and b/public/images/KeePass.png differ diff --git a/public/images/LastPass.png b/public/images/LastPass.png new file mode 100644 index 0000000..ed529c6 Binary files /dev/null and b/public/images/LastPass.png differ diff --git a/public/images/arrowdown.png b/public/images/arrowdown.png new file mode 100644 index 0000000..75e3f67 Binary files /dev/null and b/public/images/arrowdown.png differ diff --git a/public/images/check.png b/public/images/check.png new file mode 100644 index 0000000..2f77478 Binary files /dev/null and b/public/images/check.png differ diff --git a/public/js/main.js b/public/js/main.js index 64c6e6e..30477ad 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -6,8 +6,8 @@ const passwordManage = document.querySelector("#password_manage"); const security2AF = document.querySelector("#security_2AF"); const cookie = document.querySelector("#cookie"); - -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])+)\\])"); +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 => { @@ -16,21 +16,36 @@ document.querySelectorAll("input").forEach(el => { })); }); -resultMail.querySelector("a").addEventListener("click", () => { - passwordTest.classList.remove("hide"); - passwordTest.scrollIntoView({"behavior": "smooth"}); -}); - main.querySelector("#email").addEventListener("keyup", e => { if (e.key === "Enter") mailValid(); }); +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"); @@ -43,35 +58,48 @@ function mailValid() { } function passwordCheck() { - let pass = passwordTest.querySelector("#password").value; - let secLevel = { - "length": false, - "uppercase": false, - "lowercase": false, - "number": false, - "special": false, - "identical": false, - "name": false, - "commonly": false + 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"}); } - 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) - secLevel.identical = true - if (pass.match) - secLevel.name= true - if (["123456", "password", "123456789", "12345678", "12345", "111111", "1234567", "sunshine", "qwerty", "iloveyou", "princess", "admin", "welcome", "666666", "abc123", "football", "123123", "monkey", "654321", "!@#$%^&*", "charlie", "aa123456", "donald", "password1", "qwerty123"].indexOf(pass) <= -1) - secLevel.commonly = true - resultPassword.classList.remove("hide"); - resultPassword.scrollIntoView({"behavior": "smooth"}); } function mailCheck(mail) { diff --git a/views/index.pug b/views/index.pug index 89759a4..33352f5 100644 --- a/views/index.pug +++ b/views/index.pug @@ -19,18 +19,46 @@ block content h1 Results h2 ul - li MUST contain at least 8 characters (12+ recommended) - li MUST contain at least one uppercase letter - li MUST contain at least one lowercase letter - li MUST contain at least one number - li MUST contain at least one special character (!”#$%&'()*+,-./:;<=>?@[\]^_`{|}~ ) - li MAY NOT contain more than two identical characters in a row - li MAY NOT contain first name, last name, email address mailbox or domain, company name or commonly used passwords - li MAY NOT match commonly used password character patterns + li#length MUST contain at least 8 characters (12+ recommended) + li#uppercase MUST contain at least one uppercase letter + li#lowercase MUST contain at least one lowercase letter + li#number MUST contain at least one number + li#special MUST contain at least one special character (!”#$%&'()*+,-./:;<=>?@[\]^_`{|}~ ) + li#identical MAY NOT contain more than two identical characters in a row + li#commonly MAY NOT match commonly used password character patterns + p + i MAY NOT contain first name, last name, email address mailbox or domain or company name + img.arrowdown(src="images/arrowdown.png") div.container.hide#password_manage h1 To make your life easier, use a password manager ! + div.mainflex + div + img(src="images/KeePass.png") + p + a(href="https://keepass.info" target="_blank") KeePass + div + img(src="images/Dashlane.png") + p + a(href="https://www.dashlane.com" target="_blank") Dashlane + div + img(src="images/LastPass.png") + p + a(href="https://www.lastpass.com" target="_blank") LastPass + + div + img(src="images/1password.png") + p + a(href="https://1password.com" target="_blank") 1password h2 - a(href="https://fr.wikipedia.org/wiki/Double_authentification") Learn more + a(href="https://en.wikipedia.org/wiki/Password_manager" target="_blank") Learn more about password managers + img.arrowdown(src="images/arrowdown.png") + div.container.hide#security_2AF + h1 For more security, + h2 2AF should be used as much as possible + p it's one of the best protection you can get ! + h2 + a(href="https://en.wikipedia.org/wiki/Multi-factor_authentication", target="_blank") Learn more about + img.arrowdown(src="images/arrowdown.png") div.container.hide#cookie h1 Pay attention to the cookie on the sites ! Don't accept them for nothing h2#cookie_text Cookie :