English seance 18/5/2020
This commit is contained in:
parent
02437684e1
commit
0b2db4f3d3
9 changed files with 248 additions and 45 deletions
|
@ -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
BIN
public/images/1password.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 34 KiB |
BIN
public/images/Dashlane.png
Normal file
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
BIN
public/images/KeePass.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 128 KiB |
BIN
public/images/LastPass.png
Normal file
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
BIN
public/images/arrowdown.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
public/images/check.png
Normal file
BIN
public/images/check.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
|
@ -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) {
|
||||
|
|
|
@ -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 :
|
||||
|
|
Reference in a new issue