ok

src/components/AccountUpdatePage.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import styles from './AccountUpdatePage.module.css'; // Adjust CSS if needed
 import { updateUser } from '../helpers/userHelpers';
+import styles from '../pages/Join.module.css'; // Import the module.css file
 
 const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
     const [formData, setFormData] = useState({
-        username: user.username.startsWith('guest') ? '' : user.username || '',
+        username: user.username || '',
         email: user.email || '',
         password: user.password === 'unsetunsetunset' ? '' : user.password || '',
     });
@@ -12,6 +12,13 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
     const [errorMessage, setErrorMessage] = useState('');
     const [successMessage, setSuccessMessage] = useState(''); // New state for success messages
 
+    
+    
+      const [loading, setLoading] = useState(false);
+      const [error, setError] = useState(false);
+      const [wasInputtingPassword, setWasInputtingPassword] = useState(false);
+      const [inputtingPassword, setInputtingPassword] = useState(false);
+
     const handleChange = (e) => {
         setFormData({ ...formData, [e.target.name]: e.target.value });
     };
@@ -41,55 +48,122 @@ const AccountUpdatePage = ({ user, showEmail, onSubmit }) => {
     };
 
     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>
+        
+    <div className={styles.linktreePage}>
+    <div className={styles.dashboardContainer}>
+      <div className={styles.mainHeading}>Ubah profil</div>
+      <div className={styles.subHeadingTransparent}>
+        Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
+      </div>
 
-                {showEmail && (
-                    <label className={styles.formLabel}>
-                        Email:
-                        <input
-                            type="email"
-                            name="email"
-                            value={formData.email}
-                            onChange={handleChange}
-                            className={styles.formInput}
-                        />
-                    </label>
-                )}
+        <div className={styles.LoginForm}>
+        <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+          <label htmlFor="username" className={styles.usernameLabel}>----------------------------------------------</label>
+          
+          <input
+            name="username"
+            type="text"
+            placeholder="Username"
+            value={formData.username}
+            onChange={handleChange}
+            className={!error ? styles.usernameInput : styles.usernameInputError}
+          />
 
-                <label className={styles.formLabel}>
-                    Password:
-                    <input
-                        type="password"
-                        name="password"
-                        value={formData.password}
-                        onChange={handleChange}
-                        className={styles.formInput}
-                    />
-                </label>
-
-                {/* 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
-                </button>
-            </form>
+          <input
+            name="email"
+            type="number"
+            placeholder="Email"
+            value={formData.email}
+            onChange={handleChange}
+            className={!error ? styles.usernameInput : styles.usernameInputError}
+          />
+          <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true); }} className={styles.claimButton}>
+            <span>➜</span>
+          </button>
         </div>
+
+        <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
+          <span>
+            <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- kembali </label>
+            <label htmlFor="password" className={styles.usernameLabel}> &nbsp; ------------------------- &nbsp; </label>
+          </span>
+
+          <input
+            name="password"
+            type="password"
+            placeholder="Ganti password"
+            onChange={handleChange}
+            maxLength="30"
+            className={!error ? styles.usernameInput : styles.usernameInputError}
+          />
+          <input
+            name="password"
+            type="password"
+            placeholder="Ulangi password"
+            onChange={handleChange}
+            maxLength="30"
+            className={!error ? styles.usernameInput : styles.usernameInputError}
+          />
+          <button
+            onClick={handleSubmit}
+            className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
+            disabled={loading}
+          >
+            <span>{loading ? 'Loading...' : 'Simpan'}</span>
+          </button>
+        </div>
+      </div>
+      </div>
+      </div>
+        // <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>
+
+        //         {/* 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
+        //         </button>
+        //     </form>
+        // </div>
     );
 };
 

src/components/Header.js

@@ -346,6 +346,14 @@ const Header = ({
                   <>
                     <Child hasChildren>
                       {shopName}
+                      <Child>
+                        Mode pengembangan &nbsp;
+                        <Switch
+                          borderRadius={0}
+                          checked={isEditMode}
+                          onChange={() => setIsEditMode(!isEditMode)}
+                        />
+                      </Child>
                       <Child onClick={() => setModal("reports")}>Lihat laporan</Child>
                       <Child onClick={() => setModal("add_material")}>
                         Kelola bahan baku
@@ -384,14 +392,6 @@ const Header = ({
                           Metode pembayaran
                         </Child>
                       </Child>
-                      <Child>
-                        Mode pengembangan &nbsp;
-                        <Switch
-                          borderRadius={0}
-                          checked={isEditMode}
-                          onChange={() => setIsEditMode(!isEditMode)}
-                        />
-                      </Child>
                     </Child>
                   </>
                 )}

src/components/Modal.js

@@ -47,12 +47,16 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
   if (!isOpen) return null;
 
   // Function to handle clicks on the overlay
+
   const handleOverlayClick = (event) => {
-    // Close the modal only if the overlay is clicked
-    onModalCloseFunction();
-    onClose();
+    console.log(onModalCloseFunction)
+    if (onModalCloseFunction) {
+      onModalCloseFunction(); // Execute the passed closure
+    }
+    onClose(); // Close the modal
   };
 
+
   // Function to handle clicks on the modal content
   const handleContentClick = (event) => {
     // Prevent click event from propagating to the overlay