FoodSurf/frontend
1
0
Fork 1
Code Pull Requests Actions Packages Releases 31 Activity

Atomic for login page and register page

Browse Source
This commit is contained in:
Thanh Quy - wolf
2026-04-05 16:16:48 +07:00
parent 240155d1f6
commit c68ea1f26f
13 changed files with 256 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(main)/login/page.tsx
+2 -153
View File
@@ -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 */}
@@ -83,105 +29,8 @@ export default function LoginPage() {
</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">
{/* 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>
<LoginForm />
{/* Demo Credentials Info */}
<div className="bg-background mt-6 rounded-lg p-4">
app/(main)/payment/page.tsx
+1
View File
@@ -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
+7 -16
View File
@@ -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
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"
>
<Button variant="primaryNoBorder" type="submit" style="login" size="lg">
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
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"
>
<Button variant="primaryNoBorder" type="submit" style="login" size="lg">
Hoàn tất đăng ký
</button>
</Button>
{/* Back Button */}
<button
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"
>
<Button variant="bgWhite" onClick={handleBackToPhone} size="lg" style="login">
Thay đổi số điện thoại
</button>
</Button>
</div>
{/* Resend OTP (disabled in demo) */}
components/atoms/buttons/Button.tsx
+9 -8
View File
@@ -3,21 +3,20 @@
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 =
"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
const paymentStyles =
"inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl transition-colors";
const styles = {
base: "font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-1.5",
payment: "inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl transition-colors",
login: "w-full cursor-pointer rounded-xl py-3 font-semibold transition-all duration-150",
}
const variants = {
primary:
@@ -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
+3 -4
View File
@@ -1,12 +1,11 @@
import { ButtonHTMLAttributes } from "react";
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: "primary" | "secondary" | "danger" | "ghost";
export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
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
+6
View File
@@ -0,0 +1,6 @@
import { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
export interface ErrorMessageLoginProps {
message: string;
type?: string;
}
components/atoms/errors/ErrorMessageLogin.tsx
+32
View File
@@ -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
+4
View File
@@ -0,0 +1,4 @@
export { default as ErrorMessageLogin } from "./ErrorMessageLogin";
export type {
ErrorMessageLoginProps,
} from "./Error.types";
components/atoms/inputs/Input.types.ts
+9
View File
@@ -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
+56
View File
@@ -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
+1
View File
@@ -5,4 +5,5 @@ export type {
TextInputProps,
SearchInputProps,
TextareaProps,
LoginInputProps,
} from "./Input.types";
components/molecules/cards/PaymentSummaryCard.tsx
+4 -4
View File
@@ -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
+120
View File
@@ -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>
);
}