Atomic for login page and register page

app/(main)/login/page.tsx

@@ -1,64 +1,10 @@
 "use client";
 
-import { useAuth } from "@/lib/auth-context";
 import { SHOP_INFO } from "@/lib/constants";
+import LoginForm from "@/components/organisms/forms/LoginForm";
 import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { FormEvent, useState } from "react";
 
 export default function LoginPage() {
-  const router = useRouter();
-  const { login } = useAuth();
-
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [errors, setErrors] = useState({
-    username: "",
-    password: "",
-    general: "",
-  });
-  const [showPassword, setShowPassword] = useState(false);
-
-  const validate = (): boolean => {
-    const newErrors = { username: "", password: "", general: "" };
-    let isValid = true;
-
-    if (!username.trim()) {
-      newErrors.username = "Vui lòng nhập tên đăng nhập";
-      isValid = false;
-    }
-
-    if (!password.trim()) {
-      newErrors.password = "Vui lòng nhập mật khẩu";
-      isValid = false;
-    } else if (password.length < 4) {
-      newErrors.password = "Mật khẩu phải có ít nhất 4 ký tự";
-      isValid = false;
-    }
-
-    setErrors(newErrors);
-    return isValid;
-  };
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault();
-
-    if (!validate()) return;
-
-    const success = login(username, password);
-
-    if (success) {
-      router.push("/");
-    } else {
-      setErrors({
-        username: "",
-        password: "",
-        general: "Tên đăng nhập hoặc mật khẩu không đúng",
-      });
-    }
-  };
-
   return (
     <div className="bg-background flex min-h-screen items-center justify-center px-4 py-8">
       {/* Login Form Card */}
@@ -82,106 +28,9 @@ export default function LoginPage() {
             Đăng nhập vào hệ thống
           </p>
         </div>
-
+        
-        {/* Error Message */}
-        {errors.general && (
-          <div className="mb-4 flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">
-            <i className="fa-solid fa-circle-exclamation"></i>
-            <span>{errors.general}</span>
-          </div>
-        )}
-
         {/* Login Form */}
-        <form onSubmit={handleSubmit} className="space-y-5">
+        <LoginForm />
-          {/* Username Input */}
-          <div>
-            <label
-              htmlFor="username"
-              className="mb-2 block text-sm font-medium text-(--color-text-secondary)"
-            >
-              Tên đăng nhập
-            </label>
-            <div className="relative">
-              <i className="fa-solid fa-user absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block"></i>
-              <input
-                id="username"
-                type="text"
-                value={username}
-                onChange={(e) => {
-                  setUsername(e.target.value);
-                  setErrors({ ...errors, username: "", general: "" });
-                }}
-                placeholder="admin / số điện thoại / tên nhân viên"
-                className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-10 py-3 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) lg:pl-11 ${errors.username ? "border-red-400" : "border-(--color-border)"} `}
-              />
-            </div>
-            {errors.username && (
-              <p className="mt-1.5 flex items-center gap-1 text-xs text-red-500">
-                <i className="fa-solid fa-circle-exclamation"></i>
-                {errors.username}
-              </p>
-            )}
-          </div>
-
-          {/* Password Input */}
-          <div>
-            <label
-              htmlFor="password"
-              className="mb-2 block text-sm font-medium text-(--color-text-secondary)"
-            >
-              Mật khẩu
-            </label>
-            <div className="relative">
-              <i className="fa-solid fa-lock absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block"></i>
-              <input
-                id="password"
-                type={showPassword ? "text" : "password"}
-                value={password}
-                onChange={(e) => {
-                  setPassword(e.target.value);
-                  setErrors({ ...errors, password: "", general: "" });
-                }}
-                placeholder="Nhập mật khẩu"
-                className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-10 py-3 pr-11 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) lg:pl-11 ${errors.password ? "border-red-400" : "border-(--color-border)"} `}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute top-1/2 right-4 -translate-y-1/2 text-(--color-text-muted) transition-colors hover:text-(--color-primary)"
-                aria-label={showPassword ? "Ẩn mật khẩu" : "Hiện mật khẩu"}
-              >
-                <i
-                  className={`fa-solid ${showPassword ? "fa-eye-slash" : "fa-eye"}`}
-                ></i>
-              </button>
-            </div>
-            {errors.password && (
-              <p className="mt-1.5 flex items-center gap-1 text-xs text-red-500">
-                <i className="fa-solid fa-circle-exclamation"></i>
-                {errors.password}
-              </p>
-            )}
-          </div>
-
-          {/* Buttons */}
-          <div className="space-y-3 pt-2">
-            {/* Login Button */}
-            <button
-              type="submit"
-              className="w-full cursor-pointer rounded-xl border-none bg-(--color-primary) py-3 font-semibold text-white transition-all duration-150 hover:bg-(--color-primary-dark) active:scale-98"
-            >
-              Đăng nhập
-            </button>
-
-            {/* Register Button */}
-            <Link
-              href="/register"
-              className="flex w-full items-center justify-center rounded-xl border-2 border-(--color-primary) bg-white py-3 font-semibold text-(--color-primary) no-underline transition-all duration-150 hover:bg-(--color-primary) hover:text-white active:scale-98"
-            >
-              Đăng ký tài khoản
-            </Link>
-          </div>
-        </form>
 
         {/* Demo Credentials Info */}
         <div className="bg-background mt-6 rounded-lg p-4">

app/(main)/payment/page.tsx

@@ -104,6 +104,7 @@ export default function PaymentPage() {
                               onClick={() => removeFromCart(item.id)}
                               variant="danger"
                               size="md"
+                              style="payment"
                             >
                               Xóa sản phẩm
                             </Button>

app/(main)/register/page.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { FormEvent, useState } from "react";
+import Button from "@/components/atoms/buttons/Button";
 
 // Static OTP for demo (in production, this would be sent via SMS)
 const DEMO_OTP = "123456";
@@ -160,12 +161,9 @@ export default function RegisterPage() {
             {/* Buttons */}
             <div className="space-y-3 pt-2">
               {/* Submit Button */}
-              <button
+              <Button variant="primaryNoBorder" type="submit" style="login" size="lg">
-                type="submit"
-                className="w-full cursor-pointer rounded-xl border-none bg-(--color-primary) py-3 font-semibold text-white transition-all duration-150 hover:bg-(--color-primary-dark) active:scale-98"
-              >
                 Tiếp tục
-              </button>
+              </Button>
 
               {/* Back to Login */}
               <Link
@@ -229,21 +227,14 @@ export default function RegisterPage() {
             {/* Buttons */}
             <div className="space-y-3 pt-2">
               {/* Submit Button */}
-              <button
+              <Button variant="primaryNoBorder" type="submit" style="login" size="lg">
-                type="submit"
-                className="w-full cursor-pointer rounded-xl border-none bg-(--color-primary) py-3 font-semibold text-white transition-all duration-150 hover:bg-(--color-primary-dark) active:scale-98"
-              >
                 Hoàn tất đăng ký
-              </button>
+              </Button>
 
               {/* Back Button */}
-              <button
+              <Button variant="bgWhite" onClick={handleBackToPhone} size="lg" style="login">
-                type="button"
-                onClick={handleBackToPhone}
-                className="w-full rounded-xl border-2 border-(--color-primary) bg-white py-3 font-semibold text-(--color-primary) transition-all duration-150 hover:bg-(--color-primary) hover:text-white active:scale-98"
-              >
                 Thay đổi số điện thoại
-              </button>
+              </Button>
             </div>
 
             {/* Resend OTP (disabled in demo) */}

components/atoms/buttons/Button.tsx

@@ -3,22 +3,21 @@
 import type { ButtonProps } from "./Button.types";
 
 export default function Button({
+  style = "base",
   variant = "primary",
   size = "md",
   icon,
   iconPosition = "left",
   disabled = false,
   children,
-  className = "",
-  payment = false,
   ...props
 }: ButtonProps) {
-  const baseStyles =
+  const styles = {
-    "font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-1.5";
+    base: "font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-1.5",
-// h-8 w-8
+    payment: "inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl transition-colors",
-  const paymentStyles = 
+    login: "w-full cursor-pointer rounded-xl py-3 font-semibold transition-all duration-150",
-  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl transition-colors";
+  }
-
+  
   const variants = {
     primary:
       "bg-(--color-primary) text-white hover:bg-(--color-primary-dark) active:scale-95",
@@ -26,6 +25,8 @@ export default function Button({
       "border border-(--color-border) hover:bg-(--color-border-light) active:scale-95",
     danger: "bg-red-500 text-white hover:bg-red-600 active:scale-95",
     ghost: "bg-transparent hover:bg-(--color-border-light) active:scale-95",
+    primaryNoBorder: "border-none bg-(--color-primary) text-white hover:bg-(--color-primary-dark) active:scale-98",
+    bgWhite: "border-2 border-(--color-primary) bg-white text-(--color-primary) hover:bg-(--color-primary) hover:text-white active:scale-98",
   };
 
   const sizes = {
@@ -38,7 +39,7 @@ export default function Button({
 
   return (
     <button
-      className={`${payment ? paymentStyles : baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+      className={`${styles[style]} ${variants[variant]} ${sizes[size]}`}
       disabled={disabled}
       {...props}
     >

components/atoms/buttons/Button.types.ts

@@ -1,12 +1,11 @@
 import { ButtonHTMLAttributes } from "react";
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
-  variant?: "primary" | "secondary" | "danger" | "ghost";
+  style?: "base" | "payment" | "login";
+  variant?: "primary" | "secondary" | "danger" | "ghost" | "primaryNoBorder" | "bgWhite";
   size?: "sm" | "md" | "lg";
   icon?: string; // FontAwesome class like "fa-solid fa-cart-plus"
   iconPosition?: "left" | "right";
   disabled?: boolean;
   children: React.ReactNode;
-  className?: string;
-  payment?: boolean;
 }

components/atoms/errors/Error.types.ts

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+
+export interface ErrorMessageLoginProps {
+  message: string;
+  type?: string;
+ }

components/atoms/errors/ErrorMessageLogin.tsx

@@ -0,0 +1,32 @@
+import { ErrorMessageLoginProps } from "./Error.types";
+
+export default function ErrorMessageLogin({
+  message,
+  type = "primary",
+}: ErrorMessageLoginProps) {
+  function primaryType() {
+    return (
+      <div
+        className={
+          "mb-4 flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600"
+        }
+      >
+        <i className={"fa-solid fa-circle-exclamation"}></i>
+        <span>{message}</span>
+      </div>
+    );
+  }
+
+  function secondaryType() {
+    return (
+      <p className="mt-1.5 flex items-center gap-1 text-xs text-red-500">
+        <i className="fa-solid fa-circle-exclamation"></i>
+        {message}
+      </p>
+    );
+  }
+
+  return (
+    type === "primary" ? primaryType() : secondaryType()
+  );
+}

components/atoms/errors/index.ts

@@ -0,0 +1,4 @@
+export { default as ErrorMessageLogin } from "./ErrorMessageLogin";
+export type {
+  ErrorMessageLoginProps,
+} from "./Error.types";

components/atoms/inputs/Input.types.ts

@@ -18,3 +18,12 @@ export interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement>
   onClear?: () => void;
   className?: string;
 }
+
+export interface LoginInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  type: string;
+  name: string;
+  value: string;
+  errors?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}

components/atoms/inputs/LoginInput.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+
+import { LoginInputProps } from "./Input.types";
+
+export default function LoginInput({
+  label,
+  type,
+  name,
+  value,
+  errors,
+  onChange,
+  ...restProps
+}: LoginInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  function isPassword() {
+    if (type === "password") {
+      return (
+        <button
+          type="button"
+          onClick={() => setShowPassword(!showPassword)}
+          className="absolute top-1/2 right-4 -translate-y-1/2 text-(--color-text-muted) transition-colors hover:text-(--color-primary)"
+          aria-label={showPassword ? "Ẩn mật khẩu" : "Hiện mật khẩu"}
+        >
+          <i
+            className={`fa-solid ${showPassword ? "fa-eye-slash" : "fa-eye"}`}
+          ></i>
+        </button>
+      );
+    }
+    return "";
+  }
+
+  return (
+    <div>
+      <label
+        htmlFor={name}
+        className="mb-2 block text-sm font-medium text-(--color-text-secondary)"
+      >
+        {label}
+      </label>
+      <div className="relative">
+        <i className="fa-solid fa-user absolute top-1/2 left-4 hidden -translate-y-1/2 text-(--color-text-muted) lg:block"></i>
+        <input
+          id={name}
+          type={showPassword ? "text" : type}
+          value={value}
+          onChange={onChange}
+          placeholder= {type === "password" ? "Mật khẩu" : "admin / số điện thoại / tên nhân viên"}
+          className={`text-foreground focus:ring-opacity-20 w-full rounded-xl border bg-white px-10 py-3 transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary) lg:pl-11 ${errors ? "border-red-400" : "border-(--color-border)"} `}
+        />
+        {isPassword()}
+      </div>
+    </div>
+  );
+}

components/atoms/inputs/index.ts

@@ -5,4 +5,5 @@ export type {
   TextInputProps,
   SearchInputProps,
   TextareaProps,
+  LoginInputProps,
 } from "./Input.types";

components/molecules/cards/PaymentSummaryCard.tsx

@@ -36,7 +36,7 @@ export default function PaymentSummaryCard({
 
         <div className="mt-4 grid grid-cols-2 gap-3">
           <Button
-            payment
+            style="payment"
             onClick={handlePayment}
             icon="fa-solid fa-money-bill-wave"
             size="md"
@@ -46,7 +46,7 @@ export default function PaymentSummaryCard({
           </Button>
 
           <Button
-            payment
+            style="payment"
             onClick={handlePayment}
             icon="fa-solid fa-qrcode"
             size="md"
@@ -57,7 +57,7 @@ export default function PaymentSummaryCard({
 
           {isCustomer && (
             <Button
-              payment
+              style="payment"
               onClick={handlePayment}
               icon="fa-solid fa-star"
               size="md"
@@ -69,7 +69,7 @@ export default function PaymentSummaryCard({
 
           <Link href={backHref || "/"}  className={isCustomer ? "" : "col-span-2"}>
             <Button
-              payment
+              style="payment"
               onClick={() => setIsReviewOpen(false)}
               icon="fa-solid fa-arrow-rotate-left"
               size="md"

components/organisms/forms/LoginForm.tsx

@@ -0,0 +1,120 @@
+import ErrorMessageLogin from "@/components/atoms/errors/ErrorMessageLogin";
+import LoginInput from "@/components/atoms/inputs/LoginInput";
+import { useAuth } from "@/lib/auth-context";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { FormEvent, useState } from "react";
+import Button from "@/components/atoms/buttons/Button";
+
+export default function LoginForm() {
+  const router = useRouter();
+  const { login } = useAuth();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState({
+    username: "",
+    password: "",
+    general: "",
+  });
+
+  const validate = (): boolean => {
+    const newErrors = { username: "", password: "", general: "" };
+    let isValid = true;
+
+    if (!username.trim()) {
+      newErrors.username = "Vui lòng nhập tên đăng nhập";
+      isValid = false;
+    }
+
+    if (!password.trim()) {
+      newErrors.password = "Vui lòng nhập mật khẩu";
+      isValid = false;
+    } else if (password.length < 4) {
+      newErrors.password = "Mật khẩu phải có ít nhất 4 ký tự";
+      isValid = false;
+    }
+
+    setErrors(newErrors);
+    return isValid;
+  };
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!validate()) return;
+
+    const success = login(username, password);
+
+    if (success) {
+      router.push("/");
+    } else {
+      setErrors({
+        username: "",
+        password: "",
+        general: "Tên đăng nhập hoặc mật khẩu không đúng",
+      });
+    }
+  };
+
+  return (
+    <div>
+      {/* Error Message */}
+      {errors.general && <ErrorMessageLogin message={errors.general} />}
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div>
+          {/* Username Input */}
+          <LoginInput
+            label="Tên đăng nhập"
+            type="text"
+            name="username"
+            value={username}
+            onChange={(e) => {
+              setUsername(e.target.value);
+              setErrors({ ...errors, username: "", general: "" });
+            }}
+            errors={errors.username}
+          />
+          {errors.username && (
+            <ErrorMessageLogin message={errors.username} type="secondary" />
+          )}
+        </div>
+
+        {/* Password Input */}
+        <div>
+          <LoginInput
+            label="Mật khẩu"
+            type="password"
+            name="password"
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              setErrors({ ...errors, password: "", general: "" });
+            }}
+            errors={errors.password}
+          />
+          {errors.password && (
+            <ErrorMessageLogin message={errors.password} type="secondary" />
+          )}
+        </div>
+
+        {/* Buttons */}
+        <div className="space-y-3 pt-2">
+          {/* Login Button */}
+          <Button variant="primaryNoBorder" type="submit" style="login" size="lg">
+            Đăng nhập
+          </Button>
+
+          {/* Register Button */}
+          <Link
+            href="/register"
+            className="flex w-full items-center justify-center rounded-xl border-2 border-(--color-primary) bg-white py-3 font-semibold text-(--color-primary) no-underline transition-all duration-150 hover:bg-(--color-primary) hover:text-white active:scale-98"
+          >
+            Đăng ký tài khoản
+          </Link>
+        </div>
+      </form>
+    </div>
+  );
+}