ui-syncup 0.3.13 → 0.4.0-beta.2

package/src/features/user-settings/components/other-settings.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Separator } from '@/components/ui/separator'
+import { DeleteAccountDialog } from './delete-account-dialog'
+import type { UserProfile } from '../types'
+
+interface OtherSettingsProps {
+  userProfile: UserProfile
+}
+
+export function OtherSettings({ userProfile }: OtherSettingsProps) {
+  const handleAccountDeleted = () => {
+    // Mock: In production, this would redirect to sign-out or goodbye page
+    console.log('Account deletion confirmed')
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Data export</CardTitle>
+          <CardDescription>
+            Download a copy of your personal data and activity
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            Request an export of your account data including projects, issues,
+            comments, and profile information. You'll receive an email with a
+            download link when your export is ready.
+          </p>
+          <div>
+            <button
+              className="text-sm font-medium text-primary hover:underline"
+              onClick={() => {
+                // Mock interaction
+                alert('Data export request would be triggered here')
+              }}
+            >
+              Request data export
+            </button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Session management</CardTitle>
+          <CardDescription>
+            Manage active sessions and sign out from other devices
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-3">
+            <div className="flex items-center justify-between py-2">
+              <div>
+                <p className="text-sm font-medium">Current session</p>
+                <p className="text-xs text-muted-foreground">
+                  MacBook Pro • San Francisco, CA
+                </p>
+              </div>
+              <span className="text-xs text-muted-foreground">Active now</span>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between py-2">
+              <div>
+                <p className="text-sm font-medium">iPhone 15</p>
+                <p className="text-xs text-muted-foreground">
+                  Mobile • Last seen 2 hours ago
+                </p>
+              </div>
+              <button
+                className="text-xs font-medium text-destructive hover:underline"
+                onClick={() => {
+                  // Mock interaction
+                  alert('Sign out from device would be triggered here')
+                }}
+              >
+                Sign out
+              </button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="border-destructive">
+        <CardHeader>
+          <CardTitle className="text-destructive">Danger zone</CardTitle>
+          <CardDescription>
+            Irreversible and destructive actions
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Alert variant="destructive">
+            <AlertDescription>
+              Once you delete your account, there is no going back. Please be
+              certain.
+            </AlertDescription>
+          </Alert>
+
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              <h4 className="text-sm font-medium mb-1">Delete this account</h4>
+              <p className="text-sm text-muted-foreground">
+                Permanently remove your account and all associated data. This
+                action cannot be undone.
+              </p>
+            </div>
+            <DeleteAccountDialog
+              userEmail={userProfile.email}
+              onConfirm={handleAccountDeleted}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/features/user-settings/components/password-section.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { RiLockPasswordLine, RiCheckboxCircleFill, RiInformationFill } from "@remixicon/react";
+import { useSession } from "@/features/auth/hooks/use-session";
+import { authClient } from "@/lib/auth-client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+import Link from "next/link";
+import { PasswordStrengthIndicator } from "@/features/auth/components/password-strength-indicator";
+import { setPassword } from "@/features/user-settings/actions/set-password";
+
+const passwordSchema = z.object({
+  password: z.string().min(8, "Password must be at least 8 characters"),
+  confirmPassword: z.string(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"],
+});
+
+const changePasswordSchema = z.object({
+  currentPassword: z.string().min(1, "Current password is required"),
+  newPassword: z.string().min(8, "Password must be at least 8 characters"),
+  confirmPassword: z.string(),
+}).refine((data) => data.newPassword === data.confirmPassword, {
+  message: "Passwords do not match",
+  path: ["confirmPassword"],
+});
+
+export interface PasswordSectionProps {
+  hasPassword: boolean;
+}
+
+export function PasswordSection({ hasPassword }: PasswordSectionProps) {
+  const { invalidateSession } = useSession();
+  
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Password</CardTitle>
+        <CardDescription>
+          Manage your password to secure your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary">
+            <RiLockPasswordLine className="h-5 w-5" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <p className="font-medium">
+                {hasPassword ? "Password set" : "No password set"}
+              </p>
+               {hasPassword ? (
+                <RiCheckboxCircleFill className="h-4 w-4 text-green-500" />
+              ) : (
+                <RiInformationFill className="h-4 w-4 text-muted-foreground" />
+              )}
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {hasPassword
+                ? "Your account is secured with a password."
+                : "Secure your account by setting a password."}
+            </p>
+          </div>
+        </div>
+
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogTrigger asChild>
+            <Button variant={hasPassword ? "outline" : "default"}>
+              {hasPassword ? "Change Password" : "Set Password"}
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            {hasPassword ? (
+               <ChangePasswordForm onSuccess={() => setIsDialogOpen(false)} />
+            ) : (
+               <SetPasswordForm onSuccess={() => setIsDialogOpen(false)} />
+            )}
+          </DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}
+
+
+
+// ... existing imports
+
+function SetPasswordForm({ onSuccess }: { onSuccess: () => void }) {
+  const { user } = useSession();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<z.infer<typeof passwordSchema>>({
+    resolver: zodResolver(passwordSchema),
+  });
+
+  const password = watch("password");
+
+  const onSubmit = async (data: z.infer<typeof passwordSchema>) => {
+    setLoading(true);
+    try {
+        const formData = new FormData();
+        formData.append("password", data.password);
+        formData.append("confirmPassword", data.confirmPassword);
+
+        const result = await setPassword({}, formData);
+        
+        if (result.error) {
+             toast.error(result.error);
+             return;
+        }
+
+        toast.success("Password set successfully");
+        onSuccess();
+        window.location.reload(); 
+    } catch (err) {
+      toast.error("Failed to set password");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <DialogHeader>
+        <DialogTitle>Set Password</DialogTitle>
+        <DialogDescription>
+          Create a password to sign in with email.
+        </DialogDescription>
+      </DialogHeader>
+      
+      <div className="space-y-2">
+        <Label htmlFor="password">New Password</Label>
+        <Input
+          id="password"
+          type="password"
+          {...register("password")}
+        />
+        {errors.password && (
+          <p className="text-sm text-destructive">{errors.password.message}</p>
+        )}
+        <PasswordStrengthIndicator password={password} />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="confirmPassword">Confirm Password</Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          {...register("confirmPassword")}
+        />
+        {errors.confirmPassword && (
+          <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>
+        )}
+      </div>
+
+      <DialogFooter>
+        <Button type="submit" disabled={loading}>
+          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Set Password
+        </Button>
+      </DialogFooter>
+    </form>
+  );
+}
+
+function ChangePasswordForm({ onSuccess }: { onSuccess: () => void }) {
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<z.infer<typeof changePasswordSchema>>({
+    resolver: zodResolver(changePasswordSchema),
+  });
+
+  const newPassword = watch("newPassword");
+
+  const onSubmit = async (data: z.infer<typeof changePasswordSchema>) => {
+    setLoading(true);
+    try {
+        const { error } = await authClient.changePassword({
+            currentPassword: data.currentPassword,
+            newPassword: data.newPassword,
+            revokeOtherSessions: true,
+        });
+
+        if (error) {
+            toast.error(error.message);
+            return;
+        }
+
+        toast.success("Password changed successfully");
+        onSuccess();
+    } catch (err) {
+      toast.error("Failed to change password");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <DialogHeader>
+        <DialogTitle>Change Password</DialogTitle>
+        <DialogDescription>
+          Enter your current password to set a new one.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="space-y-2">
+        <Label htmlFor="currentPassword">Current Password</Label>
+        <Input
+          id="currentPassword"
+          type="password"
+          {...register("currentPassword")}
+        />
+        {errors.currentPassword && (
+          <p className="text-sm text-destructive">{errors.currentPassword.message}</p>
+        )}
+         <div className="text-right">
+            <Link 
+                href="/forgot-password" 
+                className="text-xs text-primary hover:underline hover:text-primary/80"
+                onClick={() => onSuccess()} // Close dialog
+            >
+                Forgot your password?
+            </Link>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="newPassword">New Password</Label>
+        <Input
+          id="newPassword"
+          type="password"
+          {...register("newPassword")}
+        />
+        {errors.newPassword && (
+          <p className="text-sm text-destructive">{errors.newPassword.message}</p>
+        )}
+        <PasswordStrengthIndicator password={newPassword} />
+      </div>
+
+       <div className="space-y-2">
+        <Label htmlFor="confirmPassword">Confirm New Password</Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          {...register("confirmPassword")}
+        />
+        {errors.confirmPassword && (
+          <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>
+        )}
+      </div>
+
+      <DialogFooter>
+        <Button type="submit" disabled={loading}>
+          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Change Password
+        </Button>
+      </DialogFooter>
+    </form>
+  );
+}

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

@@ -0,0 +1,184 @@
+"use client";
+
+import { useLinkedAccounts, useLinkAccount, useUnlinkAccount } from "@/features/auth/hooks";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+} from "@/components/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { RiLinkM, RiLoader4Line } from "@remixicon/react";
+import type { OAuthProvider } from "@/features/auth/api/types";
+import { useState } from "react";
+import { PasswordSection } from "./password-section";
+import { OAUTH_PROVIDERS } from "@/config/integrations";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+
+export interface SecuritySettingsProps {
+  hasPassword: boolean;
+}
+
+export function SecuritySettings({ hasPassword }: SecuritySettingsProps) {
+  const { data: linkedAccounts, isLoading: isLoadingAccounts, error: loadError } = useLinkedAccounts();
+  const { mutate: linkAccount, isPending: isLinking } = useLinkAccount();
+  const { mutate: unlinkAccount, isPending: isUnlinking } = useUnlinkAccount();
+
+  const [error, setError] = useState<string | null>(null);
+
+  // Check if a provider is already linked
+  const isLinked = (provider: OAuthProvider) => {
+    return linkedAccounts?.some((acc) => acc.providerId === provider);
+  };
+
+  // Handle linking a new provider
+  const handleLink = (provider: OAuthProvider) => {
+    setError(null);
+    linkAccount({ provider, callbackURL: "/settings/security" }, {
+      onError: (err) => setError(err.message),
+    });
+  };
+
+  // Handle unlinking a provider
+  const handleUnlink = (provider: OAuthProvider) => {
+    setError(null);
+    unlinkAccount({ providerId: provider }, {
+      onError: (err) => setError(err.message),
+    });
+  };
+
+  if (loadError) {
+    return (
+      <Alert variant="destructive">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>Failed to load linked accounts. Please try again.</AlertDescription>
+      </Alert>
+    );
+  }
+
+  const providers: OAuthProvider[] = ["google", "microsoft", "atlassian"];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-medium">Security</h3>
+        <p className="text-sm text-muted-foreground">
+          Manage your account security and authentication methods.
+        </p>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Password Management Section */}
+      <PasswordSection hasPassword={hasPassword} />
+
+      {/* Linked Accounts Section */}
+      <div className="space-y-4">
+        <h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+            Connected Accounts
+        </h4>
+        
+        {isLoadingAccounts ? (
+             <div className="space-y-4">
+               <div className="h-24 w-full animate-pulse rounded-lg bg-muted" />
+               <div className="h-24 w-full animate-pulse rounded-lg bg-muted" />
+             </div>
+        ) : (
+            <div className="grid gap-3">
+              {providers.map((provider) => {
+                const config = OAUTH_PROVIDERS[provider];
+                const Icon = config.icon;
+                const linked = isLinked(provider);
+                const isLoading = isLinking || isUnlinking;
+
+                return (
+                  <Card key={provider}>
+                    <CardContent className="flex items-center justify-between px-6">
+                      <div className="flex items-center gap-4">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary">
+                          <Icon className="h-5 w-5" />
+                        </div>
+                        <div>
+                          <p className="font-medium">{config.name}</p>
+                          <p className="text-sm text-muted-foreground">
+                            {linked ? "Connected" : "Not connected"}
+                          </p>
+                        </div>
+                      </div>
+
+                      {linked ? (
+                        <AlertDialog>
+                          <AlertDialogTrigger asChild>
+                            <Button
+                              variant="outline"
+                              disabled={isLoading}
+                              className="border-destructive/50 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                            >
+                              {isUnlinking ? (
+                                <RiLoader4Line className="mr-2 h-4 w-4 animate-spin" />
+                              ) : (
+                                "Disconnect"
+                              )}
+                            </Button>
+                          </AlertDialogTrigger>
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>Unlink {config.name} account?</AlertDialogTitle>
+                              <AlertDialogDescription>
+                                Are you sure you want to disconnect your {config.name} account? 
+                                Make sure you have another way (like a password) to sign in.
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel>Cancel</AlertDialogCancel>
+                              <AlertDialogAction
+                                onClick={() => handleUnlink(provider)}
+                                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                              >
+                                Disconnect
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+                      ) : (
+                        <Button
+                          variant="ghost" 
+                          onClick={() => handleLink(provider)}
+                          disabled={isLoading}
+                          className="border border-input"
+                        >
+                          {isLinking ? (
+                            <RiLoader4Line className="mr-2 h-4 w-4 animate-spin" />
+                          ) : (
+                            <>
+                              <RiLinkM className="mr-2 h-4 w-4" />
+                              Connect
+                            </>
+                          )}
+                        </Button>
+                      )}
+                    </CardContent>
+                  </Card>
+                );
+              })}
+            </div>
+        )}
+      </div>
+    </div>
+  );
+}