Merge pull request #336 from Sankar-1110/main

Added password visibility
PriyaGhosal · Oct 9, 2024 · e37f2a1 · e37f2a1
2 parents aeefcc1 + cf70090
commit e37f2a1
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 4 deletions.
diff --git a/assets/css/signin.css b/assets/css/signin.css
@@ -60,6 +60,26 @@ p {
     border-radius: 4px;
     box-sizing: border-box;
 }
+.password{
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 12px;
+
+}
+
+.password input{
+    width: 80%;
+    padding: 10px;
+    box-sizing: border-box;
+    border: none;
+}
+.password input:focus{
+    outline: none;
+}
+
 
 .signin-btn {
     width: 100%;

diff --git a/signin.html b/signin.html
@@ -6,6 +6,7 @@
     <title>SkillWise - Sign In</title>
     <link rel="stylesheet" href="assets/css/signin.css">
   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
 </head>
 <body>
     <div class="container">
@@ -27,12 +28,30 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                 </div>
                 <div class="input-group">
                     <label for="password">Password</label>
-                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
-                </div>
+                    <div class="password">
+                        <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                        <i class="fa-solid fa-eye-slash" id="togglePassword"></i>
+                      </div>
+                    </div>
                 <button type="submit" class="signin-btn">Sign In</button>
                 <p class="signup-link">Don't have an account? <a href="./signup.html">Sign up here</a></p>
             </form>
         </div>
     </div>
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <script >
+        const togglePassword = document.querySelector("#togglePassword");
+const passwordInput = document.querySelector("#password");
+
+togglePassword.addEventListener("click", function () {
+  const type = passwordInput.getAttribute("type") === "password" ?  "text": "password";
+  passwordInput.setAttribute("type", type);
+
+  this.classList.toggle("fa-eye-slash");
+  this.classList.toggle("fa-eye");
+});
+
+    </script>
+
 </body>
 </html>
diff --git a/signup.html b/signup.html
@@ -6,6 +6,7 @@
     <title>SkillWise - Sign up</title>
     <link rel="stylesheet" href="assets/css/signin.css">
   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
 </head>
 <body>
     <div class="container">
@@ -31,12 +32,28 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                 </div>
                 <div class="input-group">
                     <label for="password">Password</label>
-                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
-                </div>
+                    <div class="password">
+                        <input type="password" id="password" name="password" placeholder="Enter your password" required>
+                        <i class="fa-solid fa-eye-slash" id="togglePassword"></i>
+                      </div>                </div>
                 <button type="submit" class="signin-btn">Sign In</button>
                 <p class="signup-link">Already have an account? <a href="./signin.html">Sign in here</a></p>
             </form>
         </div>
     </div>
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <script >
+        const togglePassword = document.querySelector("#togglePassword");
+const passwordInput = document.querySelector("#password");
+
+togglePassword.addEventListener("click", function () {
+  const type = passwordInput.getAttribute("type") === "password" ?  "text": "password";
+  passwordInput.setAttribute("type", type);
+
+  this.classList.toggle("fa-eye-slash");
+  this.classList.toggle("fa-eye");
+});
+
+    </script>
 </body>
 </html>