From 71df869640ddc38ec0bfedb2602ecb3d86c64fb3 Mon Sep 17 00:00:00 2001
From: ronak03rsk <2022.ronak.katariya@ves.ac.in>
Date: Sun, 5 May 2024 16:15:50 +0530
Subject: [PATCH] integrated js code in login and signup html file

---
 login.html  | 126 +++++++++++++++++++++++++++++-----------------------
 signup.html | 125 ++++++++++++++++++++++++++++++---------------------
 2 files changed, 145 insertions(+), 106 deletions(-)
diff --git a/login.html b/login.html
index cd2cc90..c7b6afc 100644
--- a/login.html
+++ b/login.html
@@ -1,62 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Login Page</title>
-    <link rel="stylesheet" href="style1.css" />
-  </head>
-  <body class="login">
+    <link rel="stylesheet" href="style1.css">
+</head>
+<body class="login">
     <div class="login-container">
-      <h2 class="green-text">Login</h2>
-      <p id="login-error" class="error-message"></p>
-      <form id="login-form">
-        <div class="input-group">
-          <label for="login-email">Email</label>
-          <input type="email" id="login-email" name="login-email" required />
-        </div>
-        <div class="input-group">
-          <label for="login-password">Password</label>
-          <input type="password" id="login-password" name="login-password" required />
-        </div>
-        <button type="submit">Login</button>
-      </form>
-      <p class="green-text">Dont have an account? <a href="./signup.html">Signup</a></h2>
+        <h2 class="green-text">Login</h2>
+        <p id="login-error" class="error-message"></p>
+        <form id="login-form">
+            <div class="input-group">
+                <label for="login-email">Email</label>
+                <input type="email" id="login-email" name="login-email" required />
+            </div>
+            <div class="input-group">
+                <label for="login-password">Password</label>
+                <input type="password" id="login-password" name="login-password" required />
+            </div>
+            <button type="submit">Login</button>
+        </form>
+        <p class="green-text">Don't have an account? <a href="./signup.html">Signup</a></p>
     </div>
-    
-    <script type="module">
-      // Import the functions you need from the SDKs you need
-      import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";
-      import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-analytics.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
-      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-      const firebaseConfig = {
-        apiKey: "AIzaSyBwu3KyewvOeepKcmCSZkdbkAZjqSg4poE",
-        authDomain: "balancebudd-c5789.firebaseapp.com",
-        projectId: "balancebudd-c5789",
-        storageBucket: "balancebudd-c5789.appspot.com",
-        messagingSenderId: "187850436843",
-        appId: "1:187850436843:web:91af7c5b3c4eafbbfbceae",
-        measurementId: "G-NF6L3ETRVR"
-      };
-      try {
-    // Initialize Firebase
-    const app = initializeApp(firebaseConfig);
-    const analytics = getAnalytics(app);
-    console.log("Firebase initialized successfully.");
-  } catch (error) {
-    console.error("Error initializing Firebase:", error);
-    // Handle initialization error (e.g., show error message to user)
-  }
-      // Initialize Firebase
-      // const app = initializeApp(firebaseConfig);
-      // const analytics = getAnalytics(app);
-    </script>
+
+    <!-- Load Firebase SDK -->
     <script src="https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js"></script>
-    <script src="script.js"></script>
-  </body>
-</html>
\ No newline at end of file
+
+    <script>
+        // Your web app's Firebase configuration
+        const firebaseConfig = {
+            apiKey: "AIzaSyBwu3KyewvOeepKcmCSZkdbkAZjqSg4poE",
+            authDomain: "balancebudd-c5789.firebaseapp.com",
+            projectId: "balancebudd-c5789",
+            storageBucket: "balancebudd-c5789.appspot.com",
+            messagingSenderId: "187850436843",
+            appId: "1:187850436843:web:91af7c5b3c4eafbbfbceae",
+            measurementId: "G-NF6L3ETRVR"
+        };
+
+        // Initialize Firebase
+        firebase.initializeApp(firebaseConfig);
+
+        // Initialize Firebase Authentication
+        const auth = firebase.auth();
+
+        // Login form submission event listener
+        document.getElementById('login-form').addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent default form submission
+
+            // Get email and password from form inputs
+            const email = document.getElementById('login-email').value;
+            const password = document.getElementById('login-password').value;
+
+            // Sign in user with email and password using Firebase Authentication
+            auth.signInWithEmailAndPassword(email, password)
+                .then((userCredential) => {
+                    // User signed in successfully
+                    const user = userCredential.user;
+                    console.log('User signed in:', user);
+                    // Redirect user to dashboard or desired page upon successful login
+                    window.location.href = 'index.html'; // Change to appropriate URL
+                })
+                .catch((error) => {
+                    // Handle login errors
+                    const errorMessage = error.message;
+                    console.error('Login failed:', errorMessage);
+                    // Display error message to the user (e.g., show it on the login form)
+                    document.getElementById('login-error').innerText = errorMessage;
+                });
+        });
+    </script>
+
+    <script src="script.js" defer></script>
+</body>
+</html>
diff --git a/signup.html b/signup.html
index 22e956d..f07fa75 100644
--- a/signup.html
+++ b/signup.html
@@ -1,58 +1,81 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Signup Page</title>
-    <link rel="stylesheet" href="style1.css" />
-  </head>
-  <body>
+    <link rel="stylesheet" href="style1.css">
+</head>
+<body>
     <div class="signup-container">
-      <h2 class="green-text">Signup</h2>
-      <p id="signup-error" class="error-message"></p>
-      <form id="signup-form">
-        <div class="input-group">
-          <label for="signup-fullname">Full Name</label>
-          <input type="text" id="signup-fullname" name="signup-fullname" required />
-        </div>
-        <div class="input-group">
-          <label for="signup-email">Email</label>
-          <input type="email" id="signup-email" name="signup-email" required />
-        </div>
-        <div class="input-group">
-          <label for="signup-password">Password</label>
-          <input type="password" id="signup-password" name="signup-password" required />
-        </div>
-        <button type="submit">Signup</button>
-      </form>
-      <p class="green-text">Already have an account? <a href="./login.html">Login</a></p>
+        <h2 class="green-text">Signup</h2>
+        <p id="signup-error" class="error-message"></p>
+        <form id="signup-form">
+            <div class="input-group">
+                <label for="signup-fullname">Full Name</label>
+                <input type="text" id="signup-fullname" name="signup-fullname" required />
+            </div>
+            <div class="input-group">
+                <label for="signup-email">Email</label>
+                <input type="email" id="signup-email" name="signup-email" required />
+            </div>
+            <div class="input-group">
+                <label for="signup-password">Password</label>
+                <input type="password" id="signup-password" name="signup-password" required />
+            </div>
+            <button type="submit">Signup</button>
+        </form>
+        <p class="green-text">Already have an account? <a href="./login.html">Login</a></p>
     </div>
-    
-    <script type="module">
-      // Import the functions you need from the SDKs you need
-      import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js";
-      import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.11.1/firebase-analytics.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
-      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-      const firebaseConfig = {
-        apiKey: "AIzaSyBwu3KyewvOeepKcmCSZkdbkAZjqSg4poE",
-        authDomain: "balancebudd-c5789.firebaseapp.com",
-        projectId: "balancebudd-c5789",
-        storageBucket: "balancebudd-c5789.appspot.com",
-        messagingSenderId: "187850436843",
-        appId: "1:187850436843:web:91af7c5b3c4eafbbfbceae",
-        measurementId: "G-NF6L3ETRVR"
-      };
-    
-      // Initialize Firebase
-      const app = initializeApp(firebaseConfig);
-      const analytics = getAnalytics(app);
-    </script>
+
+    <!-- Load Firebase SDK -->
     <script src="https://www.gstatic.com/firebasejs/10.11.1/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/10.11.1/firebase-auth.js"></script>
-    <script src="script.js"></script>
-  </body>
-</html>
\ No newline at end of file
+
+    <script>
+        // Your web app's Firebase configuration
+        const firebaseConfig = {
+            apiKey: "AIzaSyBwu3KyewvOeepKcmCSZkdbkAZjqSg4poE",
+            authDomain: "balancebudd-c5789.firebaseapp.com",
+            projectId: "balancebudd-c5789",
+            storageBucket: "balancebudd-c5789.appspot.com",
+            messagingSenderId: "187850436843",
+            appId: "1:187850436843:web:91af7c5b3c4eafbbfbceae",
+            measurementId: "G-NF6L3ETRVR"
+        };
+
+        // Initialize Firebase
+        firebase.initializeApp(firebaseConfig);
+
+        // Initialize Firebase Authentication
+        const auth = firebase.auth();
+
+        // Signup form submission event listener
+        document.getElementById('signup-form').addEventListener('submit', function(event) {
+            event.preventDefault(); // Prevent default form submission
+
+            // Get full name, email, and password from form inputs
+            const fullname = document.getElementById('signup-fullname').value;
+            const email = document.getElementById('signup-email').value;
+            const password = document.getElementById('signup-password').value;
+
+            // Create user with email and password using Firebase Authentication
+            auth.createUserWithEmailAndPassword(email, password)
+                .then((userCredential) => {
+                    // User signed up successfully
+                    const user = userCredential.user;
+                    console.log('User signed up:', user);
+                    // Redirect user to dashboard or desired page upon successful signup
+                    window.location.href = 'index.html'; // Change to appropriate URL
+                })
+                .catch((error) => {
+                    // Handle signup errors
+                    const errorMessage = error.message;
+                    console.error('Signup failed:', errorMessage);
+                    // Display error message to the user (e.g., show it on the signup form)
+                    document.getElementById('signup-error').innerText = errorMessage;
+                });
+        });
+    </script>
+</body>
+</html>
