soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Facebook social login

Browse Source
This commit is contained in:
Codex Agent
2026-01-23 20:19:15 +01:00
parent 6701b48cc8
commit 6a056b199c
29 changed files with 991 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
resources/js/pages/auth/LoginForm.tsx
View File

@@ -51,9 +51,9 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
const loginEndpoint = '/checkout/login';
const canUseGoogle = typeof packageId === "number" && !Number.isNaN(packageId);
const canUseOauth = typeof packageId === "number" && !Number.isNaN(packageId);
const googleHref = useMemo(() => {
if (!canUseGoogle) {
if (!canUseOauth) {
return "";
}
@@ -63,7 +63,20 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
});
return `/checkout/auth/google?${params.toString()}`;
}, [canUseGoogle, packageId, resolvedLocale]);
}, [canUseOauth, packageId, resolvedLocale]);
const facebookHref = useMemo(() => {
if (!canUseOauth) {
return "";
}
const params = new URLSearchParams({
package_id: String(packageId),
locale: resolvedLocale,
});
return `/checkout/auth/facebook?${params.toString()}`;
}, [canUseOauth, packageId, resolvedLocale]);
const [values, setValues] = useState({
identifier: "",
@@ -73,6 +86,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 [isRedirectingToFacebook, setIsRedirectingToFacebook] = useState(false);
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const [shouldFocusError, setShouldFocusError] = useState(false);
@@ -188,6 +202,15 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
window.location.href = googleHref;
};
const handleFacebookLogin = () => {
if (!facebookHref) {
return;
}
setIsRedirectingToFacebook(true);
window.location.href = facebookHref;
};
return (
<form onSubmit={submit} className="flex flex-col gap-6" noValidate>
<div className="grid gap-6">
@@ -243,27 +266,43 @@ export default function LoginForm({ onSuccess, canResetPassword = true, locale,
</Button>
</div>
{canUseGoogle && (
{canUseOauth && (
<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 className="grid gap-3">
<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>
<Button
type="button"
variant="outline"
onClick={handleFacebookLogin}
disabled={isSubmitting || isRedirectingToFacebook}
className="flex w-full items-center justify-center gap-2"
>
{isRedirectingToFacebook ? (
<LoaderCircle className="h-4 w-4 animate-spin" />
) : (
<FacebookIcon className="h-4 w-4" />
)}
<span>{t("login.facebook_cta")}</span>
</Button>
</div>
</div>
)}
@@ -286,3 +325,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>
);
}