jun 14

signup.php

@@ -16,9 +16,16 @@
   <title>Globaly - Full Cycle Business Management & Consulting Responsive WordPress Theme</title>
 
   <style>
+    .fa-solid{
+      position: absolute;
+      right: 3%;
+      top: 46%;
+      cursor: pointer;
+    }
+
     #pswd_info {
       position: absolute;
-      bottom: 35%;
+      bottom: 25%;
       bottom: -115px\9;
       /* IE Specific */
       right: 1%;
@@ -66,17 +73,26 @@
     }
 
     @media screen and (min-width: 768px) {
+      .fa-solid{
+        top: 46%;
+
+      }
       #pswd_info {
 
-        bottom: 42%;
+        bottom: 35%;
         right: 30%;
       }
     }
 
     @media screen and (min-width: 992px) {
+
+      .fa-solid{
+        top: 45%;
+
+      }
       #pswd_info {
 
-        bottom: 22%;
+        bottom: 15%;
         right: 38%;
       }
     }
@@ -84,7 +100,8 @@
     .date-container {
       width: 100%;
       display: flex;
-      span{
+
+      span {
         margin-right: 20px;
       }
     }
@@ -101,11 +118,14 @@
     <form action="php/register.php" method="post">
       <div class="form-container-bot d-flex flex-column align-items-start justify-content-center">
         <input class="input-text" type="text" placeholder="Name" name="name">
+        <input class="input-text" type="text" placeholder="Surname" name="surname">
         <input class="input-text" type="text" placeholder="Email" name="email">
         <input class="input-text" type="password" id="password" placeholder="Password" name="password">
+        <i id="togglePassword" class="fa-solid fa-eye"></i>
         <input class="input-text" type="password" placeholder="Confirm Password" name="password_again">
+        <h6>Date of birth:</h6>
         <div class="date-container">
-        <span>
+          <span>
             <select name="birth_day">
               <?php
               $start_date = 1;
@@ -129,7 +149,7 @@
             <select name="birth_year">
               <?php
               $year = date('Y');
-              $min = $year - 60;
+              $min = $year - 100;
               $max = $year;
               for ($i = $max; $i >= $min; $i--) {
                 echo '<option value=' . $i . '>' . $i . '</option>';
@@ -203,6 +223,22 @@
         $('#password').blur(function() {
           $('#pswd_info').hide();
         });
+
+
+        //  Toggle Password show
+        $("#togglePassword").removeClass("fa-solid fa-eye").addClass("fa-solid fa-eye-slash");
+        $("#togglePassword").click(function() {
+            const passwordInput = $("#password");
+            const type = passwordInput.attr("type");
+
+            if (type === "password") {
+                passwordInput.attr("type", "text");
+                $("#togglePassword").removeClass("fa-solid fa-eye-slash").addClass("fa-solid fa-eye");
+            } else {
+                passwordInput.attr("type", "password");
+                $("#togglePassword").removeClass("fa-solid fa-eye").addClass("fa-solid fa-eye-slash");
+            }
+        });
       });
     </script>