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>
2024-06-14 14:31:34 +00:00 · 2023-10-20 17:10:17 +05:30 · 2023-10-20 17:10:17 +05:30 · 9f1fd2327a
commit 9f1fd2327a
parent d78b4dccf3
13 changed files with 99 additions and 52 deletions
--- a/packages/ui/src/icons/layers-icon.tsx
+++ b/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"
--- a/web/components/account/email-code-form.tsx
+++ b/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}
--- a/web/components/account/email-forgot-password-form.tsx
+++ b/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"
            />
          )}
        />
--- a/web/components/account/email-password-form.tsx
+++ b/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}
          >
--- a/web/components/account/email-signup-form.tsx
+++ b/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}
          >
--- a/web/components/page-views/signin.tsx
+++ b/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());
-  // fetch user info
-  useSWR("USER_INFO", () => userStore.fetchCurrentUser());
+  const { data, error: appConfigError } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
  // computed
  const enableEmailPassword =
    data &&
    (data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github));

-  const handleLoginRedirection = () =>
-    userStore
-      .fetchCurrentUserSettings()
-      .then((userSettings: IUserSettings) => {
-        const workspaceSlug =
-          userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
-        router.push(`/${workspaceSlug}`);
-      })
-      .catch(() => {
-        setLoading(false);
-      });
+  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;
+            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" />
--- a/web/components/project/create-project-modal.tsx
+++ b/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 { Avatar } from "components/ui";
+import { Button, CustomSelect, Input, TextArea } from "@plane/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;
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/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)
                  }
--- a/web/constants/crisp.tsx
+++ b/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 { user } = useUser();
+const Crisp = observer(() => {
+  const { user: userStore } = useMobxStore();
+  const { currentUser } = userStore;

  const validateCurrentUser = useCallback(() => {
-    const currentUser = user ? user : null;
-
-    if (currentUser && currentUser.email) return currentUser.email;
-
+    if (currentUser) return currentUser.email;
    return null;
-  }, [user]);
+  }, [currentUser]);

  useEffect(() => {
    if (typeof window && validateCurrentUser()) {
@ -40,5 +40,5 @@ const Crisp = () => {
  }, [validateCurrentUser]);

  return <></>;
-};
+});
 export default Crisp;
--- a/web/layouts/default-layout/index.tsx
+++ b/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 }) => (
-  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>
-    {children}
-  </div>
+const DefaultLayout: FC<Props> = ({ children, gradient = false }) => (
+  <div className={`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`}>{children}</div>
 );

 export default DefaultLayout;
--- a/web/lib/mobx/store-init.tsx
+++ b/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());
--- a/web/pages/accounts/sign-up.tsx
+++ b/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({
--- a/web/store/user.store.ts
+++ b/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;
    }
  };