From c1419fa585fb77eb6525246f0cdfb58dbe41ae35 Mon Sep 17 00:00:00 2001 From: devarsheecodess Date: Tue, 8 Oct 2024 19:10:36 +0530 Subject: [PATCH] Added show password buttons #180 --- SignUp/signup.css | 34 +++++++++-- SignUp/signup.html | 51 ++++++++++++++++- login/login.css | 28 +++++++-- login/login.html | 138 +++++++++++++++++++++++++++------------------ 4 files changed, 184 insertions(+), 67 deletions(-) diff --git a/SignUp/signup.css b/SignUp/signup.css index 2d3fd0d2..ff1f7e33 100644 --- a/SignUp/signup.css +++ b/SignUp/signup.css @@ -14,10 +14,7 @@ body { height: 100vh; color: white; text-shadow: 1px 1px 2px #000; -} - -.signup-container { - +}.signup-container { opacity: 0.75; background-color: rgba(0, 0, 0, 0); padding: 5rem; @@ -31,6 +28,35 @@ body { margin: auto; } +.pass { + position: relative; + display: flex; + align-items: center; +} + +.pass input { + width: 100%; + padding-right: 40px; /* Add padding to avoid text overlap with the button */ +} + +#showPasswordBtn, +#showPasswordBtn-conf { + position: absolute; + right: 10px; /* Align the button to the right of the input field */ + top: 50%; + transform: translateY(-50%); /* Center vertically */ + border: 1px solid transparent; + height: 30px; + font-size: 20px; + background-color: transparent; /* Make the button background transparent */ + color: white; +} + +#showPasswordBtn:hover, +#showPasswordBtn-conf:hover { + cursor: pointer; +} + @keyframes fadeIn { from { diff --git a/SignUp/signup.html b/SignUp/signup.html index 296a08da..3ffe8a6f 100644 --- a/SignUp/signup.html +++ b/SignUp/signup.html @@ -6,6 +6,13 @@ Sign Up for GamingTools +
@@ -21,16 +28,22 @@

Create Your Account

- +
+ + +
- +
+ + +
@@ -59,6 +72,38 @@

Create Your Account

} ) + // Show password + document.getElementById("showPasswordBtn").addEventListener("click", () => { + const password = document.getElementById("password"); + const icon = document.getElementById("passicon"); + + if (password.type === "password") { + password.type = "text"; + icon.classList.remove("fa-regular", "fa-eye"); + icon.classList.add("fa-solid", "fa-eye-slash"); + } else { + password.type = "password"; + icon.classList.remove("fa-solid", "fa-eye-slash"); + icon.classList.add("fa-regular", "fa-eye"); + } + }); + + // Show password-conf + document.getElementById("showPasswordBtn-conf").addEventListener("click", () => { + const password = document.getElementById("confirm-password"); + const icon = document.getElementById("passicon-conf"); + + if (password.type === "password") { + password.type = "text"; + icon.classList.remove("fa-regular", "fa-eye"); + icon.classList.add("fa-solid", "fa-eye-slash"); + } else { + password.type = "password"; + icon.classList.remove("fa-solid", "fa-eye-slash"); + icon.classList.add("fa-regular", "fa-eye"); + } + }); + const registeruser = async(user)=>{ diff --git a/login/login.css b/login/login.css index 024d2935..04ceaf78 100644 --- a/login/login.css +++ b/login/login.css @@ -56,6 +56,25 @@ label { font-size: 16px; } +.pass{ + display: flex; +} + +#showPasswordbtn{ + position: absolute; + right: 18%; + top: 51%; + background-color: transparent; + border: 1px solid transparent; + height: 30px; + font-size: 20px; + color: white; +} + +#showPasswordbtn:hover{ + cursor: pointer; +} + input[type="text"], input[type="password"] { width: 100%; padding: 0.75rem; @@ -225,7 +244,7 @@ body{ font-size: 15px; } -.links a:first-child: hover{ +.links a:first-child:hover{ text-decoration: underline; } @@ -264,10 +283,9 @@ body{ } -.links a: hover { +.links a:hover { color: #ff80ab; } -} .links { margin-top: 18px; @@ -288,7 +306,7 @@ body{ font-size: 15px; } -.links a:first-child: hover{ +.links a:first-child:hover{ text-decoration: underline; } @@ -296,6 +314,6 @@ body{ margin-right: 20px; } -.links a: hover { +.links a:hover { color: #ff80ab; } diff --git a/login/login.html b/login/login.html index c7120eb3..7bc6b36c 100644 --- a/login/login.html +++ b/login/login.html @@ -1,71 +1,99 @@ - - - + + + Collect your GamingTools - - - - + + + + +
-

Login to Your Account

-
-
- - -
-
- - -
-
-
- Login -
-
-
- - + - + } + }; +