wirm/Web/SignUp.html

87 lines
2.5 KiB
HTML
Raw Normal View History

2025-02-07 16:02:54 +08:00
<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>
<div>
<h1>Sign Up</h1>
<div>
<form id="frmCreateUser">
<div>
<label for="email">Email</label>
<input
type="text"
id="signupemail"
/>
</div>
<div>
<label for="password">Password</label>
<input
type="password"
id="signuppassword"
/>
</div>
<button
type="submit"
id="SignUpButton"
>
Sign Up
</button>
</form>
</div>
</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";
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();
// Form submit listener
const frmCreateUser = document.getElementById("frmCreateUser");
frmCreateUser.addEventListener("submit", function (e) {
e.preventDefault();
// Retrieve input values
const email = document.getElementById("signupemail").value.trim();
const password = document.getElementById("signuppassword").value.trim();
// Create a new user in Firebase Authentication
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
console.log("User successfully created:", userCredential.user);
// Redirect to login page after successful registration
window.location.href = "Login.html";
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error(`Error creating user: ${errorCode} - ${errorMessage}`);
alert(`Error: ${errorMessage}`);
});
});
</script>
</body>
</html>