Skip to content

Commit

Permalink
Merge pull request Harshdev098#422 from trinetra110/pswd-toggle-btn
Browse files Browse the repository at this point in the history 
feat: added password toggle button for stakeholder
  • Loading branch information
@Harshdev098
Harshdev098 authored Nov 9, 2024
2 parents ed207d6 + bc37b74 commit b81cb54
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 52 deletions.
53 changes: 37 additions & 16 deletions public/css/login_style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,46 @@
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}

body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom right,#4e54c8, #8f94fb);
background: linear-gradient(to bottom right, #4e54c8, #8f94fb);
color: #333;
}

.gtranslate_wrapper{
.gtranslate_wrapper {
background-color: white;
position: absolute;
bottom: 30px;
left: 30px;
height: 47px;
/* width: 40px;; */
margin: auto;
padding: 10px;;
padding: 10px;
}



#icon{
#icon {
width: 30px;
cursor: pointer;
position: absolute;
top: 30px;
top: 30px;
right: 30px;
}
#icon:hover{
#icon:hover {
font-weight: 800;
}

:root{
:root {
--primary-color: #fff;
--secondary-color: #0e0e0e;
}

.dark-theme{
.dark-theme {
--primary-color: #0e0e0e;
--secondary-color: #fff;
}
Expand Down Expand Up @@ -121,6 +119,24 @@ form input:focus {
box-shadow: 0 0 8px rgba(142, 160, 240, 0.5);
}

.password-container {
position: relative;
display: flex;
align-items: center;
}

.password-container input {
padding-right: 30px; /* Add some padding to avoid text overlap with the icon */
}

.password-container #togglePassword {
position: absolute;
right: 10px; /* Adjust as needed for spacing */
cursor: pointer;
top: 40%; /* Center vertically */
transform: translateY(-60%); /* Move it slightly up */
}

a {
display: block;
text-align: right;
Expand All @@ -144,7 +160,7 @@ button {
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.4s ease-in;
transition: 0.4s ease-in;
}

button:hover {
Expand All @@ -157,7 +173,7 @@ button:hover {
font-size: 15px;
}

.register p{
.register p {
color: var(--secondary-color);
}

Expand All @@ -169,10 +185,13 @@ button:hover {

.register a:hover {
text-decoration: underline;
color:blue;
color: blue;
}

#box1, #box2, #box3, #box4 {
#box1,
#box2,
#box3,
#box4 {
width: 100%;
max-width: 500px;
padding: 12px;
Expand All @@ -192,7 +211,9 @@ button:hover {
display: none;
}

#box2, #box3, #box4 {
#box2,
#box3,
#box4 {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
Expand Down
63 changes: 40 additions & 23 deletions public/stk_login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignIn (stakeholder)</title>
<link rel="stylesheet" href="css/login_style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>

<body>
<div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
<script>
window.gtranslateSettings = {
default_language: "en",
detect_browser_language: true,
wrapper_selector: ".gtranslate_wrapper",
font_size: 100,
};
</script>
<script
src="https://cdn.gtranslate.net/widgets/latest/popup.js"
defer
></script>
window.gtranslateSettings = {
default_language: "en",
detect_browser_language: true,
wrapper_selector: ".gtranslate_wrapper",
font_size: 100,
};
</script>
<script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
<img src="images/moon.webp" id="icon">
<div class="container">
<div class="image">
Expand All @@ -44,7 +42,10 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
<input type="email" id="email" name="email" placeholder="Enter your email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your Password" required>
<div class="password-container">
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<i id="togglePassword" class="fa-solid fa-eye-slash"></i>
</div>
<a href="">Forgot Password?</a>
<button type="button" onclick="register()">Login</button>
<div class="register">
Expand All @@ -57,16 +58,32 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
</div>
</div>

<!-- Password toggle button-->
<script>
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');

togglePassword.addEventListener('click', function () {
// Toggle the type attribute
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);

// Toggle the icon
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});
</script>

<!-- Updated register function starts here -->
<script>
var icon =document.getElementById("icon");
icon.onclick = function(){
var icon = document.getElementById("icon");
icon.onclick = function () {
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src="images/sun.png";
if (document.body.classList.contains("dark-theme")) {
icon.src = "images/sun.png";
}
else{
icon.src="images/moon.png";
else {
icon.src = "images/moon.png";
}
}

Expand All @@ -80,13 +97,13 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
const register = async () => {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;

// Check if both fields are filled
if (!email || !password) {
alert('Please fill in both the email and password fields.');
return; // Stop execution if fields are not filled
}

const result1 = document.getElementById('box1');
const result2 = document.getElementById('box2');
const result3 = document.getElementById('box3');
Expand All @@ -97,7 +114,7 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
alert('Please use a valid email from Gmail, Outlook, or other reputable providers.');
return;
}

try {
const response = await fetch('/stk_holder_signin', {
method: "POST",
Expand All @@ -106,7 +123,7 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S
},
body: JSON.stringify({ email, password }),
});

if (response.ok) {
const result = await response.json();
const token = result.accessToken;
Expand Down Expand Up @@ -153,4 +170,4 @@ <h4 style="text-align: center; margin: 0px 0px 10px 0px;font-size: 22px;">(for S

</body>

</html>
</html>
44 changes: 31 additions & 13 deletions public/stk_signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignUp (stakeholder)</title>
<link rel="stylesheet" href="css/login_style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>

<body>
<div style="position: absolute; bottom: 30px; left: 30px;" class="gtranslate_wrapper"></div>
<script>
window.gtranslateSettings = {
default_language: "en",
detect_browser_language: true,
wrapper_selector: ".gtranslate_wrapper",
font_size: 100,
};
</script>
<script
src="https://cdn.gtranslate.net/widgets/latest/popup.js"
defer
></script>
window.gtranslateSettings = {
default_language: "en",
detect_browser_language: true,
wrapper_selector: ".gtranslate_wrapper",
font_size: 100,
};
</script>
<script src="https://cdn.gtranslate.net/widgets/latest/popup.js" defer></script>
<img src="images/moon.webp" id="icon">
<div id="box2">
<p>Please Try Again! Account Already Exists</p>
Expand All @@ -43,7 +41,10 @@ <h2 style="text-align: center;">Sign Up</h2>
<input type="email" id="email" name="email" placeholder="Enter your email" required>

<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<div class="password-container">
<input type="password" id="password" name="password" placeholder="Enter your password" required>
<i id="togglePassword" class="fa-solid fa-eye-slash"></i>
</div>

<button type="button" onclick="register()">Sign Up</button>
<div class="register">
Expand All @@ -55,6 +56,23 @@ <h2 style="text-align: center;">Sign Up</h2>
<p>Successfully Registered... Redirecting Please Wait...</p>
</div>
</div>

<!-- Password toggle button-->
<script>
const togglePassword = document.getElementById('togglePassword');
const passwordInput = document.getElementById('password');

togglePassword.addEventListener('click', function () {
// Toggle the type attribute
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);

// Toggle the icon
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});
</script>

<script>
var icon = document.getElementById("icon");
icon.onclick = function () {
Expand Down Expand Up @@ -129,4 +147,4 @@ <h2 style="text-align: center;">Sign Up</h2>
</script>
</body>

</html>
</html>

0 comments on commit b81cb54

Please sign in to comment.