@goplusvn/core 0.1.0 → 0.1.1

package/src/ui/auth/auth-layout.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import type { ComponentProps } from "react";
+import type { LocaleType } from "../../types";
+
+import { ensureLocalizedPathname, cn } from "../../utils";
+import { LanguageDropdown } from "../layout";
+
+import type { StaticImageData } from "next/image";
+
+// Minimal dictionary type to unblock
+export type AuthDictionaryType = any;
+
+interface AuthProps extends ComponentProps<"div"> {
+  imgSrc?: string | StaticImageData;
+  imgClassName?: string;
+  imageClassName?: string;
+  dictionary: AuthDictionaryType;
+}
+
+export function Auth({
+  className,
+  children,
+  imgSrc,
+  imgClassName,
+  imageClassName,
+  dictionary,
+  ...props
+}: AuthProps) {
+  const params = useParams();
+  const locale = (params.lang as LocaleType) || "vi";
+
+  return (
+    <section
+      className={cn(
+        "min-h-screen w-full grid grid-cols-1 md:grid-cols-2",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-col relative bg-background">
+        <div className="absolute top-0 inset-x-0 flex justify-between items-center px-4 py-2.5 z-50">
+          <Link
+            href={ensureLocalizedPathname("/", locale)}
+            className="flex items-center gap-2 text-foreground font-black"
+          >
+            <Image
+              src="/images/icons/shadboard.svg"
+              alt="Logo"
+              height={24}
+              width={24}
+              className="dark:invert"
+            />
+            <span>GoERP</span>
+          </Link>
+          <LanguageDropdown dictionary={dictionary} />
+        </div>
+        <div className="flex-1 flex items-center justify-center p-6">
+          <div className="max-w-md w-full space-y-6">{children}</div>
+        </div>
+      </div>
+      {imgSrc && (
+        <AuthImage
+          imgSrc={imgSrc}
+          className={cn("", imgClassName)}
+          imageClassName={imageClassName}
+        />
+      )}
+    </section>
+  );
+}
+
+interface AuthImageProps extends ComponentProps<"div"> {
+  imgSrc: string | StaticImageData;
+  imageClassName?: string;
+}
+
+export function AuthImage({
+  className,
+  imageClassName,
+  imgSrc,
+  ...props
+}: AuthImageProps) {
+  return (
+    <div
+      className={cn(
+        "relative hidden h-full min-h-screen bg-muted md:block",
+        className,
+      )}
+      {...props}
+    >
+      <Image
+        src={imgSrc}
+        alt="Authentication Image"
+        fill
+        sizes="(max-width: 768px) 100vw, 50vw"
+        priority
+        className={cn("object-cover", imageClassName)}
+      />
+    </div>
+  );
+}
+
+export function AuthHeader({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("space-y-2 text-center", className)} {...props} />;
+}
+
+export function AuthTitle({ className, ...props }: ComponentProps<"h1">) {
+  return (
+    <h1
+      className={cn(
+        "text-2xl font-semibold leading-none tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AuthDescription({ className, ...props }: ComponentProps<"p">) {
+  return (
+    <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+  );
+}
+
+export function AuthForm({ className, ...props }: ComponentProps<"div">) {
+  return <div className={className} {...props} />;
+}
+
+export function AuthFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("grid gap-6", className)} {...props} />;
+}

package/src/ui/auth/forgot-password-form.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import Link from "next/link";
+import { useParams, useSearchParams } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+
+import type { LocaleType } from "../../types";
+import { toast } from "sonner";
+import { ensureLocalizedPathname, ensureRedirectPathname } from "../../utils";
+import { ForgotPasswordSchema } from "../../schemas";
+
+import {
+  ButtonLoading,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from "../index";
+
+type ForgotPasswordFormType = z.infer<typeof ForgotPasswordSchema>;
+
+export function ForgotPasswordForm() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+
+
+  const form = useForm<ForgotPasswordFormType>({
+    resolver: zodResolver(ForgotPasswordSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const locale = (params.lang as LocaleType) || "vi";
+  const redirectPathname = searchParams.get("redirectTo");
+  const { isSubmitting, isDirty } = form.formState;
+  const isDisabled = isSubmitting || !isDirty;
+
+  async function onSubmit(_data: ForgotPasswordFormType) {
+    try {
+      // Mock API call for now or simple toast
+      toast.success("Check your email", {
+        description:
+          "We've sent you an email with instructions to reset your password.",
+      });
+    } catch (error) {
+      toast.error("Something went wrong", {
+        description: error instanceof Error ? error.message : undefined,
+      });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
+        <div className="grid gap-2">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="name@example.com"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <ButtonLoading isLoading={isSubmitting} disabled={isDisabled}>
+          Send instructions
+        </ButtonLoading>
+        <Link
+          href={ensureLocalizedPathname(
+            redirectPathname
+              ? ensureRedirectPathname("/sign-in", redirectPathname)
+              : "/sign-in",
+            locale,
+          )}
+          className="-mt-4 text-center text-sm underline"
+        >
+          Back to Sign in
+        </Link>
+      </form>
+    </Form>
+  );
+}

package/src/ui/auth/index.tsx

@@ -0,0 +1,7 @@
+export * from "./auth-layout";
+export * from "./sign-in-form";
+export * from "./register-form";
+export * from "./oauth-links";
+export * from "./forgot-password-form";
+export * from "./new-password-form";
+export * from "./verify-email-form";

package/src/ui/auth/new-password-form.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import { useParams, useSearchParams } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+
+import type { LocaleType } from "../../types";
+import { toast } from "sonner";
+import { ensureLocalizedPathname, ensureRedirectPathname } from "../../utils";
+import { NewPasswordSchema } from "../../schemas";
+
+import {
+  ButtonLoading,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from "../index";
+
+type NewPasswordFormType = z.infer<typeof NewPasswordSchema>;
+
+export function NewPasswordForm() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+
+
+  const form = useForm<NewPasswordFormType>({
+    resolver: zodResolver(NewPasswordSchema),
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const locale = (params.lang as LocaleType) || "vi";
+  const redirectPathname = searchParams.get("redirectTo");
+  const { isSubmitting, isDirty } = form.formState;
+  const isDisabled = isSubmitting || !isDirty;
+
+  async function onSubmit(_data: NewPasswordFormType) {
+    try {
+      // Mock API call
+      toast.success("Password reset", {
+        description: "Your password has been successfully reset.",
+      });
+    } catch (error) {
+      toast.error("Something went wrong", {
+        description: error instanceof Error ? error.message : undefined,
+      });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
+        <div className="grid gap-2">
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="confirmPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Confirm Password</FormLabel>
+                <FormControl>
+                  <Input type="password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <ButtonLoading isLoading={isSubmitting} disabled={isDisabled}>
+          Set new password
+        </ButtonLoading>
+        <Link
+          href={ensureLocalizedPathname(
+            redirectPathname
+              ? ensureRedirectPathname("/sign-in", redirectPathname)
+              : "/sign-in",
+            locale,
+          )}
+          className="-mt-4 text-center text-sm underline"
+        >
+          Back to Sign in
+        </Link>
+      </form>
+    </Form>
+  );
+}

package/src/ui/auth/oauth-links.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import Link from "next/link";
+import { oauthLinksData } from "../../configs/data/oauth-links";
+import { buttonVariants } from "../primitives/button";
+import { cn } from "../../utils";
+
+interface OAuthLinksProps {
+  className?: string;
+}
+
+export function OAuthLinks({ className }: OAuthLinksProps) {
+  return (
+    <div className={cn("grid grid-cols-4 gap-2", className)}>
+      {oauthLinksData.map((link) => {
+        const Icon = link.icon;
+        return (
+          <Link
+            key={link.label}
+            href={link.href}
+            className={buttonVariants({ variant: "outline", size: "icon" })}
+            aria-label={link.label}
+          >
+            <Icon className="size-4" />
+          </Link>
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/auth/register-form.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import Link from "next/link";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+
+import type { LocaleType } from "../../types";
+import { toast } from "sonner";
+import { ensureLocalizedPathname, ensureRedirectPathname } from "../../utils";
+import { RegisterSchema } from "../../schemas";
+
+import {
+  ButtonLoading,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  SeparatorWithText,
+} from "../index";
+import { OAuthLinks } from "./oauth-links";
+
+type RegisterFormType = z.infer<typeof RegisterSchema>;
+
+export function RegisterForm() {
+  const router = useRouter();
+  const params = useParams();
+  const searchParams = useSearchParams();
+  // const { toast } = useToast(); (Removed)
+
+  const form = useForm<RegisterFormType>({
+    resolver: zodResolver(RegisterSchema),
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      username: "",
+      email: "",
+      password: "",
+    },
+  });
+
+  const locale = (params.lang as LocaleType) || "vi";
+  const redirectPathname = searchParams.get("redirectTo");
+  const { isSubmitting, isDirty } = form.formState;
+  const isDisabled = isSubmitting || !isDirty;
+
+  async function onSubmit(data: RegisterFormType) {
+    const { firstName, lastName, username, email, password } = data;
+
+    try {
+      const res = await fetch("/api/register", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          firstName,
+          lastName,
+          username,
+          email,
+          password,
+        }),
+      });
+
+      if (res && res.status >= 400) {
+        const {
+          issues,
+          message,
+        }: {
+          issues?: { path: (keyof RegisterFormType)[]; message: string }[];
+          message?: string;
+        } = await res.json();
+
+        if (!issues) throw new Error(message ?? "An unknown error occurred.");
+
+        // Set errors in React Hook Form based on server response
+        issues.forEach((issue) => {
+          const field = issue.path[0];
+          form.setError(field, { type: "manual", message: issue.message });
+        });
+      } else {
+        toast.success("Đăng ký thành công");
+        router.push(
+          ensureLocalizedPathname(
+            redirectPathname
+              ? ensureRedirectPathname("/sign-in", redirectPathname)
+              : "/sign-in",
+            locale,
+          ),
+        );
+      }
+    } catch (error) {
+      toast.error("Đăng ký thất bại", {
+        description: error instanceof Error ? error.message : undefined,
+      });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
+        <div className="grid gap-2">
+          <div className="grid grid-cols-2 gap-2">
+            <FormField
+              control={form.control}
+              name="firstName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>First Name</FormLabel>
+                  <FormControl>
+                    <Input type="text" placeholder="John" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="lastName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Last Name</FormLabel>
+                  <FormControl>
+                    <Input type="text" placeholder="Doe" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder="john_doe" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="name@example.com"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <ButtonLoading isLoading={isSubmitting} disabled={isDisabled}>
+          Đăng ký với Email
+        </ButtonLoading>
+        <div className="-mt-4 text-center text-sm">
+          Đã có tài khoản?{" "}
+          <Link
+            href={ensureLocalizedPathname(
+              redirectPathname
+                ? ensureRedirectPathname("/sign-in", redirectPathname)
+                : "/sign-in",
+              locale,
+            )}
+            className="underline"
+          >
+            Đăng nhập
+          </Link>
+        </div>
+        {/* <SeparatorWithText>Or continue with</SeparatorWithText>
+        <OAuthLinks /> */}
+      </form>
+    </Form>
+  );
+}