Add Facebook social login

resources/js/admin/i18n/locales/de/auth.json

@@ -39,9 +39,10 @@
       "missing_token": "Reset-Token fehlt."
     },
     "actions_title": "Wähle deine Anmeldemethode",
-    "actions_copy": "Greife sicher mit deinem Fotospiel-Login oder deinem Google-Konto auf das Kunden-Dashboard zu.",
+    "actions_copy": "Greife sicher mit deinem Fotospiel-Login oder deinem Google- oder Facebook-Konto auf das Kunden-Dashboard zu.",
     "cta": "Mit Fotospiel-Login fortfahren",
     "google_cta": "Mit Google anmelden",
+    "facebook_cta": "Mit Facebook anmelden",
     "open_account_login": "Konto-Login öffnen",
     "loading": "Bitte warten …",
     "oauth_error_title": "Login aktuell nicht möglich",
@@ -54,7 +55,9 @@
       "invalid_scope": "Die App fordert Berechtigungen an, die nicht freigegeben sind.",
       "tenant_mismatch": "Du hast keinen Zugriff auf das Kundenkonto, das diese Anmeldung angefordert hat.",
       "google_failed": "Die Anmeldung mit Google war nicht erfolgreich. Bitte versuche es erneut oder wähle eine andere Methode.",
-      "google_no_match": "Wir konnten dieses Google-Konto keinem Kunden-Admin zuordnen. Bitte melde dich mit Fotospiel-Zugangsdaten an."
+      "google_no_match": "Wir konnten dieses Google-Konto keinem Kunden-Admin zuordnen. Bitte melde dich mit Fotospiel-Zugangsdaten an.",
+      "facebook_failed": "Die Anmeldung mit Facebook war nicht erfolgreich. Bitte versuche es erneut oder wähle eine andere Methode.",
+      "facebook_no_match": "Wir konnten dieses Facebook-Konto keinem Kunden-Admin zuordnen. Bitte melde dich mit Fotospiel-Zugangsdaten an."
     },
     "return_hint": "Nach dem Anmelden leiten wir dich automatisch zurück.",
     "support": "Du brauchst Zugriff? Kontaktiere dein Event-Team oder schreib uns an support@fotospiel.de.",

resources/js/admin/i18n/locales/en/auth.json

@@ -39,9 +39,10 @@
       "missing_token": "Reset token missing."
     },
     "actions_title": "Choose your sign-in method",
-    "actions_copy": "Access the customer dashboard securely with your Fotospiel login or your Google account.",
+    "actions_copy": "Access the customer dashboard securely with your Fotospiel login or your Google or Facebook account.",
     "cta": "Continue with Fotospiel login",
     "google_cta": "Continue with Google",
+    "facebook_cta": "Continue with Facebook",
     "open_account_login": "Open account login",
     "loading": "Signing you in …",
     "oauth_error_title": "Login not possible right now",
@@ -54,7 +55,9 @@
       "invalid_scope": "The app asked for permissions it cannot receive.",
       "tenant_mismatch": "You don’t have access to the customer account that requested this login.",
       "google_failed": "Google sign-in was not successful. Please try again or use another method.",
-      "google_no_match": "We couldn’t link this Google account to a customer admin. Please sign in with Fotospiel credentials."
+      "google_no_match": "We couldn’t link this Google account to a customer admin. Please sign in with Fotospiel credentials.",
+      "facebook_failed": "Facebook sign-in was not successful. Please try again or use another method.",
+      "facebook_no_match": "We couldn’t link this Facebook account to a customer admin. Please sign in with Fotospiel credentials."
     },
     "return_hint": "After signing in you’ll be brought back automatically.",
     "support": "Need access? Contact your event team or email support@fotospiel.de — we're happy to help.",

resources/js/admin/mobile/LoginPage.tsx

@@ -105,6 +105,16 @@ export default function MobileLoginPage() {
     return `/event-admin/auth/google?${params.toString()}`;
   }, [encodedFinal]);
 
+  const facebookHref = React.useMemo(() => {
+    if (!encodedFinal) {
+      return '/event-admin/auth/facebook';
+    }
+
+    const params = new URLSearchParams({ return_to: encodedFinal });
+
+    return `/event-admin/auth/facebook?${params.toString()}`;
+  }, [encodedFinal]);
+
   React.useEffect(() => {
     if (status === 'authenticated') {
       navigate(finalTarget, { replace: true });
@@ -115,6 +125,7 @@ export default function MobileLoginPage() {
   const [password, setPassword] = React.useState('');
   const [error, setError] = React.useState<string | null>(null);
   const [isRedirectingToGoogle, setIsRedirectingToGoogle] = React.useState(false);
+  const [isRedirectingToFacebook, setIsRedirectingToFacebook] = React.useState(false);
   const [installBannerDismissed, setInstallBannerDismissedState] = React.useState(() => getInstallBannerDismissed());
   const installBanner = shouldShowInstallBanner(
     {
@@ -170,6 +181,15 @@ export default function MobileLoginPage() {
     window.location.assign(googleHref);
   }, [googleHref]);
 
+  const handleFacebookLogin = React.useCallback(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    setIsRedirectingToFacebook(true);
+    window.location.assign(facebookHref);
+  }, [facebookHref]);
+
   return (
     <YStack
       minHeight="100vh"
@@ -320,6 +340,29 @@ export default function MobileLoginPage() {
                   </Text>
                 </XStack>
               </Button>
+
+              <Button
+                type="button"
+                onPress={handleFacebookLogin}
+                disabled={isRedirectingToFacebook || isSubmitting}
+                height={52}
+                borderRadius={16}
+                backgroundColor={surface}
+                borderColor={border}
+                borderWidth={1}
+                color={text}
+              >
+                <XStack alignItems="center" space="$2">
+                  {isRedirectingToFacebook ? (
+                    <Loader2 size={16} className="animate-spin" />
+                  ) : (
+                    <FacebookIcon size={18} />
+                  )}
+                  <Text fontSize="$sm" color={text} fontWeight="700">
+                    {t('login.facebook_cta', 'Mit Facebook anmelden')}
+                  </Text>
+                </XStack>
+              </Button>
             </YStack>
           </form>
         </MobileCard>
@@ -365,3 +408,14 @@ function GoogleIcon({ size = 18 }: { size?: number }) {
     </svg>
   );
 }
+
+function FacebookIcon({ size = 18 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden>
+      <path
+        fill="#1877F2"
+        d="M24 12.073C24 5.404 18.627 0 12 0S0 5.404 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.43c0-3.014 1.792-4.68 4.533-4.68 1.312 0 2.686.236 2.686.236v2.96h-1.513c-1.49 0-1.954.93-1.954 1.887v2.264h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z"
+      />
+    </svg>
+  );
+}

resources/js/admin/mobile/__tests__/LoginPage.test.tsx

@@ -103,13 +103,15 @@ vi.mock('lucide-react', () => ({
 import MobileLoginPage from '../LoginPage';
 
 describe('MobileLoginPage', () => {
-  it('renders Google login button', () => {
+  it('renders OAuth login buttons', () => {
     locationSearch = '?return_to=encoded-value';
 
     render(<MobileLoginPage />);
 
     const googleButton = screen.getByText('Mit Google anmelden');
     expect(googleButton).toBeInTheDocument();
+    const facebookButton = screen.getByText('Mit Facebook anmelden');
+    expect(facebookButton).toBeInTheDocument();
   });
 
   it('shows oauth error details when present', () => {