Merge pull request #2085 from makeplane/develop

Promote: Develop to Stage Release

package.json

@@ -19,8 +19,7 @@
   "devDependencies": {
     "eslint-config-custom": "*",
     "prettier": "latest",
-    "turbo": "latest",
-    "husky": "^8.0.3"
+    "turbo": "latest"
   },
   "packageManager": "yarn@1.22.19"
 }

space/.env.example

@@ -1 +1,8 @@
-NEXT_PUBLIC_API_BASE_URL=''
+# Base url for the API requests
+NEXT_PUBLIC_API_BASE_URL=""
+# Public boards deploy URL
+NEXT_PUBLIC_DEPLOY_URL=""
+# Google Client ID for Google OAuth
+NEXT_PUBLIC_GOOGLE_CLIENTID=""
+# Flag to toggle OAuth
+NEXT_PUBLIC_ENABLE_OAUTH=1

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";

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>
+  );
+});

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>
+  );
+};

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 />;
+});

space/components/views/index.ts

@@ -0,0 +1 @@
+export * from "./home";

space/components/views/project-details.tsx

@@ -1,5 +1,9 @@
 import { useEffect } from "react";
+
+import Image from "next/image";
 import { useRouter } from "next/router";
+
+// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { IssueListView } from "components/issues/board-views/list";
@@ -11,6 +15,8 @@ import { IssuePeekOverview } from "components/issues/peek-overview";
 // mobx store
 import { RootStore } from "store/root";
 import { useMobxStore } from "lib/mobx/store-provider";
+// assets
+import SomethingWentWrongImage from "public/something-went-wrong.svg";
 
 export const ProjectDetailsView = observer(() => {
   const router = useRouter();
@@ -55,8 +61,16 @@ export const ProjectDetailsView = observer(() => {
       ) : (
         <>
           {issueStore?.error ? (
-            <div className="text-sm text-center py-10  bg-custom-background-200 text-custom-text-100">
-              Something went wrong.
+            <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 grid place-items-center">
+                    <Image src={SomethingWentWrongImage} alt="Oops! Something went wrong" />
+                  </div>
+                </div>
+                <h1 className="text-3xl font-semibold mt-12">Oops! Something went wrong.</h1>
+                <p className="mt-4 text-custom-text-300">The public board does not exist. Please check the URL.</p>
+              </div>
             </div>
           ) : (
             projectStore?.activeBoard && (

space/next.config.js

@@ -13,6 +13,7 @@ const nextConfig = {
 
 if (parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) {
   const nextConfigWithNginx = withImages({ basePath: "/spaces", ...nextConfig });
+  module.exports = nextConfigWithNginx;
 } else {
   module.exports = nextConfig;
 }

space/pages/_app.tsx

@@ -12,6 +12,8 @@ import MobxStoreInit from "lib/mobx/store-init";
 // constants
 import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "constants/seo";
 
+const prefix = parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0") === 0 ? "/" : "/spaces/";
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <MobxStoreProvider>
@@ -25,11 +27,11 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta property="og:description" content={SITE_DESCRIPTION} />
         <meta name="keywords" content={SITE_KEYWORDS} />
         <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
-        <link rel="apple-touch-icon" sizes="180x180" href="/spaces/favicon/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/spaces/favicon/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/spaces/favicon/favicon-16x16.png" />
-        <link rel="manifest" href="/spaces/site.webmanifest.json" />
-        <link rel="shortcut icon" href="/spaces/favicon/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href={`${prefix}favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${prefix}favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${prefix}favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${prefix}site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${prefix}favicon/favicon.ico`} />
       </Head>
       <ToastContextProvider>
         <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>