ui-syncup 0.3.13 → 0.4.0-beta.2

package/src/features/auth/components/reset-password-form.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RiAlertLine, RiCheckboxCircleLine } from "@remixicon/react";
+
+import { useResetPassword } from "../hooks/use-reset-password";
+import { PasswordStrengthIndicator } from "./password-strength-indicator";
+import type { SuccessResponse } from "../api/types";
+
+type ResetPasswordFormProps = {
+  token?: string;
+  onSuccess?: (data: SuccessResponse) => void;
+};
+
+/**
+ * Reset password form component
+ * 
+ * Features:
+ * - Password and confirm password inputs
+ * - Password strength indicator (reuses existing component)
+ * - Validation error display (field-specific)
+ * - Loading state during submission
+ * - Success message with auto-redirect to sign-in
+ * - Token error handling (expired, already used)
+ * 
+ * Validates: Requirements 6.2, 6.3, 6.4
+ */
+export function ResetPasswordForm({
+  token,
+  onSuccess,
+}: ResetPasswordFormProps) {
+  const { form, status, message, handleSubmit, isLoading } = useResetPassword({
+    token,
+    onSuccess,
+  });
+
+  const {
+    register,
+    formState: { errors },
+    watch,
+  } = form;
+
+  const password = watch("password");
+
+  // Determine if we should show an error or success message
+  const isError = status === "idle" && message !== null;
+  const isSuccess = status === "success" && message !== null;
+
+  return (
+    <div className="flex w-full flex-col gap-4 rounded-lg border border-muted bg-background px-6 py-8 shadow-sm">
+      <div className="space-y-1 text-center">
+        <h2 className="text-xl font-semibold">Create New Password</h2>
+        <p className="text-sm text-muted-foreground">
+          Enter a new password for your account
+        </p>
+      </div>
+
+      {/* Success message */}
+      {isSuccess && (
+        <Alert className="border-green-200 bg-green-50 text-green-900 dark:border-green-900 dark:bg-green-950 dark:text-green-100">
+          <RiCheckboxCircleLine className="h-4 w-4" />
+          <AlertTitle>Password Reset Successful</AlertTitle>
+          <AlertDescription>
+            {message}
+            <span className="mt-1 block text-xs">
+              Redirecting to sign in...
+            </span>
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Error message (validation, token errors) */}
+      {isError && (
+        <Alert variant="destructive">
+          <RiAlertLine className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{message}</AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Hidden token field */}
+        <input type="hidden" {...register("token")} />
+
+        <div className="space-y-2">
+          <Label htmlFor="password">New Password</Label>
+          <Input
+            id="password"
+            autoComplete="new-password"
+            {...register("password")}
+            disabled={isLoading}
+            placeholder="Minimum 8 characters"
+            type="password"
+            required
+          />
+          {errors.password && (
+            <p className="text-xs text-destructive">{errors.password.message}</p>
+          )}
+          <PasswordStrengthIndicator password={password} />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="confirmPassword">Confirm Password</Label>
+          <Input
+            id="confirmPassword"
+            autoComplete="new-password"
+            {...register("confirmPassword")}
+            disabled={isLoading}
+            placeholder="Re-enter your password"
+            type="password"
+            required
+          />
+          {errors.confirmPassword && (
+            <p className="text-xs text-destructive">
+              {errors.confirmPassword.message}
+            </p>
+          )}
+        </div>
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? "Resetting password…" : "Reset Password"}
+        </Button>
+      </form>
+
+      <div className="text-center text-sm text-muted-foreground">
+        <a
+          href="/sign-in"
+          className="text-primary hover:underline"
+        >
+          Back to sign in
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/features/auth/components/role-gate.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useSession as useSessionHook } from "../hooks/use-session";
+import type { Role } from "@/config/roles";
+import type { ReactNode } from "react";
+import type { UserResponse } from "../api/types";
+
+export interface RoleGateProps {
+  /**
+   * Array of roles that are allowed to see the children.
+   * User must have at least one of these roles.
+   */
+  roles: Role[];
+
+  /**
+   * Content to render if user has required role
+   */
+  children: ReactNode;
+
+  /**
+   * Optional fallback content to render if user doesn't have required role.
+   * If not provided, nothing will be rendered.
+   */
+  fallback?: ReactNode;
+
+  /**
+   * Optional resource type to check role against (team or project).
+   * If not provided, checks all user roles.
+   */
+  resourceType?: "team" | "project";
+
+  /**
+   * Optional resource ID to check role against.
+   * If provided, only checks roles for this specific resource.
+   * Requires resourceType to be set.
+   */
+  resourceId?: string;
+
+  /**
+   * Optional custom session hook for testing.
+   * If not provided, uses the default useSession hook.
+   */
+  useSession?: () => {
+    user?: UserResponse;
+    isLoading: boolean;
+  };
+}
+
+/**
+ * RoleGate component that conditionally renders children based on user roles.
+ * 
+ * Features:
+ * - Checks if user has any of the required roles
+ * - Optionally filters by resource type (team or project)
+ * - Optionally filters by specific resource ID
+ * - Renders fallback or null if unauthorized
+ * 
+ * @example
+ * // Show content only to team owners and admins
+ * <RoleGate roles={["WORKSPACE_OWNER", "WORKSPACE_ADMIN"]}>
+ *   <TeamSettingsButton />
+ * </RoleGate>
+ * 
+ * @example
+ * // Show content only to project editors for a specific project
+ * <RoleGate 
+ *   roles={["PROJECT_EDITOR", "PROJECT_OWNER"]} 
+ *   resourceType="project"
+ *   resourceId={projectId}
+ * >
+ *   <EditProjectButton />
+ * </RoleGate>
+ * 
+ * @example
+ * // Show fallback content if unauthorized
+ * <RoleGate 
+ *   roles={["WORKSPACE_EDITOR"]} 
+ *   fallback={<p>You need editor access to view this content.</p>}
+ * >
+ *   <IssueCreateButton />
+ * </RoleGate>
+ */
+export function RoleGate({
+  roles,
+  children,
+  fallback = null,
+  resourceType,
+  resourceId,
+  useSession = useSessionHook,
+}: RoleGateProps) {
+  const { user, isLoading } = useSession();
+
+  // While loading, don't render anything to avoid flashing unauthorized content
+  if (isLoading) {
+    return null;
+  }
+
+  // If no user or no roles, user is unauthorized
+  if (!user || !user.roles || user.roles.length === 0) {
+    return <>{fallback}</>;
+  }
+
+  // Filter roles by resource type and ID if specified
+  let userRoles = user.roles;
+
+  if (resourceType) {
+    userRoles = userRoles.filter((r) => r.resourceType === resourceType);
+  }
+
+  if (resourceId) {
+    userRoles = userRoles.filter((r) => r.resourceId === resourceId);
+  }
+
+  // Check if user has any of the required roles
+  const hasRequiredRole = userRoles.some((userRole) =>
+    roles.includes(userRole.role as Role)
+  );
+
+  if (hasRequiredRole) {
+    return <>{children}</>;
+  }
+
+  return <>{fallback}</>;
+}

package/src/features/auth/components/self-registration-choice.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+/**
+ * SelfRegistrationChoice Component
+ * @description Displays self-registration options based on workspace mode.
+ * - Single-workspace mode: Auto-join default workspace (no choice UI)
+ * - Multi-workspace mode: Show "Create a new workspace" and "I have an invite code" options
+ * 
+ * @requirements 8.1, 8.2, 8.3, 12.3, 13.5
+ */
+
+import { useEffect } from 'react';
+import { Building2, KeyRound, Loader2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { isSingleWorkspaceMode, isMultiWorkspaceMode } from '@/config/workspace';
+
+export type SelfRegistrationPath = 'create-workspace' | 'join-with-code';
+
+interface SelfRegistrationChoiceProps {
+  /** Called when user selects a path in multi-workspace mode */
+  onSelectPath: (path: SelfRegistrationPath) => void;
+  /** Called when auto-joining default workspace in single-workspace mode */
+  onAutoJoin: () => void;
+  /** Whether auto-join or path selection is in progress */
+  isLoading?: boolean;
+  /** Error message to display */
+  error?: string | null;
+}
+
+export function SelfRegistrationChoice({
+  onSelectPath,
+  onAutoJoin,
+  isLoading = false,
+  error = null,
+}: SelfRegistrationChoiceProps) {
+  // In single-workspace mode, auto-join default workspace
+  useEffect(() => {
+    if (isSingleWorkspaceMode()) {
+      onAutoJoin();
+    }
+  }, [onAutoJoin]);
+
+  // In single-workspace mode, show loading while auto-joining
+  if (isSingleWorkspaceMode()) {
+    return (
+      <div className="flex min-h-[200px] flex-col items-center justify-center space-y-4">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">
+          Setting up your workspace...
+        </p>
+        {error && (
+          <p className="text-sm text-destructive">{error}</p>
+        )}
+      </div>
+    );
+  }
+
+  // Multi-workspace mode: Show choice UI
+  return (
+    <div className="w-full max-w-2xl space-y-6">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold">Welcome!</h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Choose how you&apos;d like to get started
+        </p>
+      </div>
+
+      {error && (
+        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-center text-sm text-destructive">
+          {error}
+        </div>
+      )}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {/* Create Workspace Option */}
+        <Card
+          className="cursor-pointer transition-all hover:border-primary hover:shadow-md"
+          onClick={() => !isLoading && onSelectPath('create-workspace')}
+        >
+          <CardHeader className="pb-3">
+            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+              <Building2 className="h-6 w-6 text-primary" />
+            </div>
+            <CardTitle className="text-lg">Create a new workspace</CardTitle>
+            <CardDescription>
+              Set up your own workspace and invite team members
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button 
+              className="w-full" 
+              disabled={isLoading}
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelectPath('create-workspace');
+              }}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Loading...
+                </>
+              ) : (
+                'Create workspace'
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* Join with Invite Code Option */}
+        <Card
+          className="cursor-pointer transition-all hover:border-primary hover:shadow-md"
+          onClick={() => !isLoading && onSelectPath('join-with-code')}
+        >
+          <CardHeader className="pb-3">
+            <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-secondary">
+              <KeyRound className="h-6 w-6 text-secondary-foreground" />
+            </div>
+            <CardTitle className="text-lg">I have an invite code</CardTitle>
+            <CardDescription>
+              Join an existing workspace with an invitation
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button 
+              variant="outline" 
+              className="w-full" 
+              disabled={isLoading}
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelectPath('join-with-code');
+              }}
+            >
+              Enter invite code
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <p className="text-center text-xs text-muted-foreground">
+        You can always create more workspaces or join others later from your settings.
+      </p>
+    </div>
+  );
+}

package/src/features/auth/components/sign-in-form.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import type { UseFormReturn } from "react-hook-form";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { RiAlertLine, RiCheckboxCircleLine } from "@remixicon/react";
+
+import type { SignInSchema } from "../utils/validators";
+import { SocialLoginButtons } from "./social-login-buttons";
+
+type SignInFormProps = {
+  form: UseFormReturn<SignInSchema>;
+  status: "idle" | "submitting" | "success";
+  message: string | null;
+  retryAfter?: number | null;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  onOAuthSignIn: () => void;
+  oauthStatus: "idle" | "loading" | "error";
+  oauthError: string | null;
+  description?: string;
+  invitedEmail?: string;
+  isLongLoading?: boolean;
+};
+
+export function SignInForm({
+  form,
+  status,
+  message,
+  retryAfter,
+  onSubmit,
+  onOAuthSignIn,
+  oauthStatus,
+  oauthError,
+  description = "Sign in to your account to continue",
+  invitedEmail,
+  isLongLoading = false,
+}: SignInFormProps) {
+  const {
+    register,
+    formState: { errors },
+  } = form;
+
+  // Determine if we should show an error or success message
+  const isError = status === "idle" && message !== null;
+  const isSuccess = status === "success" && message !== null;
+
+  return (
+    <div className="flex w-full flex-col gap-4 rounded-lg border border-muted bg-background px-6 py-8 shadow-sm">
+      <div className="space-y-1 text-center">
+        <h2 className="text-xl font-semibold">Welcome Back</h2>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+
+      {/* Success message */}
+      {isSuccess && (
+        <Alert className="border-green-200 bg-green-50 text-green-900 dark:border-green-900 dark:bg-green-950 dark:text-green-100">
+          <RiCheckboxCircleLine className="h-4 w-4" />
+          <AlertTitle>Success</AlertTitle>
+          <AlertDescription>{message}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Error message (authentication, validation, rate limit) */}
+      {isError && (
+        <Alert variant="destructive">
+          <RiAlertLine className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>
+            {message}
+            {retryAfter && (
+              <span className="mt-1 block text-xs">
+                Please wait {retryAfter} seconds before trying again.
+              </span>
+            )}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={onSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            autoComplete="email"
+            {...register("email")}
+            disabled={status === "submitting" || Boolean(invitedEmail)}
+            placeholder="Enter your email"
+            type="email"
+            required
+          />
+          {errors.email && (
+            <p className="text-xs text-destructive">{errors.email.message}</p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="password">Password</Label>
+            <a
+              href="/forgot-password"
+              className="text-xs text-primary hover:underline"
+            >
+              Forgot password?
+            </a>
+          </div>
+          <Input
+            id="password"
+            autoComplete="current-password"
+            {...register("password")}
+            disabled={status === "submitting"}
+            placeholder="Enter your password"
+            type="password"
+            required
+          />
+          {errors.password && (
+            <p className="text-xs text-destructive">
+              {errors.password.message}
+            </p>
+          )}
+        </div>
+
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={status === "submitting"}
+        >
+          {status === "submitting" 
+            ? (isLongLoading ? "Still working..." : "Signing in…") 
+            : "Sign In"}
+        </Button>
+      </form>
+
+      <div className="relative py-4">
+        <Separator />
+        <span className="absolute inset-0 flex items-center justify-center text-xs uppercase text-muted-foreground">
+          <span className="bg-background px-2">Or continue with</span>
+        </span>
+      </div>
+
+      {oauthError && (
+        <Alert variant="destructive">
+          <AlertTitle>Social sign-in</AlertTitle>
+          <AlertDescription>{oauthError}</AlertDescription>
+        </Alert>
+      )}
+
+      <SocialLoginButtons 
+        disabled={status === "submitting" || oauthStatus === "loading"}
+        onError={(_error: string) => {
+          // Error is already handled by the component, but parent can also react
+        }}
+      />
+    </div>
+  );
+}