From b75c4cc0a7116c37cae182ddccc96dd58fc3a116 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Mon, 23 Feb 2026 17:45:22 -0500
Subject: [PATCH] feat: add Google Sign-In to register form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added 'Registrarse con Google' button at the top of the register form
- Same googleLogin endpoint as login — backend auto-creates account if new user
- Logs analytics event sign_up with method:'google'
- Redirects to /map (or role-based route) immediately after registration
- Divider 'o con correo' separates Google from the manual form
- Identical button style to LoginForm for visual consistency
- Error message shown inline if Google auth fails
---
 frontend/src/components/auth/RegisterForm.vue | 106 +++++++++++++++++-
 1 file changed, 105 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/auth/RegisterForm.vue b/frontend/src/components/auth/RegisterForm.vue
index 8e43864..5f3048a 100644
--- a/frontend/src/components/auth/RegisterForm.vue
+++ b/frontend/src/components/auth/RegisterForm.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { authService } from '@/services/authService'
 import { analyticsService } from '@/services/analyticsService'
+import { signInWithGoogle } from '@/firebaseConfig'
+import { useAuthStore } from '@/stores/auth'
 
 const emit = defineEmits(['toggle', 'success'])
 
+const router = useRouter()
+const authStore = useAuthStore()
+
 const fullName = ref('')
 const email = ref('')
 const password = ref('')
@@ -37,6 +43,35 @@ const handleRegister = async () => {
     isLoading.value = false
   }
 }
+
+const handleGoogleRegister = async () => {
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const { token } = await signInWithGoogle()
+    const response = await authService.googleLogin(token)
+
+    analyticsService.logEvent({
+      event_name: 'sign_up',
+      properties: { method: 'google' }
+    })
+
+    authStore.login(response.access_token, response.role, response.full_name)
+
+    const role = response.role.toUpperCase()
+    if (role === 'ADMIN') router.push('/admin')
+    else if (role === 'DRIVER') router.push('/driver')
+    else if (role === 'PROMOTER') router.push('/promoter')
+    else router.push('/map')
+
+  } catch (error: any) {
+    errorMessage.value = 'Error al registrarse con Google. Intenta de nuevo.'
+    console.error(error)
+  } finally {
+    isLoading.value = false
+  }
+}
 </script>
 
 <template>
@@ -50,7 +85,26 @@ const handleRegister = async () => {
     </div>
 
     <!-- Formulario -->
-    <form v-else @submit.prevent="handleRegister">
+    <template v-else>
+
+      <!-- Google -->
+      <button
+        type="button"
+        class="google-btn"
+        :disabled="isLoading"
+        @click="handleGoogleRegister"
+      >
+        <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
+        <span>Registrarse con Google</span>
+      </button>
+
+      <div class="divider">
+        <span class="divider-line"></span>
+        <span class="divider-text">o con correo</span>
+        <span class="divider-line"></span>
+      </div>
+
+    <form @submit.prevent="handleRegister">
 
       <!-- Nombre -->
       <div class="field">
@@ -130,6 +184,8 @@ const handleRegister = async () => {
       ¿Ya tienes cuenta?
       <button type="button" class="switch-link" @click="emit('toggle')">Inicia sesión</button>
     </p>
+
+    </template>
   </div>
 </template>
 
@@ -141,6 +197,54 @@ const handleRegister = async () => {
   gap: 1rem;
 }
 
+/* ─── Google ─── */
+.google-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  background: var(--bg-primary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.875rem;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.google-btn:hover:not(:disabled) {
+  border-color: var(--active-color);
+}
+
+.google-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ─── Divider ─── */
+.divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.divider-line {
+  flex: 1;
+  height: 1px;
+  background: var(--border-color);
+}
+
+.divider-text {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
 /* ─── Éxito ─── */
 .success-card {
   background: rgba(74, 222, 128, 0.08);