[WEB-1319] chore: handled redirection when user is not logged in (#4497)

* chore: handled redirection when user is not logged in

* dev: handle url redirection in space app

* dev: remove user from redis on successful code matching

space/app/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 // components
@@ -9,17 +10,18 @@ import { AuthView } from "@/components/views";
 import { useUser } from "@/hooks/store";
 
 function HomePage() {
-  const { fetchCurrentUser, isAuthenticated, isLoading } = useUser();
+  const { data: currentUser, fetchCurrentUser, isAuthenticated, isLoading } = useUser();
 
-  useSWR("CURRENT_USER", () => fetchCurrentUser(), { errorRetryCount: 0 });
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
+    errorRetryCount: 0,
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+    refreshWhenHidden: false,
+  });
 
-  if (isLoading) {
-    return <LogoSpinner />;
-  }
+  if (isLoading) return <LogoSpinner />;
 
-  if (isAuthenticated) {
-    return <UserLoggedIn />;
-  }
+  if (currentUser && isAuthenticated) return <UserLoggedIn />;
 
   return <AuthView />;
 }

space/components/account/auth-forms/auth-root.tsx

@@ -35,6 +35,7 @@ export const AuthRoot: FC = observer(() => {
   const searchParams = useSearchParams();
   const emailParam = searchParams.get("email") || undefined;
   const error_code = searchParams.get("error_code") || undefined;
+  const nextPath = searchParams.get("next_path") || undefined;
   // states
   const [authMode, setAuthMode] = useState<EAuthModes>(EAuthModes.SIGN_UP);
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
@@ -141,6 +142,7 @@ export const AuthRoot: FC = observer(() => {
           <AuthUniqueCodeForm
             mode={authMode}
             email={email}
+            nextPath={nextPath}
             handleEmailClear={() => {
               setEmail("");
               setAuthStep(EAuthSteps.EMAIL);
@@ -154,6 +156,7 @@ export const AuthRoot: FC = observer(() => {
             isPasswordAutoset={isPasswordAutoset}
             isSMTPConfigured={isSMTPConfigured}
             email={email}
+            nextPath={nextPath}
             handleEmailClear={() => {
               setEmail("");
               setAuthStep(EAuthSteps.EMAIL);

space/components/account/auth-forms/password.tsx

@@ -19,6 +19,7 @@ type Props = {
   isPasswordAutoset: boolean;
   isSMTPConfigured: boolean;
   mode: EAuthModes;
+  nextPath: string | undefined;
   handleEmailClear: () => void;
   handleAuthStep: (step: EAuthSteps) => void;
 };
@@ -37,7 +38,7 @@ const defaultValues: TPasswordFormValues = {
 const authService = new AuthService();
 
 export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
-  const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props;
+  const { email, nextPath, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props;
   // states
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [passwordFormData, setPasswordFormData] = useState<TPasswordFormValues>({ ...defaultValues, email });
@@ -65,6 +66,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
   };
 
   const passwordSupport = passwordFormData.password.length > 0 &&
+    mode === EAuthModes.SIGN_UP &&
     (getPasswordStrength(passwordFormData.password) < 3 || isPasswordInputFocused) && (
       <PasswordStrengthMeter password={passwordFormData.password} />
     );
@@ -92,6 +94,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <input type="hidden" value={passwordFormData.email} name="email" />
+      <input type="hidden" value={nextPath} name="next_path" />
       <div className="space-y-1">
         <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
           Email

space/components/account/auth-forms/unique-code.tsx

@@ -18,6 +18,7 @@ const authService = new AuthService();
 type TAuthUniqueCodeForm = {
   mode: EAuthModes;
   email: string;
+  nextPath: string | undefined;
   handleEmailClear: () => void;
   generateEmailUniqueCode: (email: string) => Promise<{ code: string } | undefined>;
 };
@@ -33,7 +34,7 @@ const defaultValues: TUniqueCodeFormValues = {
 };
 
 export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
-  const { mode, email, handleEmailClear, generateEmailUniqueCode } = props;
+  const { mode, email, nextPath, handleEmailClear, generateEmailUniqueCode } = props;
   // hooks
   // const { captureEvent } = useEventTracker();
   // derived values
@@ -81,6 +82,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
     >
       <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
       <input type="hidden" value={uniqueCodeFormData.email} name="email" />
+      <input type="hidden" value={nextPath} name="next_path" />
       <div className="space-y-1">
         <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
           Email

space/components/account/oauth/oauth-options.tsx

@@ -18,10 +18,10 @@ export const OAuthOptions: React.FC = observer(() => {
       <div className={`mt-7 grid gap-4 overflow-hidden`}>
         {instance?.config?.is_google_enabled && (
           <div className="flex h-[42px] items-center !overflow-hidden">
-            <GoogleOAuthButton text="SignIn with Google" />
+            <GoogleOAuthButton text="Sign in with Google" />
           </div>
         )}
-        {instance?.config?.is_github_enabled && <GithubOAuthButton text="SignIn with Github" />}
+        {instance?.config?.is_github_enabled && <GithubOAuthButton text="Sign in with Github" />}
       </div>
     </>
   );

space/components/issues/peek-overview/comment/comment-reactions.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Tooltip } from "@plane/ui";
 // ui
 import { ReactionSelector } from "@/components/ui";
 // helpers
 import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
+import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
 import { useIssueDetails, useUser } from "@/hooks/store";
 
@@ -15,6 +17,15 @@ type Props = {
 };
 
 export const CommentReactions: React.FC<Props> = observer((props) => {
+  const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+
   const { commentId, projectId, workspaceSlug } = props;
   // hooks
   const { addCommentReaction, removeCommentReaction, details, peekId } = useIssueDetails();
@@ -42,13 +53,15 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
     else handleAddReaction(reactionHex);
   };
 
-  // TODO: on onclick redirect to login page if the user is not logged in
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+
   return (
     <div className="mt-2 flex items-center gap-1.5">
       <ReactionSelector
         onSelect={(value) => {
           if (user) handleReactionClick(value);
-          // userStore.requiredLogin(() => {});
+          else router.push(`/?next_path=${pathName}?${queryParam}`);
         }}
         position="top"
         selected={userReactions?.map((r) => r.reaction)}
@@ -77,7 +90,7 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
                 type="button"
                 onClick={() => {
                   if (user) handleReactionClick(reaction);
-                  // userStore.requiredLogin(() => {});
+                  else router.push(`/?next_path=${pathName}?${queryParam}`);
                 }}
                 className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
                   commentReactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)

space/components/issues/peek-overview/issue-emoji-reactions.tsx

@@ -1,10 +1,12 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // lib
 import { Tooltip } from "@plane/ui";
 import { ReactionSelector } from "@/components/ui";
 // helpers
 import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
+import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
 import { useIssueDetails, useUser } from "@/hooks/store";
 
@@ -14,6 +16,16 @@ type IssueEmojiReactionsProps = {
 };
 
 export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer((props) => {
+  const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const peekId = searchParams.get("peekId") || undefined;
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+
   const { workspaceSlug, projectId } = props;
   // store
   const issueDetailsStore = useIssueDetails();
@@ -46,13 +58,15 @@ export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer(
     fetchCurrentUser();
   }, [user, fetchCurrentUser]);
 
-  // TODO: on onclick of reaction, if user not logged in redirect to login page
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+
   return (
     <>
       <ReactionSelector
         onSelect={(value) => {
           if (user) handleReactionClick(value);
-          // userStore.requiredLogin(() => {});
+          else router.push(`/?next_path=${pathName}?${queryParam}`);
         }}
         selected={userReactions?.map((r) => r.reaction)}
         size="md"
@@ -80,7 +94,7 @@ export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer(
                   type="button"
                   onClick={() => {
                     if (user) handleReactionClick(reaction);
-                    // userStore.requiredLogin(() => {});
+                    else router.push(`/?next_path=${pathName}?${queryParam}`);
                   }}
                   className={`flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
                     reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)

space/components/issues/peek-overview/issue-vote-reactions.tsx

@@ -2,11 +2,24 @@
 
 import { useState, useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Tooltip } from "@plane/ui";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
 import { useIssueDetails, useUser } from "@/hooks/store";
 
 export const IssueVotes: React.FC = observer((props: any) => {
+  const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const peekId = searchParams.get("peekId") || undefined;
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+
   const { workspaceSlug, projectId } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -49,6 +62,9 @@ export const IssueVotes: React.FC = observer((props: any) => {
 
   const VOTES_LIMIT = 1000;
 
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+
   return (
     <div className="flex items-center gap-2">
       {/* upvote button 👇 */}
@@ -74,7 +90,7 @@ export const IssueVotes: React.FC = observer((props: any) => {
           disabled={isSubmitting}
           onClick={(e) => {
             if (user) handleVote(e, 1);
-            // userStore.requiredLogin(() => {});
+            else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
           className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
             isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
@@ -108,7 +124,7 @@ export const IssueVotes: React.FC = observer((props: any) => {
           disabled={isSubmitting}
           onClick={(e) => {
             if (user) handleVote(e, -1);
-            // userStore.requiredLogin(() => {});
+            else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
           className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
             isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"