feat(auth): add Login and Register pages with validation and OTP
This commit is contained in:
Blackbox Agent
@@ -0,0 +1,213 @@
|
||||
"use client";
|
||||
|
||||
import { useState, FormEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useAuth } from "@/lib/auth-context";
|
||||
import { SHOP_INFO } from "@/lib/constants";
|
||||
|
||||
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="min-h-screen flex items-center justify-center px-4 py-8"
|
||||
style={{
|
||||
background: "var(--color-bg-main)",
|
||||
}}
|
||||
>
|
||||
{/* Login Form Card */}
|
||||
<div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
|
||||
|
||||
{/* Logo & Shop Name */}
|
||||
<div className="flex flex-col items-center mb-8">
|
||||
<div className="relative w-20 h-20 mb-4">
|
||||
<Image
|
||||
src={SHOP_INFO.logo}
|
||||
alt={SHOP_INFO.name}
|
||||
fill
|
||||
className="object-contain"
|
||||
sizes="80px"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-(--color-primary-dark) mb-1">
|
||||
{SHOP_INFO.name}
|
||||
</h1>
|
||||
<p className="text-sm text-(--color-text-muted)">
|
||||
Đăng nhập vào hệ thống
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{errors.general && (
|
||||
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600 flex items-center gap-2">
|
||||
<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="block text-sm font-medium text-(--color-text-secondary) mb-2">
|
||||
Tên đăng nhập
|
||||
</label>
|
||||
<div className="relative">
|
||||
<i className="fa-solid fa-user absolute left-4 top-1/2 -translate-y-1/2 text-(--color-text-muted) hidden 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={`
|
||||
w-full px-4 lg:pl-11 py-3 rounded-xl border outline-none
|
||||
bg-white text-(--color-text-primary)
|
||||
placeholder:text-(--color-text-muted)
|
||||
focus:border-(--color-primary) focus:ring-2
|
||||
focus:ring-(--color-primary) focus:ring-opacity-20
|
||||
transition-all duration-150
|
||||
${errors.username ? "border-red-400" : "border-(--color-border)"}
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
{errors.username && (
|
||||
<p className="mt-1.5 text-xs text-red-500 flex items-center gap-1">
|
||||
<i className="fa-solid fa-circle-exclamation"></i>
|
||||
{errors.username}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Input */}
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-(--color-text-secondary) mb-2">
|
||||
Mật khẩu
|
||||
</label>
|
||||
<div className="relative">
|
||||
<i className="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-(--color-text-muted) hidden 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={`
|
||||
w-full px-4 lg:pl-11 pr-11 py-3 rounded-xl border outline-none
|
||||
bg-white text-(--color-text-primary)
|
||||
placeholder:text-(--color-text-muted)
|
||||
focus:border-(--color-primary) focus:ring-2
|
||||
focus:ring-(--color-primary) focus:ring-opacity-20
|
||||
transition-all duration-150
|
||||
${errors.password ? "border-red-400" : "border-(--color-border)"}
|
||||
`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-(--color-text-muted) hover:text-(--color-primary) transition-colors"
|
||||
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 text-xs text-red-500 flex items-center gap-1">
|
||||
<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 py-3 rounded-xl font-semibold text-white
|
||||
bg-(--color-primary) hover:bg-(--color-primary-dark)
|
||||
active:scale-98 transition-all duration-150
|
||||
border-none cursor-pointer"
|
||||
>
|
||||
Đăng nhập
|
||||
</button>
|
||||
|
||||
{/* Register Button */}
|
||||
<Link
|
||||
href="/register"
|
||||
className="w-full py-3 rounded-xl font-semibold
|
||||
bg-white text-(--color-primary)
|
||||
border-2 border-(--color-primary)
|
||||
hover:bg-(--color-primary) hover:text-white
|
||||
active:scale-98 transition-all duration-150
|
||||
flex items-center justify-center no-underline"
|
||||
>
|
||||
Đăng ký tài khoản
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Demo Credentials Info */}
|
||||
<div className="mt-6 p-4 bg-(--color-bg-main) rounded-lg">
|
||||
<p className="text-xs text-(--color-text-muted) mb-2 font-semibold">Tài khoản demo:</p>
|
||||
<ul className="text-xs text-(--color-text-muted) space-y-1">
|
||||
<li>• Quản lý: <code className="bg-white px-1.5 py-0.5 rounded">admin / admin</code></li>
|
||||
<li>• Nhân viên: <code className="bg-white px-1.5 py-0.5 rounded">Nguyễn Văn An / Nguyễn Văn An</code></li>
|
||||
<li>• Khách hàng: <code className="bg-white px-1.5 py-0.5 rounded">0987654321 / user1</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+6
-3
@@ -2,6 +2,7 @@
|
||||
|
||||
import { MenuProvider } from "@/lib/menu-context";
|
||||
import { CartProvider } from "@/lib/cart-context";
|
||||
import { AuthProvider } from "@/lib/auth-context";
|
||||
|
||||
/**
|
||||
* Client-side providers wrapper.
|
||||
@@ -10,8 +11,10 @@ import { CartProvider } from "@/lib/cart-context";
|
||||
*/
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<MenuProvider>
|
||||
<CartProvider>{children}</CartProvider>
|
||||
</MenuProvider>
|
||||
<AuthProvider>
|
||||
<MenuProvider>
|
||||
<CartProvider>{children}</CartProvider>
|
||||
</MenuProvider>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
"use client";
|
||||
|
||||
import { useState, FormEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useAuth } from "@/lib/auth-context";
|
||||
import { SHOP_INFO } from "@/lib/constants";
|
||||
|
||||
// Static OTP for demo (in production, this would be sent via SMS)
|
||||
const DEMO_OTP = "123456";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const router = useRouter();
|
||||
const { completeRegistration } = useAuth();
|
||||
|
||||
const [step, setStep] = useState<"phone" | "otp">("phone");
|
||||
const [phone, setPhone] = useState("");
|
||||
const [otp, setOtp] = useState("");
|
||||
const [errors, setErrors] = useState({ phone: "", otp: "" });
|
||||
|
||||
// Validate Vietnamese phone number
|
||||
const validatePhone = (phoneNumber: string): boolean => {
|
||||
// Vietnamese phone format: 10 digits starting with 0
|
||||
// Valid prefixes: 03, 05, 07, 08, 09
|
||||
const phoneRegex = /^(0[3|5|7|8|9])[0-9]{8}$/;
|
||||
return phoneRegex.test(phoneNumber);
|
||||
};
|
||||
|
||||
const handlePhoneSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!phone.trim()) {
|
||||
setErrors({ ...errors, phone: "Vui lòng nhập số điện thoại" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validatePhone(phone)) {
|
||||
setErrors({ ...errors, phone: "Số điện thoại không hợp lệ (VD: 0987654321)" });
|
||||
return;
|
||||
}
|
||||
|
||||
// Move to OTP step
|
||||
setStep("otp");
|
||||
setErrors({ phone: "", otp: "" });
|
||||
};
|
||||
|
||||
const handleOtpSubmit = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!otp.trim()) {
|
||||
setErrors({ ...errors, otp: "Vui lòng nhập mã OTP" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (otp !== DEMO_OTP) {
|
||||
setErrors({ ...errors, otp: "Mã OTP không đúng" });
|
||||
return;
|
||||
}
|
||||
|
||||
// Complete registration
|
||||
completeRegistration(phone);
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
const handleBackToPhone = () => {
|
||||
setStep("phone");
|
||||
setOtp("");
|
||||
setErrors({ phone: "", otp: "" });
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen flex items-center justify-center px-4 py-8"
|
||||
style={{
|
||||
background: "var(--color-bg-main)",
|
||||
}}
|
||||
>
|
||||
{/* Register Form Card */}
|
||||
<div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
|
||||
|
||||
{/* Logo & Shop Name */}
|
||||
<div className="flex flex-col items-center mb-8">
|
||||
<div className="relative w-20 h-20 mb-4">
|
||||
<Image
|
||||
src={SHOP_INFO.logo}
|
||||
alt={SHOP_INFO.name}
|
||||
fill
|
||||
className="object-contain"
|
||||
sizes="80px"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-(--color-primary-dark) mb-1">
|
||||
{SHOP_INFO.name}
|
||||
</h1>
|
||||
<p className="text-sm text-(--color-text-muted)">
|
||||
{step === "phone" ? "Đăng ký tài khoản khách hàng" : "Xác thực số điện thoại"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Step Indicator */}
|
||||
<div className="flex items-center justify-center gap-2 mb-6">
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
|
||||
step === "phone"
|
||||
? "bg-(--color-primary) text-white"
|
||||
: "bg-(--color-accent-light) text-(--color-primary-dark)"
|
||||
}`}>
|
||||
1
|
||||
</div>
|
||||
<div className="w-12 h-0.5 bg-(--color-border)"></div>
|
||||
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
|
||||
step === "otp"
|
||||
? "bg-(--color-primary) text-white"
|
||||
: "bg-(--color-border-light) text-(--color-text-muted)"
|
||||
}`}>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phone Step */}
|
||||
{step === "phone" && (
|
||||
<form onSubmit={handlePhoneSubmit} className="space-y-5">
|
||||
|
||||
{/* Phone Input */}
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-(--color-text-secondary) mb-2">
|
||||
Số điện thoại
|
||||
</label>
|
||||
<div className="relative">
|
||||
<i className="fa-solid fa-phone absolute left-4 top-1/2 -translate-y-1/2 text-(--color-text-muted) hidden lg:block"></i>
|
||||
<input
|
||||
id="phone"
|
||||
type="tel"
|
||||
value={phone}
|
||||
onChange={(e) => {
|
||||
setPhone(e.target.value);
|
||||
setErrors({ ...errors, phone: "" });
|
||||
}}
|
||||
placeholder="0987654321"
|
||||
className={`
|
||||
w-full px-4 lg:pl-11 py-3 rounded-xl border outline-none
|
||||
bg-white text-(--color-text-primary)
|
||||
placeholder:text-(--color-text-muted)
|
||||
focus:border-(--color-primary) focus:ring-2
|
||||
focus:ring-(--color-primary) focus:ring-opacity-20
|
||||
transition-all duration-150
|
||||
${errors.phone ? "border-red-400" : "border-(--color-border)"}
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
{errors.phone && (
|
||||
<p className="mt-1.5 text-xs text-red-500 flex items-center gap-1">
|
||||
<i className="fa-solid fa-circle-exclamation"></i>
|
||||
{errors.phone}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-xs text-(--color-text-muted)">
|
||||
Nhập số điện thoại Việt Nam (10 số, bắt đầu bằng 0)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="space-y-3 pt-2">
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 rounded-xl font-semibold text-white
|
||||
bg-(--color-primary) hover:bg-(--color-primary-dark)
|
||||
active:scale-98 transition-all duration-150
|
||||
border-none cursor-pointer"
|
||||
>
|
||||
Tiếp tục
|
||||
</button>
|
||||
|
||||
{/* Back to Login */}
|
||||
<Link
|
||||
href="/login"
|
||||
className="w-full py-3 rounded-xl font-semibold
|
||||
bg-white text-(--color-primary)
|
||||
border-2 border-(--color-primary)
|
||||
hover:bg-(--color-primary) hover:text-white
|
||||
active:scale-98 transition-all duration-150
|
||||
flex items-center justify-center no-underline"
|
||||
>
|
||||
Quay lại đăng nhập
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* OTP Step */}
|
||||
{step === "otp" && (
|
||||
<form onSubmit={handleOtpSubmit} className="space-y-5">
|
||||
|
||||
{/* Info Message */}
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<p className="text-sm text-blue-800 mb-2">
|
||||
<i className="fa-solid fa-circle-info mr-2"></i>
|
||||
Mã OTP đã được gửi đến số <strong>{phone}</strong>
|
||||
</p>
|
||||
<p className="text-xs text-blue-600">
|
||||
Demo OTP: <code className="bg-white px-2 py-1 rounded font-mono">{DEMO_OTP}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* OTP Input */}
|
||||
<div>
|
||||
<label htmlFor="otp" className="block text-sm font-medium text-(--color-text-secondary) mb-2">
|
||||
Mã OTP
|
||||
</label>
|
||||
<div className="relative">
|
||||
<i className="fa-solid fa-key absolute left-4 top-1/2 -translate-y-1/2 text-(--color-text-muted) hidden lg:block"></i>
|
||||
<input
|
||||
id="otp"
|
||||
type="text"
|
||||
value={otp}
|
||||
onChange={(e) => {
|
||||
setOtp(e.target.value);
|
||||
setErrors({ ...errors, otp: "" });
|
||||
}}
|
||||
placeholder="Nhập mã OTP 6 số"
|
||||
maxLength={6}
|
||||
className={`
|
||||
w-full px-4 lg:pl-11 py-3 rounded-xl border outline-none
|
||||
bg-white text-(--color-text-primary) text-center font-mono text-lg tracking-widest
|
||||
placeholder:text-(--color-text-muted) placeholder:text-sm placeholder:tracking-normal
|
||||
focus:border-(--color-primary) focus:ring-2
|
||||
focus:ring-(--color-primary) focus:ring-opacity-20
|
||||
transition-all duration-150
|
||||
${errors.otp ? "border-red-400" : "border-(--color-border)"}
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
{errors.otp && (
|
||||
<p className="mt-1.5 text-xs text-red-500 flex items-center gap-1">
|
||||
<i className="fa-solid fa-circle-exclamation"></i>
|
||||
{errors.otp}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="space-y-3 pt-2">
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 rounded-xl font-semibold text-white
|
||||
bg-(--color-primary) hover:bg-(--color-primary-dark)
|
||||
active:scale-98 transition-all duration-150
|
||||
border-none cursor-pointer"
|
||||
>
|
||||
Hoàn tất đăng ký
|
||||
</button>
|
||||
|
||||
{/* Back Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBackToPhone}
|
||||
className="w-full py-3 rounded-xl font-semibold
|
||||
bg-white text-(--color-primary)
|
||||
border-2 border-(--color-primary)
|
||||
hover:bg-(--color-primary) hover:text-white
|
||||
active:scale-98 transition-all duration-150"
|
||||
>
|
||||
Thay đổi số điện thoại
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Resend OTP (disabled in demo) */}
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
className="text-sm text-(--color-text-muted) cursor-not-allowed"
|
||||
>
|
||||
Gửi lại mã OTP (60s)
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user