Modified | Change Account Settings

app/components/settings/Settings.tsx

@@ -580,26 +580,23 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <TextSettings
               label="New Name"
               value={newName}
-              type='text'
               setValue={setNewName}
+              type="text"
+              placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
             />
             <TextSettings
               label="New Email"
               value={newEmail}
               setValue={setNewEmail}
-              type="email" // Input type is email
+              type="email"
+              placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
             />
             <TextSettings
               label="New Password"
               value={newPassword}
               setValue={setNewPassword}
-              type="password" // Input type is password
+              type="password"
-            />
+              placeholder={newPassword ? "********" : "Enter new Password"} // Show asterisks or a default
-            <TextSettings
-              label="Current Password"
-              value={currentPassword}
-              setValue={setCurrentPassword}
-              type="password" // Input type is password
             />
             <ButtonSetting
               label="Log Out" // Button label

app/components/settings/TextSettings.tsx

@@ -5,9 +5,10 @@ interface TextSettingProps {
   value: string; // The current text value
   setValue: (newText: string) => void; // The method to update the state
   type: 'text' | 'email' | 'password'; // The type of input field
+  placeholder?: string; // Optional placeholder text
 }
 
-const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
+const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type, placeholder }) => {
   const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newText = e.target.value; // Get the new value from the input
     setValue(newText); // Update the state in the parent component
@@ -20,6 +21,7 @@ const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type
         type={type} // Use the type prop for the input
         value={value} // Set the current value
         onChange={handleTextChange} // Handle input changes
+        placeholder={placeholder} // Set the placeholder text
       />
     </div>
   );