stackkit 0.3.5 → 0.3.6

package/modules/auth/better-auth/files/shared/features/components/profile-form.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import InputField from "@/components/global/form-field/input-field";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { useUpdateProfileMutation } from "@/features/auth/queries/auth.mutations";
+import {
+  profileZodSchema,
+  type IProfilePayload,
+} from "@/features/auth/validators/profile.validator";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Camera, Loader2, Lock } from "lucide-react";
+import { useState } from "react";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
+import { toast } from "sonner";
+import ChangePasswordDialog from "./change-password-dialog";
+
+interface User {
+  id: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+  role?: string;
+  createdAt?: Date | string;
+}
+
+interface ProfileFormProps {
+  user: User;
+}
+
+export default function ProfileForm({ user }: ProfileFormProps) {
+  const mutation = useUpdateProfileMutation();
+  const [showPasswordDialog, setShowPasswordDialog] = useState(false);
+
+  const form = useForm<IProfilePayload>({
+    mode: "onTouched",
+    resolver: zodResolver(profileZodSchema),
+    defaultValues: {
+      name: user.name || "",
+      image: user.image || "",
+    },
+  });
+
+  const imageValue = useWatch({ control: form.control, name: "image" });
+  const nameValue = useWatch({ control: form.control, name: "name" });
+
+  async function onSubmit(values: IProfilePayload) {
+    try {
+      await mutation.mutateAsync(values);
+    } catch {
+      // Error handling is done in the mutation's onError callback
+    }
+  }
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > 2 * 1024 * 1024) {
+      toast.error("Image size must be less than 2MB");
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      form.setValue("image", reader.result as string);
+      toast.info("Image loaded. Click 'Save Changes' to update.");
+    };
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="space-y-6 rounded-lg border bg-card p-6"
+      >
+        <div>
+          <h2 className="mb-2 text-xl font-semibold">Personal Information</h2>
+          <p className="text-sm text-muted-foreground">
+            Update your personal details and profile picture
+          </p>
+        </div>
+
+        {/* Profile Picture */}
+        <div className="flex items-center gap-6">
+          <div className="relative">
+            <Avatar className="h-24 w-24">
+              <AvatarImage
+                src={imageValue}
+                alt={nameValue}
+                className="object-cover"
+                referrerPolicy="no-referrer"
+              />
+              <AvatarFallback className="text-2xl">
+                {nameValue?.[0]?.toUpperCase() || "U"}
+              </AvatarFallback>
+            </Avatar>
+            <label
+              htmlFor="avatar-upload"
+              className="absolute bottom-0 right-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border-2 border-background bg-primary text-primary-foreground shadow-lg transition-colors hover:bg-primary/90"
+            >
+              <Camera className="h-4 w-4" />
+              <input
+                id="avatar-upload"
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handleImageUpload}
+                disabled={mutation.isPending}
+              />
+            </label>
+          </div>
+          <div className="space-y-1">
+            <p className="text-sm font-medium">Profile Picture</p>
+            <p className="text-xs text-muted-foreground">
+              JPG, PNG or GIF. Max size 2MB.
+            </p>
+          </div>
+        </div>
+
+        {/* Name Field */}
+        <InputField
+          name="name"
+          label="Full Name"
+          placeholder="Enter your full name"
+          disabled={mutation.isPending}
+        />
+
+        {/* Email Field (read-only) */}
+        <div className="space-y-2">
+          <InputField
+            label="Email Address"
+            placeholder="your.email@example.com"
+            type="email"
+            value={user.email || ""}
+            disabled
+            className="cursor-not-allowed opacity-70"
+            hint="Email cannot be changed. Contact support if needed."
+          />
+        </div>
+
+        <Separator className="my-6" />
+
+        {/* Security Section */}
+        <div>
+          <h3 className="mb-2 text-lg font-semibold">Security</h3>
+          <p className="mb-4 text-sm text-muted-foreground">
+            Manage your password and account security
+          </p>
+
+          <div className="flex items-center justify-between rounded-lg border bg-muted/30 p-4">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+                <Lock className="h-5 w-5 text-primary" />
+              </div>
+              <div>
+                <p className="font-medium">Password</p>
+                <p className="text-sm text-muted-foreground">
+                  Last changed recently
+                </p>
+              </div>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setShowPasswordDialog(true)}
+              disabled={mutation.isPending}
+            >
+              Change Password
+            </Button>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex items-center justify-end gap-3 border-t pt-6">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={mutation.isPending}
+            onClick={() => {
+              form.reset({ name: user.name || "", image: user.image || "" });
+              toast.info("Changes discarded");
+            }}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={mutation.isPending}>
+            {mutation.isPending && (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Save Changes
+          </Button>
+        </div>
+
+        <ChangePasswordDialog
+          open={showPasswordDialog}
+          onOpenChange={setShowPasswordDialog}
+        />
+      </form>
+    </FormProvider>
+  );
+}

package/modules/auth/better-auth/files/shared/features/components/register-form.tsx

@@ -0,0 +1,100 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import InputField from "@/components/global/form-field/input-field";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useRegisterMutation } from "@/features/auth/queries/auth.mutations";
+import { registerZodSchema } from "@/features/auth/validators/register.validator";
+import { zodResolver } from "@hookform/resolvers/zod";
+{{#if framework == "nextjs"}}
+import Link from "next/link";
+{{else}}
+import { Link } from "react-router";
+{{/if}}
+import { FormProvider, useForm } from "react-hook-form";
+import SocialLoginButtons from "./social-login-buttons";
+
+type RegisterFormValues = {
+  name: string;
+  email: string;
+  password: string;
+  confirmPassword?: string;
+};
+
+export default function RegisterForm() {
+  const mutation = useRegisterMutation();
+
+  const form = useForm<RegisterFormValues>({
+    mode: "onTouched",
+    resolver: zodResolver(registerZodSchema),
+    defaultValues: { name: "", email: "", password: "", confirmPassword: "" },
+  });
+
+  async function onSubmit(values: RegisterFormValues) {
+    try {
+      await mutation.mutateAsync({
+        name: values.name,
+        email: values.email,
+        password: values.password,
+      });
+    } catch {
+      // Error handling is done in the mutation's onError callback
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Create your account</CardTitle>
+        <CardDescription>
+          Enter your details to create an account
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="p-4">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormProvider {...form}>
+            <InputField name="name" label="Name" placeholder="Your full name" />
+            <InputField
+              name="email"
+              label="Email"
+              placeholder="you@example.com"
+              type="email"
+            />
+            <InputField name="password" label="Password" type="password" />
+
+            <CardFooter className="flex flex-col gap-4">
+              <div className="flex w-full items-center justify-between">
+                {{#if framework == "nextjs"}}
+                <Link href="/login" className="text-muted-foreground underline">
+                  Already have an account? Sign in
+                </Link>
+                {{else}}
+                <Link to="/login" className="text-muted-foreground underline">
+                  Already have an account? Sign in
+                </Link>
+                {{/if}}
+
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                  {form.formState.isSubmitting
+                    ? "Creating..."
+                    : "Create account"}
+                </Button>
+              </div>
+
+              <SocialLoginButtons />
+            </CardFooter>
+          </FormProvider>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/modules/auth/better-auth/files/shared/features/components/reset-password-form.tsx

@@ -0,0 +1,111 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import InputField from "@/components/global/form-field/input-field";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useResetPasswordMutation } from "@/features/auth/queries/auth.mutations";
+import { resetZodSchema } from "@/features/auth/validators/reset.validator";
+import { zodResolver } from "@hookform/resolvers/zod";
+{{#if framework == "nextjs"}}
+import { useSearchParams } from "next/navigation";
+{{else}}
+import { useSearchParams } from "react-router";
+{{/if}}
+import { FormProvider, useForm } from "react-hook-form";
+
+type ResetValues = {
+  email: string;
+  otp: string;
+  newPassword: string;
+  confirmPassword?: string;
+};
+
+export default function ResetPasswordForm() {
+  {{#if framework == "nextjs"}}
+  const params = useSearchParams();
+  const prefillEmail = params?.get("email") || "";
+  {{else}}
+  const [searchParams] = useSearchParams();
+  const prefillEmail = searchParams.get("email") || "";
+  {{/if}}
+
+  const mutation = useResetPasswordMutation();
+
+  const form = useForm<ResetValues>({
+    mode: "onTouched",
+    resolver: zodResolver(resetZodSchema),
+    defaultValues: {
+      email: prefillEmail,
+      otp: "",
+      newPassword: "",
+      confirmPassword: "",
+    },
+  });
+
+  async function onSubmit(values: ResetValues) {
+    if (values.newPassword !== values.confirmPassword) {
+      form.setError("confirmPassword", { message: "Passwords do not match" });
+      return;
+    }
+
+    try {
+      await mutation.mutateAsync({
+        email: values.email,
+        otp: values.otp,
+        newPassword: values.newPassword,
+      });
+    } catch {
+      // Error handling is done in the mutation's onError callback
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Reset password</CardTitle>
+        <CardDescription>
+          Enter your email and new password to reset your password
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="p-8">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormProvider {...form}>
+            <InputField
+              name="email"
+              label="Email"
+              type="email"
+              placeholder="you@example.com"
+            />
+            <InputField name="otp" label="OTP" placeholder="Enter OTP" />
+            <InputField
+              name="newPassword"
+              label="New password"
+              type="password"
+            />
+            <InputField
+              name="confirmPassword"
+              label="Confirm new password"
+              type="password"
+            />
+
+            <div className="flex items-center justify-between mt-2">
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {form.formState.isSubmitting
+                  ? "Resetting..."
+                  : "Reset password"}
+              </Button>
+            </div>
+          </FormProvider>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/modules/auth/better-auth/files/shared/features/components/social-login-buttons.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import * as React from "react";
+import { useSocialLoginMutation } from "../queries/auth.mutations";
+
+function GoogleIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 533.5 544.3" width="20" height="20" {...props}>
+      <path
+        fill="#4285F4"
+        d="M533.5 278.4c0-18.5-1.5-36.3-4.4-53.6H272v101.5h147.1c-6.4 34.6-25.3 63.9-54 83.5v69.4h87.2c51-47 80.2-116.3 80.2-200.8z"
+      />
+      <path
+        fill="#34A853"
+        d="M272 544.3c73.6 0 135.4-24.4 180.6-66.2l-87.2-69.4c-24.2 16.3-55.3 25.9-93.4 25.9-71.7 0-132.6-48.3-154.3-113.3H28.8v71.1C73.8 492.9 166.8 544.3 272 544.3z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M117.7 324.3c-10.8-32.3-10.8-67 0-99.3V153.9H28.8c-36.7 73.6-36.7 160.6 0 234.2l88.9-63.8z"
+      />
+      <path
+        fill="#EA4335"
+        d="M272 109.1c39.9 0 75.8 13.7 104.1 40.6l78-78C402.1 28 339.7 0 272 0 166.8 0 73.8 51.4 28.8 125.1l88.9 71.1C139.4 157.4 200.3 109.1 272 109.1z"
+      />
+    </svg>
+  );
+}
+
+export default function SocialLoginButtons() {
+  const { mutate: socialLogin, isPending } = useSocialLoginMutation();
+
+  return (
+    <Button
+      variant="outline"
+      size="lg"
+      onClick={() => socialLogin("google")}
+      disabled={isPending}
+      className="w-full bg-background text-accent-foreground"
+    >
+      <span className="flex items-center justify-center w-6 h-6">
+        <GoogleIcon />
+      </span>
+      {isPending ? "Redirecting..." : "Continue with Google"}
+    </Button>
+  );
+}

package/modules/auth/better-auth/files/shared/features/components/user-profile-menu.tsx

@@ -0,0 +1,106 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { LayoutDashboard, LogOut, User } from "lucide-react";
+{{#if framework == "nextjs"}}
+import Link from "next/link";
+{{else}}
+import { Link } from "react-router";
+{{/if}}
+import { useLogoutMutation } from "../queries/auth.mutations";
+import { useMeQuery } from "../queries/auth.querie";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function UserProfileMenu() {
+  const { data: user, isLoading } = useMeQuery();
+  const { mutate: logout, isPending } = useLogoutMutation();
+
+  if (isLoading) {
+    return <Skeleton className="h-8 w-8 rounded-full" />;
+  }
+
+  if (!user) {
+    return (
+      <Button
+        render={
+          {{#if framework == "nextjs"}}<Link href="/login" />{{else}}<Link to="/login" />{{/if}}
+        }
+        variant="ghost"
+        size="icon"
+        aria-label="Sign in"
+        nativeButton={false}
+      >
+        <User />
+      </Button>
+    );
+  }
+
+  const initials = user.name
+    ? user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2)
+    : "U";
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className="group flex items-center gap-2 rounded-full p-0.5 outline-none ring-2 ring-transparent transition-all hover:ring-border focus-visible:ring-ring"
+        aria-label="User menu"
+      >
+        <Avatar size="default">
+          <AvatarImage src={user.image || ""} alt={user.name} referrerPolicy="no-referrer" />
+          <AvatarFallback className="bg-primary text-primary-foreground text-xs font-semibold">
+            {initials}
+          </AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="w-60">
+        {/* User info header */}
+        <div className="flex items-center gap-3 px-2 py-2.5">
+          <Avatar size="lg">
+            <AvatarImage src={user.image || ""} alt={user.name} referrerPolicy="no-referrer" />
+            <AvatarFallback className="bg-primary text-primary-foreground text-sm font-semibold">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col min-w-0">
+            <span className="truncate text-sm font-medium text-foreground">{user.name}</span>
+            <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+          </div>
+        </div>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          render={
+            {{#if framework == "nextjs"}}<Link href={user.role === "ADMIN" ? "/dashboard/admin" : "/dashboard"} />{{else}}<Link to={user.role === "ADMIN" ? "/dashboard/admin" : "/dashboard"} />{{/if}}
+          }
+          className="gap-2"
+        >
+          <LayoutDashboard className="size-4" /> Dashboard
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          variant="destructive"
+          disabled={isPending}
+          onClick={() => logout()}
+          className="gap-2"
+        >
+          <LogOut className="size-4" />
+          {isPending ? "Signing out…" : "Sign out"}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/modules/auth/better-auth/files/shared/features/components/verify-email-form.tsx

@@ -0,0 +1,110 @@
+{{#if framework == "nextjs"}}
+"use client";
+{{/if}}
+
+import InputField from "@/components/global/form-field/input-field";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  useResendOTPMutation,
+  useVerifyEmailMutation,
+} from "@/features/auth/queries/auth.mutations";
+import { verifyZodSchema } from "@/features/auth/validators/verify.validator";
+import { zodResolver } from "@hookform/resolvers/zod";
+{{#if framework == "nextjs"}}
+import { useSearchParams } from "next/navigation";
+{{else}}
+import { useSearchParams } from "react-router";
+{{/if}}
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+type VerifyValues = {
+  email: string;
+  otp: string;
+};
+
+export default function VerifyEmailForm() {
+  const mutation = useVerifyEmailMutation();
+  const resendMutation = useResendOTPMutation();
+
+  {{#if framework == "nextjs"}}
+  const params = useSearchParams();
+  const prefillEmail = params?.get("email") || "";
+  {{else}}
+  const [searchParams] = useSearchParams();
+  const prefillEmail = searchParams.get("email") || "";
+  {{/if}}
+
+  const form = useForm<VerifyValues>({
+    mode: "onTouched",
+    resolver: zodResolver(verifyZodSchema),
+    defaultValues: { email: prefillEmail, otp: "" },
+  });
+
+  async function onSubmit(values: VerifyValues) {
+    try {
+      await mutation.mutateAsync(values);
+    } catch {
+      // Error handling is done in the mutation's onError callback
+    }
+  }
+
+  const resend = async () => {
+    const email = form.getValues("email") || prefillEmail;
+
+    if (!email) {
+      toast.error("Email not available to resend OTP");
+      return;
+    }
+
+    try {
+      await resendMutation.mutateAsync({ email });
+    } catch {
+      // Error handling is done in the mutation's onError callback
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Verify your email</CardTitle>
+        <CardDescription>
+          Enter the OTP sent to your email to verify your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="p-8">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormProvider {...form}>
+            {!prefillEmail ? (
+              <InputField
+                name="email"
+                label="Email"
+                type="email"
+                placeholder="you@example.com"
+              />
+            ) : null}
+            <InputField name="otp" label="OTP" placeholder="Enter OTP" />
+
+            <div className="flex items-center justify-between mt-2 gap-2">
+              <div className="flex gap-2">
+                <Button type="button" variant="ghost" onClick={resend}>
+                  Resend code
+                </Button>
+              </div>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {form.formState.isSubmitting ? "Verifying..." : "Verify email"}
+              </Button>
+            </div>
+          </FormProvider>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}