stackkit 0.3.4 → 0.3.6

package/modules/auth/better-auth/files/react/router.tsx

@@ -0,0 +1,73 @@
+import { createBrowserRouter } from "react-router";
+import { ErrorBoundary } from "./components/error-boundary";
+import Layout from "./components/layout";
+import { AdminRoute, AuthenticatedRoute, UserRoute } from "./components/route-guards";
+import ForgotPasswordPage from "./features/auth/pages/forgot-password";
+import LoginPage from "./features/auth/pages/login";
+import MyProfilePage from "./features/auth/pages/my-profile";
+import OAuthCallbackPage from "./features/auth/pages/oauth-callback";
+import RegisterPage from "./features/auth/pages/register";
+import ResetPasswordPage from "./features/auth/pages/reset-password";
+import VerifyEmailPage from "./features/auth/pages/verify-email";
+import AdminOverview from "./features/dashboard/admin/pages/overview";
+import DashboardOverview from "./features/dashboard/pages/overview";
+import DashboardLayout from "./layout/dashboard-layout";
+import About from "./pages/about";
+import Home from "./pages/home";
+import NotFound from "./pages/not-found";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    Component: Layout,
+    errorElement: <ErrorBoundary />,
+    children: [
+      { index: true, Component: Home },
+      { path: "about", Component: About },
+    ],
+  },
+  {
+    Component: DashboardLayout,
+    children: [
+      { path: "login", Component: LoginPage },
+      { path: "register", Component: RegisterPage },
+      { path: "forgot-password", Component: ForgotPasswordPage },
+      { path: "reset-password", Component: ResetPasswordPage },
+      { path: "verify-email", Component: VerifyEmailPage },
+    ],
+  },
+  {
+    Component: UserRoute,
+    children: [
+      {
+        path: "dashboard",
+        Component: DashboardLayout,
+        children: [{ index: true, Component: DashboardOverview }],
+      },
+    ],
+  },
+  {
+    Component: AdminRoute,
+    children: [
+      {
+        path: "dashboard/admin",
+        Component: DashboardLayout,
+        children: [{ index: true, Component: AdminOverview }],
+      },
+    ],
+  },
+  {
+    Component: AuthenticatedRoute,
+    children: [
+      {
+        path: "dashboard",
+        Component: DashboardLayout,
+        children: [{ path: "my-profile", Component: MyProfilePage }],
+      },
+    ],
+  },
+  { path: "api/auth/callback/:provider", Component: OAuthCallbackPage },
+  { path: "*", Component: NotFound },
+]);
+
+export default router;

package/modules/auth/better-auth/files/react/theme/components/providers/theme-provider-context.ts

@@ -0,0 +1,13 @@
+import { createContext } from "react";
+
+export type Theme = "dark" | "light" | "system";
+
+export type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+export const ThemeProviderContext = createContext<ThemeProviderState>({
+  theme: "system",
+  setTheme: () => null,
+});

package/modules/auth/better-auth/files/react/theme/components/providers/theme-provider.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import type { Theme } from "./theme-provider-context";
+import { ThemeProviderContext } from "./theme-provider-context";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}

package/modules/auth/better-auth/files/react/theme/hooks/use-theme.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ThemeProviderContext } from "../components/providers/theme-provider-context";
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};

package/modules/auth/better-auth/files/shared/features/components/change-password-dialog.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import InputField from "@/components/global/form-field/input-field";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useChangePasswordMutation } from "@/features/auth/queries/auth.mutations";
+import {
+  changePasswordZodSchema,
+  type IChangePasswordPayload,
+} from "@/features/auth/validators/change-password.validator";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { FormProvider, useForm } from "react-hook-form";
+
+interface ChangePasswordDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function ChangePasswordDialog({
+  open,
+  onOpenChange,
+}: ChangePasswordDialogProps) {
+  const mutation = useChangePasswordMutation();
+
+  const form = useForm<IChangePasswordPayload>({
+    mode: "onTouched",
+    resolver: zodResolver(changePasswordZodSchema),
+    defaultValues: {
+      currentPassword: "",
+      newPassword: "",
+      confirmPassword: "",
+    },
+  });
+
+  async function onSubmit(values: IChangePasswordPayload) {
+    try {
+      await mutation.mutateAsync({
+        currentPassword: values.currentPassword,
+        newPassword: values.newPassword,
+      });
+      form.reset();
+      onOpenChange(false);
+    } catch {
+      // Error handling is done in the mutation's onError callback
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-106.25">
+        <DialogHeader>
+          <DialogTitle>Change Password</DialogTitle>
+          <DialogDescription>
+            Enter your current password and choose a new one. Password must be
+            at least 8 characters.
+          </DialogDescription>
+        </DialogHeader>
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="grid gap-4 py-4">
+              <InputField
+                name="currentPassword"
+                label="Current Password"
+                type="password"
+                required
+                disabled={mutation.isPending}
+              />
+              <InputField
+                name="newPassword"
+                label="New Password"
+                type="password"
+                required
+                disabled={mutation.isPending}
+                hint="At least 8 characters"
+              />
+              <InputField
+                name="confirmPassword"
+                label="Confirm New Password"
+                type="password"
+                required
+                disabled={mutation.isPending}
+              />
+            </div>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={mutation.isPending}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={mutation.isPending}>
+                {mutation.isPending && (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                Change Password
+              </Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,84 @@
+{{#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 { useForgotPasswordMutation } from "@/features/auth/queries/auth.mutations";
+import { forgotZodSchema } from "@/features/auth/validators/forgot.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";
+
+type ForgotValues = {
+  email: string;
+};
+
+export default function ForgotPasswordForm() {
+  const mutation = useForgotPasswordMutation();
+
+  const form = useForm<ForgotValues>({
+    mode: "onTouched",
+    resolver: zodResolver(forgotZodSchema),
+    defaultValues: { email: "" },
+  });
+
+  async function onSubmit(values: ForgotValues) {
+    try {
+      await mutation.mutateAsync(values);
+    } catch {
+      // Error handling is done in the mutation's onError callback
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Forgot password</CardTitle>
+        <CardDescription>
+          Enter your email to receive a password reset OTP
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="p-4">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormProvider {...form}>
+            <InputField
+              name="email"
+              label="Email"
+              type="email"
+              placeholder="you@example.com"
+            />
+
+            <div className="flex items-center justify-between mt-2">
+              <div className="text-sm flex flex-col gap-1">
+                {{#if framework == "nextjs"}}
+                <Link href="/login" className="text-muted-foreground underline">
+                  Back to sign in
+                </Link>
+                {{else}}
+                <Link to="/login" className="text-muted-foreground underline">
+                  Back to sign in
+                </Link>
+                {{/if}}
+              </div>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {form.formState.isSubmitting ? "Sending..." : "Send reset OTP"}
+              </Button>
+            </div>
+          </FormProvider>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,134 @@
+{{#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 { FieldGroup } from "@/components/ui/field";
+import { useLoginMutation } from "@/features/auth/queries/auth.mutations";
+import type { ILoginPayload } from "@/features/auth/validators/login.validator";
+import { loginZodSchema } from "@/features/auth/validators/login.validator";
+import { zodResolver } from "@hookform/resolvers/zod";
+{{#if framework == "nextjs"}}
+import Link from "next/link";
+{{else}}
+import { Link, useSearchParams } from "react-router";
+{{/if}}
+import { FormProvider, useForm } from "react-hook-form";
+import SocialLoginButtons from "./social-login-buttons";
+
+{{#if framework == "nextjs"}}
+export default function LoginForm({
+  searchParams,
+}: {
+  searchParams?: { redirect?: string };
+}) {
+  const mutation = useLoginMutation();
+  const redirectPath = searchParams?.redirect || "";
+{{else}}
+export default function LoginForm() {
+  const mutation = useLoginMutation();
+  const [searchParams] = useSearchParams();
+  const redirectPath = searchParams.get("redirect") || "";
+{{/if}}
+
+  const form = useForm<ILoginPayload & { redirectPath?: string }>({
+    mode: "onTouched",
+    resolver: zodResolver(loginZodSchema),
+    defaultValues: { email: "", password: "", redirectPath },
+  });
+
+  async function onSubmit(values: ILoginPayload & { redirectPath?: string }) {
+    try {
+      const data = await mutation.mutateAsync({
+        email: values.email,
+        password: values.password,
+        redirectPath: values.redirectPath,
+      });
+
+      console.log("Login using login form", data);
+    } catch {
+      // Error handling is done in the mutation's onError callback
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Sign in to your account</CardTitle>
+        <CardDescription>
+          Enter your email and password to sign in
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="p-4">
+        <form
+          id="login-form"
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-4"
+        >
+          <FormProvider {...form}>
+            <FieldGroup>
+              <InputField
+                className="grid gap-3"
+                name="email"
+                label="Email"
+                placeholder="m@example.com"
+                type="email"
+              />
+              <InputField
+                className="grid gap-3"
+                name="password"
+                label="Password"
+                type="password"
+              />
+
+              <div className="flex justify-between">
+                <div className="text-sm flex flex-col gap-1">
+                  {{#if framework == "nextjs"}}
+                  <Link href="/register" className="text-muted-foreground underline">
+                    Don't have an account? Create one
+                  </Link>
+                  {{else}}
+                  <Link to="/register" className="text-muted-foreground underline">
+                    Don't have an account? Create one
+                  </Link>
+                  {{/if}}
+                </div>
+                {{#if framework == "nextjs"}}
+                <Link href="/forgot-password" className="text-muted-foreground underline flex items-end text-sm">
+                  Forgot password?
+                </Link>
+                {{else}}
+                <Link to="/forgot-password" className="text-muted-foreground underline flex items-end text-sm">
+                  Forgot password?
+                </Link>
+                {{/if}}
+              </div>
+            </FieldGroup>
+
+            <CardFooter className="flex flex-col items-center gap-4">
+              <Button
+                type="submit"
+                size="lg"
+                form="login-form"
+                disabled={form.formState.isSubmitting}
+                className="w-full"
+              >
+                {form.formState.isSubmitting ? "Signing in..." : "Sign in"}
+              </Button>
+              <SocialLoginButtons />
+            </CardFooter>
+          </FormProvider>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,147 @@
+"use client";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { useMeQuery } from "@/features/auth/queries/auth.querie";
+import ProfileForm from "./profile-form";
+
+export default function MyProfile() {
+  const { data: user, isLoading } = useMeQuery();
+
+  if (isLoading || !user) {
+    return (
+      <div className="flex flex-col gap-6 p-4 md:p-6 lg:p-8">
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-9 w-32" />
+          <Skeleton className="h-4 w-72" />
+        </div>
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="space-y-6 lg:col-span-2">
+            <div className="space-y-6 rounded-lg border bg-card p-6">
+              <div className="flex items-center gap-6">
+                <Skeleton className="h-24 w-24 rounded-full" />
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-28" />
+                  <Skeleton className="h-3 w-40" />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+              <Skeleton className="h-px w-full" />
+              <div className="space-y-3">
+                <Skeleton className="h-5 w-20" />
+                <Skeleton className="h-4 w-56" />
+                <Skeleton className="h-16 w-full rounded-lg" />
+              </div>
+              <div className="flex justify-end gap-3 border-t pt-6">
+                <Skeleton className="h-9 w-20" />
+                <Skeleton className="h-9 w-28" />
+              </div>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="rounded-lg border bg-card p-6">
+              <Skeleton className="mb-4 h-5 w-32" />
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+              </div>
+            </div>
+            <div className="rounded-lg border bg-card p-6">
+              <Skeleton className="mb-4 h-5 w-28" />
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6 p-4 md:p-6 lg:p-8">
+      <div className="flex flex-col gap-2">
+        <h1 className="text-3xl font-bold tracking-tight">Profile</h1>
+        <p className="text-muted-foreground">
+          Manage your account information and preferences
+        </p>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <div className="space-y-6 lg:col-span-2">
+          <ProfileForm user={user} />
+        </div>
+
+        <div className="space-y-4">
+          <div className="rounded-lg border bg-card p-6">
+            <h3 className="mb-4 text-lg font-semibold">Account Status</h3>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Status</span>
+                <span className="flex items-center gap-2">
+                  <span className="h-2 w-2 rounded-full bg-emerald-500" />
+                  Active
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Role</span>
+                <span className="capitalize">{user.role || "User"}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">User ID</span>
+                <span className="truncate font-mono text-xs">
+                  {user.id.slice(0, 8)}...{user.id.slice(-4)}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-lg border bg-card p-6">
+            <h3 className="mb-4 text-lg font-semibold">Account Info</h3>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Member Since</span>
+                <span>
+                  {user.createdAt
+                    ? new Date(user.createdAt).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      })
+                    : "N/A"}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Email Verified</span>
+                <span className="flex items-center gap-1.5">
+                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                  Verified
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-muted-foreground">Last Login</span>
+                <span>Today</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-muted bg-muted/20 p-4">
+            <p className="text-xs text-muted-foreground">
+              💡 <span className="font-medium">Tip:</span> Keep your profile
+              information up to date for better security and communication.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}