English seance 18/5/2020

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;
+}

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");
 
-
+const commonPassword = RegExp("(1234567890|123456789|12345678|1234567|123456|12345|1234|123|password|test|qwerty|azerty|iloveyou|admin|welcome|abc123|football|monkey|!@#\\$%\\^&\\*)");
-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 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,16 +58,19 @@ function mailValid() {
 }
 
 function passwordCheck() {
-    let pass = passwordTest.querySelector("#password").value;
+    let passInout = passwordTest.querySelector("#password")
+    let pass = passInout.value;
+    if (pass === "")
+        passInout.classList.add("error")
+    else {
         let secLevel = {
-        "length": false,
+            length: false,
-        "uppercase": false,
+            uppercase: false,
-        "lowercase": false,
+            lowercase: false,
-        "number": false,
+            number: false,
-        "special": false,
+            special: false,
-        "identical": false,
+            identical: false,
-        "name": false,
+            commonly: false
-        "commonly": false
         }
         if (pass.length >= 8)
             secLevel.length = true
@@ -62,17 +80,27 @@ function passwordCheck() {
             secLevel.lowercase = true
         if (pass.match("[0-9]"))
             secLevel.number = true
-    if (pass.match("\W"))
+        if (pass.match("\\W"))
             secLevel.special = true
-    if (pass.match)
+        if (!pass.match("(.)\\1"))
             secLevel.identical = true
-    if (pass.match)
+        if (!commonPassword.test(pass))
-        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.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) {
 

views/index.pug

@@ -19,18 +19,46 @@ block content
         h1 Results
         h2
         ul
-            li MUST contain at least 8 characters (12+ recommended)
+            li#length MUST contain at least 8 characters (12+ recommended)
-            li MUST contain at least one uppercase letter
+            li#uppercase MUST contain at least one uppercase letter
-            li MUST contain at least one lowercase letter
+            li#lowercase MUST contain at least one lowercase letter
-            li MUST contain at least one number
+            li#number MUST contain at least one number
-            li MUST contain at least one special character (!”#$%&'()*+,-./:;<=>?@[\]^_`{|}~ )
+            li#special MUST contain at least one special character (!”#$%&'()*+,-./:;<=>?@[\]^_`{|}~ )
-            li MAY NOT contain more than two identical characters in a row
+            li#identical 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#commonly MAY NOT match commonly used password character patterns
-            li 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 :