update with pass hashing and login

Sean/views/inusers.ejs

@@ -75,23 +75,27 @@
           <div class="user-details">
             <div class="input-box">
               <span class="details">Full Name</span>
-              <input type="text" name="name" placeholder="Enter your name" required>
+              <input type="text" name="name"  id="name" placeholder="Enter your name" required>
             </div>
             <div class="input-box">
               <span class="details">Username</span>
-              <input type="text" name="username" placeholder="Enter your username" required>
+              <input type="text" name="username" id="username" placeholder="Enter your username" required>
             </div>
             <div class="input-box">
               <span class="details">Email</span>
-              <input type="text" name="email" placeholder="Enter your email" required>
+              <input type="text" name="email" id="email" placeholder="Enter your email" required>
             </div>
             <div class="input-box">
               <span class="details">Password</span>
-              <input type="password" name="password" placeholder="Enter your password" required>
+              <input type="password" name="password" id="password" placeholder="Enter your password" required>
+            </div>
+            <div class="input-box">
+              <span class="details">Confirm Password</span>
+              <input type="password" name="confirmPassword" id="confirmPassword" placeholder="Confirm your password" required>
             </div>
             <div class="input-box">
               <span class="details">Job Title</span>
-              <select name="jobTitle">
+              <select name="jobTitle" id="jobTitle">
                 <option value="admin">Admin</option>
                 <option value="dataAnalyst">Data Analyst</option>
               </select>
@@ -106,6 +110,7 @@
   </div>
 
   <!-- Your existing script tags -->
+  
   <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.4/xlsx.full.min.js"></script>
@@ -133,35 +138,90 @@ document.getElementById('userDataLink').addEventListener('click', function () {
 });
 
 document.getElementById('userForm').addEventListener('submit', function (event) {
-  event.preventDefault();
-  const formData = new FormData(this);
-  const newUser = {};
-  formData.forEach((value, key) => {
-    newUser[key] = value;
+    event.preventDefault();
+
+    // Use FormData directly
+    const formData = new FormData(document.getElementById('userForm'));
+
+    // Check password complexity
+    const password = formData.get('password');
+    const confirmPassword = formData.get('confirmPassword');
+
+    if (!isStrongPassword(password)) {
+      alert('Password does not meet complexity requirements. It must be at least 10 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one symbol.');
+      return;
+    }
+
+    // Check if passwords match
+    if (password !== confirmPassword) {
+      alert('Passwords do not match. Please enter the same password in both fields.');
+      return;
+    }
+
+    // Make a fetch request
+    fetch('/createUser', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: formData.get('name'),
+        username: formData.get('username'),
+        email: formData.get('email'),
+        password: password, // Use the validated password
+        jobTitle: formData.get('jobTitle'),
+      }),
+    })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        console.log('Success:', data);
+
+        // Show an alert with the received data
+        alert(`User Registered!`);
+
+        // Optionally, you can clear the form or take other actions after registration
+        document.getElementById('userForm').reset();
+      })
+      .catch(error => {
+        console.error('Fetch Error:', error);
+      });
   });
 
-  console.log('Form Data Before Sending:', newUser);
+  // Function to validate password complexity
+  function isStrongPassword(password) {
+    // Password must be at least 10 characters long
+    if (password.length < 10) {
+      return false;
+    }
+
+    // Password must contain at least one uppercase letter
+    if (!/[A-Z]/.test(password)) {
+      return false;
+    }
+
+    // Password must contain at least one lowercase letter
+    if (!/[a-z]/.test(password)) {
+      return false;
+    }
+
+    // Password must contain at least one digit
+    if (!/\d/.test(password)) {
+      return false;
+    }
+
+    // Password must contain at least one symbol
+    if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
+      return false;
+    }
+
+    return true;
+  }
 
-  fetch('/createUser', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(newUser),
-  })
-    .then(response => {
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-      return response.json();
-    })
-    .then(data => {
-      console.log('Success:', data);
-    })
-    .catch(error => {
-      console.error('Fetch Error:', error);
-    });
-})
 
     function downloadExcel(allUsers) {
       if (allUsers && allUsers.length > 0) {

Sean/views/login.ejs

@@ -55,19 +55,33 @@
     button:hover {
       background-color: #45a049;
     }
+    .error-message {
+      color: red;
+      margin-top: 10px;
+    }
   </style>
 </head>
 <body>
-  <form action="/login" method="post">
-    <h1>Admin Login</h1>
-    
-    <label for="username">Username:</label>
-    <input type="text" id="username" name="username" required>
-
-    <label for="password">Password:</label>
-    <input type="password" id="password" name="password" required>
-
-    <button type="submit">Login</button>
-  </form>
+  <div id="loginForm" class="user-creation-container">
+    <div class="title">Login</div>
+    <div class="content">
+      <form action="/login" method="post">
+        <% if (error) { %>
+          <div class="error-message"><%= error %></div>
+        <% } %>
+        <div class="input-box">
+          <span class="details">Username</span>
+          <input type="text" name="username" placeholder="Enter your username" required>
+        </div>
+        <div class="input-box">
+          <span class="details">Password</span>
+          <input type="password" name="password" placeholder="Enter your password" required>
+        </div>
+        <div class="button">
+          <input type="submit" value="Login">
+        </div>
+      </form>
+    </div>
+  </div>
 </body>
 </html>