import { useState, useEffect } from "react"; import useSWR from "swr"; import { observer } from "mobx-react-lite"; import Image from "next/image"; import { useRouter } from "next/router"; // hooks import useToast from "hooks/use-toast"; import { useMobxStore } from "lib/mobx/store-provider"; // services import { AuthService } from "services/auth.service"; import { AppConfigService } from "services/app_config.service"; // components import { GoogleLoginButton, GithubLoginButton, EmailCodeForm, EmailPasswordForm, EmailPasswordFormValues, } from "components/account"; // ui import { Loader, Spinner } from "@plane/ui"; // images import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; // types import { IUserSettings } from "types"; const appConfigService = new AppConfigService(); const authService = new AuthService(); export const SignInView = observer(() => { const { user: userStore } = useMobxStore(); const { fetchCurrentUserSettings } = userStore; // router const router = useRouter(); // states const [isLoading, setLoading] = useState(false); // toast const { setToastAlert } = useToast(); // fetch app config const { data, error: appConfigError } = useSWR("APP_CONFIG", () => appConfigService.envConfig()); // computed const enableEmailPassword = data && (data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github)); useEffect(() => { fetchCurrentUserSettings().then((settings) => { setLoading(true); router.push( `/${ settings.workspace.last_workspace_slug ? settings.workspace.last_workspace_slug : settings.workspace.fallback_workspace_slug }` ); }); }, [fetchCurrentUserSettings, router]); const handleLoginRedirection = () => { userStore.fetchCurrentUser().then((user) => { const isOnboard = user.onboarding_step.profile_complete; if (isOnboard) { userStore .fetchCurrentUserSettings() .then((userSettings: IUserSettings) => { const workspaceSlug = userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug; if (workspaceSlug) router.push(`/${workspaceSlug}`); else if (userSettings.workspace.invites > 0) router.push("/invitations"); else router.push("/create-workspace"); }) .catch(() => { setLoading(false); }); } else { router.push("/onboarding"); } }); }; const handleGoogleSignIn = async ({ clientId, credential }: any) => { try { setLoading(true); if (clientId && credential) { const socialAuthPayload = { medium: "google", credential, clientId, }; const response = await authService.socialAuth(socialAuthPayload); if (response) { handleLoginRedirection(); } } else { setLoading(false); throw Error("Cant find credentials"); } } catch (err: any) { setLoading(false); setToastAlert({ title: "Error signing in!", type: "error", message: err?.error || "Something went wrong. Please try again later or contact the support team.", }); } }; const handleGitHubSignIn = async (credential: string) => { try { setLoading(true); if (data && data.github && credential) { const socialAuthPayload = { medium: "github", credential, clientId: data.github, }; const response = await authService.socialAuth(socialAuthPayload); if (response) { handleLoginRedirection(); } } else { setLoading(false); throw Error("Cant find credentials"); } } catch (err: any) { setLoading(false); setToastAlert({ title: "Error signing in!", type: "error", message: err?.error || "Something went wrong. Please try again later or contact the support team.", }); } }; const handlePasswordSignIn = (formData: EmailPasswordFormValues) => { setLoading(true); return authService .emailLogin(formData) .then(() => { userStore.fetchCurrentUser().then((user) => { const isOnboard = user.onboarding_step.profile_complete; if (isOnboard) handleLoginRedirection(); else { router.push("/onboarding"); } }); }) .catch((err) => { setLoading(false); setToastAlert({ type: "error", title: "Error!", message: err?.error || "Something went wrong. Please try again later or contact the support team.", }); }); }; const handleEmailCodeSignIn = async (response: any) => { try { setLoading(true); if (response) { handleLoginRedirection(); } } catch (err: any) { setLoading(false); setToastAlert({ type: "error", title: "Error!", message: err?.error || "Something went wrong. Please try again later or contact the support team.", }); } }; return ( <> {isLoading ? (
) : ( <> <>
Plane Logo

Sign in to Plane

{!data && !appConfigError ? (
) : ( <> <> {enableEmailPassword && } {data?.magic_login && (
)}
{data?.google && } {data?.github && }

By signing up, you agree to the{" "} Terms & Conditions

)}
)} ); });