ok

src/App.js

@@ -276,7 +276,7 @@ function App() {
     };
   }, [socket, shopId]);
 
-  async function checkIfStillViewingOtherTransaction(){
+  async function checkIfStillViewingOtherTransaction() {
 
     console.log("transaction notification");
     console.log(modalContent);
@@ -323,7 +323,7 @@ function App() {
       const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
       // If transaction_info is an empty string, set the modal
       if (!isViewingOtherTransaction) {
-      setModal("new_transaction", data);
+        setModal("new_transaction", data);
       }
     });
 
@@ -651,6 +651,7 @@ function App() {
         </Routes>
       </header>
       <Modal
+        user={user}
         shop={shop}
         isOpen={isModalOpen}
         modalContent={modalContent}

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

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

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} />}

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");