Fixed issue #955 (#972)

Front-end-Projects/Basic/Login-Signup-Form/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login and Sign Up Form</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
 </head>
@@ -20,14 +21,20 @@
 
             <div class="form-container">
                 <form id="login-form" class="form">
-                    <h2>Login</h2>
+                    <h2 style="color: white;">Login</h2>
                     <div class="input-group">
                         <label for="login-email">Email ID</label>
-                        <input type="email" id="login-email" name="login-email" placeholder="Email ID" required>
+                        <div class="icon1">
+                            <input type="email" id="login-email" name="login-email" placeholder="Email ID" required>
+                            <i class="fa-solid fa-envelope fa-lg user" style="color: white;"></i>
+                        </div>
                     </div>
                     <div class="input-group">
                         <label for="login-password">Password</label>
-                        <input type="password" id="login-password" name="login-password" placeholder="Password" required>
+                        <div class="icon2">
+                            <input type="password" id="login-password" name="login-password" placeholder="Password" required>
+                            <i class="fa-solid fa-lock fa-lg pass" style="color: white;" ></i>
+                        </div>
                     </div>
                     <div class="actions">
                         <label><input type="checkbox" name="remember-me"> Remember me</label>
@@ -38,24 +45,34 @@ <h2>Login</h2>
                 </form>
 
                 <form id="signup-form" class="form">
-                    <h2>Sign Up</h2>
+                    <h2 style="color: white;">Sign Up</h2>
                     <div class="input-group">
                         <label for="signup-username">Username</label>
-                        <input type="text" id="signup-username" name="signup-username" placeholder="Username" required>
+                        <div class="icon">
+                            <input type="text" id="signup-username" name="signup-username" placeholder="Username" required>
+                            <i class="fa-solid fa-user fa-lg user" style="color: white;"></i>
+                        </div>
                     </div>
                     <div class="input-group">
                         <label for="signup-email">Email</label>
-                        <input type="email" id="signup-email" name="signup-email" placeholder="Email" required>
+                        <div class="icon1">
+                            <input type="email" id="signup-email" name="signup-email" placeholder="Email" required>
+                            <i class="fa-solid fa-envelope fa-lg email" style="color: white;"></i>
+                        </div>
                     </div>
                     <div class="input-group">
                         <label for="signup-password">Password</label>
-                        <input type="password" id="signup-password" name="signup-password" placeholder="Password" required>
+                        <div class="icon2">
+                            <input type="password" id="signup-password" name="signup-password" placeholder="Password" required>
+                            <i class="fa-solid fa-lock fa-lg Spass" style="color: white;" ></i>
+                        </div>
                     </div>
                     <button type="submit" class="btn">Sign Up</button>
                 </form>
             </div>
         </div>
     </div>
+    <script src="script.js"></script>
 </body>
 </html>
 

Front-end-Projects/Basic/Login-Signup-Form/script.js

@@ -0,0 +1,32 @@
+let btn = document.querySelector(".pass");
+let btn1 = document.querySelector(".Spass");
+let loginPass = document.querySelector("#login-password");
+let signupPass = document.querySelector("#signup-password");
+
+//for login password toggle
+btn.onclick = () => {
+    if(loginPass.type === 'text'){
+        loginPass.type = 'password'
+        btn.classList.remove('fa-lock-open');
+        btn.classList.add('fa-lock');
+    }
+    else{
+        loginPass.type = 'text'
+        btn.classList.remove('fa-lock');
+        btn.classList.add('fa-lock-open');
+    }
+}
+
+//for singup password toggle
+btn1.onclick = () => {
+    if(signupPass.type === 'text'){
+        signupPass.type = 'password'
+        btn1.classList.remove('fa-lock-open');
+        btn1.classList.add('fa-lock');
+    }
+    else{
+        signupPass.type = 'text'
+        btn1.classList.remove('fa-lock');
+        btn1.classList.add('fa-lock-open');
+    }
+}

Front-end-Projects/Basic/Login-Signup-Form/styles.css

@@ -68,6 +68,16 @@ input[type="radio"] {
     background-color: rgba(255, 255, 255, 0.37);
 }
 
+.icon1,.icon2,.icon{
+    display: flex;
+    justify-content: end;
+}
+
+.user,.pass,.email,.Spass{
+    margin-top:23px;
+    margin-left: 10px;
+}
+
 .form-container {
     position: relative;
 }