From 87e0d2c2baf9d5a06e1f2cc7d09743d2047de5f7 Mon Sep 17 00:00:00 2001
From: Sterling Archer <SterlingArcher2026@icloud.com>
Date: Thu, 25 Jun 2026 10:49:46 -0700
Subject: [PATCH] Add Google sign-in button to auth screen

---
 index.html | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 657effe..d8e5486 100644
--- a/index.html
+++ b/index.html
@@ -55,6 +55,8 @@
   .btn-primary:hover:not(:disabled) { opacity: 0.9; }
   .btn-ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--border); }
   .btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
+  .btn-google { background: #fff; color: #3c4043; border: 1.5px solid #dadce0; font-family: var(--font-body); font-size: 15px; font-weight: 500; width: 100%; margin-bottom: 4px; gap: 10px; }
+  .btn-google:hover { background: #f8f9fa; border-color: #c6c6c6; }
   .btn-danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
   .btn-danger:hover { background: rgba(255,107,107,0.1); }
   .btn-sm { padding: 7px 14px; font-size: 13px; min-height: 38px; }
@@ -266,7 +268,16 @@
       <p class="auth-tagline">Walk more. Compete with friends.</p>
       <div class="auth-card" id="auth-card">
         <h2>Welcome</h2>
-        <p>Enter your email to sign in or create an account — no password needed.</p>
+        <p>Sign in or create an account to get started.</p>
+        <button class="btn btn-google" id="google-signin-btn" onclick="signInWithGoogle()">
+          <svg width="18" height="18" viewBox="0 0 18 18" style="flex-shrink:0"><path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/><path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z"/><path fill="#FBBC05" d="M3.964 10.707c-.18-.54-.282-1.117-.282-1.707s.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.55 0 9s.348 2.825.957 4.039l3.007-2.332z"/><path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.961L3.964 7.293C4.672 5.166 6.656 3.58 9 3.58z"/></svg>
+          Sign in with Google
+        </button>
+        <div style="display:flex;align-items:center;gap:12px;margin:16px 0">
+          <div style="flex:1;height:1px;background:var(--border)"></div>
+          <span style="font-size:12px;color:var(--muted)">or</span>
+          <div style="flex:1;height:1px;background:var(--border)"></div>
+        </div>
         <label for="auth-email">Email address</label>
         <input type="email" id="auth-email" placeholder="you@example.com" autocomplete="email">
         <div class="error-msg" id="auth-error" style="display:none"></div>
@@ -622,7 +633,7 @@
 <script src="config.js"></script>
 <script type="module">
 import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js';
-import { getAuth, isSignInWithEmailLink, signInWithEmailLink, signOut as fbSignOut, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js';
+import { getAuth, isSignInWithEmailLink, signInWithEmailLink, signInWithPopup, GoogleAuthProvider, signOut as fbSignOut, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js';
 import { getFirestore, doc, getDoc, setDoc, updateDoc, deleteField, collection, query, where, getDocs, addDoc, onSnapshot, serverTimestamp } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js';
 
 if (!window.STEPMATES_CONFIG) {
@@ -1282,6 +1293,24 @@ window.sendMagicLink = async function() {
   btn.disabled = false; btn.innerHTML = 'Continue with Email';
 }
 
+window.signInWithGoogle = async function() {
+  const btn = document.getElementById('google-signin-btn');
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner" style="color:#4285F4"></span> Signing in…';
+  try {
+    const provider = new GoogleAuthProvider();
+    const result = await signInWithPopup(auth, provider);
+    await initUser(result.user);
+  } catch(e) {
+    btn.disabled = false;
+    btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 18 18" style="flex-shrink:0"><path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/><path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z"/><path fill="#FBBC05" d="M3.964 10.707c-.18-.54-.282-1.117-.282-1.707s.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.55 0 9s.348 2.825.957 4.039l3.007-2.332z"/><path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.961L3.964 7.293C4.672 5.166 6.656 3.58 9 3.58z"/></svg> Sign in with Google`;
+    if (e.code !== 'auth/popup-closed-by-user') {
+      document.getElementById('auth-error').textContent = 'Google sign-in failed. Please try again.';
+      document.getElementById('auth-error').style.display = 'block';
+    }
+  }
+}
+
 window.showAuthForm = function() {
   document.getElementById('auth-card').style.display = 'block';
   document.getElementById('magic-sent-card').style.display = 'none';