feat: Implement integration status API and enhance account management

- Added a new API endpoint to fetch the integration status for Google and Outlook.
- Updated AccountManager component to display integration status and handle loading states.
- Improved error handling and user feedback for missing credentials in the UI.
- Refactored settings store to exclude sensitive API keys from persisted state.

Author: eibrahim

TODO.md

@@ -1,6 +1,8 @@
 # IMPORTANT
-- recurring tasks broken for outlook sync
+- pending waitlist - need a way to resend emails with new tokens or for users that signup again to get a new email
 - synced tasks are not set to auto-schedule by default
+- hide upcoming tasks not working
+- project sidebar edit/sync not shown properly in production when project name is too long
 - check out this comment https://www.reddit.com/r/selfhosted/comments/1irj353/comment/mjgcajo/?%24deep_link=true&correlation_id=ca91f555-ee0e-5331-bd75-473ac484ff09&ref=email_comment_reply&ref_campaign=email_comment_reply&ref_source=email&%243p=e_as&_branch_match_id=1262094978557361170&utm_medium=Email+Amazon+SES&_branch_referrer=H4sIAAAAAAAAA32O0WqEMBBFv8Z9U1djut2ClELb3wjZZKJjYxImEelLv70j9bkwgZs75zJ3LiXll7YlsBZLo1NqPIavVqTXqh9EGkHpfGEZCScM2quN%2FDgfqUq8Vf0nz77vzZk3cWWD%2BGXwbo65gOUP2yuEkll2SIuQgpXzG1qjPQSrSWFWIe4qJggqx40MMLIuk9FLPM4IviT7wQIkdTSsxHuhjaEnE4nA64IxKLTsG33vnJSyBrhCLYXo6oe9yXq4CW2G58G5651zBI5hWDV6dRZUBMl%2F%2F%2B2U0WvSOIV%2FobPqiVx%2B2AMiDJN6UNwz0PhhJ%2FgFVuHGA2YBAAA%3D
 - 
 

src/app/api/integration-status/route.ts

@@ -0,0 +1,45 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { logger } from "@/lib/logger";
+import { authenticateRequest } from "@/lib/auth/api-auth";
+
+const LOG_SOURCE = "IntegrationStatusAPI";
+
+export async function GET(request: NextRequest) {
+  try {
+    // Authenticate the request (any logged in user can access this)
+    const auth = await authenticateRequest(request, LOG_SOURCE);
+    if ("response" in auth) {
+      return auth.response;
+    }
+
+    // Get system settings
+    const settings = await prisma.systemSettings.findFirst();
+
+    // Only return boolean status of whether integrations are configured
+    return NextResponse.json({
+      google: {
+        configured: !!(
+          settings?.googleClientId && settings?.googleClientSecret
+        ),
+      },
+      outlook: {
+        configured: !!(
+          settings?.outlookClientId &&
+          settings?.outlookClientSecret &&
+          settings?.outlookTenantId
+        ),
+      },
+    });
+  } catch (error) {
+    logger.error(
+      "Failed to fetch integration status",
+      { error: error instanceof Error ? error.message : "Unknown error" },
+      LOG_SOURCE
+    );
+    return NextResponse.json(
+      { error: "Failed to fetch integration status" },
+      { status: 500 }
+    );
+  }
+}

src/components/settings/AccountManager.tsx

@@ -1,6 +1,5 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { useSettingsStore } from "@/store/settings";
-import { useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -14,17 +13,49 @@ import { AvailableCalendars } from "./AvailableCalendars";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { AlertCircle } from "lucide-react";
 import { CalDAVAccountForm } from "./CalDAVAccountForm";
+import { logger } from "@/lib/logger";
+
+const LOG_SOURCE = "AccountManager";
+
+interface IntegrationStatus {
+  google: { configured: boolean };
+  outlook: { configured: boolean };
+}
 
 export function AccountManager() {
   const { accounts, refreshAccounts, removeAccount } = useSettingsStore();
-  const { system } = useSettingsStore();
   const [showAvailableFor, setShowAvailableFor] = useState<string | null>(null);
   const [showCalDAVForm, setShowCalDAVForm] = useState(false);
+  const [integrationStatus, setIntegrationStatus] = useState<IntegrationStatus>(
+    {
+      google: { configured: false },
+      outlook: { configured: false },
+    }
+  );
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     refreshAccounts();
   }, [refreshAccounts]);
 
+  useEffect(() => {
+    // Fetch integration status
+    fetch("/api/integration-status")
+      .then((res) => res.json())
+      .then((data) => {
+        setIntegrationStatus(data);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        logger.error(
+          "Failed to fetch integration status",
+          { error: error instanceof Error ? error.message : "Unknown error" },
+          LOG_SOURCE
+        );
+        setIsLoading(false);
+      });
+  }, []);
+
   const handleConnect = (provider: "GOOGLE" | "OUTLOOK") => {
     if (provider === "GOOGLE") {
       window.location.href = `/api/calendar/google/auth`;
@@ -47,12 +78,6 @@ export function AccountManager() {
     );
   }, []);
 
-  const showGoogleCredentialsWarning =
-    !system.googleClientId || !system.googleClientSecret;
-
-  const showOutlookCredentialsWarning =
-    !system.outlookClientId || !system.outlookClientSecret;
-
   const handleCalDAVSuccess = () => {
     setShowCalDAVForm(false);
     refreshAccounts();
@@ -68,38 +93,38 @@ export function AccountManager() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
-          {showGoogleCredentialsWarning && (
+          {!integrationStatus.google.configured && (
             <Alert variant="destructive">
               <AlertCircle className="h-4 w-4" />
               <AlertTitle>Missing Google Credentials</AlertTitle>
               <AlertDescription>
-                Please go to the System Settings tab and configure your Google
-                Client ID and Secret before connecting Google Calendar.
+                Please contact your administrator to configure Google Calendar
+                integration.
               </AlertDescription>
             </Alert>
           )}
 
-          {showOutlookCredentialsWarning && (
+          {!integrationStatus.outlook.configured && (
             <Alert variant="destructive">
               <AlertCircle className="h-4 w-4" />
               <AlertTitle>Missing Outlook Credentials</AlertTitle>
               <AlertDescription>
-                Please go to the System Settings tab and configure your Outlook
-                Client ID and Secret before connecting Outlook Calendar.
+                Please contact your administrator to configure Outlook Calendar
+                integration.
               </AlertDescription>
             </Alert>
           )}
 
           <div className="flex flex-wrap gap-2">
             <Button
               onClick={() => handleConnect("GOOGLE")}
-              disabled={showGoogleCredentialsWarning}
+              disabled={!integrationStatus.google.configured || isLoading}
             >
               Connect Google Calendar
             </Button>
             <Button
               onClick={() => handleConnect("OUTLOOK")}
-              disabled={showOutlookCredentialsWarning}
+              disabled={!integrationStatus.outlook.configured || isLoading}
             >
               Connect Outlook Calendar
             </Button>

src/store/settings.ts

@@ -478,6 +478,18 @@ export const useSettingsStore = create<SettingsStore>()(
     }),
     {
       name: "calendar-settings",
+      partialize: (state) => ({
+        ...state,
+        system: {
+          ...state.system,
+          googleClientId: undefined,
+          googleClientSecret: undefined,
+          outlookClientId: undefined,
+          outlookClientSecret: undefined,
+          outlookTenantId: undefined,
+          resendApiKey: undefined,
+        },
+      }),
     }
   )
 );