Skip to content

Commit

Permalink
Merge pull request #320 from amin-xiv/toggle-password-visibility
Browse files Browse the repository at this point in the history 
Final commit (V2).
  • Loading branch information
@jency1
jency1 authored Nov 7, 2024
2 parents f5df2b4 + 793a444 commit e333e76
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 98 deletions.
57 changes: 25 additions & 32 deletions website/pages/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,16 @@
top: 10px;
right: 60px;
top: -2.5px;
width: 27px;
height: 27px;
width: 25px;
height: 25px;
opacity: 85%;
cursor: pointer;
background-color: #fff;
z-index: 1;
}
#icon_overlay {
visibility: hidden;
width: 27px;
width: 25px;
height: 13px;
border-radius: 20px;
position: absolute;
Expand Down Expand Up @@ -92,7 +92,7 @@
height: 100px;
overflow-x: hidden;
}
#forget {
#forgot {
width: 90%;
}
}
Expand All @@ -119,7 +119,7 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
<div id="icon_overlay"></div>
</div>
<div id="passwordHelpBlock" class="form-text" style="color:white; width: 90%; text-align: left; margin-top: -10px; margin-left: 10px;">
<p style="text-align: right; margin-top: 15px; font-size: medium; margin-bottom: 5px;"><a href="#" style=" text-decoration: none; color: #004ab7;" id="forget">Forget Password?</a></p>
<p style="text-align: right; margin-top: 15px; font-size: medium; margin-bottom: 5px;"><a href="#" style=" text-decoration: none; color: #004ab7;" id="forgot">Forgot Password?</a></p>
<span style="color: rgb(255, 255, 255); font-size: 14px; position: relative;" id="content">Your password must be :</span><br>
• 8-20 characters long.<br>
• Should contain letters and numbers.<br>
Expand Down Expand Up @@ -150,30 +150,6 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s

// Resize password icon and icon overlay on load
adjustIconPos();

// Password hide/view handling
document.getElementById('password_icon').addEventListener("click", function (event) {
if(event.target.previousElementSibling.type === 'password') {
event.target.previousElementSibling.type = 'text';
event.target.src = '../web_images/hide_password_icon.png';
event.target.previousElementSibling.focus();
event.target.alt = 'hide password';
document.getElementById('icon_overlay').style.visibility = 'visible';
} else {
event.target.previousElementSibling.type = 'password';
event.target.src = '../web_images/view_password_icon.png';
event.target.previousElementSibling.focus();
event.target.alt = 'view password';
document.getElementById('icon_overlay').style.visibility = 'hidden';
}
})
// Autoamtically click to remove an unknown figure that appears on load.
document.getElementById('passwordInput').value = '12345678';
document.getElementById('password_icon').click();
setTimeout(() => {
document.getElementById('passwordInput').value = '';
document.getElementById('password_icon').click();
}, 50);
};

function adjustIconPos() {
Expand All @@ -200,16 +176,32 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
// Adjust password icon and icon overlay on resize
window.addEventListener("resize", adjustIconPos);

// Password hide/view handling
document.getElementById('password_icon').addEventListener("click", function (event) {
if(event.target.previousElementSibling.type === 'password') {
event.target.previousElementSibling.type = 'text';
event.target.src = '../web_images/hide_password_icon.png';
event.target.previousElementSibling.focus();
event.target.alt = 'hide password';
document.getElementById('icon_overlay').style.visibility = 'visible';
} else {
event.target.previousElementSibling.type = 'password';
event.target.src = '../web_images/view_password_icon.png';
event.target.previousElementSibling.focus();
event.target.alt = 'view password';
document.getElementById('icon_overlay').style.visibility = 'hidden';
}
})

document.getElementById('loginButton').addEventListener('click', function() {
const emailInput = document.getElementById('emailInput');
const passwordInput = document.getElementById('passwordInput');
const emailValue = emailInput.value.trim();
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// Make sure to return the password field to the type['password']
Array.from(document.getElementsByClassName('password-field')).forEach((field) => {
field.type = 'password';
})
document.querySelector('.password-field').type = 'password';

if (!emailRegex.test(emailValue)) {
alert('Invalid email address');
return;
Expand All @@ -232,5 +224,6 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="../scripts/script.js"></script>
</body>
</html>
117 changes: 51 additions & 66 deletions website/pages/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,81 +145,66 @@ <h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font
adjustIconPos();
}


function adjustIconPos() {
const passwordIcons = Array.from(document.getElementsByClassName('password_icon'));
const iconOverlays = Array.from(document.getElementsByClassName('icon_overlay'));
const mixedArray = [...passwordIcons, ...iconOverlays];
console.log(mixedArray);
if(window.innerWidth < 700 && window.innerWidth > 630) {
mixedArray.forEach((element) => {
element.style.right = '35px';
})
} else if(window.innerWidth < 600 && window.innerWidth > 500) {
mixedArray.forEach((element) => {
element.style.right = '60px';
})
} else if(window.innerWidth < 500 && window.innerWidth > 400) {
mixedArray.forEach((element) => {
element.style.right = '50px';
})
} else if(window.innerWidth < 400 && window.innerWidth > 300) {
mixedArray.forEach((element) => {
element.style.right = '40px';
})
} else if(window.innerWidth < 300) {
mixedArray.forEach((element) => {
element.style.right = '35px';
})
} else if(window.innerWidth > 900) {
mixedArray.forEach((element) => {
element.style.right = '55px';
})
}
}
// Adjust password icon and icon overlay on resize
window.addEventListener("resize", adjustIconPos);
const passwordIcons = document.getElementsByClassName('password_icon');
Array.from(passwordIcons).forEach((icon) => {
icon.addEventListener("click", function (event) {
if(event.target.previousElementSibling.type === 'password') {
event.target.previousElementSibling.type = 'text';
event.target.src = '../web_images/hide_password_icon.png';
event.target.focus();
event.target.alt = 'hide password';
event.target.nextElementSibling.style.visibility = 'visible';
} else {
event.target.previousElementSibling.type = 'password';
event.target.src = '../web_images/view_password_icon.png';
event.target.focus();
event.target.nextElementSibling.style.visibility = 'hidden';
// Function to adjust password visibility icon responsively
function adjustIconPos() {
const passwordIcons = Array.from(document.getElementsByClassName('password_icon'));
const iconOverlays = Array.from(document.getElementsByClassName('icon_overlay'));
const mixedArray = [...passwordIcons, ...iconOverlays];
console.log(mixedArray);
if(window.innerWidth < 700 && window.innerWidth > 630) {
mixedArray.forEach((element) => {
element.style.right = '35px';
})
} else if(window.innerWidth < 600 && window.innerWidth > 500) {
mixedArray.forEach((element) => {
element.style.right = '60px';
})
} else if(window.innerWidth < 500 && window.innerWidth > 400) {
mixedArray.forEach((element) => {
element.style.right = '50px';
})
} else if(window.innerWidth < 400 && window.innerWidth > 300) {
mixedArray.forEach((element) => {
element.style.right = '40px';
})
} else if(window.innerWidth < 300) {
mixedArray.forEach((element) => {
element.style.right = '35px';
})
} else if(window.innerWidth > 900) {
mixedArray.forEach((element) => {
element.style.right = '55px';
})
}
}
// Adjust password icon and icon overlay on resize
window.addEventListener("resize", adjustIconPos);

const passwordIcons = document.getElementsByClassName('password_icon');
Array.from(passwordIcons).forEach((icon) => {
icon.addEventListener("click", function (event) {
if(event.target.previousElementSibling.type === 'password') {
event.target.previousElementSibling.type = 'text';
event.target.src = '../web_images/hide_password_icon.png';
event.target.previousElementSibling.focus();
event.target.alt = 'hide password';
event.target.nextElementSibling.style.visibility = 'visible';
} else {
event.target.previousElementSibling.type = 'password';
event.target.src = '../web_images/view_password_icon.png';
event.target.previousElementSibling.focus();
event.target.nextElementSibling.style.visibility = 'hidden';
}
})
})
})
// Autoamtically click to remove an unknown figure that appears on load.
Array.from(passwordIcons).forEach((icon) => {
setTimeout(() => {
document.getElementById("passwordInput").value = '';
document.getElementById("confirmPasswordInput").value = '';
icon.click();
}, 50);
setTimeout(() => {
document.getElementById("passwordInput").value = '';
document.getElementById("confirmPasswordInput").value = '';
icon.click();
}, 100);
})

// Function to handle signup
document.getElementById('signupButton').addEventListener('click', function () {
const emailInput = document.getElementById('emailInput');
const passwordInput = document.getElementById('passwordInput');
const confirmPasswordInput = document.getElementById('confirmPasswordInput');
const errorContainer = document.getElementById('errorContainer');
const rememberMe = document.getElementById('rememberMe');

const emailValue = emailInput.value.trim();
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const emailValue = emailInput.value;

// Trusted email domains
const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com", "protonmail.com", "icloud.com", "tutanota.com"];
Expand Down

0 comments on commit e333e76

Please sign in to comment.