Added Confirm Password the the tourist registration page and also add…

…ed eye iconusing font awesome for toggling the visibility of the passwords
jaysomani · Jan 26, 2024 · 585e6ab · 585e6ab
1 parent 40068a6
commit 585e6ab
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 12 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/pages/login/index.html b/pages/login/index.html
@@ -6,13 +6,16 @@
     <title>Firstspot | SignUp</title>
     <link rel="stylesheet" href="./login.css">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
-        body{
+        body {
             background-image: url(/images/signup-bg2.jpeg);
         }
     </style>
@@ -21,12 +24,25 @@
 <body>
     <!-- ///////////////////////////jayesh new work/////////////////////////// -->
 
-    <div id="testDiv" class="mb-5">
+    <div id="testDiv" class="mb-5-register">
         <h3 class="mb-3">Tourist Sign Up</h3>
         <input type="text" placeholder="Full name" id="nameInp" class="form-control mb-3">
-        <input type="text" placeholder="Email" id="emailInp" class="form-control mb-3">
+        <input type="text" placeholder="Email" id="emailInp" class="form-control mb-3 ">
         <input type="text" placeholder="Username" id="userInp" class="form-control mb-3">
-        <input type="password" placeholder="Password" id="passInp" class="form-control mb-3"><br>
+        <div class="password-container">
+            <input type="password" placeholder="Password" id="passInp" class="form-control mb-3 password">
+            <span id="togglePassword" class="togglePassword">
+                <i class="fas fa-eye" id="eyeIcon"></i>
+            </span>
+        </div>
+        <div class="password-container">
+            <input type="password" placeholder="Confirm Password" id="confirmPassInp"
+                class="password form-control mb-3">
+            <span id="toggleConfirmPassword" class="togglePassword">
+                <i class="fas fa-eye" id="confirmEyeIcon"></i>
+            </span>
+        </div>
+        <br>
         <button type="text" id="sub_btn" class="btn w-100 btn-outline-primary mb-3">Sign up</button>
         <a href="./login.html" class="badge badge-secondary py-1 w-100"><br>Already have an account?<br></a>
     </div>

diff --git a/pages/login/login.css b/pages/login/login.css
@@ -10,12 +10,37 @@ body{
     background-size: cover;
     background-position: 50% 50%;
 }
-.mb-5{
+.mb-5-login{
     background-color: rgba(255, 255, 255, 0.805);
     padding: 3%;
     width: 30vw;
     height: 70vh;
 }
+
+.mb-5-register{
+    background-color: rgba(255, 255, 255, 0.805);
+    padding: 3%;
+    width: 30vw;
+    height: 85vh;
+}
+/* css for toggling password visibility */
+.password-container {
+    position: relative;
+}
+
+.password {
+    padding-right: 30px; /* Space for the eye icon */
+}
+
+.togglePassword {
+    position: absolute;
+
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
+/* css for toggling password visibility */
 h3{
     text-align: center;
     /* font-family: "Montserrat", sans-serif, Arial, sans-serif;

diff --git a/pages/login/login.html b/pages/login/login.html
@@ -28,7 +28,7 @@
   <body>
     <!-- ///////////////////////////jayesh new work/////////////////////////// -->
 
-    <div class="mb-5">
+    <div class="mb-5-login">
 
       <h3 class="mb-3">Tourist Login</h3>
       <input

diff --git a/pages/login/script.js b/pages/login/script.js
@@ -25,6 +25,8 @@ const name = document.getElementById("nameInp");
 const email = document.getElementById("emailInp");
 const username = document.getElementById("userInp");
 const pass = document.getElementById("passInp");
+const confirmPassInp = document.getElementById("confirmPassInp");
+
 const submit = document.getElementById("sub_btn");
 
 // ///////////////////////validation//////////////////////////////////
@@ -39,7 +41,7 @@ function validation() {
     let emailregex = /^[a-zA-Z0-9]+@(gmail|yahoo|outlook)\.com$/;
     let userregex = /^[a-zA-Z0-9]{5,}$/;
 
-    if (isEmptyOrSpaces(name.value) || isEmptyOrSpaces(email.value) || isEmptyOrSpaces(username.value) || isEmptyOrSpaces(pass.value)) {
+    if (isEmptyOrSpaces(name.value) || isEmptyOrSpaces(email.value) || isEmptyOrSpaces(username.value) || isEmptyOrSpaces(pass.value) || isEmptyOrSpaces(confirmPassInp.value)) {
         alert("you cannot left any fields empty")
         return false;
     }
@@ -56,9 +58,48 @@ function validation() {
         alert("-username can only be alphanumeric\n-username must be atleast 5 characters\n");
         return false;
     }
+    if(pass.value!=confirmPassInp.value){
+        alert("Both the passwords are not matching")
+        return false;
+    }
     return true;
 }
 
+// tourist registation password and confirm password toggling effect
+
+//toggling password effect for password
+const togglepassword=document.getElementById("togglePassword")
+togglepassword.addEventListener('click',()=> {
+    const passwordInput = document.getElementById("passInp");
+    const eyeIcon = document.getElementById("eyeIcon");
+
+    if (passwordInput.type === "password") {
+      passwordInput.type = "text";
+      eyeIcon.classList.remove("fa-eye");
+      eyeIcon.classList.add("fa-eye-slash");
+    } else {
+      passwordInput.type = "password";
+      eyeIcon.classList.remove("fa-eye-slash");
+      eyeIcon.classList.add("fa-eye");
+    }
+  })
+
+  //toggling password effect for password
+const toggleconfirmpassword=document.getElementById("toggleConfirmPassword")
+toggleconfirmpassword.addEventListener('click',()=> {
+    const passwordInput = document.getElementById("confirmPassInp");
+    const eyeIcon = document.getElementById("confirmEyeIcon");
+
+    if (passwordInput.type === "password") {
+      passwordInput.type = "text";
+      eyeIcon.classList.remove("fa-eye");
+      eyeIcon.classList.add("fa-eye-slash");
+    } else {
+      passwordInput.type = "password";
+      eyeIcon.classList.remove("fa-eye-slash");
+      eyeIcon.classList.add("fa-eye");
+    }
+  })
 // ------------------------register user to firebase----------------------------//
 function RegisterUser() {
     if (!validation()) {