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>;
}

65
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";
@@ -55,17 +55,20 @@ 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);
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!');
toast.success("Đăng nhập thành công!");
const data = await apiGetCurrentUser();
console.log("Current User Data:", data);
if (data?.data) {
@@ -73,16 +76,15 @@ export default function SignInForm() {
// router.push("/profile");
}
} else {
toast.error('Email hoặc mật khẩu không đúng.');
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"
@@ -177,7 +185,9 @@ export default function SignInForm() {
<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' : ''}`}>
<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"}
@@ -185,7 +195,10 @@ export default function SignInForm() {
onChange={handleChange}
defaultValue={formData.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>
@@ -203,7 +216,10 @@ export default function SignInForm() {
Keep me logged in
</span>
</div>
<Link href="/reset-password" className="text-sm text-brand-500 hover:text-brand-600 dark:text-brand-400">
<Link
href="/reset-password"
className="text-sm text-brand-500 hover:text-brand-600 dark:text-brand-400"
>
Forgot password?
</Link>
</div>
@@ -213,14 +229,35 @@ export default function SignInForm() {
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 || 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>
<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"}
) : (
"Sign in"
)}
</button>
</div>
</div>

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

@@ -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;
}
@@ -52,7 +57,9 @@ export default function SignUpForm() {
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.");
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);
}
@@ -94,16 +101,19 @@ export default function SignUpForm() {
token_id: tokenId,
};
const signupRes = await apiSignUp(signupPayload);
console.log("API Sign Up Response:", signupRes);
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);
@@ -144,7 +154,13 @@ 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">
<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"
@@ -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>
@@ -231,9 +246,13 @@ export default function SignUpForm() {
</div>
<div>
<Label>Password<span className="text-error-500">*</span></Label>
<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' : ''}`}>
<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>
@@ -340,7 +373,6 @@ export default function SignUpForm() {
</div>
</form>
)}
</div>
</div>
</div>