From bd14859c75e53592ec4b57f0cc297faa258b97d8 Mon Sep 17 00:00:00 2001
From: yauwailam <s10258533@connect.np.edu.sg>
Date: Fri, 7 Feb 2025 16:02:54 +0800
Subject: [PATCH] simple auth on web

---
 Web/Login.html         | 109 +++++++++++++++++++++++++++++++++++++++++
 Web/SignUp.html        |  86 ++++++++++++++++++++++++++++++++
 Web/firebase-config.js |   9 ++++
 3 files changed, 204 insertions(+)
 create mode 100644 Web/Login.html
 create mode 100644 Web/SignUp.html
 create mode 100644 Web/firebase-config.js
diff --git a/Web/Login.html b/Web/Login.html
new file mode 100644
index 0000000..111165b
--- /dev/null
+++ b/Web/Login.html
@@ -0,0 +1,109 @@
+<!-- 
+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>
+
diff --git a/Web/SignUp.html b/Web/SignUp.html
new file mode 100644
index 0000000..b6aa4a1
--- /dev/null
+++ b/Web/SignUp.html
@@ -0,0 +1,86 @@
+<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>
diff --git a/Web/firebase-config.js b/Web/firebase-config.js
new file mode 100644
index 0000000..91d6d8e
--- /dev/null
+++ b/Web/firebase-config.js
@@ -0,0 +1,9 @@
+export const firebaseConfig = {
+    apiKey: "AIzaSyARm-eSymd2Q3AyxJXiAiiUzsXGmc6T72I",
+    authDomain: "echoesbehindcloseddoors.firebaseapp.com",
+    databaseURL: "https://echoesbehindcloseddoors-default-rtdb.asia-southeast1.firebasedatabase.app",
+    projectId: "echoesbehindcloseddoors",
+    storageBucket: "echoesbehindcloseddoors.firebasestorage.app",
+    messagingSenderId: "905742343227",
+    appId: "1:905742343227:web:19d04f77371ef1952c901e"
+  };
\ No newline at end of file
