feat: landing page after logging in (#2081)

2023-09-04 16:55:43 +05:30 · 2023-09-04 16:55:43 +05:30 · 2c9c8d5a89
commit 2c9c8d5a89
parent 5e02ad8104
8 changed files with 231 additions and 153 deletions
--- 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";
--- a/space/components/accounts/sign-in.tsx
+++ 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 (
+    <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>
+  );
+});
--- a/space/components/accounts/user-logged-in.tsx
+++ 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 (
+    <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>
+  );
+};
--- a/space/components/views/home.tsx
+++ 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 <SignInView />;
+
+  return <UserLoggedIn />;
+});
--- a/space/components/views/index.ts
+++ b/space/components/views/index.ts
@ -0,0 +1 @@
+export * from "./home";
--- a/space/components/views/project-details.tsx
+++ b/space/components/views/project-details.tsx
@ -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>
          ) : (
--- 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 (
-    <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>
-  );
-};
+const HomePage = () => <HomeView />;

 export default HomePage;
--- a/space/public/user-logged-in.svg
+++ b/space/public/user-logged-in.svg
@ -0,0 +1,3 @@
+<svg width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5747 100.561C16.241 100.561 15.123 100.11 14.2207 99.2074C13.3184 98.3051 12.8672 97.187 12.8672 95.8533V88.9824C12.8672 86.218 13.5633 83.8025 14.9556 81.7359C16.3478 79.6694 18.1957 78.0518 20.4995 76.8832C24.9266 74.6263 29.6007 72.8 34.5217 71.4044C39.4429 70.0089 45.2455 69.3112 51.9296 69.3112C54.5337 69.3112 56.956 69.4164 59.1962 69.6267C61.4364 69.837 63.528 70.1525 65.4711 70.5732L58.5603 77.484C57.6054 77.3104 56.5721 77.2069 55.4603 77.1736C54.3485 77.1401 53.1716 77.1234 51.9296 77.1234C45.7664 77.1234 40.3661 77.8112 35.7286 79.1867C31.0912 80.5622 27.21 82.1181 24.085 83.8542C22.9032 84.4885 22.0401 85.2297 21.4958 86.0777C20.9517 86.9258 20.6796 87.8941 20.6796 88.9824V92.7484H52.23L60.0423 100.561H17.5747ZM80.3283 102.484C79.7051 102.484 79.1231 102.384 78.5822 102.183C78.0413 101.983 77.5241 101.636 77.0306 101.143L66.9135 91.0257C66.1925 90.3046 65.8235 89.3981 65.8068 88.3064C65.7901 87.2147 66.159 86.2916 66.9135 85.5371C67.6681 84.7825 68.5829 84.4052 69.6579 84.4052C70.7329 84.4052 71.6477 84.7825 72.4022 85.5371L80.335 93.4698L103.893 69.9121C104.614 69.1909 105.52 68.822 106.612 68.8053C107.704 68.7886 108.627 69.1575 109.381 69.9121C110.136 70.6666 110.513 71.5814 110.513 72.6564C110.513 73.7314 110.136 74.6461 109.381 75.4007L83.6302 101.152C83.1428 101.639 82.6264 101.983 82.0811 102.183C81.5358 102.384 80.9515 102.484 80.3283 102.484ZM51.9296 60.8974C46.9166 60.8974 42.6252 59.1125 39.0553 55.5427C35.4855 51.9728 33.7007 47.6814 33.7007 42.6685C33.7007 37.6555 35.4855 33.3641 39.0553 29.7943C42.6252 26.2244 46.9166 24.4395 51.9296 24.4395C56.9425 24.4395 61.2339 26.2244 64.8038 29.7943C68.3737 33.3641 70.1586 37.6555 70.1586 42.6685C70.1586 47.6814 68.3737 51.9728 64.8038 55.5427C61.2339 59.1125 56.9425 60.8974 51.9296 60.8974ZM51.9296 53.0852C54.7941 53.0852 57.2464 52.0652 59.2863 50.0253C61.3263 47.9853 62.3462 45.5331 62.3462 42.6685C62.3462 39.8039 61.3263 37.3517 59.2863 35.3117C57.2464 33.2718 54.7941 32.2518 51.9296 32.2518C49.065 32.2518 46.6127 33.2718 44.5728 35.3117C42.5329 37.3517 41.5129 39.8039 41.5129 42.6685C41.5129 45.5331 42.5329 47.9853 44.5728 50.0253C46.6127 52.0652 49.065 53.0852 51.9296 53.0852Z" fill="#9D9D9D"/>
+</svg>