<!--
Author: Wai Lam
Date: 7/2/25
Description: login
-->
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-sale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1>Login</h1>
<div>
<form >
<div >
<label for="email" >Email</label>
<input
type="text"
id="email"
/>
</div>
<div>
<label for="password">Password</label>
<input
type="password"
id="password"
/>
</div>
<div
id="errorMessage"
></div>
<div>
<button
type="button"
id="loginButton">
Login
</button>
</div>
<div>
<a
href="SignUp.html"
>
Sign Up
</a>
</div>
</form>
</div>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
import { firebaseConfig } from "./firebase-config.js";
// Initialize Firebase
import {
//determine which services you want to use
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
onAuthStateChanged,
signOut,
} from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js";
const app = initializeApp(firebaseConfig);
//Working with Auth
const auth = getAuth();
document.getElementById("loginButton").onclick = login;
// Handle Auth State Change Event
onAuthStateChanged(auth, (user) => {
if (user) {
console(`Login successful`);
} else {
}
});
function login() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const errorMessageDiv = document.getElementById("errorMessage");
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
})
.catch((error) => {
const errorCode = error.code;
if (
errorCode === "auth/wrong-password" ||
errorCode === "auth/user-not-found"
) {
} else {
errorMessageDiv.textContent = "Wrong Email/Password!";
}
});
}
</script>
</body>
</html>