1
0
Fork 0

English seance 18/5/2020

This commit is contained in:
Ethanell 2020-05-18 12:03:20 +02:00
parent 02437684e1
commit 0b2db4f3d3
9 changed files with 248 additions and 45 deletions

View file

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

BIN
public/images/1password.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/images/Dashlane.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/images/KeePass.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

BIN
public/images/LastPass.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/images/arrowdown.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/check.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View file

@ -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,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,
"uppercase": false,
"lowercase": false,
"number": false,
"special": false,
"identical": false,
"name": false,
"commonly": false
length: false,
uppercase: false,
lowercase: false,
number: false,
special: false,
identical: false,
commonly: false
}
if (pass.length >= 8)
secLevel.length = true
@ -62,16 +80,26 @@ 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)
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)
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) {

View file

@ -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 :