pi sills

2026-02-23 22:52:27 +00:00
parent 8fb96c7cf8
commit 2126f3912e
35 changed files with 1126 additions and 137 deletions
@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { useClient } from 'hooks/useClient';
+
+type GoogleStatus = {
+  connected: boolean;
+  email: string | null;
+  configured: boolean;
+};
+
+export const GoogleAccount = () => {
+  const client = useClient();
+  const [isLoading, setIsLoading] = useState(true);
+  const [status, setStatus] = useState<GoogleStatus>({ connected: false, email: null, configured: false });
+
+  const fetchStatus = () => {
+    client
+      .get<GoogleStatus>('/integrations/google/status')
+      .then(setStatus)
+      .catch(() => {})
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(() => {
+    fetchStatus();
+    const params = new URLSearchParams(window.location.search);
+    const result = params.get('google');
+    if (result === 'success') {
+      toast.success('Google account connected');
+    } else if (result === 'error') {
+      toast.error('Failed to connect Google account');
+    }
+    if (result) {
+      window.history.replaceState({}, '', window.location.pathname);
+    }
+  }, []);
+
+  const handleConnect = () => {
+    const params = new URLSearchParams({
+      token: client.token ?? '',
+      origin: window.location.origin,
+    });
+    window.location.href = `/api/integrations/google/authorize?${params.toString()}`;
+  };
+
+  const handleDisconnect = async () => {
+    try {
+      await client.delete('/integrations/google/connection');
+      setStatus({ ...status, connected: false, email: null });
+      toast.success('Google account disconnected');
+    } catch {
+      toast.error('Failed to disconnect Google account');
+    }
+  };
+
+  if (isLoading) return null;
+
+  if (!status.configured) {
+    return (
+      <div className="grid gap-4">
+        <p className="text-sm text-duck-dark/60 dark:text-foreground/60">
+          Google integration has not been configured yet. Ask your administrator to set up Google OAuth credentials in
+          the Enterprise settings.
+        </p>
+      </div>
+    );
+  }
+
+  if (status.connected) {
+    return (
+      <div className="grid gap-4">
+        <div className="flex items-center gap-3 rounded-lg border border-duck-dark/10 dark:border-foreground/10 p-4">
+          <div className="h-2.5 w-2.5 rounded-full bg-green-500 shrink-0" />
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-duck-dark dark:text-foreground">Connected</p>
+            <p className="text-xs text-duck-dark/50 dark:text-foreground/50 truncate">{status.email}</p>
+          </div>
+        </div>
+        <p className="text-xs text-duck-dark/40 dark:text-foreground/40">
+          Officer has access to your Google Calendar, Gmail, and other enabled services.
+        </p>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleDisconnect}
+          className="w-full h-11 cursor-pointer"
+        >
+          Disconnect
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4">
+      <p className="text-sm text-duck-dark/60 dark:text-foreground/60">
+        Connect your Google account to give Officer access to your Calendar, Gmail, and other Google services.
+      </p>
+      <Button
+        type="button"
+        onClick={handleConnect}
+        className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold transition-all duration-200 hover:scale-105 cursor-pointer"
+      >
+        Connect Google Account
+      </Button>
+    </div>
+  );
+};