ui-syncup 0.3.13 → 0.4.0-beta.2

package/src/features/user-settings/components/__tests__/security-settings.test.tsx

@@ -0,0 +1,125 @@
+import { describe, test, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { SecuritySettings } from "../security-settings";
+import * as authHooks from "@/features/auth/hooks";
+
+// Mock the auth hooks
+vi.mock("@/features/auth/hooks", () => ({
+  useLinkedAccounts: vi.fn(),
+  useLinkAccount: vi.fn(),
+  useUnlinkAccount: vi.fn(),
+}));
+
+// Mock PasswordSection as it has its own tests (or will have)
+vi.mock("../password-section", () => ({
+  PasswordSection: () => <div data-testid="password-section">Password Section Mock</div>,
+}));
+
+describe("SecuritySettings", () => {
+  const mockLinkAccount = vi.fn();
+  const mockUnlinkAccount = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    (authHooks.useLinkAccount as any).mockReturnValue({
+      mutate: mockLinkAccount,
+      isPending: false,
+    });
+
+    (authHooks.useUnlinkAccount as any).mockReturnValue({
+      mutate: mockUnlinkAccount,
+      isPending: false,
+    });
+  });
+
+  test("renders loading state", () => {
+    (authHooks.useLinkedAccounts as any).mockReturnValue({
+      data: null,
+      isLoading: true,
+      error: null,
+    });
+
+    const { container } = render(<SecuritySettings hasPassword={false} />);
+    // Check for skeleton loaders (divs with animate-pulse class)
+    const skeletons = container.getElementsByClassName("animate-pulse");
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+
+  test("renders error state", () => {
+    (authHooks.useLinkedAccounts as any).mockReturnValue({
+      data: null,
+      isLoading: false,
+      error: new Error("Failed to load"),
+    });
+
+    render(<SecuritySettings hasPassword={false} />);
+    expect(screen.getByText("Error")).toBeInTheDocument();
+  });
+
+  test("renders provider list with status", () => {
+    (authHooks.useLinkedAccounts as any).mockReturnValue({
+      data: [
+        { providerId: "google", accountId: "123", email: "test@google.com" },
+      ],
+      isLoading: false,
+      error: null,
+    });
+
+    render(<SecuritySettings hasPassword={false} />);
+
+    // Google should be connected
+    const googleCard = screen.getByText("Google").closest("div[class*='flex items-center gap-4']")?.parentElement;
+    expect(googleCard).toHaveTextContent("Connected");
+    
+    // Microsoft should not be connected
+    const microsoftCard = screen.getByText("Microsoft").closest("div[class*='flex items-center gap-4']")?.parentElement;
+    expect(microsoftCard).toHaveTextContent("Not connected");
+  });
+
+  test("calls linkAccount when Connect is clicked", () => {
+    (authHooks.useLinkedAccounts as any).mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+    });
+
+    render(<SecuritySettings hasPassword={false} />);
+
+    const connectButtons = screen.getAllByText("Connect");
+    fireEvent.click(connectButtons[0]); // Click first connect button (Google)
+
+    expect(mockLinkAccount).toHaveBeenCalledWith(
+      expect.objectContaining({ provider: "google" }),
+      expect.any(Object)
+    );
+  });
+
+  test("calls unlinkAccount when Disconnect is clicked and confirmed", async () => {
+    (authHooks.useLinkedAccounts as any).mockReturnValue({
+      data: [
+        { providerId: "google", accountId: "123" },
+        { providerId: "microsoft", accountId: "456" }, // Two accounts to allow unlinking
+      ],
+      isLoading: false,
+      error: null,
+    });
+
+    render(<SecuritySettings hasPassword={false} />);
+
+    const disconnectButton = screen.getAllByText("Disconnect")[0];
+    fireEvent.click(disconnectButton);
+
+    // Dialog should be open
+    expect(screen.getByText("Unlink Google account?")).toBeInTheDocument();
+
+    // Click confirm
+    const confirmButton = screen.getByRole("button", { name: "Disconnect" });
+    fireEvent.click(confirmButton);
+
+    expect(mockUnlinkAccount).toHaveBeenCalledWith(
+      expect.objectContaining({ providerId: "google" }),
+      expect.any(Object)
+    );
+  });
+});

package/src/features/user-settings/components/delete-account-dialog.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { AlertTriangle } from 'lucide-react'
+import { toast } from 'sonner'
+
+interface DeleteAccountDialogProps {
+  userEmail: string
+  onConfirm?: () => void
+}
+
+const CONFIRM_TEXT = 'DELETE'
+
+export function DeleteAccountDialog({
+  userEmail,
+  onConfirm,
+}: DeleteAccountDialogProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [email, setEmail] = useState('')
+  const [confirmText, setConfirmText] = useState('')
+  const [understood, setUnderstood] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const isValid =
+    email === userEmail &&
+    confirmText === CONFIRM_TEXT &&
+    understood
+
+  const handleConfirm = async () => {
+    if (!isValid) return
+
+    setIsDeleting(true)
+
+    // Simulate API call
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+
+      toast.success('Account deletion initiated', {
+        description: 'You will receive a confirmation email shortly.',
+      })
+
+      setIsOpen(false)
+      onConfirm?.()
+
+      // Reset form
+      setEmail('')
+      setConfirmText('')
+      setUnderstood(false)
+    } catch (error) {
+      toast.error('Failed to delete account', {
+        description: 'Please try again or contact support.',
+      })
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  const handleOpenChange = (open: boolean) => {
+    if (!isDeleting) {
+      setIsOpen(open)
+      if (!open) {
+        // Reset form when closing
+        setEmail('')
+        setConfirmText('')
+        setUnderstood(false)
+      }
+    }
+  }
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={handleOpenChange}>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" size="sm">
+          Delete account
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent className="max-w-lg">
+        <AlertDialogHeader>
+          <div className="flex items-center gap-3">
+            <div className="rounded-full bg-destructive/10 p-2">
+              <AlertTriangle className="h-5 w-5 text-destructive" />
+            </div>
+            <AlertDialogTitle>Delete your account</AlertDialogTitle>
+          </div>
+          <AlertDialogDescription className="text-left pt-4">
+            This action cannot be undone. This will permanently delete your
+            account and remove all your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <div className="space-y-4 py-4">
+          <Alert variant="destructive">
+            <AlertDescription className="text-sm">
+              <strong>Warning:</strong> All of your projects, issues, comments,
+              and personal data will be permanently deleted. You will not be able
+              to recover this information.
+            </AlertDescription>
+          </Alert>
+
+          <div className="space-y-2">
+            <Label htmlFor="confirm-email">
+              Confirm your email address
+            </Label>
+            <Input
+              id="confirm-email"
+              type="email"
+              placeholder={userEmail}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={isDeleting}
+              autoComplete="off"
+            />
+            <p className="text-xs text-muted-foreground">
+              Enter your email: {userEmail}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="confirm-text">
+              Type <span className="font-mono font-bold">{CONFIRM_TEXT}</span>{' '}
+              to confirm
+            </Label>
+            <Input
+              id="confirm-text"
+              type="text"
+              placeholder={CONFIRM_TEXT}
+              value={confirmText}
+              onChange={(e) => setConfirmText(e.target.value)}
+              disabled={isDeleting}
+              autoComplete="off"
+            />
+          </div>
+
+          <div className="flex items-start gap-3 pt-2">
+            <Checkbox
+              id="understood"
+              checked={understood}
+              onCheckedChange={(checked) =>
+                setUnderstood(checked === true)
+              }
+              disabled={isDeleting}
+            />
+            <Label
+              htmlFor="understood"
+              className="text-sm font-normal leading-relaxed cursor-pointer"
+            >
+              I understand that this action is permanent and irreversible. All my
+              data will be deleted and cannot be recovered.
+            </Label>
+          </div>
+        </div>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={(e) => {
+              e.preventDefault()
+              handleConfirm()
+            }}
+            disabled={!isValid || isDeleting}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isDeleting ? 'Deleting...' : 'Delete account permanently'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/src/features/user-settings/components/index.ts

@@ -0,0 +1,13 @@
+/**
+ * User Settings Components - Barrel Export
+ *
+ * Following AGENTS.md §7: Barrels at feature root expose public surface
+ */
+
+export { NotificationPreferences } from './notification-preferences'
+export { UserPreferencesComponent } from './user-preferences'
+export { IntegrationsList } from './integrations-list'
+export { OtherSettings } from './other-settings'
+export { DeleteAccountDialog } from './delete-account-dialog'
+export { SecuritySettings, type SecuritySettingsProps } from './security-settings'
+export { PasswordSection, type PasswordSectionProps } from './password-section'

package/src/features/user-settings/components/integrations-list.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { toast } from 'sonner'
+import type { Integration } from '../types'
+import { RiFigmaLine, RiTentFill } from '@remixicon/react'
+
+interface IntegrationsListProps {
+  integrations: Integration[]
+}
+
+const iconMap = {
+  figma: RiFigmaLine,
+  jira: RiTentFill
+}
+
+function formatLastSync(lastSync: string | undefined): string {
+  if (!lastSync) return ''
+
+  const date = new Date(lastSync)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMins / 60)
+  const diffDays = Math.floor(diffHours / 24)
+
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  return `${diffDays}d ago`
+}
+
+export function IntegrationsList({ integrations }: IntegrationsListProps) {
+  const [isPending, startTransition] = useTransition()
+  const [items, setItems] = useState(integrations)
+
+  const handleToggle = (integrationId: string, currentStatus: boolean) => {
+    // Optimistic update
+    setItems((prev) =>
+      prev.map((item) =>
+        item.id === integrationId
+          ? {
+              ...item,
+              connected: !currentStatus,
+              lastSync: !currentStatus ? new Date().toISOString() : undefined,
+            }
+          : item
+      )
+    )
+
+    // Simulate API call
+    startTransition(async () => {
+      try {
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        toast.success(
+          currentStatus
+            ? 'Integration disconnected'
+            : 'Integration connected successfully'
+        )
+      } catch (err) {
+        console.error('Failed to toggle integration', err)
+        toast.error('Failed to update integration')
+        // Revert on error
+        setItems(integrations)
+      }
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Connected services</CardTitle>
+          <CardDescription>
+            Manage your third-party integrations and connected accounts
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {items.map((integration) => {
+            const Icon = iconMap[integration.icon as keyof typeof iconMap]
+
+            return (
+              <div
+                key={integration.id}
+                className="flex items-start justify-between gap-4 rounded-lg border p-4"
+              >
+                <div className="flex items-start gap-4 flex-1">
+                  <div className="rounded-lg bg-primary/10 p-2 mt-1">
+                    {Icon && <Icon className="h-5 w-5 text-primary" />}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <h3 className="font-medium">{integration.name}</h3>
+                      {integration.connected && (
+                        <Badge variant="secondary" className="text-xs">
+                          Connected
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {integration.description}
+                    </p>
+                    {integration.connected && integration.lastSync && (
+                      <p className="text-xs text-muted-foreground mt-2">
+                        Last synced {formatLastSync(integration.lastSync)}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <Button
+                  variant={integration.connected ? 'outline' : 'default'}
+                  size="sm"
+                  onClick={() =>
+                    handleToggle(integration.id, integration.connected)
+                  }
+                  disabled={isPending}
+                >
+                  {integration.connected ? 'Disconnect' : 'Connect'}
+                </Button>
+              </div>
+            )
+          })}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Looking for more?</CardTitle>
+          <CardDescription>
+            We're always adding new integrations
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Have a suggestion for an integration?{' '}
+            <Button variant="link" className="h-auto p-0">
+              Let us know
+            </Button>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/features/user-settings/components/notification-preferences.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Switch } from '@/components/ui/switch'
+import { Button } from '@/components/ui/button'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { useNotificationPreferences } from '../hooks/use-notification-preferences'
+import type { NotificationPreference } from '../types'
+
+interface NotificationPreferencesProps {
+  initialPreferences: NotificationPreference[]
+  emailEnabled?: boolean
+}
+
+export function NotificationPreferences({
+  initialPreferences,
+  emailEnabled = true,
+}: NotificationPreferencesProps) {
+  const { preferences, isPending, handleToggle, handleRefresh } =
+    useNotificationPreferences({
+      initialPreferences,
+    })
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Notification channels</CardTitle>
+          <CardDescription>
+            Control which in-app and email notifications you receive.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {preferences.map((pref) => (
+            <div
+              key={pref.id}
+              className="space-y-3 rounded-lg border p-4"
+              role="group"
+              aria-label={`${pref.type} preferences`}
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1">
+                  <p className="font-medium">{pref.label}</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {pref.description}
+                  </p>
+                </div>
+                <div className="flex items-center gap-6">
+                  <div className="flex flex-col items-center gap-2">
+                    <span className="text-xs uppercase tracking-wide text-muted-foreground">
+                      In-app
+                    </span>
+                    <Switch
+                      checked={pref.inApp}
+                      disabled={isPending}
+                      onCheckedChange={(checked) =>
+                        handleToggle(pref.id, 'inApp', checked)
+                      }
+                      aria-label={`Toggle in-app notifications for ${pref.type}`}
+                    />
+                  </div>
+                  <div className="flex flex-col items-center gap-2">
+                    <span className="text-xs uppercase tracking-wide text-muted-foreground">
+                      Email
+                    </span>
+                    <Switch
+                      checked={pref.email && emailEnabled}
+                      disabled={isPending || !emailEnabled}
+                      onCheckedChange={(checked) =>
+                        handleToggle(pref.id, 'email', checked)
+                      }
+                      aria-label={`Toggle email notifications for ${pref.type}`}
+                    />
+                  </div>
+                </div>
+              </div>
+              {!emailEnabled && (
+                <Alert>
+                  <AlertDescription>
+                    Email notifications are disabled for this environment.
+                  </AlertDescription>
+                </Alert>
+              )}
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Alert>
+        <AlertDescription>
+          Use the unsubscribe link in any notification email to immediately stop
+          emails for that notification type.
+        </AlertDescription>
+      </Alert>
+
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleRefresh}
+        disabled={isPending}
+      >
+        Refresh preferences
+      </Button>
+    </div>
+  )
+}