login and register's files updated

a7med3sam · Jul 12, 2024 · 31c2ef9 · 31c2ef9
1 parent 30f84b8
commit 31c2ef9
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 56 deletions.
diff --git a/js/login.js b/js/login.js
@@ -1,3 +1,7 @@
+import {getUsersArr} from "./register.js";
+
+let form = document.getElementsByClassName("form")[0];
+
 let email = document.getElementById("email");
 let spanEmail = document.getElementById("span-email");
 
@@ -6,6 +10,31 @@ let spanPass = document.getElementById("span-pw");
 
 function validate(e){
     e.preventDefault();
+    if (email.value === "") {
+        spanEmail.textContent = "Required!";
+        email.style.outline =  "1px solid #d00707";
+      } else {
+        spanEmail.textContent = "";
+      }
+
+      if (passWord.value === "") {
+        spanPass.textContent = "Required!";
+        passWord.style.outline =  "1px solid #d00707";
+      } else {
+        spanPass.textContent = "";
+      }
+
+     const users = getUsersArr();    
+     const user = users.find(u => u.email === email.value && u.password === passWord.value);
+
+      if (user) {
+        alert("Login successful!");
+
+      } else {
+        alert("Please try again.");
+      }
 
 }
+form.addEventListener("submit", validate);
+
 
diff --git a/js/register.js b/js/register.js
@@ -24,9 +24,11 @@ function validation(event) {
 
   if (firstName.value === "") {
     spanFirstName.textContent = "Required!";
+    firstName.style.outline = "1px solid #d00707";
     err = true;
   } else if (!rejxname.test(firstName.value)) {
     spanFirstName.textContent = "Enter A Character!";
+    firstName.style.outline = "1px solid #d00707";
     err = true;
   } else {
     spanFirstName.textContent = "";
@@ -35,9 +37,11 @@ function validation(event) {
 
   if (lastName.value === "") {
     spanLastName.textContent = "Required!";
+    lastName.style.outline = "1px solid #d00707";
     err = true;
   } else if (!rejxname.test(lastName.value)) {
     spanLastName.textContent = "Enter A Character!";
+    lastName.style.outline = "1px solid #d00707";
     err = true;
   } else {
     spanLastName.textContent = "";
@@ -46,9 +50,11 @@ function validation(event) {
 
   if (email.value === "") {
     spanEmail.textContent = "Required!";
+    email.style.outline = "1px solid #d00707";
     err = true;
   } else if (!regxEmail.test(email.value)) {
     spanEmail.textContent = "Enter A Character!";
+    email.style.outline = "1px solid #d00707";
     err = true;
   } else {
     spanEmail.textContent = "";
@@ -57,9 +63,11 @@ function validation(event) {
 
   if (passWord.value === "") {
     spanPass.textContent = "Required!";
+    passWord.style.outline = "1px solid #d00707";
     err = true;
   } else if (!rejxPass.test(passWord.value)) {
     spanPass.textContent = "Enter A Password!";
+    passWord.style.outline = "1px solid #d00707";
     err = true;
   } else {
     spanPass.textContent = "";
@@ -68,29 +76,27 @@ function validation(event) {
 
   if (reEnterPass.value === "") {
     spanPass.textContent = "Required!";
+    reEnterPass.style.outline = "1px solid #d00707";
     err = true;
   } else if (reEnterPass.value !== passWord.value) {
     spanReEnterPw.textContent = "Passwords do not match!";
+    reEnterPass.style.outline = "1px solid #d00707";
     err = true;
   } else {
-    spanPass.textContent = "";
+    spanReEnterPw.textContent = "";
     err = false;
   }
 
   if (!err) {
-    const u = new User(
-      firstName.value,
-      lastName.value,
-      email.value,
-      passWord.value
-    );
+    const u = new User(firstName.value, lastName.value, email.value, passWord.value);
     let users = getUsersArr();
     users.push(u);
     localStorage.setItem("users", JSON.stringify(users));
+    location.replace("/login.html");
   }
 }
-function getUsersArr() {
-  let users = localStorage.getItem("users");
+export function getUsersArr() {
+  const users = localStorage.getItem("users");
   return users ? JSON.parse(users) : []; // law fe users array hatha lw mafesh e3mle array
 }
 
@@ -104,3 +110,5 @@ class User {
     this.password = p;
   }
 }
+
+
diff --git a/login.html b/login.html
@@ -4,24 +4,36 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Log In</title>
+    <link rel="stylesheet" href="/style/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
   </head>
   <body>
     <div class="container">
-      <h2>Log In</h2>
+      <form class="form">
+        <div class="title">
+          <i class="fa-solid fa-right-to-bracket"></i>
+          <h2>Log In</h2>
+        </div>
       <div class="form-group">
-        <label for="email">Email Address:</label>
-        <input type="email" id="email" name="email" />
+        <div class="form-input">
+        <label for="email">Email Address</label>
+        <input type="email" id="email" name="email" placeholder="Email" />
+        </div>
         <span id="span-email"></span>
       </div>
       <div class="form-group">
-        <label for="password">Password:</label>
-        <input type="password" id="password" name="password" />
+        <div class="form-input">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" placeholder="Password" />
+        </div>
         <span id="span-pw"></span>
       </div>
       <div class="from-group">
         <input id="submit" type="submit" value="Log In">
       </div>
+    </form>
     </div>
-    <script src="js/login.js"></script>
+
+    <script type="module" src="js/login.js"></script>
   </body>
 </html>
diff --git a/register.html b/register.html
@@ -1,49 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Register</title>
-    <style>
-        #span-first-name {
-            color: red;
-        }
-    </style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Register</title>
+  <link rel="stylesheet" href="/style/style.css" />
+  <link href="https://fonts.googleapis.com/css?family=Nunito:400,300" rel="stylesheet" type="text/css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
 </head>
+
 <body>
-    <div class="container">
+  <div class="container">
+    <form class="form">
+      <div class="title">
+        <i class="fa-solid fa-pen-to-square"></i>
         <h2>Sign Up</h2>
-        <form class="form">
-            <div class="form-group">
-                <label for="firstName">First Name:</label>
-                <input type="text" id="firstName" name="firstName">
-                <span id="span-first-name"></span>
-            </div>
-            <div class="form-group">
-                <label for="lastName">Last Name:</label>
-                <input type="text" id="lastName" name="lastName">
-                <span id="span-last-name"></span>
-            </div>
-            <div class="form-group">
-                <label for="email">Email Address:</label>
-                <input type="email" id="email" name="email">
-                <span id="span-email"></span>
-            </div>
-            <div class="form-group">
-                <label for="password">Password:</label>
-                <input type="password" id="password" name="password">
-                <span id="span-pw"></span>
-            </div>
-            <div class="form-group">
-                <label for="reEnterPassword">Re-enter Password:</label>
-                <input type="password" id="reEnterPassword" name="reEnterPassword">
-                <span id="span-reEnter"></span>
-            </div>
-            <div class="form-group">
-                <input id="submit" type="submit" value="Register">
-            </div>
-        </form>
-    </div>
-    <script src="js/register.js"></script>
+      </div>
+
+      <div class="form-group">
+        <div class="form-input">
+          <label for="firstName">First Name</label>
+          <input type="text" id="firstName" name="firstName" placeholder="firstname" />
+          <span id="span-first-name"></span>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="form-input">
+          <label for="lastName">Last Name</label>
+          <input type="text" id="lastName" name="lastName" placeholder="lastname" />
+          <span id="span-last-name"></span>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="form-input">
+          <label for="email">Email Address</label>
+          <input type="email" id="email" name="email" placeholder="[email protected]" />
+          <span id="span-email"></span>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="form-input">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" placeholder="password" />
+          <span id="span-pw"></span>
+        </div>
+      </div>
+      <div class="form-group">
+        <div class="form-input">
+          <label for="reEnterPassword">Re-enter Password</label>
+          <input type="password" id="reEnterPassword" name="reEnterPassword" placeholder="password" />
+          <span id="span-reEnter"></span>
+        </div>
+      </div>
+      <div class="form-btn">
+        <input id="submit" type="submit" value="Sign Up" />
+      </div>
+    </form>
+  </div>
+  <script type="module" src="js/register.js"></script>
 </body>
+
 </html>