Skip to content

Commit 7af9b76

Browse files
Crane04Crane04
committed
add toggle password
1 parent 6f2f008 commit 7af9b76

File tree

5 files changed

+107
-62
lines changed

5 files changed

+107
-62
lines changed

‎db.sqlite3

0 Bytes
Binary file not shown.

‎static/CSS/account.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,22 @@ body {
4646
background-color: #075e54;
4747
border: 1px solid #075e54;
4848
}
49+
.eye-icon {
50+
cursor: pointer;
51+
}
52+
53+
54+
.eye-icon:hover {
55+
color: #007bff; /* Change color on hover if desired */
56+
}
57+
.pass-container{
58+
display: flex;
59+
align-items: center;
60+
justify-content: space-between;
61+
}
62+
.password-container .password-input{
63+
width: 85%;
64+
}
4965

5066
@media (min-width: 768px) {
5167
.container {
@@ -61,15 +77,21 @@ body {
6177
.container {
6278
height: auto;
6379
flex-direction: column;
80+
margin-bottom: 20px;
6481
}
6582

6683
.login-container {
6784
width: 80%;
6885
margin: 10px auto;
86+
6987
}
7088

7189
.login-image {
7290
display: flex;
7391
justify-content: center;
92+
width: 320px;
93+
}
94+
.login-image img{
95+
width:fit-content
7496
}
7597
}

‎static/Javascript/accounts.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
if(document.querySelector("#signup")){
2+
document.querySelector("#signup").addEventListener("click", function(e){
3+
const password = document.getElementById('password').value;
4+
const password2 = document.getElementById('password2').value;
5+
if(password === password2){
6+
if (password.length < 6 || !/[A-Z]/.test(password) || !/[a-z]/.test(password) || !/[^A-Za-z0-9]/.test(password)){
7+
e.preventDefault()
8+
document.querySelector('.status_post').innerText = "Password must contain atleast 6 characters, 1 upper, lowercase and a special character"
9+
document.querySelector('.status_post').style.display = "block"
10+
11+
setTimeout(() => {
12+
13+
document.querySelector('.status_post').style.display = "none"
14+
}, 4000);
15+
16+
}
17+
}else{
18+
e.preventDefault()
19+
document.querySelector('.status_post').innerText = "Passwords don't match!"
20+
document.querySelector('.status_post').style.display = "block"
21+
22+
setTimeout(() => {
23+
24+
document.querySelector('.status_post').style.display = "none"
25+
}, 3000);
26+
}
27+
})
28+
function isStrongPassword(password) {
29+
// Check for a minimum length of 6 characters
30+
if (password.length < 6) {
31+
return false;
32+
}
33+
34+
// Check for at least one uppercase letter
35+
if (!/[A-Z]/.test(password)) {
36+
return false;
37+
}
38+
39+
// Check for at least one lowercase letter
40+
if (!/[a-z]/.test(password)) {
41+
return false;
42+
}
43+
44+
// Check for at least one special character (not alphanumeric)
45+
if (!/[^A-Za-z0-9]/.test(password)) {
46+
return false;
47+
}
48+
49+
// If all checks pass, the password is strong
50+
return true;
51+
}
52+
53+
}
54+
function togglePassword(){
55+
var password_inputs = document.getElementsByClassName("password-input");
56+
for(let i =0; i<password_inputs.length; i++){
57+
if (password_inputs[i].type === "password") {
58+
password_inputs[i].type = "text";
59+
document.querySelector(".eye-icon").className = "fas fa-eye-slash eye-icon"
60+
} else {
61+
password_inputs[i].type = "password";
62+
document.querySelector(".eye-icon").className = "fas fa-eye eye-icon"
63+
}
64+
}
65+
66+
}

‎templates/login.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010

1111
<link rel="stylesheet" href="{% static 'CSS/account.css' %}">
1212
<link rel="shortcut icon" href="{% static 'images/logo.png' %}" type="image/x-icon">
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" crossorigin="anonymous">
14+
1315
</head>
1416
<body>
1517
<div class="brand">
@@ -31,9 +33,12 @@ <h2>Login</h2>
3133
<label for="name">Name:</label>
3234
<input type="text" class="form-control" id="name" name="username" placeholder="Enter your name" required>
3335
</div>
34-
<div class="form-group">
36+
<div class="form-group password-container">
3537
<label for="password">Password:</label>
36-
<input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" required>
38+
<div class="pass-container">
39+
<input type="password" class="form-control password-input" id="password" name="password" placeholder="Enter your password" required>
40+
<i class="fas fa-eye eye-icon" onclick="togglePassword()"></i>
41+
</div>
3742
</div>
3843
<button type="submit" class="btn btn-primary btn-block">Submit</button>
3944
</form>
@@ -45,5 +50,6 @@ <h2>Login</h2>
4550
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
4651
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
4752
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
53+
<script src="{% static 'Javascript/accounts.js' %}"></script>
4854
</body>
4955
</html>

‎templates/signup.html

Lines changed: 11 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
<head>
66
<meta charset="UTF-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Login Page</title>
8+
<title>SignUpPage</title>
99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
1010
<link rel="stylesheet" href="{% static 'CSS/account.css' %}">
1111
<link rel="shortcut icon" href="{% static 'images/logo.png' %}" type="image/x-icon">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" crossorigin="anonymous">
1213
</head>
1314
<body>
1415
<div class="brand">
@@ -35,74 +36,24 @@ <h2>SignUp</h2>
3536
<label for="name">Email:</label>
3637
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
3738
</div>
38-
<div class="form-group">
39+
<div class="form-group password-container">
3940
<label for="password">Password:</label>
40-
<input type="password" class="form-control" id="password" name="password" placeholder="Create Password" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9]).{6,}$" required>
41+
<div class="pass-container">
42+
<input type="password" class="form-control password-input" id="password" name="password" placeholder="Enter your password" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9]).{6,}$" required>
43+
<i class="fas fa-eye eye-icon" onclick="togglePassword()"></i>
44+
</div>
4145
</div>
4246
<div class="form-group">
43-
<label for="password2">Password:</label>
44-
<input type="password" class="form-control" id="password2" name="password2" placeholder="Confirm Password" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9]).{6,}$" required>
47+
<label for="password2">Confirm Password:</label>
48+
<input type="password" class="form-control password-input" id="password2" name="password2" placeholder="Confirm Password" required>
4549
</div>
46-
<button type="submit" class="btn btn-primary btn-block">Submit</button>
50+
<button id="signup" type="submit" class="btn btn-primary btn-block">Submit</button>
4751
</form>
4852
<p style="color:#075e54; text-decoration: underline;"> <a href="/accounts/login">Login</a> </p>
4953
</div>
5054
</div>
5155

52-
<script>
53-
document.querySelector("button").addEventListener("click", function(e){
54-
const password = document.getElementById('password').value;
55-
const password2 = document.getElementById('password2').value;
56-
if(password === password2){
57-
if (password.length < 6 || !/[A-Z]/.test(password) || !/[a-z]/.test(password) || !/[^A-Za-z0-9]/.test(password)){
58-
e.preventDefault()
59-
document.querySelector('.status_post').innerText = "Password must contain atleast 6 characters, 1 upper, lowercase and a special character"
60-
document.querySelector('.status_post').style.display = "block"
61-
62-
setTimeout(() => {
63-
64-
document.querySelector('.status_post').style.display = "none"
65-
}, 4000);
66-
67-
}
68-
}else{
69-
e.preventDefault()
70-
document.querySelector('.status_post').innerText = "Passwords don't match!"
71-
document.querySelector('.status_post').style.display = "block"
72-
73-
setTimeout(() => {
74-
75-
document.querySelector('.status_post').style.display = "none"
76-
}, 3000);
77-
}
78-
})
79-
function isStrongPassword(password) {
80-
// Check for a minimum length of 6 characters
81-
if (password.length < 6) {
82-
return false;
83-
}
84-
85-
// Check for at least one uppercase letter
86-
if (!/[A-Z]/.test(password)) {
87-
return false;
88-
}
89-
90-
// Check for at least one lowercase letter
91-
if (!/[a-z]/.test(password)) {
92-
return false;
93-
}
94-
95-
// Check for at least one special character (not alphanumeric)
96-
if (!/[^A-Za-z0-9]/.test(password)) {
97-
return false;
98-
}
99-
100-
// If all checks pass, the password is strong
101-
return true;
102-
}
103-
104-
</script>
105-
56+
<script src="{% static 'Javascript/accounts.js' %}"></script>
10657
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
10758
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
10859
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

0 commit comments

Comments
 (0)