diff --git a/firebase.js b/firebase.js new file mode 100644 index 00000000..8ae45553 --- /dev/null +++ b/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); +}); diff --git a/img/googleLogo.png b/img/googleLogo.png new file mode 100644 index 00000000..f8dc93ee Binary files /dev/null and b/img/googleLogo.png differ diff --git a/index.html b/index.html index b5e4b9e5..bf62152a 100644 --- a/index.html +++ b/index.html @@ -75,14 +75,15 @@
+
+ +
+
+

Login

+ + + +

Or login using your email:

+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + + + + + + diff --git a/signUp.css b/signUp.css new file mode 100644 index 00000000..6e7d64ae --- /dev/null +++ b/signUp.css @@ -0,0 +1,135 @@ +/* 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 { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.signup-box { + position: fixed; + top: 24%; + margin-top: 0px; + 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 */ +} + + +.signup-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-signup { + 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 { + 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; +} + +.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; +} + +.signin-link { + text-align: center; /* Center the link */ + margin-top: 1rem; /* Add some space above the link */ + font-size: 5px; +} + +.signin-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 */ +} + +.signin-link a:hover { + text-decoration: underline; /* Add underline on hover for better UX */ +} \ No newline at end of file diff --git a/signUp.html b/signUp.html new file mode 100644 index 00000000..1b6dc829 --- /dev/null +++ b/signUp.html @@ -0,0 +1,79 @@ + + + + + + Sign in + + + + + +
+ +
+ +
+
+

Create Account

+ + + +

Or sign up using your email:

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ + + + + +