modified accept invite

AnujaKalahara99 · AnujaKalahara99 · commit aa4d9a5cdf04 · 2025-10-15T19:23:21.000+05:30
diff --git a/Codespace_Service/src/controllers/codespaceController.js b/Codespace_Service/src/controllers/codespaceController.js
@@ -15,7 +15,7 @@ export class CodespaceController {
     }
   }
 
-static async getallinvitedusers(req, res, next) {
+  static async getallinvitedusers(req, res, next) {
     try {
       const { id } = req.params;
       const invitedUsers = await CodespaceService.getAllInvitedUsers(id);
@@ -28,8 +28,7 @@ static async getallinvitedusers(req, res, next) {
     }
   }
 
-
-static async removeMember(req, res, next) {
+  static async removeMember(req, res, next) {
     try {
       const { codespaceId, email } = req.params;
       await CodespaceService.removeMember(codespaceId, email);
@@ -39,7 +38,7 @@ static async removeMember(req, res, next) {
       });
     } catch (error) {
       if (error.statusCode) {
-        return res.status(error.statusCode).json({    
+        return res.status(error.statusCode).json({
           error: error.message,
           code: error.code,
         });
@@ -48,7 +47,6 @@ static async removeMember(req, res, next) {
     }
   }
 
-
   static async createCodespace(req, res, next) {
     try {
       const { name } = req.body;
@@ -219,6 +217,26 @@ static async removeMember(req, res, next) {
     }
   }
 
+  static async acceptInvitationEmail(req, res, next) {
+    try {
+      const { invitationId } = req.params;
+
+      const result = await CodespaceService.acceptInvitationEmail(invitationId);
+
+      res.json({
+        email: result.email,
+      });
+    } catch (error) {
+      if (error.statusCode) {
+        return res.status(error.statusCode).json({
+          error: error.message,
+          code: error.code,
+        });
+      }
+      next(error);
+    }
+  }
+
   static async createSession(req, res, next) {
     try {
       const { codespaceId, branchName } = req.body;
diff --git a/Codespace_Service/src/routes/codespaceRoutes.js b/Codespace_Service/src/routes/codespaceRoutes.js
@@ -34,12 +34,20 @@ router.post(
   CodespaceController.shareCodespaceByEmail
 );
 
-router.get("/:id/inviteusers", validateCodespaceId, CodespaceController.getallinvitedusers);
+router.get(
+  "/:id/inviteusers",
+  validateCodespaceId,
+  CodespaceController.getallinvitedusers
+);
 router.delete("/:id", validateCodespaceId, CodespaceController.deleteCodespace);
 router.put(
   "/accept-invitation/:invitationId",
   CodespaceController.acceptInvitation
 );
+router.get(
+  "/accept-invitation-email/:invitationId",
+  CodespaceController.acceptInvitationEmail
+);
 router.put(
   "/:id/github-details",
   validateCodespaceId,
diff --git a/Codespace_Service/src/services/codespaceService.js b/Codespace_Service/src/services/codespaceService.js
@@ -49,7 +49,7 @@ export class CodespaceService {
       .select("id")
       .eq("email", email)
       .single();
-    if (profileError && profileError.code !== 'PGRST116') throw profileError; // PGRST116: No rows found
+    if (profileError && profileError.code !== "PGRST116") throw profileError; // PGRST116: No rows found
 
     // If profile exists, remove from workspace_members
     if (profile && profile.id) {
@@ -64,13 +64,11 @@ export class CodespaceService {
     return { success: true };
   }
 
-
   static async getCodespaceDetails(userId, codespaceId) {
     const { data, error } = await supabase.rpc("get_codespace_details", {
       p_user_id: userId,
       p_workspace_id: codespaceId,
     });
-    
 
     if (error) throw error;
 
@@ -88,7 +86,6 @@ export class CodespaceService {
     };
   }
 
-
   static async getAllInvitedUsers(codespaceId) {
     const { data, error } = await supabase
       .from("invitations")
@@ -397,6 +394,24 @@ export class CodespaceService {
     }
   }
 
+  static async acceptInvitationEmail(invitationId) {
+    try {
+      const { data: invitation, error: fetchError } = await supabase
+        .from("invitations")
+        .select("email")
+        .eq("id", invitationId)
+        .single();
+      if (fetchError || !invitation) {
+        throw new Error("Invitation not found");
+      }
+
+      return { email: invitation.email.trim() };
+    } catch (err) {
+      console.error("Error in acceptInvitation Email:", err);
+      throw err;
+    }
+  }
+
   static async acceptInvitation(invitationId) {
     try {
       // Fetch invitation
diff --git a/Frontend/src/App/Dashboard/AcceptInvite.tsx b/Frontend/src/App/Dashboard/AcceptInvite.tsx
@@ -15,21 +15,55 @@ const getToken = () => {
   return sessionData?.access_token || "";
 };
 
+const getLoginMail = () => {
+  const storageKey = `sb-${
+    import.meta.env.VITE_SUPABASE_PROJECT_ID
+  }-auth-token`;
+  const sessionDataString = localStorage.getItem(storageKey);
+  const sessionData = JSON.parse(sessionDataString || "null");
+  console.log("getLoginMail sessionData:", sessionData);
+  return sessionData?.user?.email || "";
+};
+
 const CollaboratePage: React.FC = () => {
   const CODESPACE_API_URL = `${import.meta.env.VITE_BACKEND_URL}/codespaces`;
 
   const navigate = useNavigate();
   const { invitationId } = useParams<{ invitationId: string }>();
   const { theme } = useTheme();
   const { refreshCodespaces } = useCodespaceContext();
+  const [invitationEmail, setInvitationEmail] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [showContent, setShowContent] = useState(false);
 
   useEffect(() => {
     const timer = setTimeout(() => setShowContent(true), 100);
+
+    const getInvitationEmail = async (invitationId: string) => {
+      try {
+        const response = await fetch(
+          `${CODESPACE_API_URL}/accept-invitation-email/${invitationId}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: getToken(),
+            },
+          }
+        );
+        setInvitationEmail(response.ok ? (await response.json()).email : null);
+      } catch (error) {
+        console.error("Error fetching invitation email:", error);
+      }
+    };
+
+    if (invitationId) {
+      getInvitationEmail(invitationId);
+    }
+
     return () => clearTimeout(timer);
-  }, []);
+  }, [CODESPACE_API_URL, invitationId]);
 
   const handleProceed = async () => {
     if (!invitationId) {
@@ -85,6 +119,88 @@ const CollaboratePage: React.FC = () => {
     }
   };
 
+  const loginEmail = getLoginMail();
+  const handleLoginRedirect = () => {
+    localStorage.setItem("invitationId", invitationId || "");
+    navigate("/login", { state: { invitationId } });
+  };
+
+  const renderActionButton = () => {
+    if (!loginEmail) {
+      return (
+        <button
+          onClick={handleLoginRedirect}
+          className={`
+            w-full px-4 py-2 rounded-md text-sm font-medium
+            text-white bg-blue-600 hover:bg-blue-700
+            transition-colors duration-200
+            flex items-center justify-center gap-2
+          `}
+        >
+          <ArrowRight className="w-4 h-4" />
+          Login with invitation email
+        </button>
+      );
+    } else if (loginEmail === invitationEmail) {
+      return (
+        <button
+          onClick={handleProceed}
+          disabled={isLoading || !invitationId}
+          className={`
+            w-full px-4 py-2 rounded-md text-sm font-medium
+            text-white bg-blue-600 hover:bg-blue-700
+            disabled:opacity-50 disabled:cursor-not-allowed
+            transition-colors duration-200
+            flex items-center justify-center gap-2
+            ${isLoading ? "cursor-wait" : ""}
+          `}
+        >
+          {isLoading ? (
+            <>
+              <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+              Processing...
+            </>
+          ) : (
+            <>
+              <ArrowRight className="w-4 h-4" />
+              Proceed
+            </>
+          )}
+        </button>
+      );
+    } else {
+      return (
+        <div className="space-y-3">
+          <div
+            className={`p-3 ${theme.surface} border border-yellow-500 rounded-md mb-3`}
+          >
+            <div className="flex items-center gap-2">
+              <AlertCircle className="w-4 h-4 text-yellow-500 flex-shrink-0" />
+              <p className={`text-sm ${theme.text}`}>
+                You're logged in as{" "}
+                <span className="font-semibold">{loginEmail}</span>, but this
+                invitation is for{" "}
+                <span className="font-semibold">{invitationEmail}</span>
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleLoginRedirect}
+            className={`
+              w-full px-4 py-2 rounded-md text-sm font-medium
+              text-white bg-blue-600 hover:bg-blue-700
+              transition-colors duration-200
+              flex items-center justify-center gap-2
+            `}
+          >
+            <ArrowRight className="w-4 h-4" />
+            Login with invitation email
+          </button>
+        </div>
+      );
+    }
+  };
+
   return (
     <div
       className={`min-h-screen flex items-center justify-center p-4 ${theme.surface}`}
@@ -139,6 +255,23 @@ const CollaboratePage: React.FC = () => {
               button below to join the workspace and start coding together.
             </p>
 
+            {invitationEmail && (
+              <div
+                className={`p-3 ${theme.surface} border ${theme.border} rounded-md mb-3`}
+              >
+                <p
+                  className={`text-xs ${theme.textSecondary} mb-2 uppercase tracking-wide`}
+                >
+                  Invitation Email
+                </p>
+                <code
+                  className={`text-sm font-mono ${theme.text} block break-all`}
+                >
+                  {invitationEmail}
+                </code>
+              </div>
+            )}
+
             {invitationId && (
               <div
                 className={`p-3 ${theme.surface} border ${theme.border} rounded-md`}
@@ -158,32 +291,7 @@ const CollaboratePage: React.FC = () => {
           </div>
 
           {/* Action Buttons */}
-          <div className="space-y-3">
-            <button
-              onClick={handleProceed}
-              disabled={isLoading || !invitationId}
-              className={`
-              w-full px-4 py-2 rounded-md text-sm font-medium
-              text-white bg-blue-600 hover:bg-blue-700
-              disabled:opacity-50 disabled:cursor-not-allowed
-              transition-colors duration-200
-              flex items-center justify-center gap-2
-              ${isLoading ? "cursor-wait" : ""}
-            `}
-            >
-              {isLoading ? (
-                <>
-                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                  Processing...
-                </>
-              ) : (
-                <>
-                  <ArrowRight className="w-4 h-4" />
-                  Accept Invitation
-                </>
-              )}
-            </button>
-          </div>
+          <div className="space-y-3">{renderActionButton()}</div>
 
           {/* Status indicator */}
           <div className={`mt-4 pt-4 border-t ${theme.border}`}>
