diff --git a/client/src/components/ResetPassword.js b/client/src/components/ResetPassword.js index a90ca01..162c700 100644 --- a/client/src/components/ResetPassword.js +++ b/client/src/components/ResetPassword.js @@ -13,7 +13,7 @@ const ResetPassword = () => { const [password, setPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState(""); const [error, setError] = useState(""); - const [timeLeft, setTimeLeft] = useState(10); + const [timeLeft, setTimeLeft] = useState(300); const otpRef = useRef(null); const passwordRef = useRef(null); const confirmPasswordRef = useRef(null); diff --git a/client/src/components/css/PaymentSucess.css b/client/src/components/css/PaymentSucess.css index 78102a4..63418cb 100644 --- a/client/src/components/css/PaymentSucess.css +++ b/client/src/components/css/PaymentSucess.css @@ -1,36 +1,47 @@ /* PaymentSuccess.css */ .payment-success-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 90vh; - background-color: #fff; - /* Green background color */ - color: grey; - /* White text color */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 90vh; + background-color: #fff; + /* Green background color */ + color: grey; + /* White text color */ } .payment-success-text { - font-size: 32px; - margin-bottom: 16px; - color: grey; + font-size: 32px; + margin-bottom: 16px; + color: grey; } .payment-success-message { - font-size: 18px; - text-align: center; - max-width: 400px; - padding: 16px; - border-radius: 8px; - background-color: rgba(255, 255, 255, 0.1); - /* Transparent white background */ - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); - /* Shadow for the container */ + font-size: 18px; + text-align: center; + max-width: 400px; + padding: 16px; + border-radius: 8px; + background-color: rgba(255, 255, 255, 0.1); + /* Transparent white background */ + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); + /* Shadow for the container */ +} +.main-layout { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.content { + flex: 1; } + .yes-img { width: 80px; margin-top: 12px; -} \ No newline at end of file +} + diff --git a/client/src/components/pages/PaymentSuccess.js b/client/src/components/pages/PaymentSuccess.js index cf17704..c8ba6f8 100644 --- a/client/src/components/pages/PaymentSuccess.js +++ b/client/src/components/pages/PaymentSuccess.js @@ -18,17 +18,21 @@ const PaymentSuccess = () => { }, [setLoading]); return ( -
- {loading && ( -
- -
- )} -
-

Payment Successful!

-

- Thank you for your payment. Your transaction was successful. -

+
+
+ {loading && ( +
+ +
+ )} + {!loading && ( // Only render this part when not loading +
+

Payment Successful!

+

+ Thank you for your payment. Your transaction was successful. +

+
+ )}
); diff --git a/client/src/components/pages/Seating.js b/client/src/components/pages/Seating.js index 9611029..429399c 100644 --- a/client/src/components/pages/Seating.js +++ b/client/src/components/pages/Seating.js @@ -22,9 +22,6 @@ export default function Seating() { const isLoggedIn = useSelector((state) => state.auth.isLoggedIn); useEffect(() => { - if (!isLoggedIn) { - navigate("/login-container"); - } const fetchData = async () => { try { setLoading(true); @@ -63,13 +60,21 @@ export default function Seating() { // Retrieve the JWT token from localStorage const token = localStorage.getItem("token"); if (!token) { - Swal.fire({ - icon: "error", - title: "Unauthorized", - text: "You are not logged in.", + setLoading(false); + const result = await Swal.fire({ + title: "Unauthorized Access", + text: "You need to log in to access this page", + icon: "warning", + showCancelButton: true, + confirmButtonText: "Go to Login", + cancelButtonText: "Stay on Page", }); - navigate("/login"); - return; + if (result.isConfirmed) { + navigate("/login-container"); + return; + } else { + return; + } } const bookingResponse = await axios.post(