Merge pull request #60 from Anupkjha2601/revert-50-main

Revert "Fixes Issue #49: Updated Log in and Sign-Up pages for better UI and also Optimized code for various sections."
Anupkjha2601 · Dec 27, 2023 · e5b18c2 · e5b18c2
2 parents b59de94 + ec5a10b
commit e5b18c2
Show file tree

Hide file tree

Showing 9 changed files with 435 additions and 478 deletions.
diff --git a/login-page.js b/login-page.js
@@ -0,0 +1,21 @@
+const loginForm = document.getElementById("login-form");
+const loginButton = document.getElementById("login-form-submit");
+const loginErrorMsg = document.getElementById("login-error-msg");
+
+// When the login button is clicked, the following code is executed
+loginButton.addEventListener("click", (e) => {
+    // Prevent the default submission of the form
+    e.preventDefault();
+    // Get the values input by the user in the form fields
+    const username = loginForm.username.value;
+    const password = loginForm.password.value;
+
+    if (username === "user" && password === "web_dev") {
+        // If the credentials are valid, show an alert box and redirect to about.html
+        // alert("You have successfully logged in.");
+        window.location.href = 'about.html'; // Redirect to about.html after successful login
+    } else {
+        // Otherwise, make the login error message show
+        loginErrorMsg.style.opacity = 1;
+    }
+});
diff --git a/login.css b/login.css
diff --git a/login.html b/login.html
@@ -1,54 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Login - Foodie Blog</title>
-
-  <!-- Add Open Graph Protocol (OGP) meta tags -->
-  <meta property="og:title" content="Log In - Foodie Blog">
-  <meta property="og:description" content="Log In to your Foodie Blog account. Join our community!">
-  <meta property="og:image" content="assets/images/foodie-blog.png">
-  <meta property="og:url" content="https://thankful-smoke-06e585e10.1.azurestaticapps.net/login.html">
-  <meta name="og:site_name" content="Foodie Blog">
-
-  <!-- Combine external CSS files -->
-  <link rel="stylesheet" href="login.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
-
-  <!-- Asynchronous loading of external scripts -->
-  <script defer src="login.js"></script>
-  <script defer src="script.js"></script>
-
-</head>
-<body>
-  <div class="wrapper">
-    <header>Login - Foodie Blog</header>
-    <form action="#">
-      <div class="field email">
-        <label for="email"><h3>Enter your Email address:</h3></label>
-        <div class="input-area">
-          <input type="text" placeholder="Email Address">
-          <i class="icon fas fa-envelope"></i>
-          <i class="error error-icon fas fa-exclamation-circle"></i>
-        </div>
-        <div class="error error-txt">Email can't be blank</div>
-      </div>
-      <div class="field password">
-        <label for="email"><h3>Enter your Password: </h3></label>
-        <div class="input-area">
-          <input type="password" placeholder="Password">
-          <i class="icon fas fa-lock"></i>
-          <i class="error error-icon fas fa-exclamation-circle"></i>
-        </div>
-        <div class="error error-txt">Password can't be blank</div>
-      </div>
-      <div class="pass-txt"><a href="#">Forgot password?</a></div>
-      <input type="submit" value="Login">
-    </form>
-    <div class="sign-txt">Not yet a member? <a href="signup.html">Signup now</a></div>
-  </div>
-=======
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login Page</title>
@@ -107,4 +59,4 @@ <h2>Login</h2>
         });
     </script>
 </body>
-</html>
+</html>
diff --git a/login.js b/login.js