ui-syncup 0.3.13 → 0.4.0-beta.1

package/src/features/auth/hooks/use-onboarding.ts

@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+
+import { useCreateTeam, useTeams } from "@/features/teams";
+import type { InvitationDetails, OnboardingMode } from "../types";
+import { onboardingSchema, type OnboardingSchema } from "../utils/validators";
+
+export function useOnboarding(
+  invitationToken: string | null,
+  invitedTeamName: string,
+) {
+  const router = useRouter();
+  const { mutate: createTeam, isPending: isCreating } = useCreateTeam();
+  const { data: teamsData, isLoading: isLoadingTeams } = useTeams();
+
+  const [mode, setMode] = useState<OnboardingMode>(
+    invitationToken ? "accept" : "create",
+  );
+  const [invitationDetails, setInvitationDetails] =
+    useState<InvitationDetails | null>(null);
+  const [loadingInvitation, setLoadingInvitation] = useState(
+    Boolean(invitationToken),
+  );
+  const [status, setStatus] = useState<"idle" | "working">("idle");
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [hasExistingTeams, setHasExistingTeams] = useState(false);
+
+  const form = useForm<OnboardingSchema>({
+    resolver: zodResolver(onboardingSchema),
+    defaultValues: {
+      teamName: invitedTeamName,
+    },
+  });
+
+  // Check for existing teams (Requirement 17.5)
+  useEffect(() => {
+    if (
+      !isLoadingTeams &&
+      teamsData?.teams &&
+      teamsData.teams.length > 0 &&
+      !invitationToken &&
+      mode === "create"
+    ) {
+      setHasExistingTeams(true);
+    }
+  }, [teamsData, isLoadingTeams, invitationToken, mode]);
+
+  // Mock fetch invitation details
+  useEffect(() => {
+    if (!invitationToken) {
+      setInvitationDetails(null);
+      setLoadingInvitation(false);
+      setMode("create");
+      return;
+    }
+
+    setLoadingInvitation(true);
+    const timer = setTimeout(() => {
+      // Mock invitation details - replace with real API call later
+      setInvitationDetails({
+        teamName: invitedTeamName || "Northwind Design",
+        inviterName: "Riley Blake",
+        role: "Reviewer",
+      });
+      setLoadingInvitation(false);
+      setMode("accept");
+    }, 600);
+
+    return () => clearTimeout(timer);
+  }, [invitationToken, invitedTeamName]);
+
+  // Sync team name with query param
+  useEffect(() => {
+    if (!invitationToken) {
+      form.setValue("teamName", invitedTeamName);
+    }
+  }, [invitationToken, invitedTeamName, form]);
+
+  const handleCreateTeam = form.handleSubmit(async (data) => {
+    setError(null);
+    setMessage(null);
+
+    createTeam(
+      { name: data.teamName, description: "" },
+      {
+        onSuccess: async (response) => {
+          toast.success("Team created successfully");
+          
+          // Requirement 17.3: Switch to the new team as active team
+          try {
+            const switchResponse = await fetch(`/api/teams/${response.team.id}/switch`, {
+              method: 'POST',
+              credentials: 'include',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+            });
+
+            if (!switchResponse.ok) {
+              throw new Error('Failed to switch team context');
+            }
+
+            // Requirement 17.4: Redirect to projects page with new team context
+            router.push("/projects");
+          } catch (err) {
+            setError("Team created but failed to switch context. Please refresh the page.");
+          }
+        },
+        onError: (err) => {
+          setError(err.message || "Failed to create team");
+        },
+      }
+    );
+  });
+
+  const handleAcceptInvitation = () => {
+    if (!invitationDetails) {
+      return;
+    }
+
+    setStatus("working");
+    setError(null);
+    setMessage(null);
+
+    // Mock API call - replace with real invitation acceptance later
+    setTimeout(() => {
+      setStatus("idle");
+      setMessage(
+        `Accepted invite to ${invitationDetails.teamName}. Navigation is mocked in this build.`,
+      );
+    }, 600);
+  };
+
+  const switchMode = (newMode: OnboardingMode) => {
+    setMode(newMode);
+    setMessage(null);
+    setError(null);
+  };
+
+  return {
+    mode,
+    invitationDetails,
+    loadingInvitation,
+    status: isCreating ? "working" : status,
+    message,
+    error,
+    form,
+    handleCreateTeam,
+    handleAcceptInvitation,
+    switchMode,
+    hasExistingTeams,
+  };
+}

package/src/features/auth/hooks/use-resend-verification.ts

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { apiClient, ApiError } from "@/lib/api-client";
+import { toast } from "sonner";
+
+interface ResendVerificationRequest {
+  email: string;
+}
+
+interface ResendVerificationResponse {
+  message: string;
+}
+
+/**
+ * Resend verification email API call
+ */
+async function resendVerification(data: ResendVerificationRequest): Promise<ResendVerificationResponse> {
+  return await apiClient<ResendVerificationResponse>("/api/auth/resend-verification", {
+    method: "POST",
+    body: data as unknown as Record<string, unknown>,
+  });
+}
+
+/**
+ * Hook for resending verification emails
+ *
+ * Features:
+ * - React Query mutation to POST /api/auth/resend-verification
+ * - Handles rate limiting with retry-after from server
+ * - Client-side 60-second countdown to prevent spam
+ * - Shows toast notifications
+ * - Tracks loading and error states
+ *
+ * @returns Mutation state, resend handler, and countdown timer
+ */
+export function useResendVerification() {
+  const [retryAfter, setRetryAfter] = useState<number | null>(null);
+  const [countdown, setCountdown] = useState<number>(0);
+
+  // Countdown timer effect
+  useEffect(() => {
+    if (countdown <= 0) return;
+
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [countdown]);
+
+  const mutation = useMutation({
+    mutationFn: resendVerification,
+    onMutate: () => {
+      setRetryAfter(null);
+    },
+    onSuccess: () => {
+      // Start 60-second countdown after successful send
+      setCountdown(60);
+
+      toast.success("Verification email sent", {
+        description: "Please check your inbox and spam folder.",
+      });
+    },
+    onError: (error: Error) => {
+      if (error instanceof ApiError) {
+        const errorPayload = error.payload as any;
+
+        // Handle rate limit errors (429)
+        if (error.status === 429) {
+          const retryTime = errorPayload?.error?.retryAfter || 60;
+          setRetryAfter(retryTime);
+          setCountdown(retryTime); // Also set countdown to match server rate limit
+
+          toast.error("Too many requests", {
+            description: `Please wait ${retryTime} seconds before trying again.`,
+          });
+          return;
+        }
+
+        // Handle validation errors (400)
+        if (error.status === 400) {
+          toast.error("Invalid email", {
+            description: errorPayload?.error?.message || "Please provide a valid email address.",
+          });
+          return;
+        }
+
+        // Handle other errors
+        toast.error("Failed to send verification email", {
+          description: errorPayload?.error?.message || "Please try again later.",
+        });
+      } else {
+        // Network or unexpected errors
+        toast.error("Connection error", {
+          description: "Please check your internet connection and try again.",
+        });
+      }
+    },
+  });
+
+  /**
+   * Resend verification email for the given email address
+   */
+  const resend = useCallback((email: string) => {
+    if (countdown > 0) {
+      toast.error("Please wait", {
+        description: `You can resend in ${countdown} seconds.`,
+      });
+      return;
+    }
+    mutation.mutate({ email });
+  }, [countdown, mutation]);
+
+  /**
+   * Reset countdown (useful for testing or special cases)
+   */
+  const resetCountdown = useCallback(() => {
+    setCountdown(0);
+  }, []);
+
+  return {
+    resend,
+    resetCountdown,
+    isLoading: mutation.isPending,
+    isSuccess: mutation.isSuccess,
+    isError: mutation.isError,
+    error: mutation.error,
+    retryAfter,
+    countdown,
+    canResend: countdown === 0 && !mutation.isPending,
+  };
+}

package/src/features/auth/hooks/use-reset-password.ts

@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useRouter } from "next/navigation";
+
+import { resetPasswordSchema, type ResetPasswordSchema } from "../utils/validators";
+import { apiClient, ApiError } from "@/lib/api-client";
+import { successResponseSchema, type SuccessResponse, type ErrorResponse } from "../api/types";
+
+type SubmissionStatus = "idle" | "submitting" | "success";
+
+type UseResetPasswordOptions = {
+  token?: string;
+  onSuccess?: (data: SuccessResponse) => void;
+  redirectTo?: string;
+};
+
+/**
+ * Reset password API call
+ */
+async function resetPassword(data: ResetPasswordSchema): Promise<SuccessResponse> {
+  const response = await apiClient<SuccessResponse>("/api/auth/reset-password", {
+    method: "POST",
+    body: {
+      token: data.token,
+      password: data.password,
+    },
+  });
+
+  // Validate response with Zod schema
+  return successResponseSchema.parse(response);
+}
+
+/**
+ * Hook for password reset flow
+ * 
+ * Features:
+ * - React Query mutation to POST /api/auth/reset-password
+ * - Handles validation errors (400)
+ * - Handles token errors (expired, already used)
+ * - Redirects to sign-in on success
+ * 
+ * Validates: Requirements 6.2, 6.3, 6.4
+ * 
+ * @param options Configuration options
+ * @returns Form state, handlers, and mutation state
+ */
+export function useResetPassword(options: UseResetPasswordOptions = {}) {
+  const { token = "", onSuccess, redirectTo = "/sign-in" } = options;
+  const router = useRouter();
+
+  const form = useForm<ResetPasswordSchema>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: {
+      token,
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const [status, setStatus] = useState<SubmissionStatus>("idle");
+  const [message, setMessage] = useState<string | null>(null);
+
+  // Reset password mutation
+  const mutation = useMutation({
+    mutationFn: resetPassword,
+    onMutate: () => {
+      setStatus("submitting");
+      setMessage(null);
+    },
+    onSuccess: (data) => {
+      setStatus("success");
+      setMessage(data.message || "Password reset successfully. You can now sign in with your new password.");
+      
+      // Call custom success handler
+      onSuccess?.(data);
+      
+      // Redirect to sign-in after a short delay
+      setTimeout(() => {
+        router.push(redirectTo);
+      }, 2000);
+    },
+    onError: (error: unknown) => {
+      setStatus("idle");
+      
+      if (error instanceof ApiError) {
+        const errorPayload = error.payload as ErrorResponse | null;
+        
+        // Handle validation errors (400)
+        if (error.status === 400) {
+          const fieldError = errorPayload?.error;
+          if (fieldError?.field) {
+            // Set field-specific error
+            form.setError(fieldError.field as keyof ResetPasswordSchema, {
+              type: "manual",
+              message: fieldError.message,
+            });
+          } else {
+            setMessage(fieldError?.message || "Invalid input. Please check your information.");
+          }
+          return;
+        }
+        
+        // Handle gone errors (410) - token already used
+        if (error.status === 410) {
+          setMessage(
+            errorPayload?.error?.message || 
+            "This password reset link has already been used. Please request a new one."
+          );
+          return;
+        }
+        
+        // Handle unauthorized errors (401) - invalid or expired token
+        if (error.status === 401) {
+          setMessage(
+            errorPayload?.error?.message || 
+            "This password reset link is invalid or has expired. Please request a new one."
+          );
+          return;
+        }
+        
+        // Handle other errors
+        setMessage(
+          errorPayload?.error?.message || 
+          "An unexpected error occurred. Please try again."
+        );
+      } else {
+        // Handle network or other errors
+        setMessage("Unable to connect. Please check your internet connection.");
+      }
+    },
+  });
+
+  const handleSubmit = form.handleSubmit((data) => {
+    mutation.mutate(data);
+  });
+
+  return {
+    form,
+    status,
+    message,
+    handleSubmit,
+    isLoading: mutation.isPending,
+    isSuccess: mutation.isSuccess,
+    isError: mutation.isError,
+    error: mutation.error,
+  };
+}

package/src/features/auth/hooks/use-reset-rate-limit.ts

@@ -0,0 +1,56 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { apiClient } from "@/lib/api-client";
+
+type ResetRateLimitOptions = {
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+};
+
+type ResetRateLimitParams = {
+  key?: string; // Optional: specific key to reset (e.g., "signin:email:user@example.com")
+};
+
+/**
+ * Reset rate limits API call
+ */
+async function resetRateLimit(params?: ResetRateLimitParams): Promise<{ message: string; cleared: string }> {
+  const response = await apiClient<{ message: string; cleared: string }>(
+    "/api/auth/dev/reset-rate-limit",
+    {
+      method: "POST",
+      body: params || {},
+    }
+  );
+
+  return response;
+}
+
+/**
+ * Hook for resetting rate limits (dev only)
+ * 
+ * @param options Configuration options
+ * @returns Mutation state and reset function
+ */
+export function useResetRateLimit(options: ResetRateLimitOptions = {}) {
+  const { onSuccess, onError } = options;
+
+  const mutation = useMutation({
+    mutationFn: resetRateLimit,
+    onSuccess: (data) => {
+      onSuccess?.();
+    },
+    onError: (error: unknown) => {
+      onError?.(error);
+    },
+  });
+
+  return {
+    resetRateLimit: mutation.mutate,
+    isLoading: mutation.isPending,
+    isSuccess: mutation.isSuccess,
+    isError: mutation.isError,
+    error: mutation.error,
+  };
+}

package/src/features/auth/hooks/use-self-registration.ts

@@ -0,0 +1,202 @@
+'use client';
+
+/**
+ * useSelfRegistration Hook
+ * @description Manages self-registration flow state for new users without invitations
+ * 
+ * Handles:
+ * - Workspace mode detection (single vs multi)
+ * - Auto-join to default workspace in single-workspace mode
+ * - Workspace creation with WORKSPACE_OWNER role assignment
+ * - Navigation flow management
+ * 
+ * @requirements 8.3, 8.6, 12.3
+ */
+
+import { useCallback, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+
+import { useWorkspaceMode } from '@/features/setup/hooks/use-workspace-mode';
+import { useInstanceStatus } from '@/features/setup/hooks/use-instance-status';
+import { useCreateTeam } from '@/features/teams';
+import type { SelfRegistrationPath } from '../components/self-registration-choice';
+
+export type SelfRegistrationStep = 
+  | 'choice'           // Show create/join choice (multi-workspace only)
+  | 'enter-code'       // Enter invite code
+  | 'create-workspace' // Create workspace form
+  | 'auto-joining'     // Auto-joining default workspace (single-workspace only)
+  | 'complete';        // Registration complete
+
+interface UseSelfRegistrationReturn {
+  /** Current step in the self-registration flow */
+  step: SelfRegistrationStep;
+  /** Whether any operation is in progress */
+  isLoading: boolean;
+  /** Error message if any operation failed */
+  error: string | null;
+  /** Whether in multi-workspace mode */
+  isMultiWorkspaceMode: boolean;
+  /** Whether in single-workspace mode */
+  isSingleWorkspaceMode: boolean;
+  /** Handle path selection (create workspace or enter invite code) */
+  selectPath: (path: SelfRegistrationPath) => void;
+  /** Go back to choice step */
+  goBack: () => void;
+  /** Auto-join default workspace (single-workspace mode) */
+  autoJoinDefaultWorkspace: () => Promise<void>;
+  /** Create a new workspace with the given name */
+  createWorkspace: (name: string) => Promise<void>;
+  /** Validate and proceed with invite code */
+  submitInviteCode: (code: string) => Promise<void>;
+  /** Clear any error state */
+  clearError: () => void;
+}
+
+export function useSelfRegistration(): UseSelfRegistrationReturn {
+  const router = useRouter();
+  const { isMultiWorkspaceMode, isSingleWorkspaceMode, isLoading: isLoadingMode } = useWorkspaceMode();
+  const { data: instanceStatus } = useInstanceStatus();
+  const { mutateAsync: createTeamAsync, isPending: isCreatingTeam } = useCreateTeam();
+
+  const [step, setStep] = useState<SelfRegistrationStep>('choice');
+  const [isAutoJoining, setIsAutoJoining] = useState(false);
+  const [isValidatingCode, setIsValidatingCode] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isLoading = isLoadingMode || isCreatingTeam || isAutoJoining || isValidatingCode;
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  const selectPath = useCallback((path: SelfRegistrationPath) => {
+    clearError();
+    if (path === 'create-workspace') {
+      setStep('create-workspace');
+    } else {
+      setStep('enter-code');
+    }
+  }, [clearError]);
+
+  const goBack = useCallback(() => {
+    clearError();
+    setStep('choice');
+  }, [clearError]);
+
+  const autoJoinDefaultWorkspace = useCallback(async () => {
+    if (!isSingleWorkspaceMode) {
+      return;
+    }
+
+    setStep('auto-joining');
+    setIsAutoJoining(true);
+    setError(null);
+
+    try {
+      const defaultWorkspaceId = instanceStatus?.defaultWorkspaceId;
+      
+      if (!defaultWorkspaceId) {
+        throw new Error('Default workspace not configured. Please contact your administrator.');
+      }
+
+      // Call API to join the default workspace
+      const response = await fetch(`/api/teams/${defaultWorkspaceId}/join`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data.error || 'Failed to join workspace');
+      }
+
+      // Switch to the joined workspace context
+      await fetch(`/api/teams/${defaultWorkspaceId}/switch`, {
+        method: 'POST',
+        credentials: 'include',
+      });
+
+      toast.success('Welcome! You have been added to the workspace.');
+      setStep('complete');
+      router.push('/projects');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to join workspace');
+      setStep('choice');
+    } finally {
+      setIsAutoJoining(false);
+    }
+  }, [isSingleWorkspaceMode, instanceStatus?.defaultWorkspaceId, router]);
+
+  const createWorkspace = useCallback(async (name: string) => {
+    setError(null);
+
+    try {
+      const result = await createTeamAsync({ name, description: '' });
+
+      // Switch to the new workspace
+      await fetch(`/api/teams/${result.team.id}/switch`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      toast.success('Workspace created successfully!');
+      setStep('complete');
+      router.push('/projects');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create workspace');
+    }
+  }, [createTeamAsync, router]);
+
+  const submitInviteCode = useCallback(async (code: string) => {
+    setIsValidatingCode(true);
+    setError(null);
+
+    try {
+      // Validate the invite code
+      const response = await fetch(`/api/invitations/validate`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ code: code.trim() }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data.error || 'Invalid or expired invite code');
+      }
+
+      const { token }  = await response.json();
+
+      // Redirect to invitation acceptance page
+      router.push(`/invite/project/${token}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to validate invite code');
+    } finally {
+      setIsValidatingCode(false);
+    }
+  }, [router]);
+
+  return {
+    step,
+    isLoading,
+    error,
+    isMultiWorkspaceMode,
+    isSingleWorkspaceMode,
+    selectPath,
+    goBack,
+    autoJoinDefaultWorkspace,
+    createWorkspace,
+    submitInviteCode,
+    clearError,
+  };
+}