cookie
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user