2025-02-07 16:02:54 +08:00
|
|
|
<!--
|
|
|
|
|
Author: Wai Lam
|
|
|
|
|
Date: 7/2/25
|
|
|
|
|
Description: login
|
|
|
|
|
-->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
2025-02-08 15:13:04 +08:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
2025-02-07 16:02:54 +08:00
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
</head>
|
2025-02-08 15:13:04 +08:00
|
|
|
<body>
|
|
|
|
|
<h1>Login</h1>
|
|
|
|
|
<div>
|
|
|
|
|
<form>
|
2025-02-07 16:02:54 +08:00
|
|
|
<div>
|
2025-02-08 15:13:04 +08:00
|
|
|
<label for="email">Email</label>
|
|
|
|
|
<input type="text" id="email" />
|
2025-02-07 16:02:54 +08:00
|
|
|
</div>
|
2025-02-08 15:13:04 +08:00
|
|
|
<div>
|
|
|
|
|
<label for="password">Password</label>
|
|
|
|
|
<input type="password" id="password" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="errorMessage" class="hidden text-red-500">
|
|
|
|
|
An error occurred.
|
|
|
|
|
</div>
|
|
|
|
|
<div id="userStatus" class="hidden text-green-500"></div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<button type="button" id="loginButton">Login</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button type="button" id="googleSignInButton">
|
|
|
|
|
Sign in with Google
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<a href="SignUp.html">Sign Up</a>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
2025-02-07 16:02:54 +08:00
|
|
|
<script type="module">
|
2025-02-08 15:13:04 +08:00
|
|
|
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.3.0/firebase-app.js";
|
|
|
|
|
import { firebaseConfig } from "./firebase-config.js";
|
|
|
|
|
import {
|
2025-02-07 16:02:54 +08:00
|
|
|
getAuth,
|
|
|
|
|
signInWithEmailAndPassword,
|
|
|
|
|
onAuthStateChanged,
|
2025-02-08 15:13:04 +08:00
|
|
|
GoogleAuthProvider,
|
|
|
|
|
signInWithPopup,
|
2025-02-07 16:02:54 +08:00
|
|
|
signOut,
|
|
|
|
|
} from "https://www.gstatic.com/firebasejs/11.3.0/firebase-auth.js";
|
2025-02-08 15:13:04 +08:00
|
|
|
|
2025-02-07 16:02:54 +08:00
|
|
|
const app = initializeApp(firebaseConfig);
|
|
|
|
|
const auth = getAuth();
|
|
|
|
|
|
|
|
|
|
document.getElementById("loginButton").onclick = login;
|
2025-02-08 15:13:04 +08:00
|
|
|
document.getElementById("googleSignInButton").onclick = signInWithGoogle;
|
|
|
|
|
|
|
|
|
|
const userStatusDiv = document.getElementById("userStatus");
|
|
|
|
|
const errorMessageDiv = document.getElementById("errorMessage");
|
|
|
|
|
|
|
|
|
|
// Sign out any existing user on page load to prevent auto sign-in
|
|
|
|
|
signOut(auth);
|
2025-02-07 16:02:54 +08:00
|
|
|
|
|
|
|
|
onAuthStateChanged(auth, (user) => {
|
|
|
|
|
if (user) {
|
2025-02-08 15:13:04 +08:00
|
|
|
userStatusDiv.innerHTML = `Signed in as: <strong>${
|
|
|
|
|
user.displayName || user.email
|
|
|
|
|
}</strong>`;
|
|
|
|
|
userStatusDiv.classList.remove("hidden");
|
2025-02-07 16:02:54 +08:00
|
|
|
} else {
|
2025-02-08 15:13:04 +08:00
|
|
|
userStatusDiv.innerHTML = "";
|
|
|
|
|
userStatusDiv.classList.add("hidden");
|
2025-02-07 16:02:54 +08:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function login() {
|
|
|
|
|
const email = document.getElementById("email").value;
|
|
|
|
|
const password = document.getElementById("password").value;
|
|
|
|
|
|
|
|
|
|
signInWithEmailAndPassword(auth, email, password)
|
2025-02-08 15:13:04 +08:00
|
|
|
.then(() => {
|
|
|
|
|
errorMessageDiv.classList.add("hidden");
|
2025-02-07 16:02:54 +08:00
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
const errorCode = error.code;
|
2025-02-08 15:13:04 +08:00
|
|
|
let message = "An error occurred. Please try again.";
|
2025-02-07 16:02:54 +08:00
|
|
|
|
|
|
|
|
if (
|
|
|
|
|
errorCode === "auth/wrong-password" ||
|
|
|
|
|
errorCode === "auth/user-not-found"
|
|
|
|
|
) {
|
2025-02-08 15:13:04 +08:00
|
|
|
message = "Wrong Email/Password!";
|
2025-02-07 16:02:54 +08:00
|
|
|
}
|
2025-02-08 15:13:04 +08:00
|
|
|
|
|
|
|
|
errorMessageDiv.innerHTML = `<strong>${message}</strong>`;
|
|
|
|
|
errorMessageDiv.classList.remove("hidden");
|
2025-02-07 16:02:54 +08:00
|
|
|
});
|
|
|
|
|
}
|
2025-02-08 15:13:04 +08:00
|
|
|
// if you are testing in live server please add that server domain to the authorized domain if not the pop up will not show up
|
|
|
|
|
function signInWithGoogle() {
|
|
|
|
|
const provider = new GoogleAuthProvider();
|
|
|
|
|
provider.setCustomParameters({
|
|
|
|
|
prompt: "select_account", // Forces account selection every time
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
signInWithPopup(auth, provider)
|
|
|
|
|
.then(() => {
|
|
|
|
|
errorMessageDiv.classList.add("hidden");
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
errorMessageDiv.innerHTML = `<strong>Google Sign-In failed. Please try again.</strong>`;
|
|
|
|
|
errorMessageDiv.classList.remove("hidden");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2025-02-07 16:02:54 +08:00
|
|
|
</body>
|
|
|
|
|
</html>
|
