180 lines
8.1 KiB
HTML
180 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EventBee - Login</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body class="auth-body">
|
|
|
|
<div class="auth-container">
|
|
<!-- Left Side -->
|
|
<div class="auth-brand">
|
|
<div class="brand-content">
|
|
<div class="logo">
|
|
<div class="logo-icon"><i class="fas fa-calendar-check"></i></div>
|
|
<span>EventBee</span>
|
|
</div>
|
|
<h2>Start your journey with us.</h2>
|
|
<p>Discover the best events happening around you. Login to explore, connect, and create memories.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side Forms -->
|
|
<div class="auth-forms">
|
|
|
|
<!-- Login Form -->
|
|
<div class="form-box" id="loginBox">
|
|
<div class="form-header">
|
|
<h1>Welcome Back</h1>
|
|
<p>Login to continue</p>
|
|
</div>
|
|
|
|
<div class="social-login">
|
|
<button class="google-btn" id="googleLoginBtn">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="G">
|
|
Sign in with Google
|
|
</button>
|
|
<!-- NEW: Guest Login Button -->
|
|
<button class="google-btn" id="guestLoginBtn" style="background: #f0f2f5; border: 1px solid #ccc;">
|
|
<i class="fas fa-user-secret" style="font-size: 20px; color: #555;"></i>
|
|
Continue as Guest
|
|
</button>
|
|
</div>
|
|
|
|
<div class="divider"><span>or use email</span></div>
|
|
|
|
<form id="loginForm">
|
|
<div class="input-group-auth"><i class="fas fa-envelope"></i><input type="email" id="loginEmail" placeholder="Email" required></div>
|
|
<div class="input-group-auth"><i class="fas fa-lock"></i><input type="password" id="loginPassword" placeholder="Password" required></div>
|
|
<button type="submit" class="btn-submit-auth">Login</button>
|
|
</form>
|
|
<div class="switch-auth"><p>Don't have an account? <a id="showSignupBtn">Sign Up</a></p></div>
|
|
</div>
|
|
|
|
<!-- Signup Form -->
|
|
<div class="form-box hidden" id="signupBox">
|
|
<div class="form-header">
|
|
<h1>Create Account</h1>
|
|
<p>Join EventBee today</p>
|
|
</div>
|
|
<div class="social-login">
|
|
<button class="google-btn" id="googleSignupBtn">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" alt="G">
|
|
Sign up with Google
|
|
</button>
|
|
</div>
|
|
<div class="divider"><span>or register with email</span></div>
|
|
<form id="signupForm">
|
|
<div class="input-group-auth"><i class="fas fa-user"></i><input type="text" id="signupName" placeholder="Full Name" required></div>
|
|
<div class="input-group-auth"><i class="fas fa-envelope"></i><input type="email" id="signupEmail" placeholder="Email" required></div>
|
|
<div class="input-group-auth"><i class="fas fa-lock"></i><input type="password" id="signupPassword" placeholder="Password" required></div>
|
|
<button type="submit" class="btn-submit-auth">Sign Up</button>
|
|
</form>
|
|
<div class="switch-auth"><p>Already have an account? <a id="showLoginBtn">Login</a></p></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
|
|
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script>
|
|
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore-compat.js"></script>
|
|
|
|
<script>
|
|
// ==========================================
|
|
// 1. FIREBASE CONFIG
|
|
// ==========================================
|
|
const firebaseConfig = {
|
|
apiKey: "AIzaSyB_Fv9HLMOy9cCHT2cZLLwRQOGGBHA_8N0",
|
|
authDomain: "myapp-94cf9.firebaseapp.com",
|
|
projectId: "myapp-94cf9",
|
|
storageBucket: "myapp-94cf9.firebasestorage.app",
|
|
messagingSenderId: "542065139667",
|
|
appId: "1:542065139667:web:76ed67d78188ff3e6dd926"
|
|
};
|
|
|
|
firebase.initializeApp(firebaseConfig);
|
|
const auth = firebase.auth();
|
|
const db = firebase.firestore();
|
|
|
|
// ==========================================
|
|
// 2. AUTH STATE LISTENER
|
|
// ==========================================
|
|
auth.onAuthStateChanged(user => {
|
|
if (user) {
|
|
window.location.href = 'home.html';
|
|
}
|
|
});
|
|
|
|
// ==========================================
|
|
// 3. UI SWITCHING
|
|
// ==========================================
|
|
const loginBox = document.getElementById('loginBox');
|
|
const signupBox = document.getElementById('signupBox');
|
|
|
|
document.getElementById('showSignupBtn').addEventListener('click', () => {
|
|
loginBox.classList.add('hidden');
|
|
signupBox.classList.remove('hidden');
|
|
});
|
|
|
|
document.getElementById('showLoginBtn').addEventListener('click', () => {
|
|
signupBox.classList.add('hidden');
|
|
loginBox.classList.remove('hidden');
|
|
});
|
|
|
|
// ==========================================
|
|
// 4. LOGIN LOGIC
|
|
// ==========================================
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const email = document.getElementById('loginEmail').value;
|
|
const pass = document.getElementById('loginPassword').value;
|
|
try {
|
|
await auth.signInWithEmailAndPassword(email, pass);
|
|
} catch (err) { alert(err.message); }
|
|
});
|
|
|
|
// Google Login
|
|
document.getElementById('googleLoginBtn').addEventListener('click', async () => {
|
|
const provider = new firebase.auth.GoogleAuthProvider();
|
|
try { await auth.signInWithPopup(provider); } catch (err) { alert(err.message); }
|
|
});
|
|
|
|
// NEW: Guest Login
|
|
document.getElementById('guestLoginBtn').addEventListener('click', async () => {
|
|
try {
|
|
await auth.signInAnonymously();
|
|
} catch (err) {
|
|
alert(err.message);
|
|
}
|
|
});
|
|
|
|
// ==========================================
|
|
// 5. SIGNUP LOGIC
|
|
// ==========================================
|
|
document.getElementById('signupForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const name = document.getElementById('signupName').value;
|
|
const email = document.getElementById('signupEmail').value;
|
|
const pass = document.getElementById('signupPassword').value;
|
|
|
|
try {
|
|
const cred = await auth.createUserWithEmailAndPassword(email, pass);
|
|
await cred.user.updateProfile({ displayName: name });
|
|
await db.collection('users').doc(cred.user.uid).set({ name, email });
|
|
} catch (err) { alert(err.message); }
|
|
});
|
|
|
|
document.getElementById('googleSignupBtn').addEventListener('click', async () => {
|
|
const provider = new firebase.auth.GoogleAuthProvider();
|
|
try { await auth.signInWithPopup(provider); } catch (err) { alert(err.message); }
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |