cookie

prettier.config.js

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

src/app/testing/page.tsx

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

src/components/auth/SignInForm.tsx

@@ -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,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);
+      
       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) {
           dispatch(setUserData(data.data));
           // router.push("/profile");
         }
-      }else{
+      } 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>

src/components/auth/SignUpForm.tsx

@@ -29,7 +29,7 @@ export default function SignUpForm() {
     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;
     }
@@ -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
-                    <p className={`mt-2 text-xs ${formData.password.length === 0 ? 'text-gray-400' : isValidPassword(formData.password) ? 'text-green-500' : 'text-red-500'}`}>
+                      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.
+                    >
+                      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>