fix: auth redirection issue fixes when user is logged in (#2499)

* fix: auth redirection issues

* fix: redirect flickering fix

* chore: sign in page ui improvement and redirection fix (#2501)

* style: sign in page ui improvement

* chore: sign up redirection added and ui improvement

* chore: redirection validation and create workspace form fix (#2504)

* chore: sign in redirection validation

* fix: create workspace form input fix

* chore: code refactor

---------

Co-authored-by: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>

packages/ui/src/icons/layers-icon.tsx

@@ -14,7 +14,7 @@ export const LayersIcon: React.FC<ISvgIcons> = ({
     xmlns="http://www.w3.org/2000/svg"
     {...rest}
   >
-    <g clip-path="url(#clip0_7258_81938)">
+    <g clipPath="url(#clip0_7258_81938)">
       <path
         d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
         strokeLinecap="round"

web/components/account/email-code-form.tsx

@@ -203,7 +203,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
             variant="primary"
             type="submit"
             className="w-full"
-            size="md"
+            size="xl"
             onClick={handleSubmit(handleSignin)}
             disabled={!isValid && isDirty}
             loading={isLoading}

web/components/account/email-forgot-password-form.tsx

@@ -51,7 +51,7 @@ export const EmailForgotPasswordForm: FC<IEmailForgotPasswordForm> = (props) =>
               onChange={onChange}
               hasError={Boolean(errors.email)}
               placeholder="Enter registered email address.."
-              className="border-custom-border-300 h-[46px]"
+              className="border-custom-border-300 h-[46px] w-full"
             />
           )}
         />

web/components/account/email-password-form.tsx

@@ -56,7 +56,7 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
                 onChange={onChange}
                 hasError={Boolean(errors.email)}
                 placeholder="Enter your email address..."
-                className="border-custom-border-300 h-[46px]"
+                className="border-custom-border-300 h-[46px] w-full"
               />
             )}
           />
@@ -77,7 +77,7 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
                 onChange={onChange}
                 hasError={Boolean(errors.password)}
                 placeholder="Enter your password..."
-                className="border-custom-border-300 h-[46px]"
+                className="border-custom-border-300 h-[46px] w-full"
               />
             )}
           />
@@ -93,8 +93,10 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
         </div>
         <div>
           <Button
+            variant="primary"
             type="submit"
-            className="w-full text-center h-[46px]"
+            className="w-full"
+            size="xl"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >

web/components/account/email-signup-form.tsx

@@ -122,6 +122,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
             variant="primary"
             type="submit"
             className="w-full"
+            size="xl"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >

web/components/page-views/signin.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
@@ -20,14 +21,15 @@ import {
 import { Loader, Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+// types
 import { IUserSettings } from "types";
-import { useState } from "react";
 
 const appConfigService = new AppConfigService();
 const authService = new AuthService();
 
 export const SignInView = observer(() => {
   const { user: userStore } = useMobxStore();
+  const { fetchCurrentUserSettings } = userStore;
   // router
   const router = useRouter();
   // states
@@ -35,25 +37,46 @@ export const SignInView = observer(() => {
   // toast
   const { setToastAlert } = useToast();
   // fetch app config
-  const { data, error } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
+  const { data, error: appConfigError } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
-  // fetch user info
-  useSWR("USER_INFO", () => userStore.fetchCurrentUser());
   // computed
   const enableEmailPassword =
     data &&
     (data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github));
 
-  const handleLoginRedirection = () =>
+  useEffect(() => {
+    fetchCurrentUserSettings().then((settings) => {
+      setLoading(true);
+      router.push(
+        `/${
+          settings.workspace.last_workspace_slug
+            ? settings.workspace.last_workspace_slug
+            : settings.workspace.fallback_workspace_slug
+        }`
+      );
+    });
+  }, [fetchCurrentUserSettings, router]);
+
+  const handleLoginRedirection = () => {
+    userStore.fetchCurrentUser().then((user) => {
+      const isOnboard = user.onboarding_step.profile_complete;
+      if (isOnboard) {
         userStore
           .fetchCurrentUserSettings()
           .then((userSettings: IUserSettings) => {
             const workspaceSlug =
               userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
-        router.push(`/${workspaceSlug}`);
+            if (workspaceSlug) router.push(`/${workspaceSlug}`);
+            else if (userSettings.workspace.invites > 0) router.push("/invitations");
+            else router.push("/create-workspace");
           })
           .catch(() => {
             setLoading(false);
           });
+      } else {
+        router.push("/onboarding");
+      }
+    });
+  };
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {
     try {
@@ -114,7 +137,13 @@ export const SignInView = observer(() => {
     return authService
       .emailLogin(formData)
       .then(() => {
-        handleLoginRedirection();
+        userStore.fetchCurrentUser().then((user) => {
+          const isOnboard = user.onboarding_step.profile_complete;
+          if (isOnboard) handleLoginRedirection();
+          else {
+            router.push("/onboarding");
+          }
+        });
       })
       .catch((err) => {
         setLoading(false);
@@ -166,7 +195,7 @@ export const SignInView = observer(() => {
                 Sign in to Plane
               </h1>
 
-              {!data && !error ? (
+              {!data && !appConfigError ? (
                 <div className="pt-10 w-ful">
                   <Loader className="space-y-4 w-full pb-4">
                     <Loader.Item height="46px" width="360px" />

web/components/project/create-project-modal.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, Fragment, FC, ChangeEvent } from "react";
 import { useForm, Controller } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
 // icons
 import { X } from "lucide-react";
 // hooks
@@ -8,9 +9,9 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import useToast from "hooks/use-toast";
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 // ui
-import { Button, CustomSelect, CustomSearchSelect, Input, TextArea } from "@plane/ui";
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
-import { Avatar } from "components/ui";
 // components
+import { WorkspaceMemberSelect } from "components/workspace";
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
 // helpers
@@ -19,8 +20,6 @@ import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
 import { IWorkspaceMember } from "types";
 // constants
 import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
-import { WorkspaceMemberSelect } from "components/workspace";
-import { observer } from "mobx-react-lite";
 
 type Props = {
   isOpen: boolean;

web/components/workspace/create-workspace-form.tsx

@@ -136,13 +136,17 @@ export const CreateWorkspaceForm: FC<Props> = ({
                 message: "Workspace name should not exceed 80 characters",
               },
             }}
-            render={({ field: { value, ref } }) => (
+            render={({ field: { value, ref, onChange } }) => (
               <Input
                 id="workspaceName"
                 name="name"
                 type="text"
                 value={value}
-                onChange={(e) => setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))}
+                onChange={(e) => {
+                  onChange(e.target.value);
+                  setValue("name", e.target.value);
+                  setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
+                }}
                 ref={ref}
                 hasError={Boolean(errors.name)}
                 placeholder="Enter workspace name..."
@@ -166,7 +170,7 @@ export const CreateWorkspaceForm: FC<Props> = ({
                   id="workspaceUrl"
                   name="slug"
                   type="text"
-                  value={value}
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
                   onChange={(e) =>
                     /^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true)
                   }

web/constants/crisp.tsx

@@ -1,5 +1,7 @@
-import useUser from "hooks/use-user";
 import { useCallback, useEffect } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
 
 declare global {
   interface Window {
@@ -8,16 +10,14 @@ declare global {
   }
 }
 
-const Crisp = () => {
+const Crisp = observer(() => {
-  const { user } = useUser();
+  const { user: userStore } = useMobxStore();
+  const { currentUser } = userStore;
 
   const validateCurrentUser = useCallback(() => {
-    const currentUser = user ? user : null;
+    if (currentUser) return currentUser.email;
-
-    if (currentUser && currentUser.email) return currentUser.email;
-
     return null;
-  }, [user]);
+  }, [currentUser]);
 
   useEffect(() => {
     if (typeof window && validateCurrentUser()) {
@@ -40,5 +40,5 @@ const Crisp = () => {
   }, [validateCurrentUser]);
 
   return <></>;
-};
+});
 export default Crisp;

web/layouts/default-layout/index.tsx

@@ -1,12 +1,12 @@
+import { FC, ReactNode } from "react";
+
 type Props = {
-  children: React.ReactNode;
+  children: ReactNode;
   gradient?: boolean;
 };
 
-const DefaultLayout: React.FC<Props> = ({ children, gradient = false }) => (
+const DefaultLayout: FC<Props> = ({ children, gradient = false }) => (
-  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>
+  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>{children}</div>
-    {children}
-  </div>
 );
 
 export default DefaultLayout;

web/lib/mobx/store-init.tsx

@@ -8,6 +8,10 @@ import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
 import { observer } from "mobx-react-lite";
 
 const MobxStoreInit = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
+  // store
   const {
     theme: themeStore,
     user: userStore,
@@ -23,14 +27,11 @@ const MobxStoreInit = observer(() => {
   const [dom, setDom] = useState<any>();
   // theme
   const { setTheme } = useTheme();
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, globalViewId, viewId, inboxId } = router.query;
-
-  // const dom = useMemo(() => window && window.document?.querySelector<HTMLElement>("[data-theme='custom']"), [document]);
 
+  /**
+   * Sidebar collapsed fetching from local storage
+   */
   useEffect(() => {
-    // sidebar collapsed toggle
     const localValue = localStorage && localStorage.getItem("app_sidebar_collapsed");
     const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
     if (localValue && themeStore?.sidebarCollapsed === undefined) {
@@ -38,6 +39,9 @@ const MobxStoreInit = observer(() => {
     }
   }, [themeStore, userStore, setTheme]);
 
+  /**
+   * Setting up the theme of the user by fetching it from local storage
+   */
   useEffect(() => {
     if (!userStore.currentUser) return;
     if (window) {
@@ -45,11 +49,13 @@ const MobxStoreInit = observer(() => {
     }
     setTheme(userStore.currentUser?.theme?.theme || "system");
     if (userStore.currentUser?.theme?.theme === "custom" && dom) {
-      console.log("userStore.currentUser?.theme?.theme", userStore.currentUser?.theme);
       applyTheme(userStore.currentUser?.theme?.palette, false);
     } else unsetCustomCssVariables();
   }, [userStore.currentUser, setTheme, dom]);
 
+  /**
+   * Setting router info to the respective stores.
+   */
   useEffect(() => {
     if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
     if (projectId) projectStore.setProjectId(projectId.toString());

web/pages/accounts/sign-up.tsx

@@ -50,7 +50,7 @@ const SignUp: NextPage = () => {
         });
 
         if (response) await mutateUser();
-        router.push("/");
+        router.push("/onboarding");
       })
       .catch((err) =>
         setToastAlert({

web/store/user.store.ts

@@ -11,6 +11,7 @@ import { IWorkspaceMember, IProjectMember } from "types";
 export interface IUserStore {
   loader: boolean;
 
+  isUserLoggedIn: boolean | null;
   currentUser: IUser | null;
   currentUserSettings: IUserSettings | null;
 
@@ -38,6 +39,7 @@ export interface IUserStore {
 class UserStore implements IUserStore {
   loader: boolean = false;
 
+  isUserLoggedIn: boolean | null = null;
   currentUser: IUser | null = null;
   currentUserSettings: IUserSettings | null = null;
 
@@ -85,10 +87,14 @@ class UserStore implements IUserStore {
       if (response) {
         runInAction(() => {
           this.currentUser = response;
+          this.isUserLoggedIn = true;
         });
       }
       return response;
     } catch (error) {
+      runInAction(() => {
+        this.isUserLoggedIn = false;
+      });
       throw error;
     }
   };