Add Facebook social login

resources/js/pages/auth/login.tsx

@@ -24,6 +24,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
     const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
     const [rawReturnTo, setRawReturnTo] = useState<string | null>(null);
     const [isRedirectingToGoogle, setIsRedirectingToGoogle] = useState(false);
+    const [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
     const { t } = useTranslation('auth');
     const page = usePage<{ flash?: { verification?: { status: string; title?: string; message?: string } } }>();
     const verificationFlash = page.props.flash?.verification;
@@ -98,6 +99,18 @@ export default function Login({ status, canResetPassword }: LoginProps) {
         return `/event-admin/auth/google?${params.toString()}`;
     }, [rawReturnTo]);
 
+    const facebookHref = useMemo(() => {
+        if (!rawReturnTo) {
+            return '/event-admin/auth/facebook';
+        }
+
+        const params = new URLSearchParams({
+            return_to: rawReturnTo,
+        });
+
+        return `/event-admin/auth/facebook?${params.toString()}`;
+    }, [rawReturnTo]);
+
     const handleGoogleLogin = () => {
         if (typeof window === 'undefined') {
             return;
@@ -107,6 +120,15 @@ export default function Login({ status, canResetPassword }: LoginProps) {
         window.location.href = googleHref;
     };
 
+    const handleFacebookLogin = () => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        setIsRedirectingToFacebook(true);
+        window.location.href = facebookHref;
+    };
+
     return (
         <AuthLayout
             title={t('login.title')}
@@ -271,9 +293,27 @@ export default function Login({ status, canResetPassword }: LoginProps) {
                         )}
                         <span>{t('login.google_cta')}</span>
                     </Button>
+
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleFacebookLogin}
+                        disabled={processing || isRedirectingToFacebook}
+                        className="flex h-12 w-full items-center justify-center gap-3 rounded-xl border-gray-200/80 bg-white/90 text-sm font-semibold text-gray-700 shadow-inner shadow-gray-200/40 transition hover:bg-white dark:border-gray-800/70 dark:bg-gray-900/60 dark:text-gray-100 dark:hover:bg-gray-900/80"
+                    >
+                        {isRedirectingToFacebook ? (
+                            <LoaderCircle className="h-5 w-5 animate-spin" aria-hidden />
+                        ) : (
+                            <FacebookIcon className="h-5 w-5" />
+                        )}
+                        <span>{t('login.facebook_cta')}</span>
+                    </Button>
                     <p className="text-center text-xs text-muted-foreground dark:text-gray-300">
                         {t('login.google_helper', 'Nutze dein Google-Konto, um dich sicher bei der Eventverwaltung anzumelden.')}
                     </p>
+                    <p className="text-center text-xs text-muted-foreground dark:text-gray-300">
+                        {t('login.facebook_helper', 'Melde dich schnell mit deinem Facebook-Konto an.')}
+                    </p>
                 </div>
 
                 <div className="rounded-2xl border border-gray-200/60 bg-gray-50/80 p-4 text-center text-sm text-muted-foreground shadow-inner dark:border-gray-800/70 dark:bg-gray-900/60">
@@ -315,3 +355,14 @@ function GoogleIcon({ className }: { className?: string }) {
         </svg>
     );
 }
+
+function FacebookIcon({ className }: { className?: string }) {
+    return (
+        <svg className={className} 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>
+    );
+}