add: artist edit data form

adhimrahman · May 9, 2024 · 9d88930 · 9d88930
1 parent 0e7ad29
commit 9d88930
Showing 1 changed file with 59 additions and 2 deletions.
diff --git a/views/layouts/profileArtist/showArtists.ejs b/views/layouts/profileArtist/showArtists.ejs
@@ -3,6 +3,23 @@
 
     <div class="content p-5 flex flex-col gap-y-6 flex-wrap text-wrap">
         <div class="title mb-2"><p class="font-bold text-neutral-300">Artist Account Info</p></div>
+
+        <div class="hidden editArtist bg-neutral-800 rounded-md overflow-hidden p-4">
+            <div class="editArtistForm flex flex-col">
+                <p class="text-white">Username :
+                    <input type="text" id="editName" name="name" placeholder="New Name ..." required autocomplete="off">
+                </p>
+                <p class="text-white" >Email :
+                    <input type="email" id="editEmail" name="email" placeholder="New Email ..." required autocomplete="off">
+                </p>
+                <p class="text-white" >Paswword :
+                    <input type="password" id="editPassword" name="password" placeholder="New Password ..." required autocomplete="off">
+                </p>
+            </div>
+            <div class="saveArtistProfile">
+                <button id="profile-save-input-btn" class="text-white px-4 py-2 rounded-md mt-2">Save</button>
+            </div>
+        </div>
 
         <div class="main flex gap-y-9 flex-col">
             <script>
@@ -40,7 +57,7 @@
                                     <div class="addArtistProfile">
                                         <img src="../images/profile.png" alt="cover" class="w-[225px] rounded-md">
                                         <input type="file" accept="image/*" id="profile-pic-input" style="display: none;">
-                                        <button id="profile-pic-input-btn" onclick="document.getElementById('profile-pic-input').click()" class="text-white bg-blue-500 px-4 py-2 rounded-md mt-2">Tambahkan Foto Profil</button>
+                                        <button id="profile-pic-input-btn" onclick="document.getElementById('profile-pic-input').click()" class="text-white bg-blue-500 px-4 py-2 rounded-md mt-2">Add Profile Photo</button>
                                     </div>
                                 `;
                                 myartistsContainer.appendChild(myartistItem);
@@ -54,7 +71,7 @@
         </div>
 
         <div id="artistEditBtn" class="bg-neutral-800 rounded-md overflow-hidden p-4 flex flex-col">
-            <button disabled>Edit Account</button>
+            <button>Edit Account</button>
         </div>
         <div id="artistDeleteBtn" class="bg-neutral-800 rounded-md overflow-hidden p-4 flex flex-col">
             <button id="deleteArtistBtn">Delete Account</button>
@@ -89,5 +106,45 @@
             });
         </script>
 
+        <script>
+            document.addEventListener('DOMContentLoaded', async () => {
+                const editProfileBtn = document.getElementById('artistEditBtn');
+                editProfileBtn.addEventListener('click', () => {
+                    const editArtistSection = document.querySelector('.editArtist');
+                    editArtistSection.classList.remove('hidden');
+                    editArtistSection.classList.add('flex');
+                });
+
+                const saveProfileBtn = document.getElementById('profile-save-input-btn');
+                saveProfileBtn.addEventListener('click', async () => {
+                    const newName = document.getElementById('editName').value;
+                    const newEmail = document.getElementById('editEmail').value;
+                    const newPassword = document.getElementById('editPassword').value;
+
+                    if (!newName || !newEmail || !newPassword) {
+                        alert('Please fill in all fields.');
+                        return;
+                    }
+
+                    const artistId = '<%= artistId %>';
+
+                    try {
+                        const response = await fetch('/updateArtist', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ artistId, newName, newEmail, newPassword })
+                        });
+                        const data = await response.json();
+                        console.log(data);
+                    } catch (error) {
+                        console.error('Error updating artist:', error);
+                    }
+
+                    const editUserSection = document.querySelector('.editArtist');
+                    editUserSection.classList.add('hidden');
+                });
+            });
+        </script>
+
     </div>
 </main>