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 { apiGetCurrentUser, apiSignIn } from "@/service/auth";
import Link from "next/link"; import Link from "next/link";
import React, { useState } from "react"; import React, { useState } from "react";
import { toast } from 'sonner'; import { toast } from "sonner";
import { API } from "../../../api"; import { API } from "../../../api";
import { setUserData } from "@/store/features/userSlice"; import { setUserData } from "@/store/features/userSlice";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
@@ -30,7 +30,7 @@ export default function SignInForm() {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value }); setFormData({ ...formData, [e.target.name]: e.target.value });
setErrorMsg(""); setErrorMsg("");
}; };
const isValidEmail = (email: string) => { const isValidEmail = (email: string) => {
@@ -45,7 +45,7 @@ export default function SignInForm() {
const handleSignInClick = async (e: React.FormEvent<HTMLFormElement>) => { const handleSignInClick = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (loading || isFormEmpty) return; if (loading || isFormEmpty) return;
setErrorMsg(""); setErrorMsg("");
@@ -55,34 +55,36 @@ export default function SignInForm() {
} }
if (!isValidPassword(formData.password)) { 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; return;
} }
try { try {
setLoading(true); setLoading(true);
const res = await apiSignIn(formData); const res = await apiSignIn(formData);
console.log("API Sign In Response:", res); console.log("API Sign In Response:", res);
if (res.status === true) { 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(); const data = await apiGetCurrentUser();
console.log("Current User Data:", data); console.log("Current User Data:", data);
if (data?.data) { if (data?.data) {
dispatch(setUserData(data.data)); dispatch(setUserData(data.data));
// router.push("/profile"); // 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) { } catch (error) {
setErrorMsg("Lỗi khi đăng nhập. Vui lòng thử lại."); 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 { } finally {
setLoading(false); setLoading(false);
} }
} };
return ( return (
<div className="flex flex-col flex-1 lg:w-1/2 w-full"> <div className="flex flex-col flex-1 lg:w-1/2 w-full">
@@ -107,7 +109,13 @@ export default function SignInForm() {
</div> </div>
<div> <div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5"> <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 <svg
width="20" width="20"
height="20" height="20"
@@ -158,73 +166,102 @@ export default function SignInForm() {
</span> </span>
</div> </div>
</div> </div>
<form onSubmit={handleSignInClick}> <form onSubmit={handleSignInClick}>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<Label> <Label>
Email <span className="text-error-500">*</span> Email <span className="text-error-500">*</span>
</Label> </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 <Input
name="password" name="email"
type={showPassword ? "text" : "password"} placeholder="info@gmail.com"
placeholder="Min. 8 characters" type="email"
onChange={handleChange} 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>
</div>
{/* Hiển thị thông báo lỗi nếu có */} <div>
{errorMsg && ( <Label>
<p className="text-sm text-red-500 font-medium">{errorMsg}</p> Password <span className="text-error-500">*</span>
)} </Label>
<div
<div className="flex items-center justify-between"> className={`relative ${formData.password.length > 0 && !isValidPassword(formData.password) ? "border border-red-500 ring-1 ring-red-500 rounded-lg" : ""}`}
<div className="flex items-center gap-3"> >
<Checkbox checked={isChecked} onChange={setIsChecked} /> <Input
<span className="block font-normal text-gray-700 text-theme-sm dark:text-gray-400"> name="password"
Keep me logged in type={showPassword ? "text" : "password"}
</span> placeholder="Min. 8 characters"
</div> onChange={handleChange}
<Link href="/reset-password" className="text-sm text-brand-500 hover:text-brand-600 dark:text-brand-400"> defaultValue={formData.password}
Forgot password? />
</Link> <span
</div> onClick={() => setShowPassword(!showPassword)}
className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"
<div> >
<button {showPassword ? <EyeIcon /> : <EyeCloseIcon />}
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> </span>
) : "Sign in"} </div>
</button> </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>
</div> </form>
</form>
<div className="mt-5"> <div className="mt-5">
<p className="text-sm font-normal text-center text-gray-700 dark:text-gray-400 sm:text-start"> <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>
</div> </div>
); );
} }

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

@@ -26,10 +26,10 @@ export default function SignUpForm() {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({ ...formData, [e.target.name]: e.target.value }); setFormData({ ...formData, [e.target.name]: e.target.value });
setErrorMsg(""); setErrorMsg("");
}; };
const isValidEmail = (email:string) => { const isValidEmail = (email: string) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email); return emailRegex.test(email);
}; };
@@ -43,7 +43,12 @@ export default function SignUpForm() {
e.preventDefault(); e.preventDefault();
setErrorMsg(""); 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."); setErrorMsg("Vui lòng điền đầy đủ thông tin.");
return; return;
} }
@@ -51,8 +56,10 @@ export default function SignUpForm() {
setErrorMsg("Email không đúng định dạng."); setErrorMsg("Email không đúng định dạng.");
return; return;
} }
if (!isValidPassword(formData.password)) { 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; return;
} }
@@ -62,7 +69,7 @@ export default function SignUpForm() {
setStep(2); setStep(2);
} catch (error) { } catch (error) {
setErrorMsg("Lỗi khi tạo OTP. Vui lòng thử lại."); 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 { } finally {
setLoading(false); setLoading(false);
} }
@@ -79,10 +86,10 @@ export default function SignUpForm() {
try { try {
setLoading(true); setLoading(true);
const verifyRes = await apiVerifyOTP(formData.email, otp); const verifyRes = await apiVerifyOTP(formData.email, otp);
const tokenId = verifyRes?.data?.token_id; const tokenId = verifyRes?.data?.token_id;
if (!tokenId) { if (!tokenId) {
throw new Error("OTP không hợp lệ hoặc không có token_id"); 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, password: formData.password,
token_id: tokenId, token_id: tokenId,
}; };
const signupRes = await apiSignUp(signupPayload); const signupRes = await apiSignUp(signupPayload);
console.log("API Sign Up Response:", signupRes); console.log("API Sign Up Response:", signupRes);
@@ -100,10 +108,12 @@ export default function SignUpForm() {
console.log("Đăng ký thành công!", signupRes); console.log("Đăng ký thành công!", signupRes);
alert("Đăng ký thành công! Đang chuyển hướng..."); alert("Đăng ký thành công! Đang chuyển hướng...");
window.location.href = '/signin'; window.location.href = "/signin";
} catch (error) { } 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."); setErrorMsg(errorMessage || "Xác thực OTP hoặc đăng ký thất bại.");
} finally { } finally {
setLoading(false); setLoading(false);
@@ -121,7 +131,7 @@ export default function SignUpForm() {
Back to dashboard Back to dashboard
</Link> </Link>
</div> </div>
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto"> <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
<div> <div>
<div className="mb-5 sm:mb-8"> <div className="mb-5 sm:mb-8">
@@ -129,8 +139,8 @@ export default function SignUpForm() {
{step === 1 ? "Sign Up" : "Verify OTP"} {step === 1 ? "Sign Up" : "Verify OTP"}
</h1> </h1>
<p className="text-sm text-gray-500 dark:text-gray-400"> <p className="text-sm text-gray-500 dark:text-gray-400">
{step === 1 {step === 1
? "Enter your email and password to sign up!" ? "Enter your email and password to sign up!"
: `We sent an OTP to ${formData.email}. Please check your email and enter it below.`} : `We sent an OTP to ${formData.email}. Please check your email and enter it below.`}
</p> </p>
</div> </div>
@@ -144,31 +154,37 @@ export default function SignUpForm() {
{step === 1 && ( {step === 1 && (
<> <>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5"> <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
<svg onClick={() => {
width="20" const redirectUrl = "http://localhost:3000";
height="20" window.location.href = `${API.Auth.GOOGLE_LOGIN}?redirect=${redirectUrl}`;
viewBox="0 0 20 20" }}
fill="none" 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"
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
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" width="20"
fill="#4285F4" height="20"
/> viewBox="0 0 20 20"
<path fill="none"
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" xmlns="http://www.w3.org/2000/svg"
fill="#34A853" >
/> <path
<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"
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="#4285F4"
fill="#FBBC05" />
/> <path
<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"
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="#34A853"
fill="#EB4335" />
/> <path
</svg> 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 Sign up with Google
</button> </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"> {/* <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}> <form onSubmit={handleSignUpClick}>
<div className="space-y-5"> <div className="space-y-5">
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2"> <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
<div className="sm:col-span-1"> <div className="sm:col-span-1">
<Label> <Label>
First Name<span className="text-error-500">*</span> First Name<span className="text-error-500">*</span>
@@ -202,7 +217,7 @@ export default function SignUpForm() {
placeholder="Enter your first name" placeholder="Enter your first name"
/> />
</div> </div>
<div className="sm:col-span-1"> <div className="sm:col-span-1">
<Label> <Label>
Last Name<span className="text-error-500">*</span> Last Name<span className="text-error-500">*</span>
@@ -229,11 +244,15 @@ export default function SignUpForm() {
placeholder="Enter your email" placeholder="Enter your email"
/> />
</div> </div>
<div> <div>
<Label>Password<span className="text-error-500">*</span></Label> <Label>
Password<span className="text-error-500">*</span>
<div className={`relative ${formData.password.length > 0 && !isValidPassword(formData.password) ? 'border border-red-500 ring-1 ring-red-500 rounded-lg' : ''}`}> </Label>
<div
className={`relative ${formData.password.length > 0 && !isValidPassword(formData.password) ? "border border-red-500 ring-1 ring-red-500 rounded-lg" : ""}`}
>
<Input <Input
name="password" name="password"
defaultValue={formData.password} defaultValue={formData.password}
@@ -241,26 +260,37 @@ export default function SignUpForm() {
placeholder="Min. 8 characters" placeholder="Min. 8 characters"
type={showPassword ? "text" : "password"} 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 />} {showPassword ? <EyeIcon /> : <EyeCloseIcon />}
</span> </span>
</div> </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> </p>
</div> </div>
<div className="flex items-center gap-3"> <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 <Checkbox
className="w-5 h-5" className="w-5 h-5"
checked={isChecked} checked={isChecked}
onChange={(val) => { onChange={(val) => {
if (isValidPassword(formData.password)) setIsChecked(val); if (isValidPassword(formData.password))
setIsChecked(val);
}} }}
disabled={!isValidPassword(formData.password)} disabled={!isValidPassword(formData.password)}
/> />
@@ -277,13 +307,16 @@ export default function SignUpForm() {
</p> </p>
</div> </div>
<div> <div>
<button <button
type="submit" 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 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"} {loading ? "Processing..." : "Sign Up"}
</button> </button>
@@ -320,7 +353,7 @@ export default function SignUpForm() {
placeholder="Enter the 6-digit code" placeholder="Enter the 6-digit code"
/> />
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
<button <button
type="button" type="button"
@@ -340,9 +373,8 @@ export default function SignUpForm() {
</div> </div>
</form> </form>
)} )}
</div> </div>
</div> </div>
</div> </div>
); );
} }