Merge pull request #147 from riyaaryan2004/main

sign up/login page created with firebase authentication

firebase.js

@@ -0,0 +1,133 @@
+// Firebase configuration
+  const firebaseConfig = { 
+    apiKey: "",
+    authDomain: "",
+    projectId: "",
+    storageBucket: "",
+    messagingSenderId: "",
+    appId: "",
+    measurementId: "",
+  };
+
+  // Initialize Firebase
+  firebase.initializeApp(firebaseConfig);
+
+  // Initialize Firebase Auth
+  const auth = firebase.auth();
+
+  // Google Authentication function
+  function signInWithGoogle() {
+    var provider = new firebase.auth.GoogleAuthProvider();
+
+    auth
+      .signInWithPopup(provider)
+      .then((result) => {
+        const user = result.user;
+        console.log("User signed in:", user);
+
+        // Redirect to dashboard or any page after successful login
+        window.location.href = "book.html";
+      })
+      .catch((error) => {
+        console.log("Error during sign-in:", error);
+      });
+  }
+
+
+  function signUpWithEmailAndPassword(email, password, name) {
+    auth.createUserWithEmailAndPassword(email, password)
+        .then((userCredential) => {
+            // Successfully created new user
+            const user = userCredential.user;
+            console.log("User signed up:", user);
+
+            // Optionally, save additional user information (like name) in your database
+
+            // Redirect to dashboard or any page after successful sign-up
+            window.location.href = "book.html";
+        })
+        .catch((error) => {
+            const errorCode = error.code;
+            const errorMessage = error.message;
+            console.error("Error during sign-up:", errorCode, errorMessage);
+            // Optionally, display an error message to the user
+            alert(errorMessage);
+        });
+  }
+  // Password validation function
+  function validatePassword(password) {
+    const minLength = 8; // Minimum length
+    const hasUpperCase = /[A-Z]/.test(password); // At least one uppercase letter
+    const hasLowerCase = /[a-z]/.test(password); // At least one lowercase letter
+    const hasNumber = /\d/.test(password); // At least one digit
+    const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password); // At least one special character
+
+    if (password.length < minLength) {
+        return "Password must be at least 8 characters long.";
+    }
+    if (!hasUpperCase) {
+        return "Password must contain at least one uppercase letter.";
+    }
+    if (!hasLowerCase) {
+        return "Password must contain at least one lowercase letter.";
+    }
+    if (!hasNumber) {
+        return "Password must contain at least one number.";
+    }
+    if (!hasSpecialChar) {
+        return "Password must contain at least one special character.";
+    }
+
+    return null; // Return null if all conditions are met
+  }
+
+  function loginWithEmailAndPassword(email, password) {
+    auth.signInWithEmailAndPassword(email, password)
+        .then((userCredential) => {
+            const user = userCredential.user;
+            console.log("User logged in:", user);
+            window.location.href = "book.html";
+        })
+        .catch((error) => {
+            const errorCode = error.code;
+            const errorMessage = error.message;
+            console.error("Error during login:", errorCode, errorMessage);
+            alert(errorMessage); 
+        });
+  } 
+
+  // Add event listener to Google sign-up button
+  document.querySelector(".google-btn").addEventListener("click", function (e) {
+    e.preventDefault(); // Prevent default link behavior
+    signInWithGoogle(); 
+  });
+
+
+  document.getElementById('signupForm').addEventListener('submit', function(e) {
+    e.preventDefault(); // Prevent default form submission
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+    const confirmPassword = document.getElementById('confirm-password').value;
+
+    if (password !== confirmPassword) {
+        alert("Passwords do not match!");
+        return;
+    }
+    const passwordError = validatePassword(password);
+      if (passwordError) {
+          alert(passwordError);
+          return;
+      }
+    signUpWithEmailAndPassword(email, password, name);
+  });
+
+
+document.getElementById('loginForm').addEventListener('submit', function (e) {
+  e.preventDefault(); // Prevent default form submission
+  const email = document.getElementById('email').value;
+  const password = document.getElementById('password').value;
+
+  // Call the login function
+  loginWithEmailAndPassword(email, password);
+});

index.html

@@ -75,14 +75,15 @@
     <header class="main-head">
       <nav>
         <h1 id="logo">BuddyTrail</h1>
-        <ul>
-          <li><a href="#locations" class="navhover">Location</a></li>
-          <li>
-            <a href="#itineraries " class="navhover">Travel Itineraries</a>
-          </li>
-          <li><a href="#reviews" class="navhover">Reviews</a></li>
-          <li><a href="#benefits" class="navhover">Benefits</a></li>
-          <li><a href="#contact" class="navhover">Contact</a></li>
+        <ul >
+          <li><a href="#home" class='navhover '>Home</a></li>
+          <li><a href="#locations" class='navhover '>Location</a></li>
+          <li><a href="#itineraries " class='navhover'>Travel Itineraries</a></li>
+          <li><a href="#reviews" class='navhover'>Reviews</a></li>
+          <li><a href="#benefits" class='navhover'>Benefits</a></li>
+          <li><a href="#contact" class='navhover'>Contact</a></li>
+          <li><a href="signUp.html" class='navhover'>Sign In</a></li>
+
         </ul>
         <!-- Toggle Button -->
         <button class="mode-toggle" id="modeToggle">

login.css

@@ -0,0 +1,139 @@
+/* General Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5; /* Light background for contrast */
+    color: #333; /* Dark text for readability */
+}
+
+/* Header Styles */
+.main-head {
+    background: #131c27; /* Dark background for the header */
+    color: white;
+    position: sticky;
+    top: 0;
+    z-index: 5;
+}
+
+/* Container for centering the form */
+.container {
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    height: 100vh; 
+}
+
+/* Login box styling */
+.login-box {
+    position: fixed;
+    top: 24%;
+    background: #fff; /* Clean white background for contrast */
+    border-radius: 12px; /* More rounded corners for a modern feel */
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow for depth */
+    padding: 2.5rem; /* Increased padding for better spacing */
+    width: 100%; 
+    max-width: 450px; /* Slightly larger width */
+    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effects */
+}
+
+.login-box h2 {
+    margin-bottom: 1.5rem; /* Increased space below the heading */
+    font-size: 1.8rem; /* Larger font size for emphasis */
+    color: #131c27; /* Consistent with header color */
+    text-align: center; 
+}
+
+/* Google Login Button */
+.google-login {
+    margin-bottom: 1rem; 
+}
+
+.google-btn {
+    display: flex; 
+    justify-content: space-around;
+    align-items: center; 
+    background-color: white; 
+    color: rgb(23, 23, 23); 
+    border-radius: 20px; 
+    padding: 5px 5px; 
+    text-decoration: none; 
+    font-weight: 600; 
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
+    transition: transform 0.3s ease;
+    max-width: 250px; 
+    font-size: 15px; 
+    margin: 0 auto;
+    margin-bottom: 15px;
+    border: none; 
+    outline: none;
+}
+
+.google-btn img {
+    width: 30px; 
+    height: 30px; 
+    margin-right: 0px; 
+    background-color: white;
+}
+
+.google-btn:hover {
+    transform: scale(1.05); 
+}
+
+/* Input field styling */
+.input-field {
+    margin-bottom: 1.2rem; 
+}
+
+.input-field label {
+    display: block; 
+    margin-bottom: 0.5rem; 
+    font-weight: bold; 
+}
+
+.input-field input {
+    width: 100%; 
+    padding: 10px;
+    border: 1px solid #ccc; 
+    border-radius: 5px; 
+    font-size: 1rem; 
+}
+
+/* Submit button styling */
+.input-field button {
+    width: 100%; 
+    margin-top: 5px;
+    padding: 15px; /* Increased padding for a larger button */
+    border: none;
+    border-radius: 8px; /* More rounded button */
+    background-color: #4a8ae4; /* Bright teal background */
+    color: white; 
+    font-size: 1.7rem; /* Larger font size */
+    cursor: pointer; 
+    transition: background-color 0.3s, transform 0.3s; /* Added smooth transitions */
+}
+
+.input-field button:hover {
+    background-color: #012e49; 
+}
+
+/* Styling for the sign-in link below the submit button */
+.signUp-link {
+    text-align: center; /* Center the link */
+    margin-top: 1rem; /* Add some space above the link */
+    font-size: 5px;
+}
+
+.signUp-link a {
+    color: #3066dc; /* Match the link color with the theme */
+    text-decoration: none; /* Remove underline from the link */
+    font-weight: 100; /* Make the link text bold */
+}
+
+.signUp-link a:hover {
+    text-decoration: underline; /* Add underline on hover for better UX */
+}

login.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login</title>
+    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="login.css" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+</head>
+<body>
+    <header class="main-head">
+        <nav>
+            <h1 id="logo">BuddyTrail</h1>
+            <ul>
+                <li><a href="#locations" class='navhover'>Location</a></li>
+                <li><a href="#itineraries" class='navhover'>Travel Itineraries</a></li>
+                <li><a href="#reviews" class='navhover'>Reviews</a></li>
+                <li><a href="#benefits" class='navhover'>Benefits</a></li>
+                <li><a href="#contact" class='navhover'>Contact</a></li>
+                <li><a href="signIn.html" class='navhover'>Sign In</a></li>
+            </ul>
+            <!-- Toggle Button -->
+            <button class="mode-toggle" id="modeToggle">
+                <span class="sun-icon glow">☀️</span>
+            </button>
+        </nav>
+    </header>
+
+    <div class="container">
+        <div class="login-box">
+            <h2>Login</h2>
+            <!-- Google Login Option -->
+            <div class="google-login">
+                <a class="google-btn">
+                    <img src="img/googleLogo.png" alt="Google Logo" />
+                    Continue with Google
+                </a>
+            </div>
+
+            <p>Or login using your email:</p>
+
+            <form id="loginForm" action="book.html" method="POST">
+                <div class="input-field">
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" name="email" required />
+                </div>
+                <div class="input-field">
+                    <label for="password">Password:</label>
+                    <input type="password" id="password" name="password" required />
+                </div>
+                <div class="input-field">
+                    <button type="submit">Continue</button>
+                </div>
+            </form>
+
+            <div class="signUp-link">
+                <p>Don't have an account? <a href="signUp.html">Sign up</a></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Include Firebase SDKs before your custom script -->
+    <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.18.0/firebase-auth-compat.js"></script>
+    <script src="firebase.js"></script>
+</body>
+</html>