Merge pull request #323 from ananyag309/master

Added Google Sign Up

SignUp/signup.css

@@ -257,4 +257,92 @@ a {
     text-shadow: none;
     font-family: 'Trebuchet MS', Arial, sans-serif;
 
-}
+}
+
+/* ... existing styles ... */
+
+.signup-button, .google-signup-button {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+.signup-button {
+  background-color: #f4a261;
+  color: white;
+}
+
+.signup-button:hover {
+  background-color: #e76f51;
+}
+
+.google-signup-button {
+  background-color: white;
+  color: #757575;
+  border: 1px solid #dadce0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.google-signup-button:hover {
+  background-color: #f8f9fa;
+}
+
+.google-signup-button img {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+
+.or-divider {
+  text-align: center;
+  margin: 20px 0;
+  color: #757575;
+  position: relative;
+  overflow: hidden;
+}
+
+.or-divider::before,
+.or-divider::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 45%;
+  height: 1px;
+  background-color: #dadce0;
+}
+
+.or-divider::before {
+  left: 0;
+}
+
+.or-divider::after {
+  right: 0;
+}
+
+.or-divider span {
+  display: inline-block;
+  position: relative;
+  padding: 0 10px;
+  background-color: #000; /* Match this with your form background color */
+}
+
+.links {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.links a {
+  color: #e76f51;
+  text-decoration: none;
+}
+
+.links a:hover {
+  text-decoration: underline;
+}

SignUp/signup.html

@@ -34,11 +34,19 @@ <h1>Create Your Account</h1>
             </div>
             <button type="submit" class="signup-button">Sign Up</button>
         </form>
+        <div class="or-divider">
+            <span>OR</span>
+        </div>
+        <button id="google-signup" class="google-signup-button">
+            <img src="../images/google-icon.png" alt="Google Icon" class="google-icon">
+            Sign up with Google
+        </button>
         <div class="links">
             <a href="../login/login.html"><u>Already have an account? Login</u></a>
         </div>
     </div>
 
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
     <script>
         const signup = document.querySelector(".signup-button");
 
@@ -82,6 +90,41 @@ <h1>Create Your Account</h1>
                 console.log(err.message)
             }
         }
+
+        // Add Google Sign-In
+        function handleCredentialResponse(response) {
+            // Send the token to your server to verify and create a session
+            const token = response.credential;
+            // You should implement a function to handle the token on your server
+            signUpWithGoogle(token);
+        }
+
+        window.onload = function () {
+            google.accounts.id.initialize({
+                client_id: 'YOUR_GOOGLE_CLIENT_ID', // Replace with your actual Google Client ID
+                callback: handleCredentialResponse
+            });
+            google.accounts.id.renderButton(
+                document.getElementById("google-signup"),
+                { theme: "outline", size: "large", width: "100%" }
+            );
+        };
+
+        async function signUpWithGoogle(token) {
+            try {
+                const res = await fetch("http://localhost:5000/auth/google-signup", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ token })
+                });
+
+                const data = await res.json();
+                console.log(data);
+                window.location.href = "http://127.0.0.1:5500/Collect-your-GamingTools/login/login.html";
+            } catch (err) {
+                console.log(err.message);
+            }
+        }
     </script>
 </body>
 </html>