fix: auth screens (#2054)

apps/space/components/issues/navbar/index.tsx

@@ -1,12 +1,17 @@
 import { useEffect } from "react";
+
+import Link from "next/link";
 import Image from "next/image";
-import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
 // components
 import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
-import { NavbarIssueFilter } from "./issue-filter";
 import { NavbarTheme } from "./theme";
+// ui
+import { PrimaryButton } from "components/ui";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
 // store
@@ -25,11 +30,13 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
 };
 
 const IssueNavbar = observer(() => {
-  const { project: projectStore }: RootStore = useMobxStore();
+  const { project: projectStore, user: userStore }: RootStore = useMobxStore();
   // router
   const router = useRouter();
   const { workspace_slug, project_slug, board } = router.query;
 
+  const user = userStore?.currentUser;
+
   useEffect(() => {
     if (workspace_slug && project_slug) {
       projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
@@ -77,6 +84,32 @@ const IssueNavbar = observer(() => {
       <div className="flex-shrink-0 relative">
         <NavbarTheme />
       </div>
+
+      {user ? (
+        <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 ?? "A")[0]}
+            </div>
+          )}
+          <h6 className="text-xs font-medium">{user.display_name}</h6>
+        </div>
+      ) : (
+        <div className="flex-shrink-0">
+          <Link href={`/?next_path=${router.asPath}`}>
+            <a>
+              <PrimaryButton className="flex-shrink-0" outline>
+                Sign in
+              </PrimaryButton>
+            </a>
+          </Link>
+        </div>
+      )}
     </div>
   );
 });

apps/space/components/issues/peek-overview/issue-activity.tsx

@@ -1,10 +1,16 @@
-import React, { useEffect } from "react";
+import React from "react";
+
+import Link from "next/link";
 import { useRouter } from "next/router";
+
+// mobx
 import { observer } from "mobx-react-lite";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CommentCard, AddComment } from "components/issues/peek-overview";
+// ui
+import { Icon, PrimaryButton } from "components/ui";
 // types
 import { IIssue } from "types/issue";
 
@@ -20,10 +26,10 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
 
   const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
 
-  console.log("issueDetailStore", issueDetailStore);
+  const user = userStore?.currentUser;
 
   return (
-    <div>
+    <div className="pb-10">
       <h4 className="font-medium">Activity</h4>
       {workspace_slug && (
         <div className="mt-4">
@@ -32,9 +38,25 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
               <CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
             ))}
           </div>
-          {projectStore.deploySettings?.comments && (
-            <div className="mt-4">
-              <AddComment disabled={!userStore.currentUser} />
+          {user ? (
+            <>
+              {projectStore.deploySettings?.comments && (
+                <div className="mt-4">
+                  <AddComment disabled={!userStore.currentUser} />
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="bg-custom-background-80 px-2 py-2.5 flex items-center justify-between gap-2 border border-custom-border-300 rounded">
+              <p className="flex gap-2 text-sm text-custom-text-200 break-words overflow-hidden">
+                <Icon iconName="lock" className="!text-sm" />
+                Sign in to add your comment
+              </p>
+              <Link href={`/?next_path=${router.asPath}`}>
+                <a>
+                  <PrimaryButton className="flex-shrink-0 !px-7">Sign in</PrimaryButton>
+                </a>
+              </Link>
             </div>
           )}
         </div>

apps/space/pages/index.tsx

@@ -17,7 +17,7 @@ const HomePage = () => {
   const { user: userStore } = useMobxStore();
 
   const router = useRouter();
-  const { next_path = "/" } = router.query;
+  const { next_path } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -38,7 +38,7 @@ const HomePage = () => {
       router.push(`/onboarding?next_path=${next_path}`);
       return;
     }
-    router.push(next_path.toString());
+    router.push((next_path ?? "/").toString());
   };
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {

apps/space/store/user.ts

@@ -28,8 +28,9 @@ class UserStore implements IUserStore {
   }
 
   setCurrentUser = (user: any) => {
-    // TODO: destructure user object
-    this.currentUser = user;
+    runInAction(() => {
+      this.currentUser = { ...user };
+    });
   };
 
   /**