signin

2026-03-31 10:35:38 +07:00
parent 0ba4d43518
commit 3412ba81cf
10 changed files with 414 additions and 96 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import './globals.css';
 import "flatpickr/dist/flatpickr.css";
 import { SidebarProvider } from '@/context/SidebarContext';
 import { ThemeProvider } from '@/context/ThemeContext';
+import { Toaster } from 'sonner';

 const outfit = Outfit({
  subsets: ["latin"],
@@ -17,7 +18,7 @@ export default function RootLayout({
    <html lang="en">
      <body className={`${outfit.className} dark:bg-gray-900`}>
        <ThemeProvider>
-          <SidebarProvider>{children}</SidebarProvider>
+          <SidebarProvider>{children} <Toaster closeButton richColors position="top-right" /> </SidebarProvider>
        </ThemeProvider>
      </body>
    </html>
--- a/src/components/auth/SignInForm.tsx
+++ b/src/components/auth/SignInForm.tsx
@@ -1,15 +1,84 @@
 "use client";
+
 import Checkbox from "@/components/form/input/Checkbox";
 import Input from "@/components/form/input/InputField";
 import Label from "@/components/form/Label";
 import Button from "@/components/ui/button/Button";
 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 { API } from "../../../api";
+import api from "@/config/config";

 export default function SignInForm() {
-  const [showPassword, setShowPassword] = useState(false);
+const [showPassword, setShowPassword] = useState(false);
  const [isChecked, setIsChecked] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+  });
+
+  const isFormEmpty = !formData.email.trim() || !formData.password.trim();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+    setErrorMsg(""); 
+  };
+
+  const isValidEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const isValidPassword = (pass: string) => {
+    const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
+    return passwordRegex.test(pass);
+  };
+
+  const handleSignInClick = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (loading || isFormEmpty) return; 
+
+    setErrorMsg("");
+
+    if (!isValidEmail(formData.email)) {
+      setErrorMsg("Email không đúng định dạng.");
+      return;
+    }
+
+    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.");
+      return;
+    }
+
+    try {
+      setLoading(true); 
+      const res = await apiSignIn(formData);
+      console.log("API Sign In Response:", res);
+      
+      const data =  await api.get(API.User.CURRENT);
+      console.log("Current User:", data);
+
+      if (res.status === true) {
+        toast.success('Đăng nhập thành cô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.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
  return (
    <div className="flex flex-col flex-1 lg:w-1/2 w-full">
      <div className="w-full max-w-md sm:pt-10 mx-auto mb-5">
@@ -84,60 +153,73 @@ export default function SignInForm() {
                </span>
              </div>
            </div>
-            <form>
-              <div className="space-y-6">
-                <div>
-                  <Label>
-                    Email <span className="text-error-500">*</span>{" "}
-                  </Label>
-                  <Input placeholder="info@gmail.com" type="email" />
-                </div>
-                <div>
-                  <Label>
-                    Password <span className="text-error-500">*</span>{" "}
-                  </Label>
-                  <div className="relative">
-                    <Input
-                      type={showPassword ? "text" : "password"}
-                      placeholder="Enter your password"
-                    />
-                    <span
-                      onClick={() => setShowPassword(!showPassword)}
-                      className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"
-                    >
-                      {showPassword ? (
-                        <span className="fill-gray-500 dark:fill-gray-400">
-                          <EyeIcon />
-                        </span>
-                      ) : (
-                        <span className="fill-gray-500 dark:fill-gray-400">
-                          <EyeCloseIcon />
-                        </span>
-                      )}
-                    </span>
-                  </div>
-                </div>
-                <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 className="w-full" size="sm">
-                    Sign in
-                  </Button>
+           <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' : ''}`}>
+                  <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>
                </div>
              </div>
-            </form>
+
+              {/* 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>
+          </form>

            <div className="mt-5">
              <p className="text-sm font-normal text-center text-gray-700 dark:text-gray-400 sm:text-start">
@@ -155,4 +237,4 @@ export default function SignInForm() {
      </div>
    </div>
  );
-}
+}
--- a/src/components/auth/SignUpForm.tsx
+++ b/src/components/auth/SignUpForm.tsx
@@ -6,13 +6,13 @@ import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "@/icons";
 import { apiCreateOTP, apiSignUp, apiVerifyOTP } from "@/service/auth";
 import Link from "next/link";
 import { useState } from "react";
+import { toast } from "sonner";

 export default function SignUpForm() {
  const [showPassword, setShowPassword] = useState(false);
  const [isChecked, setIsChecked] = useState(false);

-  // State quản lý form và luồng
-  const [step, setStep] = useState(1); // 1: Đăng ký, 2: Nhập OTP
+  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    fname: "",
    lname: "",
@@ -28,20 +28,16 @@ export default function SignUpForm() {
    setErrorMsg(""); 
  };

-  // Hàm validate email
  const isValidEmail = (email:string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

-  // Hàm validate mật khẩu mới
  const isValidPassword = (pass: string) => {
-    // Tối thiểu 8 ký tự, 1 chữ in hoa, 1 chữ số, 1 ký tự đặc biệt
    const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
    return passwordRegex.test(pass);
  };

-  // Xử lý khi bấm nút Sign Up (Step 1)
  const handleSignUpClick = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrorMsg("");
@@ -65,12 +61,12 @@ 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.');
    } finally {
      setLoading(false);
    }
  };

-  // Xử lý khi xác nhận OTP (Step 2)
  const handleVerifyOtpSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrorMsg("");
@@ -103,7 +99,7 @@ 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'; // Chuyển hướng người dùng
+      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.";
@@ -144,10 +140,8 @@ export default function SignUpForm() {
            </div>
          )}

-          {/* ----- STEP 1: FORM SIGN UP ----- */}
          {step === 1 && (
            <>
-              {/* Các nút đăng ký Social */}
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
                <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">
                  Sign up with Google
@@ -170,7 +164,7 @@ export default function SignUpForm() {
              <form onSubmit={handleSignUpClick}>
                <div className="space-y-5">
                  <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
-                    {/* First Name */}
+                 
                    <div className="sm:col-span-1">
                      <Label>
                        First Name<span className="text-error-500">*</span>
@@ -183,7 +177,7 @@ export default function SignUpForm() {
                        placeholder="Enter your first name"
                      />
                    </div>
-                    {/* Last Name */}
+                  
                    <div className="sm:col-span-1">
                      <Label>
                        Last Name<span className="text-error-500">*</span>
@@ -198,7 +192,6 @@ export default function SignUpForm() {
                    </div>
                  </div>

-                  {/* Email */}
                  <div>
                    <Label>
                      Email<span className="text-error-500">*</span>
@@ -211,12 +204,10 @@ export default function SignUpForm() {
                      placeholder="Enter your email"
                    />
                  </div>
-
-                  {/* Password */}
+              
                  <div>
                    <Label>Password<span className="text-error-500">*</span></Label>
-                    
-                    {/* Thêm style báo đỏ ô nhập nếu pass chưa hợp lệ */}
+                   
                    <div className={`relative ${formData.password.length > 0 && !isValidPassword(formData.password) ? 'border border-red-500 ring-1 ring-red-500 rounded-lg' : ''}`}>
                      <Input
                        name="password"
@@ -230,19 +221,19 @@ export default function SignUpForm() {
                      </span>
                    </div>

-                    {/* Gợi ý trực quan cho người dùng */}
+                 
                    <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>

-                  {/* Checkbox */}
+                 
                  <div className="flex items-center gap-3">
                    <div className={formData.password.length > 0 && !isValidPassword(formData.password) ? "opacity-50 cursor-not-allowed" : ""}>
                      <Checkbox
                        className="w-5 h-5"
                        checked={isChecked}
-                        // Chặn bấm check nếu password chưa hợp lệ
+                       
                        onChange={(val) => {
                          if (isValidPassword(formData.password)) setIsChecked(val);
                        }}
@@ -261,7 +252,7 @@ export default function SignUpForm() {
                    </p>
                  </div>

-                  {/* Button */}
+              
                  <div>
                    <button
                      type="submit"
@@ -289,7 +280,6 @@ export default function SignUpForm() {
            </>
          )}

-          {/* ----- STEP 2: FORM NHẬP OTP ----- */}
          {step === 2 && (
            <form onSubmit={handleVerifyOtpSubmit}>
              <div className="space-y-5">
--- a/src/config/axiosInstance.ts
+++ b/src/config/axiosInstance.ts
@@ -0,0 +1,37 @@
+import axios from "axios";
+import { API } from "../../api";
+
+const axiosInstance = axios.create({
+  baseURL: "/",
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+axiosInstance.interceptors.response.use(
+  (response) => {
+    if (response.data && response.data.status === false) {
+      return handleRefreshToken(response);
+    }
+    return response;
+  },
+  async (error) => {
+    return Promise.reject(error);
+  }
+);
+
+async function handleRefreshToken(originalResponse: any) {
+  try {
+    const refreshRes = await axios.get(API.Auth.REFRESH, { withCredentials: true });
+    
+    if (refreshRes.data && refreshRes.data.status !== false) {
+      return axiosInstance(originalResponse.config);
+    }
+  } catch (err) {
+    console.error("Refresh token failed", err);
+  }
+  return originalResponse;
+}
+
+export default axiosInstance;
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -0,0 +1,65 @@
+import axios from "axios"
+import { API_URL_ROOT } from "../../api"
+
+const baseURL = API_URL_ROOT || "https://history-api.kain.id.vn"
+
+const api = axios.create({
+  baseURL,
+  withCredentials: true
+})
+
+let isRefreshing = false
+let queue: any[] = []
+
+const processQueue = (error?: any) => {
+  queue.forEach((p) => {
+    if (error) p.reject(error)
+    else p.resolve()
+  })
+  queue = []
+}
+
+api.interceptors.response.use(
+  (res) => res,
+  async (err) => {
+    const originalRequest = err.config
+
+    if (err.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise((resolve, reject) => {
+          queue.push({
+            resolve: () => resolve(api(originalRequest)),
+            reject
+          })
+        })
+      }
+
+      originalRequest._retry = true
+      isRefreshing = true
+
+      try {
+        await axios.post(
+          `${baseURL}/auth/refresh`,
+          {},
+          { withCredentials: true }
+        )
+
+        processQueue()
+
+        return api(originalRequest)
+      } catch (refreshErr) {
+        processQueue(refreshErr)
+
+        // window.location.href = "/login"
+
+        return Promise.reject(refreshErr)
+      } finally {
+        isRefreshing = false
+      }
+    }
+
+    return Promise.reject(err)
+  }
+)
+
+export default api
--- a/src/service/auth.ts
+++ b/src/service/auth.ts
@@ -1,8 +1,10 @@
+import axiosInstance from "@/config/axiosInstance";
 import { API } from "../../api";
+import api from "@/config/config";

 export const apiCreateOTP = async (email : string) => {
  const token_type = 2;
-  const response = await fetch(API.User.CREATEOTP, {
+  const response = await fetch(API.Auth.CREATEOTP, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, token_type }),
@@ -12,8 +14,7 @@ export const apiCreateOTP = async (email : string) => {

 export const apiVerifyOTP = async (email: string, token: string) => {
  const body = { email, token, token_type: 2 };
-  console.log("Request Body for Verify OTP:", body); // Log body trước khi gửi yêu cầu
-  const response = await fetch(API.User.VERIFYOTP, {
+  const response = await fetch(API.Auth.VERIFYOTP, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
@@ -22,10 +23,35 @@ export const apiVerifyOTP = async (email: string, token: string) => {
 };

 export const apiSignUp = async (payload: any) => {
-  const response = await fetch(API.User.SIGNUP, {
+  const response = await fetch(API.Auth.SIGNUP, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload),
  });
  return response.json();
-};
+};
+
+export const apiSignIn = async (payload: any) => {
+  const response = await fetch(API.Auth.SIGNIN, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(payload),
+  });
+  return response.json();
+};
+
+export const apiGetCurrentUser = async () => {
+  const response = await fetch(API.User.CURRENT,{
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+  });
+  return response.json();
+};
+
+export interface ApiResponse<T> {
+  status: boolean
+  data: T
+  message?: string
+}