From 7a15ce1d8408310d8939f8446037f6f931cb43dc Mon Sep 17 00:00:00 2001 From: riya Date: Sat, 5 Oct 2024 17:32:49 +0530 Subject: [PATCH] login/signup page added , firebase authentication added --- firebase.js | 133 +++++++++++++++++++++++++++++++++++++++++++ img/googleLogo.png | Bin 0 -> 5199 bytes index.html | 2 + login.css | 139 +++++++++++++++++++++++++++++++++++++++++++++ login.html | 68 ++++++++++++++++++++++ signUp.css | 135 +++++++++++++++++++++++++++++++++++++++++++ signUp.html | 79 ++++++++++++++++++++++++++ 7 files changed, 556 insertions(+) create mode 100644 firebase.js create mode 100644 img/googleLogo.png create mode 100644 login.css create mode 100644 login.html create mode 100644 signUp.css create mode 100644 signUp.html 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 0000000000000000000000000000000000000000..f8dc93ee2e1a724ae774d76dc3d18a9f213ee8af GIT binary patch literal 5199 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 JPDHLkV1h6g#XJB2 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index f7581f32..8072fb69 100644 --- a/index.html +++ b/index.html @@ -59,11 +59,13 @@ + + +
+ +
+ + + + + + + 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 + + + + + +
+ +
+ +
+ +
+ + + + + +