Kain344/History-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cookie

Browse Source
This commit is contained in:
ducanh
2026-04-04 23:54:52 +07:00
parent c0022b638f
commit 6ea6976c41
4 changed files with 213 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
prettier.config.js
View File

@@ -1,3 +0,0 @@
module.exports = {
plugins: ['prettier-plugin-tailwindcss'],
}

11
src/app/testing/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { API } from "../../../api";
export default async function GetUser() {
let data = await fetch(API.User.CURRENT, {
credentials: "include",
});
let result = await data.json();
console.log("Current User from GetUser component:", result);
return <div className="">GetUser</div>;
}

187
src/components/auth/SignInForm.tsx
View File

@@ -7,7 +7,7 @@ import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "@/icons";
import { apiGetCurrentUser, apiSignIn } from "@/service/auth";
import Link from "next/link";
import React, { useState } from "react";
import { toast } from 'sonner';
import { toast } from "sonner";
import { API } from "../../../api";
import { setUserData } from "@/store/features/userSlice";
import { useDispatch } from "react-redux";
@@ -30,7 +30,7 @@ export default function SignInForm() {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
setErrorMsg("");
setErrorMsg("");
};
const isValidEmail = (email: string) => {
@@ -45,7 +45,7 @@ export default function SignInForm() {
const handleSignInClick = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (loading || isFormEmpty) return;
if (loading || isFormEmpty) return;
setErrorMsg("");
@@ -55,34 +55,36 @@ export default function SignInForm() {
}
if (!isValidPassword(formData.password)) {
setErrorMsg("Mật khẩu tối thiểu 8 ký tự, 1 in hoa, 1 số và 1 ký tự đặc biệt.");
setErrorMsg(
"Mật khẩu tối thiểu 8 ký tự, 1 in hoa, 1 số và 1 ký tự đặc biệt.",
);
return;
}
try {
setLoading(true);
setLoading(true);
const res = await apiSignIn(formData);
console.log("API Sign In Response:", res);
if (res.status === true) {
toast.success('Đăng nhập thành công!');
const data = await apiGetCurrentUser();
toast.success("Đăng nhập thành công!");
const data = await apiGetCurrentUser();
console.log("Current User Data:", data);
if (data?.data) {
dispatch(setUserData(data.data));
// router.push("/profile");
// router.push("/profile");
}
}else{
toast.error('Email hoặc mật khẩu không đúng.');
} else {
toast.error("Email hoặc mật khẩu không đúng.");
}
} catch (error) {
setErrorMsg("Lỗi khi đăng nhập. Vui lòng thử lại.");
toast.error('Đăng nhập thất bại. Vui lòng kiểm tra lại thông tin.');
toast.error("Đăng nhập thất bại. Vui lòng kiểm tra lại thông tin.");
} finally {
setLoading(false);
}
}
};
return (
<div className="flex flex-col flex-1 lg:w-1/2 w-full">
@@ -107,7 +109,13 @@ export default function SignInForm() {
</div>
<div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
<button onClick={() => (window.location.href = API.Auth.GOOGLE_LOGIN)} className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
<button
onClick={() => {
const redirectUrl = "http://localhost:3000";
window.location.href = `${API.Auth.GOOGLE_LOGIN}?redirect=${redirectUrl}`;
}}
className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10"
>
<svg
width="20"
height="20"
@@ -158,73 +166,102 @@ export default function SignInForm() {
</span>
</div>
</div>
<form onSubmit={handleSignInClick}>
<div className="space-y-6">
<div>
<Label>
Email <span className="text-error-500">*</span>
</Label>
<Input
name="email"
placeholder="info@gmail.com"
type="email"
onChange={handleChange}
defaultValue={formData.email}
/>
</div>
<div>
<Label>
Password <span className="text-error-500">*</span>
</Label>
<div className={`relative ${formData.password.length > 0 && !isValidPassword(formData.password) ? 'border border-red-500 ring-1 ring-red-500 rounded-lg' : ''}`}>
<form onSubmit={handleSignInClick}>
<div className="space-y-6">
<div>
<Label>
Email <span className="text-error-500">*</span>
</Label>
<Input
name="password"
type={showPassword ? "text" : "password"}
placeholder="Min. 8 characters"
name="email"
placeholder="info@gmail.com"
type="email"
onChange={handleChange}
defaultValue={formData.password}
defaultValue={formData.email}
/>
<span onClick={() => setShowPassword(!showPassword)} className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2">
{showPassword ? <EyeIcon /> : <EyeCloseIcon />}
</span>
</div>
</div>
{/* Hiển thị thông báo lỗi nếu có */}
{errorMsg && (
<p className="text-sm text-red-500 font-medium">{errorMsg}</p>
)}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Checkbox checked={isChecked} onChange={setIsChecked} />
<span className="block font-normal text-gray-700 text-theme-sm dark:text-gray-400">
Keep me logged in
</span>
</div>
<Link href="/reset-password" className="text-sm text-brand-500 hover:text-brand-600 dark:text-brand-400">
Forgot password?
</Link>
</div>
<div>
<button
disabled={loading || isFormEmpty}
type="submit"
className={`w-full flex items-center justify-center px-4 py-3 text-sm font-medium text-white transition rounded-lg shadow-theme-xs
${(loading || isFormEmpty) ? 'bg-gray-400 cursor-not-allowed' : 'bg-brand-500 hover:bg-brand-600'}`}
>
{loading ? (
<span className="flex items-center gap-2">
<svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
Signing in...
<div>
<Label>
Password <span className="text-error-500">*</span>
</Label>
<div
className={`relative ${formData.password.length > 0 && !isValidPassword(formData.password) ? "border border-red-500 ring-1 ring-red-500 rounded-lg" : ""}`}
>
<Input
name="password"
type={showPassword ? "text" : "password"}
placeholder="Min. 8 characters"
onChange={handleChange}
defaultValue={formData.password}
/>
<span
onClick={() => setShowPassword(!showPassword)}
className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"
>
{showPassword ? <EyeIcon /> : <EyeCloseIcon />}
</span>
) : "Sign in"}
</button>
</div>
</div>
{/* Hiển thị thông báo lỗi nếu có */}
{errorMsg && (
<p className="text-sm text-red-500 font-medium">{errorMsg}</p>
)}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Checkbox checked={isChecked} onChange={setIsChecked} />
<span className="block font-normal text-gray-700 text-theme-sm dark:text-gray-400">
Keep me logged in
</span>
</div>
<Link
href="/reset-password"
className="text-sm text-brand-500 hover:text-brand-600 dark:text-brand-400"
>
Forgot password?
</Link>
</div>
<div>
<button
disabled={loading || isFormEmpty}
type="submit"
className={`w-full flex items-center justify-center px-4 py-3 text-sm font-medium text-white transition rounded-lg shadow-theme-xs
${loading || isFormEmpty ? "bg-gray-400 cursor-not-allowed" : "bg-brand-500 hover:bg-brand-600"}`}
>
{loading ? (
<span className="flex items-center gap-2">
<svg
className="animate-spin h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Signing in...
</span>
) : (
"Sign in"
)}
</button>
</div>
</div>
</div>
</form>
</form>
<div className="mt-5">
<p className="text-sm font-normal text-center text-gray-700 dark:text-gray-400 sm:text-start">
@@ -242,4 +279,4 @@ export default function SignInForm() {
</div>
</div>
);
}
}

148
src/components/auth/SignUpForm.tsx
View File

@@ -26,10 +26,10 @@ export default function SignUpForm() {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
setErrorMsg("");
setErrorMsg("");
};
const isValidEmail = (email:string) => {
const isValidEmail = (email: string) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
@@ -43,7 +43,12 @@ export default function SignUpForm() {
e.preventDefault();
setErrorMsg("");
if (!formData.fname || !formData.lname || !formData.email || !formData.password) {
if (
!formData.fname ||
!formData.lname ||
!formData.email ||
!formData.password
) {
setErrorMsg("Vui lòng điền đầy đủ thông tin.");
return;
}
@@ -51,8 +56,10 @@ export default function SignUpForm() {
setErrorMsg("Email không đúng định dạng.");
return;
}
if (!isValidPassword(formData.password)) {
setErrorMsg("Mật khẩu chưa đủ điều kiện. Vui lòng nhập tối thiểu 8 ký tự, 1 in hoa, 1 số và 1 ký tự đặc biệt.");
if (!isValidPassword(formData.password)) {
setErrorMsg(
"Mật khẩu chưa đủ điều kiện. Vui lòng nhập tối thiểu 8 ký tự, 1 in hoa, 1 số và 1 ký tự đặc biệt.",
);
return;
}
@@ -62,7 +69,7 @@ export default function SignUpForm() {
setStep(2);
} catch (error) {
setErrorMsg("Lỗi khi tạo OTP. Vui lòng thử lại.");
toast.error('Tạo OTP thất bại. Vui lòng kiểm tra lại thông tin.');
toast.error("Tạo OTP thất bại. Vui lòng kiểm tra lại thông tin.");
} finally {
setLoading(false);
}
@@ -79,10 +86,10 @@ export default function SignUpForm() {
try {
setLoading(true);
const verifyRes = await apiVerifyOTP(formData.email, otp);
const tokenId = verifyRes?.data?.token_id;
const tokenId = verifyRes?.data?.token_id;
if (!tokenId) {
throw new Error("OTP không hợp lệ hoặc không có token_id");
}
@@ -93,6 +100,7 @@ export default function SignUpForm() {
password: formData.password,
token_id: tokenId,
};
const signupRes = await apiSignUp(signupPayload);
console.log("API Sign Up Response:", signupRes);
@@ -100,10 +108,12 @@ export default function SignUpForm() {
console.log("Đăng ký thành công!", signupRes);
alert("Đăng ký thành công! Đang chuyển hướng...");
window.location.href = '/signin';
window.location.href = "/signin";
} catch (error) {
const errorMessage = error instanceof Error ? error.message : "Xác thực OTP hoặc đăng ký thất bại.";
const errorMessage =
error instanceof Error
? error.message
: "Xác thực OTP hoặc đăng ký thất bại.";
setErrorMsg(errorMessage || "Xác thực OTP hoặc đăng ký thất bại.");
} finally {
setLoading(false);
@@ -121,7 +131,7 @@ export default function SignUpForm() {
Back to dashboard
</Link>
</div>
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
<div>
<div className="mb-5 sm:mb-8">
@@ -129,8 +139,8 @@ export default function SignUpForm() {
{step === 1 ? "Sign Up" : "Verify OTP"}
</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">
{step === 1
? "Enter your email and password to sign up!"
{step === 1
? "Enter your email and password to sign up!"
: `We sent an OTP to ${formData.email}. Please check your email and enter it below.`}
</p>
</div>
@@ -144,31 +154,37 @@ export default function SignUpForm() {
{step === 1 && (
<>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
<button onClick={() => (window.location.href = API.Auth.GOOGLE_LOGIN)} className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<button
onClick={() => {
const redirectUrl = "http://localhost:3000";
window.location.href = `${API.Auth.GOOGLE_LOGIN}?redirect=${redirectUrl}`;
}}
className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10"
>
<path
d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
fill="#4285F4"
/>
<path
d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
fill="#34A853"
/>
<path
d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
fill="#FBBC05"
/>
<path
d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
fill="#EB4335"
/>
</svg>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
fill="#4285F4"
/>
<path
d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
fill="#34A853"
/>
<path
d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
fill="#FBBC05"
/>
<path
d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
fill="#EB4335"
/>
</svg>
Sign up with Google
</button>
{/* <button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
@@ -189,7 +205,6 @@ export default function SignUpForm() {
<form onSubmit={handleSignUpClick}>
<div className="space-y-5">
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
<div className="sm:col-span-1">
<Label>
First Name<span className="text-error-500">*</span>
@@ -202,7 +217,7 @@ export default function SignUpForm() {
placeholder="Enter your first name"
/>
</div>
<div className="sm:col-span-1">
<Label>
Last Name<span className="text-error-500">*</span>
@@ -229,11 +244,15 @@ export default function SignUpForm() {
placeholder="Enter your email"
/>
</div>
<div>
<Label>Password<span className="text-error-500">*</span></Label>
<div className={`relative ${formData.password.length > 0 && !isValidPassword(formData.password) ? 'border border-red-500 ring-1 ring-red-500 rounded-lg' : ''}`}>
<Label>
Password<span className="text-error-500">*</span>
</Label>
<div
className={`relative ${formData.password.length > 0 && !isValidPassword(formData.password) ? "border border-red-500 ring-1 ring-red-500 rounded-lg" : ""}`}
>
<Input
name="password"
defaultValue={formData.password}
@@ -241,26 +260,37 @@ export default function SignUpForm() {
placeholder="Min. 8 characters"
type={showPassword ? "text" : "password"}
/>
<span onClick={() => setShowPassword(!showPassword)} className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2">
<span
onClick={() => setShowPassword(!showPassword)}
className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"
>
{showPassword ? <EyeIcon /> : <EyeCloseIcon />}
</span>
</div>
<p className={`mt-2 text-xs ${formData.password.length === 0 ? 'text-gray-400' : isValidPassword(formData.password) ? 'text-green-500' : 'text-red-500'}`}>
Mật khẩu phải chứa tối thiểu 8 ký tự, 1 chữ cái in hoa, 1 chữ số và 1 ký tự đặc biệt.
<p
className={`mt-2 text-xs ${formData.password.length === 0 ? "text-gray-400" : isValidPassword(formData.password) ? "text-green-500" : "text-red-500"}`}
>
Mật khẩu phải chứa tối thiểu 8 ký tự, 1 chữ cái in hoa, 1
chữ số và 1 ký tự đặc biệt.
</p>
</div>
<div className="flex items-center gap-3">
<div className={formData.password.length > 0 && !isValidPassword(formData.password) ? "opacity-50 cursor-not-allowed" : ""}>
<div
className={
formData.password.length > 0 &&
!isValidPassword(formData.password)
? "opacity-50 cursor-not-allowed"
: ""
}
>
<Checkbox
className="w-5 h-5"
checked={isChecked}
onChange={(val) => {
if (isValidPassword(formData.password)) setIsChecked(val);
if (isValidPassword(formData.password))
setIsChecked(val);
}}
disabled={!isValidPassword(formData.password)}
/>
@@ -277,13 +307,16 @@ export default function SignUpForm() {
</p>
</div>
<div>
<button
type="submit"
disabled={!isChecked || loading || !isValidPassword(formData.password)}
disabled={
!isChecked ||
loading ||
!isValidPassword(formData.password)
}
className={`flex items-center justify-center w-full px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs
${(!isChecked || !isValidPassword(formData.password)) ? "opacity-50 cursor-not-allowed" : "hover:bg-brand-600"}`}
${!isChecked || !isValidPassword(formData.password) ? "opacity-50 cursor-not-allowed" : "hover:bg-brand-600"}`}
>
{loading ? "Processing..." : "Sign Up"}
</button>
@@ -320,7 +353,7 @@ export default function SignUpForm() {
placeholder="Enter the 6-digit code"
/>
</div>
<div className="flex gap-3">
<button
type="button"
@@ -340,9 +373,8 @@ export default function SignUpForm() {
</div>
</form>
)}
</div>
</div>
</div>
);
}
}