import React, { useCallback, useState, useEffect } from "react"; // next import type { NextPage } from "next"; import Link from "next/link"; import { useRouter } from "next/router"; import Image from "next/image"; // hooks import useUser from "lib/hooks/useUser"; // services import authenticationService from "lib/services/authentication.service"; // layouts import DefaultLayout from "layouts/DefaultLayout"; // social button import { GoogleLoginButton } from "components/socialbuttons/google-login"; import EmailCodeForm from "components/forms/EmailCodeForm"; import EmailPasswordForm from "components/forms/EmailPasswordForm"; // logos import Logo from "public/logo.png"; import GitHubLogo from "public/logos/github.png"; import { KeyIcon } from "@heroicons/react/24/outline"; // types type SignIn = { email: string; password?: string; medium?: string; key?: string; token?: string; }; const SignIn: NextPage = () => { const [useCode, setUseCode] = useState(true); const router = useRouter(); const { mutateUser, mutateWorkspaces } = useUser(); const [githubToken, setGithubToken] = useState(undefined); const [loginCallBackURL, setLoginCallBackURL] = useState(undefined); const [isGoogleAuthenticationLoading, setIsGoogleAuthenticationLoading] = useState(false); const onSignInSuccess = useCallback( async (res: any) => { await mutateUser(); await mutateWorkspaces(); if (res.user.is_onboarded) router.push("/"); else router.push("/invitations"); }, [mutateUser, mutateWorkspaces, router] ); const githubTokenMemo = React.useMemo(() => { return githubToken; }, [githubToken]); useEffect(() => { const { query: { code }, } = router; if (code && !githubTokenMemo) { setGithubToken(code as any); } }, [router, githubTokenMemo]); useEffect(() => { if (githubToken) { authenticationService .socialAuth({ medium: "github", credential: githubToken, clientId: process.env.NEXT_PUBLIC_GITHUB_ID, }) .then(async (response) => { await onSignInSuccess(response); }) .catch((err) => { console.log(err); }); } }, [githubToken, mutateUser, mutateWorkspaces, router, onSignInSuccess]); useEffect(() => { const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; setLoginCallBackURL(`${origin}/signin` as any); return () => setIsGoogleAuthenticationLoading(false); }, []); return ( {isGoogleAuthenticationLoading && (

Signing in with Google. Please wait...

)}
Plane Web Logo

Sign in to your account

{useCode ? ( ) : ( )}
or
{ setIsGoogleAuthenticationLoading(true); authenticationService .socialAuth({ medium: "google", credential, clientId, }) .then(async (response) => { await onSignInSuccess(response); }) .catch((err) => { console.log(err); setIsGoogleAuthenticationLoading(false); }); }} onFailure={(err) => { console.log(err); }} />
); }; export default SignIn;