Skip to content

Commit

Permalink
feat: landing page after logging in (#2081)
Browse files Browse the repository at this point in the history
  • Loading branch information
aaryan610 committed Sep 4, 2023
1 parent 5e02ad8 commit 2c9c8d5
Show file tree
Hide file tree
Showing 8 changed files with 231 additions and 153 deletions.
2 changes: 2 additions & 0 deletions space/components/accounts/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
156 changes: 156 additions & 0 deletions space/components/accounts/sign-in.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="h-screen w-full overflow-hidden">
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div>
</div>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane
</h1>
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
<GoogleLoginButton handleSignIn={handleGoogleSignIn} />
{/* <GithubLoginButton handleSignIn={handleGitHubSignIn} /> */}
</div>
</div>
</>
) : (
<EmailPasswordForm onSubmit={handlePasswordSignIn} />
)}

{parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
) : null}
</div>
</div>
</div>
);
});
51 changes: 51 additions & 0 deletions space/components/accounts/user-logged-in.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="h-screen w-screen flex flex-col">
<div className="px-6 py-5 relative w-full flex items-center justify-between gap-4 border-b border-custom-border-200">
<div>
<Image src={PlaneLogo} alt="User already logged in" />
</div>
<div className="border border-custom-border-200 rounded flex items-center gap-2 p-2">
{user.avatar && user.avatar !== "" ? (
<div className="h-5 w-5 rounded-full">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={user.avatar} alt={user.display_name ?? ""} className="rounded-full" />
</div>
) : (
<div className="bg-custom-background-80 h-5 w-5 rounded-full grid place-items-center text-[10px] capitalize">
{(user.display_name ?? "U")[0]}
</div>
)}
<h6 className="text-xs font-medium">{user.display_name}</h6>
</div>
</div>

<div className="h-full w-full grid place-items-center p-6">
<div className="text-center">
<div className="h-52 w-52 bg-custom-background-80 rounded-full grid place-items-center mx-auto">
<div className="h-32 w-32">
<Image src={UserLoggedInImage} alt="User already logged in" />
</div>
</div>
<h1 className="text-3xl font-semibold mt-12">Logged in Successfully!</h1>
<p className="mt-4">
You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
</p>
</div>
</div>
</div>
);
};
13 changes: 13 additions & 0 deletions space/components/views/home.tsx
Original file line number Diff line number Diff line change
@@ -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 <SignInView />;

return <UserLoggedIn />;
});
1 change: 1 addition & 0 deletions space/components/views/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./home";
2 changes: 1 addition & 1 deletion space/components/views/project-details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ProjectDetailsView = observer(() => {
) : (
<>
{issueStore?.error ? (
<div className="text-sm text-center py-10 bg-custom-background-200 text-custom-text-100">
<div className="text-sm text-center py-10 bg-custom-background-200 text-custom-text-100">
Something went wrong.
</div>
) : (
Expand Down
Loading

2 comments on commit 2c9c8d5

@vercel
Copy link

@vercel vercel bot commented on 2c9c8d5 Sep 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-sh-dev – ./space/

plane-sh-dev-git-develop-plane.vercel.app
plane-space-dev.vercel.app
plane-sh-dev-plane.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 2c9c8d5 Sep 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plane-dev – ./web/

plane-dev.vercel.app
plane-dev-plane.vercel.app
plane-dev-git-develop-plane.vercel.app

Please sign in to comment.