From 9a89e3e9966a0447cda35a8a4c4a237467ad34f1 Mon Sep 17 00:00:00 2001
From: zadit <75159257+insvrgent@users.noreply.github.com>
Date: Sat, 28 Dec 2024 07:39:48 +0700
Subject: [PATCH] ok

---
 src/App.js                                  |  35 ++---
 src/components/AccountUpdatePage.js         |  32 ++++-
 src/components/AccountUpdatePage.module.css | 152 ++++++++++++++++----
 src/components/Modal.js                     |   4 +-
 src/helpers/userHelpers.js                  |  50 ++++---
 5 files changed, 205 insertions(+), 68 deletions(-)

diff --git a/src/App.js b/src/App.js
index 74cb1eb..63490b2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -211,7 +211,7 @@ function App() {
       // Check current permission
       const searchParams = new URLSearchParams(location.search);
       let searchModal = searchParams.get("modal") || ''; // Get transactionId or set it to empty string
-      
+
       if (permission !== "granted" && searchModal == '') {
         setModal("req_notification");
       }
@@ -275,9 +275,9 @@ function App() {
       socket.off("signout-guest-session");
     };
   }, [socket, shopId]);
-  
-  async function checkIfStillViewingOtherTransaction(){
-    
+
+  async function checkIfStillViewingOtherTransaction() {
+
     console.log("transaction notification");
     console.log(modalContent);
 
@@ -285,7 +285,7 @@ function App() {
     response = await getTransactionsFromCafe(shopId, 0, true);
     transactionList.current = response;
     console.log(response);
-    
+
     // Get current URL's search parameters inside the socket event handler
     const searchParams = new URLSearchParams(location.search);
     let transaction_info = searchParams.get("transactionId") || ''; // Get transactionId or set it to empty string
@@ -305,7 +305,7 @@ function App() {
       if (!isViewingOtherTransaction) {
         setModal("new_transaction", data);
       }
-  
+
       // Show browser notification
       let permission = Notification.permission;
       if (permission !== "granted") return;
@@ -316,14 +316,14 @@ function App() {
         });
       });
     });
-  
+
     socket.on("transaction_canceled", async (data) => {
       console.log("transaction notification");
-      
+
       const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
       // If transaction_info is an empty string, set the modal
       if (!isViewingOtherTransaction) {
-      setModal("new_transaction", data);
+        setModal("new_transaction", data);
       }
     });
 
@@ -333,7 +333,7 @@ function App() {
       socket.off("transaction_canceled");
     };
   }, [socket, shopId, location]);  // Ensure location is in the dependencies to respond to changes in the URL
-  
+
   useEffect(() => {
     if (user.cafeId != null && user.cafeId !== shopId) {
       // Preserve existing query parameters
@@ -344,14 +344,14 @@ function App() {
     }
 
   }, [user, shopId]);
-  
+
   function handleMoveToTransaction(direction, from) {
     console.log(direction);
     console.log(from);
 
     // Find the current index based on the 'from' transactionId
     const currentIndex = transactionList.current.findIndex(item => item.transactionId == from);
-  
+
     // Determine the new transactionId based on the direction
     let newTransactionId;
     if (direction === 'next') {
@@ -365,18 +365,18 @@ function App() {
         ? transactionList.current[currentIndex - 1].transactionId
         : from; // If already at the beginning, stay on the current transactionId
     }
-  
+
     // Log the new transactionId
     console.log('New Transaction ID:', newTransactionId);
-  
+
     // Update the URL with the new transactionId using navigate
     navigate(`?transactionId=${newTransactionId}`, { replace: true });
-  
+
     // Optionally, update state or perform further actions based on the new transactionId
     // Example:
     // setModalContent({ cafeId: shopId, transactionId: newTransactionId });
   }
-  
+
 
   const handleModalFromURL = () => {
     const queryParams = new URLSearchParams(location.search);
@@ -651,11 +651,12 @@ function App() {
         </Routes>
       </header>
       <Modal
+        user={user}
         shop={shop}
         isOpen={isModalOpen}
         modalContent={modalContent}
         handleMoveToTransaction={handleMoveToTransaction}
-        welcomePageConfig={shop.welcomePageConfig} 
+        welcomePageConfig={shop.welcomePageConfig}
         onClose={closeModal}
         setModal={setModal}
       />
diff --git a/src/components/AccountUpdatePage.js b/src/components/AccountUpdatePage.js
index 5b30a7c..d4ff45d 100644
--- a/src/components/AccountUpdatePage.js
+++ b/src/components/AccountUpdatePage.js
@@ -1,4 +1,3 @@
-// src/components/AccountUpdatePage.js
 import React, { useState } from 'react';
 import styles from './AccountUpdatePage.module.css'; // Adjust CSS if needed
 import { updateUser } from '../helpers/userHelpers';
@@ -8,21 +7,36 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
         username: user.username.startsWith('guest') ? '' : user.username || '',
         email: user.email || '',
         password: user.password === 'unsetunsetunset' ? '' : user.password || '',
-        // Add other fields as needed
     });
 
+    const [errorMessage, setErrorMessage] = useState('');
+    const [successMessage, setSuccessMessage] = useState(''); // New state for success messages
+
     const handleChange = (e) => {
         setFormData({ ...formData, [e.target.name]: e.target.value });
     };
 
     const handleSubmit = async (e) => {
         e.preventDefault();
+
+        // Validate password length on the frontend
+        if (formData.password && formData.password.length < 6) {
+            setErrorMessage('Password is too short');
+            return;
+        }
+
         try {
-            const response = await updateUser(formData);
-            console.log('User updated successfully:', response);
-            onSubmit(formData);
+            const response = await updateUser(formData); // Call the updated helper function
+
+            // If there's a success message, display it
+            if (response.message) {
+                setSuccessMessage(response.message); // Set the success message from the response
+                setErrorMessage(''); // Clear any previous error messages
+            }
         } catch (error) {
-            console.error('Failed to update user:', error);
+            // Handle the error by displaying the error message
+            setErrorMessage(error.message || 'Failed to update user. Please try again.');
+            setSuccessMessage(''); // Clear success message if there's an error
         }
     };
 
@@ -65,7 +79,11 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
                     />
                 </label>
 
-                {/* Add other fields as needed */}
+                {/* Display success message */}
+                {successMessage && <div className={styles.successMessage}>{successMessage}</div>}
+
+                {/* Display error message */}
+                {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
 
                 <button type="submit" className={styles.submitButton}>
                     Submit
diff --git a/src/components/AccountUpdatePage.module.css b/src/components/AccountUpdatePage.module.css
index 23e7932..628663f 100644
--- a/src/components/AccountUpdatePage.module.css
+++ b/src/components/AccountUpdatePage.module.css
@@ -1,27 +1,131 @@
-/* src/components/AccountUpdateModal.module.css */
+/* AccountUpdatePage.module.css */
 
-.modalOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 101;
+/* General container styles */
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  font-family: Arial, sans-serif;
+}
+
+/* Heading styles */
+h2 {
+  text-align: center;
+  font-size: 1.8rem;
+  color: #333;
+  margin-bottom: 20px;
+}
+
+/* Form styles */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Label and input styles */
+.formLabel {
+  font-size: 1rem;
+  color: #555;
+  font-weight: 600;
+}
+
+.formInput {
+  padding: 10px;
+  margin-top: 8px;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  transition: border 0.3s ease;
+}
+
+.formInput:focus {
+  border: 1px solid #007BFF;
+  outline: none;
+}
+
+/* Submit button styles */
+.submitButton {
+  padding: 12px;
+  background-color: #007BFF;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submitButton:hover {
+  background-color: #0056b3;
+}
+
+/* Mobile responsive design */
+@media (max-width: 768px) {
+  .container {
+      padding: 15px;
+      width: 90%;
   }
-  
-  .modalContent {
-    background: white;
-    padding: 20px;
-    border-radius: 10px;
-    max-width: 500px;
-    width: 100%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    position: relative;
-    z-index: 11;
-    color: black;
+
+  h2 {
+      font-size: 1.6rem;
   }
-  
\ No newline at end of file
+
+  .formInput {
+      font-size: 0.9rem;
+  }
+
+  .submitButton {
+      padding: 10px;
+      font-size: 0.95rem;
+  }
+}
+
+/* Tablet and desktop view adjustments */
+@media (min-width: 769px) {
+  .container {
+      padding: 20px;
+      width: 50%;
+  }
+
+  h2 {
+      font-size: 2rem;
+  }
+
+  .formInput {
+      font-size: 1rem;
+  }
+
+  .submitButton {
+      padding: 12px;
+      font-size: 1.1rem;
+  }
+}
+
+/* Additional Accessibility Enhancements */
+.formInput:focus {
+  border-color: #007BFF;
+  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+/* AccountUpdatePage.module.css */
+
+/* Success message styles */
+.successMessage {
+  color: green;
+  font-size: 1rem;
+  margin-top: 10px;
+  text-align: center;
+}
+
+/* Error message styles */
+.errorMessage {
+  color: red;
+  font-size: 1rem;
+  margin-top: 10px;
+  text-align: center;
+}
diff --git a/src/components/Modal.js b/src/components/Modal.js
index d61774f..5df7ac0 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -27,7 +27,7 @@ import Login from "../pages/Login";
 import ResetPassword from "../pages/ResetPassword";
 import { getImageUrl } from "../helpers/itemHelper.js";
 
-const Modal = ({ shop, isOpen, onClose, modalContent, setModal, handleMoveToTransaction,welcomePageConfig }) => {
+const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMoveToTransaction,welcomePageConfig }) => {
   
   const [shopImg, setShopImg] = useState('');
 
@@ -55,7 +55,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent, setModal, handleMoveToTran
     <div onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={styles.modalContent} onClick={handleContentClick}>
         
-      {modalContent === "edit_account" && <AccountUpdatePage shop={shop} />}
+      {modalContent === "edit_account" && <AccountUpdatePage user={user} />}
         {modalContent === "join" && <Join />}
         {modalContent === "reset-password" && <ResetPassword />}
         {modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}
diff --git a/src/helpers/userHelpers.js b/src/helpers/userHelpers.js
index a1b8947..b0802bf 100644
--- a/src/helpers/userHelpers.js
+++ b/src/helpers/userHelpers.js
@@ -146,30 +146,44 @@ export const loginUser = async (username, password) => {
     return { success: false, token: null };
   }
 };
-
 export const updateUser = async (formData) => {
-  const token = getLocalStorage("auth");
-  if (token) {
-    try {
-      const response = await fetch(API_BASE_URL + "/user/update-user", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify(formData),
-      });
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
+  const token = getLocalStorage("auth"); // Retrieve token from local storage
+
+  if (!token) {
+    // Handle missing token scenario
+    throw new Error("User not authenticated. No token found.");
+  }
+
+  try {
+    const response = await fetch(API_BASE_URL + "/user/update-user", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(formData),
+    });
+
+    // Check if response status is not ok (e.g., 400 or 500 errors)
+    if (!response.ok) {
       const data = await response.json();
-      return data;
-    } catch (error) {
-      console.error("Error updating user:", error);
+      
+      // If the response body has an error, throw it to propagate to the frontend
+      throw new Error(data.error || `Error: ${response.statusText}`);
     }
+
+    // If the response is OK, return the data
+    const data = await response.json();
+    return data;
+
+  } catch (error) {
+    // Log and rethrow error to be handled in the calling function
+    console.error("Error updating user:", error);
+    throw error; // Re-throw the error so the calling function can handle it
   }
 };
 
+
 //for super
 export const getAnalytics = async (formData) => {
   const token = getLocalStorage("auth");