web
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@workspace/ui/components/button";
|
|
import { Icon } from "@workspace/ui/composed/icon";
|
|
import { oAuthLogin } from "@workspace/ui/services/common/oauth";
|
|
import { useGlobalStore } from "@/stores/global";
|
|
|
|
const icons = {
|
|
apple: "uil:apple",
|
|
google: "logos:google-icon",
|
|
facebook: "logos:facebook",
|
|
github: "uil:github",
|
|
telegram: "logos:telegram",
|
|
};
|
|
|
|
export function OAuthMethods() {
|
|
const { common } = useGlobalStore();
|
|
const { oauth_methods } = common;
|
|
const OAUTH_METHODS = oauth_methods?.filter(
|
|
(method: string) => !["mobile", "email", "device"].includes(method)
|
|
);
|
|
return (
|
|
OAUTH_METHODS?.length > 0 && (
|
|
<>
|
|
<div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-border after:border-t">
|
|
<span className="relative z-10 bg-background px-2 text-muted-foreground">
|
|
Or continue with
|
|
</span>
|
|
</div>
|
|
<div className="mt-6 flex justify-center gap-4 *:size-12 *:p-2">
|
|
{OAUTH_METHODS?.map((method: string) => (
|
|
<Button
|
|
asChild
|
|
key={method}
|
|
onClick={async () => {
|
|
const { data } = await oAuthLogin({
|
|
method,
|
|
redirect: `${window.location.origin}/oauth/${method}`,
|
|
});
|
|
if (data.data?.redirect) {
|
|
window.location.href = data.data?.redirect;
|
|
}
|
|
}}
|
|
size="icon"
|
|
variant="ghost"
|
|
>
|
|
<Icon icon={icons[method as keyof typeof icons]} />
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)
|
|
);
|
|
}
|