Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added password security level with a bar. #182

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added password security level with a bar. #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 83 additions & 0 deletions public/css/passwordindicator.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@

.password-wrapper {
height: 45px;
width: 100%;
display: flex;
position: relative;
}
form .password-wrapper .password{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, it will be better if you add a single line after the ending of each css block

width: 100%;
height: 100%;
border: 1px solid lightgrey;
outline: none;
border-radius: 5px;
font-size: 17px;
transition: all 0.3s;
}
form .password-wrapper input:focus{
border-color: #27ae60;
box-shadow: inset 0 0 3px #2fd072;
}
form .password-wrapper .showBtn{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: none;
user-select: none;
}
form .indicator{
height: 10px;
margin: 5px 10px;
display: flex;
align-items: center;
justify-content: space-between;
display: none;
}
form .indicator span{
position: relative;
height: 100%;
width: 100%;
background: lightgrey;
border-radius: 5px;
}
form .indicator span:nth-child(2){
margin: 0 3px;
}
form .indicator span.active:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: 5px;
}
.indicator span.weak:before{
background-color: #ff4757;
}
.indicator span.medium:before{
background-color: orange;
}
.indicator span.strong:before{
background-color: #23ad5c;
}
form .text{
font-size: 20px;
font-weight: 500;
position: relative;
display: none;
margin-bottom: -10px;
}
form .text.weak{
color: #ff4757;
}
form .text.medium{
color: orange;
}
form .text.strong{
color: #23ad5c;
}
59 changes: 59 additions & 0 deletions public/js/passwordindicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
const indicator = document.querySelector(".indicator");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use a better name for classes so that it doesn't conflict with some other variables in future.

like instead of indicator use pass-security-indicator

const input = document.querySelector(".password");
const weak = document.querySelector(".weak");
const medium = document.querySelector(".medium");
const strong = document.querySelector(".strong");
const text = document.querySelector(".text");
const showBtn = document.querySelector(".showBtn");
let regExpWeak = /[a-z]/;
let regExpMedium = /\d+/;
let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
function trigger(){
if(input.value != ""){
indicator.style.display = "block";
indicator.style.display = "flex";
if(input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong)))no=1;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make this code a bit better readable, like you can do one thing.
If you are using VScode, simply select the whole filea and right click and format it.

It would be better with some spaces and line breaks

if(input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong))))no=2;
if(input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong))no=3;
if(no==1){
weak.classList.add("active");
text.style.display = "block";
text.textContent = "Your password is too week";
text.classList.add("weak");
}
if(no==2){
medium.classList.add("active");
text.textContent = "Your password is medium";
text.classList.add("medium");
}else{
medium.classList.remove("active");
text.classList.remove("medium");
}
if(no==3){
weak.classList.add("active");
medium.classList.add("active");
strong.classList.add("active");
text.textContent = "Your password is strong";
text.classList.add("strong");
}else{
strong.classList.remove("active");
text.classList.remove("strong");
}
showBtn.style.display = "block";
showBtn.onclick = function(){
if(input.type == "password"){
input.type = "text";
showBtn.textContent = "HIDE";
showBtn.style.color = "#23ad5c";
}else{
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, proper formatting is just needed.
Right-click and format the file, so there is a consistency in spacing and tabs.

input.type = "password";
showBtn.textContent = "SHOW";
showBtn.style.color = "#000";
}
}
}else{
indicator.style.display = "none";
text.style.display = "none";
showBtn.style.display = "none";
}
}
22 changes: 18 additions & 4 deletions views/partials/header.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/signin.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/passwordindicator.css">
</head>

<style>
Expand Down Expand Up @@ -130,6 +131,7 @@
<span aria-hidden="true">&times;</span>
</button>
</div>

<form action="/user/signup" method="post" class="form-signin" id ="signupform">
<img class="mb-4" src="/photos/avatar.png" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Sign Up</h1>
Expand All @@ -139,15 +141,26 @@
<input type="text" name="name" id="inputName" class="form-control" placeholder="Name" required autofocus>
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="inputEmailSignUp" class="form-control" placeholder="Email" required autofocus>
<label for="inputPasswordSignUp" class="sr-only">Password</label>
<input type="password" name="password" id="inputPasswordSignUp" class="form-control" placeholder="Password" required>

<div class="password-wrapper">
<label for="inputPasswordSignUp" class="sr-only">Password</label>
<input class="form-control password" type="password" onkeyup="trigger()" name="password" id="inputPasswordSignUp" placeholder="Password" required>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work!

<span class="showBtn">SHOW</span>
</div>
<div class="indicator">
<span class="weak"></span>
<span class="medium"></span>
<span class="strong"></span>
</div>
<div class="text"></div>

<label for="inputPasswordSignUp" class="sr-only">Confirm Password</label>
<input type="password" name="password2" id="inputPasswordSignUp2" class="form-control" placeholder="Confirm Password" required>
<input type="submit" name="" class="btn btn-lg btn-primary btn-block" type="submit" value="Sign Up">
<p class="mt-5 mb-3 text-muted">Already have an Account? <a class="close-modal" data-toggle="modal" href="#loginModal"> Sign In Now!</a></p>
<label id="errormsg2" class="errmsg"></label>
</form>
</div>
</div>
</div>
</div>
<script
Expand All @@ -157,4 +170,5 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/modals_change.js"></script>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<script src="/js/passwordindicator.js"></script>