Add Facebook social login

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>
+  );
+}