109 lines
2.9 KiB
HTML
109 lines
2.9 KiB
HTML
<!--
|
|
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>
|
|
|