Merge pull request #46 from DFanso/api-connections

bug fix
DFanso · Jan 4, 2024 · a226eba · a226eba
2 parents 6bbd697 + e3903e1
commit a226eba
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 43 deletions.
diff --git 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
@@ -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;
-}
+}
+
diff --git a/client/src/components/pages/PaymentSuccess.js b/client/src/components/pages/PaymentSuccess.js
@@ -18,17 +18,21 @@ const PaymentSuccess = () => {
   }, [setLoading]);
 
   return (
-    <div className={`login-wrapper ${loading ? "blurred" : ""}`}>
-      {loading && (
-        <div className="loader-container">
-          <TailSpin color="#00BFFF" height={100} width={100} />
-        </div>
-      )}
-      <div className="payment-success-container">
-        <h1 className="payment-success-text">Payment Successful!</h1>
-        <p className="payment-success-message">
-          Thank you for your payment. Your transaction was successful.
-        </p>
+    <div className="main-layout">
+      <div className="login-wrapper">
+        {loading && (
+          <div className="loader-container">
+            <TailSpin color="#00BFFF" height={100} width={100} />
+          </div>
+        )}
+        {!loading && ( // Only render this part when not loading
+          <div className="payment-success-container">
+            <h1 className="payment-success-text">Payment Successful!</h1>
+            <p className="payment-success-message">
+              Thank you for your payment. Your transaction was successful.
+            </p>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git 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(