Add Google login to checkout login form

resources/js/pages/auth/LoginForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { usePage } from "@inertiajs/react";
 import { useTranslation } from "react-i18next";
 import toast from "react-hot-toast";
@@ -50,6 +50,20 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
   const resolvedLocale = locale ?? page.props.locale ?? "de";
 
   const loginEndpoint = '/checkout/login';
+
+  const canUseGoogle = typeof packageId === "number" && !Number.isNaN(packageId);
+  const googleHref = useMemo(() => {
+    if (!canUseGoogle) {
+      return "";
+    }
+
+    const params = new URLSearchParams({
+      package_id: String(packageId),
+      locale: resolvedLocale,
+    });
+
+    return `/checkout/auth/google?${params.toString()}`;
+  }, [canUseGoogle, packageId, resolvedLocale]);
       
   const [values, setValues] = useState({
     identifier: "",
@@ -58,6 +72,7 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
   });
   const [errors, setErrors] = useState<FieldErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
   const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
   const [shouldFocusError, setShouldFocusError] = useState(false);
 
@@ -164,6 +179,15 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
     }
   };
 
+  const handleGoogleLogin = () => {
+    if (!googleHref) {
+      return;
+    }
+
+    setIsRedirectingToGoogle(true);
+    window.location.href = googleHref;
+  };
+
   return (
     <form onSubmit={submit} className="flex flex-col gap-6" noValidate>
       <div className="grid gap-6">
@@ -219,6 +243,30 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
         </Button>
       </div>
 
+      {canUseGoogle && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+            <span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" aria-hidden />
+            {t("login.oauth_divider", "oder")}
+            <span className="h-px flex-1 bg-gray-200 dark:bg-gray-800" aria-hidden />
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleGoogleLogin}
+            disabled={isSubmitting || isRedirectingToGoogle}
+            className="flex w-full items-center justify-center gap-2"
+          >
+            {isRedirectingToGoogle ? (
+              <LoaderCircle className="h-4 w-4 animate-spin" />
+            ) : (
+              <GoogleIcon className="h-4 w-4" />
+            )}
+            <span>{t("login.google_cta")}</span>
+          </Button>
+        </div>
+      )}
+
       {Object.values(errors).some(Boolean) && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-md">
           <p className="text-sm text-red-800">{Object.values(errors).filter(Boolean).join(" \u2022 ")}</p>
@@ -227,3 +275,14 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
     </form>
   );
 }
+
+function GoogleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden>
+      <path
+        fill="#EA4335"
+        d="M12 11.999v4.8h6.7c-.3 1.7-2 4.9-6.7 4.9-4 0-7.4-3.3-7.4-7.4S8 6 12 6c2.3 0 3.9 1 4.8 1.9l3.3-3.2C18.1 2.6 15.3 1 12 1 5.9 1 1 5.9 1 12s4.9 11 11 11c6.3 0 10.5-4.4 10.5-10.6 0-.7-.1-1.2-.2-1.8H12z"
+      />
+    </svg>
+  );
+}

resources/js/pages/auth/__tests__/LoginForm.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+global.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;
+
+vi.mock('@inertiajs/react', () => ({
+  usePage: () => ({ props: { locale: 'de' } }),
+  Link: ({ children, ...props }: { children: React.ReactNode }) => <a {...props}>{children}</a>,
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string | Record<string, unknown>) => {
+      if (typeof fallback === 'string') {
+        return fallback;
+      }
+      if (fallback && typeof fallback === 'object' && typeof fallback.defaultValue === 'string') {
+        return fallback.defaultValue;
+      }
+      return key;
+    },
+  }),
+}));
+
+vi.mock('react-hot-toast', () => ({
+  default: {
+    error: vi.fn(),
+    success: vi.fn(),
+  },
+}));
+
+import LoginForm from '../LoginForm';
+
+describe('LoginForm', () => {
+  it('renders Google login option when packageId is provided', () => {
+    render(<LoginForm packageId={12} />);
+
+    expect(screen.getByText('login.google_cta')).toBeInTheDocument();
+  });
+
+  it('does not render Google login option without packageId', () => {
+    render(<LoginForm />);
+
+    expect(screen.queryByText('login.google_cta')).not.toBeInTheDocument();
+  });
+});