From 2c9c8d5a89632d946ab719bac8d9221cc7ce085b Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 4 Sep 2023 16:55:43 +0530 Subject: [PATCH] feat: landing page after logging in (#2081) --- space/components/accounts/index.ts | 2 + space/components/accounts/sign-in.tsx | 156 +++++++++++++++++++ space/components/accounts/user-logged-in.tsx | 51 ++++++ space/components/views/home.tsx | 13 ++ space/components/views/index.ts | 1 + space/components/views/project-details.tsx | 2 +- space/pages/index.tsx | 156 +------------------ space/public/user-logged-in.svg | 3 + 8 files changed, 231 insertions(+), 153 deletions(-) create mode 100644 space/components/accounts/sign-in.tsx create mode 100644 space/components/accounts/user-logged-in.tsx create mode 100644 space/components/views/home.tsx create mode 100644 space/components/views/index.ts create mode 100644 space/public/user-logged-in.svg diff --git a/space/components/accounts/index.ts b/space/components/accounts/index.ts index 093e8538c..03a173766 100644 --- a/space/components/accounts/index.ts +++ b/space/components/accounts/index.ts @@ -4,3 +4,5 @@ export * from "./email-reset-password-form"; export * from "./github-login-button"; export * from "./google-login"; export * from "./onboarding-form"; +export * from "./sign-in"; +export * from "./user-logged-in"; diff --git a/space/components/accounts/sign-in.tsx b/space/components/accounts/sign-in.tsx new file mode 100644 index 000000000..50d9c7da0 --- /dev/null +++ b/space/components/accounts/sign-in.tsx @@ -0,0 +1,156 @@ +import React from "react"; + +import Image from "next/image"; +import { useRouter } from "next/router"; + +// mobx +import { observer } from "mobx-react-lite"; +import { useMobxStore } from "lib/mobx/store-provider"; +// services +import authenticationService from "services/authentication.service"; +// hooks +import useToast from "hooks/use-toast"; +// components +import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts"; +// images +import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg"; + +export const SignInView = observer(() => { + const { user: userStore } = useMobxStore(); + + const router = useRouter(); + const { next_path } = router.query; + + const { setToastAlert } = useToast(); + + const onSignInError = (error: any) => { + setToastAlert({ + title: "Error signing in!", + type: "error", + message: error?.error || "Something went wrong. Please try again later or contact the support team.", + }); + }; + + const onSignInSuccess = (response: any) => { + const isOnboarded = response?.user?.onboarding_step?.profile_complete || false; + + userStore.setCurrentUser(response?.user); + + if (!isOnboarded) { + router.push(`/onboarding?next_path=${next_path}`); + return; + } + router.push((next_path ?? "/").toString()); + }; + + const handleGoogleSignIn = async ({ clientId, credential }: any) => { + try { + if (clientId && credential) { + const socialAuthPayload = { + medium: "google", + credential, + clientId, + }; + const response = await authenticationService.socialAuth(socialAuthPayload); + + onSignInSuccess(response); + } else { + throw Error("Cant find credentials"); + } + } catch (err: any) { + onSignInError(err); + } + }; + + const handleGitHubSignIn = async (credential: string) => { + try { + if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) { + const socialAuthPayload = { + medium: "github", + credential, + clientId: process.env.NEXT_PUBLIC_GITHUB_ID, + }; + const response = await authenticationService.socialAuth(socialAuthPayload); + onSignInSuccess(response); + } else { + throw Error("Cant find credentials"); + } + } catch (err: any) { + onSignInError(err); + } + }; + + const handlePasswordSignIn = async (formData: any) => { + await authenticationService + .emailLogin(formData) + .then((response) => { + try { + if (response) { + onSignInSuccess(response); + } + } catch (err: any) { + onSignInError(err); + } + }) + .catch((err) => onSignInError(err)); + }; + + const handleEmailCodeSignIn = async (response: any) => { + try { + if (response) { + onSignInSuccess(response); + } + } catch (err: any) { + onSignInError(err); + } + }; + + return ( +
+
+
+
+
+ Plane Logo +
+
+
+
+
+ {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? ( + <> +

+ Sign in to Plane +

+
+
+ +
+
+ + {/* */} +
+
+ + ) : ( + + )} + + {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? ( +

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

+ ) : null} +
+
+
+ ); +}); diff --git a/space/components/accounts/user-logged-in.tsx b/space/components/accounts/user-logged-in.tsx new file mode 100644 index 000000000..3f177bcc8 --- /dev/null +++ b/space/components/accounts/user-logged-in.tsx @@ -0,0 +1,51 @@ +import Image from "next/image"; + +// mobx +import { useMobxStore } from "lib/mobx/store-provider"; +// assets +import UserLoggedInImage from "public/user-logged-in.svg"; +import PlaneLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; + +export const UserLoggedIn = () => { + const { user: userStore } = useMobxStore(); + const user = userStore.currentUser; + + if (!user) return null; + + return ( +
+
+
+ User already logged in +
+
+ {user.avatar && user.avatar !== "" ? ( +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + {user.display_name +
+ ) : ( +
+ {(user.display_name ?? "U")[0]} +
+ )} +
{user.display_name}
+
+
+ +
+
+
+
+ User already logged in +
+
+

Logged in Successfully!

+

+ You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board. +

+
+
+
+ ); +}; diff --git a/space/components/views/home.tsx b/space/components/views/home.tsx new file mode 100644 index 000000000..999fce073 --- /dev/null +++ b/space/components/views/home.tsx @@ -0,0 +1,13 @@ +// mobx +import { observer } from "mobx-react-lite"; +import { useMobxStore } from "lib/mobx/store-provider"; +// components +import { SignInView, UserLoggedIn } from "components/accounts"; + +export const HomeView = observer(() => { + const { user: userStore } = useMobxStore(); + + if (!userStore.currentUser) return ; + + return ; +}); diff --git a/space/components/views/index.ts b/space/components/views/index.ts new file mode 100644 index 000000000..84d36cd29 --- /dev/null +++ b/space/components/views/index.ts @@ -0,0 +1 @@ +export * from "./home"; diff --git a/space/components/views/project-details.tsx b/space/components/views/project-details.tsx index c0756335f..9a6cd824c 100644 --- a/space/components/views/project-details.tsx +++ b/space/components/views/project-details.tsx @@ -55,7 +55,7 @@ export const ProjectDetailsView = observer(() => { ) : ( <> {issueStore?.error ? ( -
+
Something went wrong.
) : ( diff --git a/space/pages/index.tsx b/space/pages/index.tsx index 87a291441..fe0b7d33a 100644 --- a/space/pages/index.tsx +++ b/space/pages/index.tsx @@ -1,156 +1,8 @@ -import React, { useEffect } from "react"; -import Image from "next/image"; -import { useRouter } from "next/router"; -// assets -import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.svg"; -// mobx -import { observer } from "mobx-react-lite"; -import { useMobxStore } from "lib/mobx/store-provider"; -// services -import authenticationService from "services/authentication.service"; -// hooks -import useToast from "hooks/use-toast"; +import React from "react"; + // components -import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts"; +import { HomeView } from "components/views"; -const HomePage = () => { - const { user: userStore } = useMobxStore(); - - const router = useRouter(); - const { next_path } = router.query; - - const { setToastAlert } = useToast(); - - const onSignInError = (error: any) => { - setToastAlert({ - title: "Error signing in!", - type: "error", - message: error?.error || "Something went wrong. Please try again later or contact the support team.", - }); - }; - - const onSignInSuccess = (response: any) => { - const isOnboarded = response?.user?.onboarding_step?.profile_complete || false; - - userStore.setCurrentUser(response?.user); - - if (!isOnboarded) { - router.push(`/onboarding?next_path=${next_path}`); - return; - } - router.push((next_path ?? "/").toString()); - }; - - const handleGoogleSignIn = async ({ clientId, credential }: any) => { - try { - if (clientId && credential) { - const socialAuthPayload = { - medium: "google", - credential, - clientId, - }; - const response = await authenticationService.socialAuth(socialAuthPayload); - - onSignInSuccess(response); - } else { - throw Error("Cant find credentials"); - } - } catch (err: any) { - onSignInError(err); - } - }; - - const handleGitHubSignIn = async (credential: string) => { - try { - if (process.env.NEXT_PUBLIC_GITHUB_ID && credential) { - const socialAuthPayload = { - medium: "github", - credential, - clientId: process.env.NEXT_PUBLIC_GITHUB_ID, - }; - const response = await authenticationService.socialAuth(socialAuthPayload); - onSignInSuccess(response); - } else { - throw Error("Cant find credentials"); - } - } catch (err: any) { - onSignInError(err); - } - }; - - const handlePasswordSignIn = async (formData: any) => { - await authenticationService - .emailLogin(formData) - .then((response) => { - try { - if (response) { - onSignInSuccess(response); - } - } catch (err: any) { - onSignInError(err); - } - }) - .catch((err) => onSignInError(err)); - }; - - const handleEmailCodeSignIn = async (response: any) => { - try { - if (response) { - onSignInSuccess(response); - } - } catch (err: any) { - onSignInError(err); - } - }; - - return ( -
-
-
-
-
- Plane Logo -
-
-
-
-
- {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? ( - <> -

- Sign in to Plane -

-
-
- -
-
- - {/* */} -
-
- - ) : ( - - )} - - {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? ( -

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

- ) : null} -
-
-
- ); -}; +const HomePage = () => ; export default HomePage; diff --git a/space/public/user-logged-in.svg b/space/public/user-logged-in.svg new file mode 100644 index 000000000..e20b49e82 --- /dev/null +++ b/space/public/user-logged-in.svg @@ -0,0 +1,3 @@ + + +