ok

src/components/AccountUpdateModal.js

@@ -1,78 +0,0 @@
-// src/components/AccountUpdateModal.js
-
-import React, { useState } from 'react';
-import styles from './AccountUpdateModal.module.css';
-import { updateUser } from '../helpers/userHelpers';
-
-const AccountUpdateModal = ({ user, showEmail, isOpen, onClose, onSubmit }) => {
-    const [formData, setFormData] = useState({
-        username: user.username.startsWith('guest') ? '' : user.username || '',
-        email: user.email || '',
-        password: user.password === 'unsetunsetunset' ? '' : user.password || '',
-        // Add other fields as needed
-    });
-
-    const handleChange = (e) => {
-        setFormData({ ...formData, [e.target.name]: e.target.value });
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        try {
-            const response = await updateUser(formData);
-            console.log('User updated successfully:', response);
-            onSubmit(formData);
-        } catch (error) {
-            console.error('Failed to update user:', error);
-        }
-    };
-
-    if (!isOpen) return null;
-
-    return (
-        <div className={styles.modalOverlay}>
-            <div className={styles.modalContent}>
-                <h2>Complete Your Account</h2>
-                <form onSubmit={handleSubmit}>
-                    <label className={styles.formLabel}>
-                        Username:
-                        <input
-                            type="text"
-                            name="username"
-                            value={formData.username}
-                            onChange={handleChange}
-                            className={styles.formInput}
-                        />
-                    </label>
-                    {showEmail &&
-                        <label className={styles.formLabel}>
-                            Email:
-                            <input
-                                type="email"
-                                name="email"
-                                value={formData.email}
-                                onChange={handleChange}
-                                className={styles.formInput}
-                            />
-                        </label>
-                    }
-                    <label className={styles.formLabel}>
-                        Password:
-                        <input
-                            type="password"
-                            name="password"
-                            value={formData.password}
-                            onChange={handleChange}
-                            className={styles.formInput}
-                        />
-                    </label>
-                    {/* Add other fields as needed */}
-                    <button type="submit" className={styles.submitButton}>Submit</button>
-                </form>
-                <button onClick={onClose} className={styles.closeButton}>Close</button>
-            </div>
-        </div>
-    );
-};
-
-export default AccountUpdateModal;

src/components/AccountUpdatePage.js

@@ -0,0 +1,78 @@
+// src/components/AccountUpdatePage.js
+import React, { useState } from 'react';
+import styles from './AccountUpdatePage.module.css'; // Adjust CSS if needed
+import { updateUser } from '../helpers/userHelpers';
+
+const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
+    const [formData, setFormData] = useState({
+        username: user.username.startsWith('guest') ? '' : user.username || '',
+        email: user.email || '',
+        password: user.password === 'unsetunsetunset' ? '' : user.password || '',
+        // Add other fields as needed
+    });
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const response = await updateUser(formData);
+            console.log('User updated successfully:', response);
+            onSubmit(formData);
+        } catch (error) {
+            console.error('Failed to update user:', error);
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            <h2>Update Your Account</h2>
+            <form onSubmit={handleSubmit} className={styles.form}>
+                <label className={styles.formLabel}>
+                    Username:
+                    <input
+                        type="text"
+                        name="username"
+                        value={formData.username}
+                        onChange={handleChange}
+                        className={styles.formInput}
+                    />
+                </label>
+
+                {showEmail && (
+                    <label className={styles.formLabel}>
+                        Email:
+                        <input
+                            type="email"
+                            name="email"
+                            value={formData.email}
+                            onChange={handleChange}
+                            className={styles.formInput}
+                        />
+                    </label>
+                )}
+
+                <label className={styles.formLabel}>
+                    Password:
+                    <input
+                        type="password"
+                        name="password"
+                        value={formData.password}
+                        onChange={handleChange}
+                        className={styles.formInput}
+                    />
+                </label>
+
+                {/* Add other fields as needed */}
+
+                <button type="submit" className={styles.submitButton}>
+                    Submit
+                </button>
+            </form>
+        </div>
+    );
+};
+
+export default AccountUpdatePage;

src/components/Modal.js

@@ -1,5 +1,7 @@
 import React, {useState, useEffect} from "react";
 import styles from "./Modal.module.css";
+
+import AccountUpdatePage from "../components/AccountUpdatePage.js";
 import CreateClerk from "../pages/CreateClerk"
 import CreateCafe from "../pages/CreateCafe"
 import CreateTenant from "../pages/CreateTenant"
@@ -52,6 +54,8 @@ const Modal = ({ shop, isOpen, onClose, modalContent, setModal, handleMoveToTran
   return (
     <div onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={styles.modalContent} onClick={handleContentClick}>
+        
+      {modalContent === "edit_account" && <AccountUpdatePage shop={shop} />}
         {modalContent === "join" && <Join />}
         {modalContent === "reset-password" && <ResetPassword />}
         {modalContent === "req_notification" && <NotificationRequest setModal={setModal} />}

src/pages/CafePage.js

@@ -15,7 +15,6 @@ import SearchInput from "../components/SearchInput";
 import ItemTypeLister from "../components/ItemTypeLister";
 import { MusicPlayer } from "../components/MusicPlayer";
 import ItemLister from "../components/ItemLister";
-import AccountUpdateModal from "../components/AccountUpdateModal";
 import Header from "../components/Header";
 
 import { ThreeDots } from "react-loader-spinner";
@@ -53,7 +52,6 @@ function CafePage({
   const [screenMessage, setScreenMessage] = useState("");
 
   const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(true);
-  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const [isEditMode, setIsEditMode] = useState(false);
   const [filterId, setFilterId] = useState(0);
@@ -116,10 +114,6 @@ function CafePage({
     }
   }, [token]);
 
-  const handleModalClose = () => {
-    setIsModalOpen(false);
-  };
-
   const handleLogout = () => {
     removeLocalStorage("auth");
     unsubscribeUser();
@@ -287,13 +281,6 @@ function CafePage({
                     />
                   ))}
               </body>
-              {user.username && (
-                <AccountUpdateModal
-                  user={user}
-                  isOpen={isModalOpen}
-                  onClose={handleModalClose}
-                />
-              )}
             </div>
           )
         )}