feat: init

apps/web/core/components/auth-screens/auth-base.tsx

@@ -0,0 +1,18 @@
+"use client";
+import React from "react";
+import { AuthRoot } from "@/components/account/auth-forms/auth-root";
+import type { EAuthModes } from "@/helpers/authentication.helper";
+import { AuthFooter } from "./footer";
+import { AuthHeader } from "./header";
+
+type AuthBaseProps = {
+  authType: EAuthModes;
+};
+
+export const AuthBase = ({ authType }: AuthBaseProps) => (
+  <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <AuthHeader type={authType} />
+    <AuthRoot authMode={authType} />
+    <AuthFooter />
+  </div>
+);

apps/web/core/components/auth-screens/footer.tsx

@@ -0,0 +1,38 @@
+"use client";
+import React from "react";
+import { AccentureLogo, DolbyLogo, SonyLogo, ZerodhaLogo } from "@plane/propel/icons";
+
+const BRAND_LOGOS: {
+  id: string;
+  icon: React.ReactNode;
+}[] = [
+  {
+    id: "zerodha",
+    icon: <ZerodhaLogo className="h-7 w-24 text-[#387ED1]" />,
+  },
+  {
+    id: "sony",
+    icon: <SonyLogo className="h-7 w-16 dark:text-white" />,
+  },
+  {
+    id: "dolby",
+    icon: <DolbyLogo className="h-7 w-16 dark:text-white" />,
+  },
+  {
+    id: "accenture",
+    icon: <AccentureLogo className="h-7 w-24 dark:text-white" />,
+  },
+];
+
+export const AuthFooter = () => (
+  <div className="flex flex-col items-center gap-6">
+    <span className="text-sm text-custom-text-300 whitespace-nowrap">Join 10,000+ teams building with Plane</span>
+    <div className="flex items-center justify-center gap-x-10 gap-y-4 w-full flex-wrap">
+      {BRAND_LOGOS.map((brand) => (
+        <div className="flex items-center justify-center h-7 flex-1" key={brand.id}>
+          {brand.icon}
+        </div>
+      ))}
+    </div>
+  </div>
+);

apps/web/core/components/auth-screens/header.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { AUTH_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { PlaneLockup } from "@plane/propel/icons";
+import { PageHead } from "@/components/core/page-title";
+import { EAuthModes } from "@/helpers/authentication.helper";
+import { useInstance } from "@/hooks/store/use-instance";
+
+const authContentMap = {
+  [EAuthModes.SIGN_IN]: {
+    pageTitle: "Sign up",
+    text: "auth.common.new_to_plane",
+    linkText: "Sign up",
+    linkHref: "/sign-up",
+  },
+  [EAuthModes.SIGN_UP]: {
+    pageTitle: "Sign in",
+    text: "auth.common.already_have_an_account",
+    linkText: "Sign in",
+    linkHref: "/sign-in",
+  },
+};
+
+type AuthHeaderProps = {
+  type: EAuthModes;
+};
+
+export const AuthHeader = observer(({ type }: AuthHeaderProps) => {
+  const { t } = useTranslation();
+  // store
+  const { config } = useInstance();
+  // derived values
+  const enableSignUpConfig = config?.enable_signup ?? false;
+  return (
+    <>
+      <PageHead title={t(authContentMap[type].pageTitle) + " - Plane"} />
+      <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+        <Link href="/">
+          <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+        </Link>
+        {enableSignUpConfig && (
+          <div className="flex flex-col items-end text-sm font-medium text-center sm:items-center sm:gap-2 sm:flex-row text-custom-text-300">
+            {t(authContentMap[type].text)}
+            <Link
+              data-ph-element={AUTH_TRACKER_ELEMENTS.NAVIGATE_TO_SIGN_UP}
+              href={authContentMap[type].linkHref}
+              className="font-semibold text-custom-primary-100 hover:underline"
+            >
+              {t(authContentMap[type].linkText)}
+            </Link>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});

apps/web/core/components/auth-screens/not-authorized-view.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+// layouts
+import DefaultLayout from "@/layouts/default-layout";
+// images
+import ProjectNotAuthorizedImg from "@/public/auth/project-not-authorized.svg";
+import Unauthorized from "@/public/auth/unauthorized.svg";
+import WorkspaceNotAuthorizedImg from "@/public/auth/workspace-not-authorized.svg";
+
+type Props = {
+  actionButton?: React.ReactNode;
+  section?: "settings" | "general";
+  isProjectView?: boolean;
+  className?: string;
+};
+
+export const NotAuthorizedView: React.FC<Props> = observer((props) => {
+  const { actionButton, section = "general", isProjectView = false, className } = props;
+
+  // assets
+  const settingAsset = isProjectView ? ProjectNotAuthorizedImg : WorkspaceNotAuthorizedImg;
+  const asset = section === "settings" ? settingAsset : Unauthorized;
+
+  return (
+    <DefaultLayout className={className}>
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
+        <div className="h-44 w-72">
+          <Image src={asset} height="176" width="288" alt="ProjectSettingImg" />
+        </div>
+        <h1 className="text-xl font-medium text-custom-text-100">Oops! You are not authorized to view this page</h1>
+        {actionButton}
+      </div>
+    </DefaultLayout>
+  );
+});

apps/web/core/components/auth-screens/project/join-project.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image";
+import { useParams } from "next/navigation";
+import { ClipboardList } from "lucide-react";
+// plane imports
+import { Button } from "@plane/propel/button";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// assets
+import Unauthorized from "@/public/auth/unauthorized.svg";
+
+type Props = {
+  projectId?: string;
+  isPrivateProject?: boolean;
+};
+
+export const JoinProject: React.FC<Props> = (props) => {
+  const { projectId, isPrivateProject = false } = props;
+  // states
+  const [isJoiningProject, setIsJoiningProject] = useState(false);
+  // store hooks
+  const { joinProject } = useUserPermissions();
+  const { fetchProjectDetails } = useProject();
+
+  const { workspaceSlug } = useParams();
+
+  const handleJoin = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsJoiningProject(true);
+
+    joinProject(workspaceSlug.toString(), projectId.toString())
+      .then(() => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()))
+      .finally(() => setIsJoiningProject(false));
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
+      <div className="h-44 w-72">
+        <Image src={Unauthorized} height="176" width="288" alt="JoinProject" />
+      </div>
+      <h1 className="text-xl font-medium text-custom-text-100">
+        {!isPrivateProject ? `You are not a member of this project yet.` : `You are not a member of this project.`}
+      </h1>
+
+      <div className="w-full max-w-md text-base text-custom-text-200">
+        <p className="mx-auto w-full text-sm md:w-3/4">
+          {!isPrivateProject
+            ? `Click the button below to join it.`
+            : `This is a private project. \n We can't tell you more about this project to protect confidentiality.`}
+        </p>
+      </div>
+      {!isPrivateProject && (
+        <div>
+          <Button
+            variant="primary"
+            prependIcon={<ClipboardList color="white" />}
+            loading={isJoiningProject}
+            onClick={handleJoin}
+          >
+            {isJoiningProject ? "Taking you in" : "Click to join"}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

apps/web/core/components/auth-screens/workspace/not-a-member.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Link from "next/link";
+// ui
+import { Button } from "@plane/propel/button";
+// layouts
+import DefaultLayout from "@/layouts/default-layout";
+
+export const NotAWorkspaceMember = () => (
+  <DefaultLayout>
+    <div className="grid h-full place-items-center p-4">
+      <div className="space-y-8 text-center">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Not Authorized!</h3>
+          <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+            You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or check
+            your pending invitations.
+          </p>
+        </div>
+        <div className="flex items-center justify-center gap-2">
+          <Link href="/invitations">
+            <span>
+              <Button variant="neutral-primary">Check pending invites</Button>
+            </span>
+          </Link>
+          <Link href="/create-workspace">
+            <span>
+              <Button variant="primary">Create new workspace</Button>
+            </span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  </DefaultLayout>
+);