rbs@u2-js

INSERT INTO `cp_filejs` (`id`,`app`,`path`,`modul`,`file_name`,`content`) VALUES ('244','1','u2/creator','profile','js/profile-edit.js--','import {\r\n deleteUserAccount,\r\n getSessionUser,\r\n updatePassword,\r\n updateUsername\r\n} from \\\\\\\"./api/auth.js\\\\\\\"\r\nimport {\r\n addUserProfileLinks,\r\n removeProfileLink,\r\n updateCoverImage,\r\n updateProfileImage,\r\n updateUserDetails,\r\n updateSocialLinks\r\n} from \\\\\\\"./api/profile.js\\\\\\\"\r\nimport app, {\r\n showToast\r\n} from \\\\\\\"./app.js\\\\\\\"\r\nimport store from \\\\\\\"./store.js\\\\\\\"\r\n\r\nvar $ = Dom7\r\n\r\n// --------------- Edit Profile Page ---------------\r\n$(document).on(\\\\\\\'page:init\\\\\\\', \\\\\\\'.page[data-name=\\\\\\\"profile-edit-mydetails\\\\\\\"]\\\\\\\', async function (e) {\r\n var view = app.views.current\r\n\r\n const user = await getSessionUser()\r\n\r\n if (!user) {\r\n view.router.navigate(\\\\\\\'/login\\\\\\\')\r\n return\r\n }\r\n\r\n // Example of how to fill in the form fields with the provided data\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"email\\\\\\\"]\\\\\\\').value = user.email || \\\\\\\'\\\\\\\';\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"first_name\\\\\\\"]\\\\\\\').value = user.first_name || \\\\\\\'\\\\\\\';\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"last_name\\\\\\\"]\\\\\\\').value = user.last_name || \\\\\\\'\\\\\\\';\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"tel_no\\\\\\\"]\\\\\\\').value = user.billing_info?.phone || \\\\\\\'\\\\\\\';\r\n})\r\n\r\n\r\n$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'#save-details\\\\\\\', async function () {\r\n var view = app.views.current\r\n\r\n const user = await getSessionUser()\r\n\r\n // Get the values from the input fields\r\n const firstName = $(\\\\\\\'input[name=\\\\\\\"first_name\\\\\\\"]\\\\\\\').val().trim();\r\n const lastName = $(\\\\\\\'input[name=\\\\\\\"last_name\\\\\\\"]\\\\\\\').val().trim();\r\n const email = $(\\\\\\\'input[name=\\\\\\\"email\\\\\\\"]\\\\\\\').val().trim();\r\n const telNo = $(\\\\\\\'input[name=\\\\\\\"tel_no\\\\\\\"]\\\\\\\').val().trim();\r\n const address = $(\\\\\\\'textarea[name=\\\\\\\"address\\\\\\\"]\\\\\\\').val().trim();\r\n const city = $(\\\\\\\'input[name=\\\\\\\"city\\\\\\\"]\\\\\\\').val().trim();\r\n const provincy = $(\\\\\\\'input[name=\\\\\\\"provincy\\\\\\\"]\\\\\\\').val().trim();\r\n const post_code = $(\\\\\\\'input[name=\\\\\\\"post_code\\\\\\\"]\\\\\\\').val().trim();\r\n\r\n // Validate the input fields\r\n if (firstName === \\\\\\\'\\\\\\\') {\r\n showToast(\\\\\\\'Please enter your first name\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (lastName === \\\\\\\'\\\\\\\') {\r\n showToast(\\\\\\\'Please enter your last name\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (email === \\\\\\\'\\\\\\\') {\r\n showToast(\\\\\\\'Please enter your email\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n // Simple email validation\r\n const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;\r\n if (!emailPattern.test(email)) {\r\n showToast(\\\\\\\'Please enter a valid email address\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n // // phone validation\r\n // if (telNo === \\\\\\\'\\\\\\\') {\r\n // showToast(\\\\\\\'Please enter a valid phone number\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n // return\r\n // }\r\n\r\n // Prepare the data for the API request\r\n const requestData = {\r\n first_name: firstName,\r\n last_name: lastName,\r\n email: email,\r\n phone: telNo,\r\n address: address,\r\n city: city,\r\n provincy: provincy,\r\n post_code: post_code,\r\n };\r\n\r\n // check if the request data is the same as userdata\r\n let dirtied = false;\r\n\r\n for (const key in requestData) {\r\n if (key == \\\\\\\'phone\\\\\\\') {\r\n if (requestData[key] !== user.billing_info.phone) {\r\n dirtied = true\r\n break;\r\n }\r\n continue\r\n }\r\n\r\n if (requestData[key] !== user[key]) {\r\n dirtied = true\r\n break;\r\n }\r\n }\r\n\r\n if (!dirtied) {\r\n return\r\n }\r\n\r\n try {\r\n app.preloader.show()\r\n\r\n const response = await updateUserDetails(requestData, email !== user.email)\r\n\r\n app.preloader.hide()\r\n\r\n\r\n if (response && response.success) {\r\n // showToast(\\\\\\\'Details updated successfully\\\\\\\', \\\\\\\'Success\\\\\\\');\r\n showToast(\\\\\\\'Details updated successfully\\\\\\\')\r\n view.router.navigate(\\\\\\\'/profile/\\\\\\\')\r\n store.dispatch(\\\\\\\'updateUserDetails\\\\\\\')\r\n return;\r\n }\r\n\r\n throw new Error(response.message);\r\n } catch (error) {\r\n app.preloader.hide()\r\n app.notification.create({\r\n titleRightText: \\\\\\\'now\\\\\\\',\r\n subtitle: \\\\\\\'Oops, something went wrong\\\\\\\',\r\n text: error.message || \\\\\\\'Failed to update details\\\\\\\',\r\n }).open()\r\n }\r\n});\r\n\r\n$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'#update_password\\\\\\\', async function () {\r\n var view = app.views.current\r\n\r\n // Get the values from the password input fields\r\n const password = $(\\\\\\\'input[name=\\\\\\\"password\\\\\\\"]\\\\\\\').val().trim();\r\n const current_password = $(\\\\\\\'input[name=\\\\\\\"current_password\\\\\\\"]\\\\\\\').val().trim();\r\n const confirmPassword = $(\\\\\\\'input[name=\\\\\\\"confirm_password\\\\\\\"]\\\\\\\').val().trim();\r\n\r\n if (current_password === \\\\\\\'\\\\\\\') {\r\n showToast(\\\\\\\'Please enter your current password\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return\r\n }\r\n\r\n if (password.length < 8) {\r\n showToast(\\\\\\\'Password must be at least 8 characters long.\\\\\\\')\r\n return\r\n }\r\n\r\n // Check if password contains at least one lowercase letter\r\n if (!/[a-z]/.test(password)) {\r\n showToast(\\\\\\\'Password must contain at least one lowercase letter.\\\\\\\')\r\n return\r\n }\r\n\r\n // Check if password contains at least one uppercase letter\r\n if (!/[A-Z]/.test(password)) {\r\n showToast(\\\\\\\'Password must contain at least one uppercase letter.\\\\\\\')\r\n return\r\n }\r\n\r\n // Check if password contains at least one number\r\n if (!/d/.test(password)) {\r\n showToast(\\\\\\\'Password must contain at least one number.\\\\\\\')\r\n return\r\n }\r\n\r\n if (confirmPassword === \\\\\\\'\\\\\\\') {\r\n showToast(\\\\\\\'Please confirm your password\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (password !== confirmPassword) {\r\n showToast(\\\\\\\'Passwords do not match\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n try {\r\n app.preloader.show()\r\n\r\n const response = await updatePassword(password, current_password)\r\n\r\n app.preloader.hide()\r\n\r\n if (response && response.success) {\r\n showToast(\\\\\\\'Password updated successfully\\\\\\\')\r\n view.router.navigate(\\\\\\\'/profile/\\\\\\\')\r\n return;\r\n }\r\n\r\n throw new Error(response.message);\r\n } catch (error) {\r\n app.preloader.hide()\r\n app.notification.create({\r\n titleRightText: \\\\\\\'now\\\\\\\',\r\n subtitle: \\\\\\\'Oops, something went wrong\\\\\\\',\r\n text: error.message || \\\\\\\'Failed to update password\\\\\\\',\r\n }).open()\r\n }\r\n})\r\n// --------------- End Edit Profile Page ---------------\r\n\r\n\r\n// --------------- Edit Username Page ---------------\r\n$(document).on(\\\\\\\'page:beforein\\\\\\\', \\\\\\\'.page[data-name=\\\\\\\"profile-edit-username\\\\\\\"]\\\\\\\', async function (e) {\r\n var view = app.views.current\r\n\r\n const user = await getSessionUser()\r\n\r\n if (!user) {\r\n view.router.navigate(\\\\\\\'/login\\\\\\\')\r\n return\r\n }\r\n\r\n\r\n // Example of how to fill in the form fields with the provided data\r\n $(\\\\\\\'.profile-edit-view input[name=\\\\\\\"username\\\\\\\"]\\\\\\\').val(user.username || \\\\\\\'\\\\\\\')\r\n\r\n if (user.can_update_username) {\r\n $(\\\\\\\'#username-editable\\\\\\\').remove()\r\n } else {\r\n document.querySelector(\\\\\\\'#username-editable\\\\\\\').innerText = `You can change your username in ${user.next_update_username} days`\r\n }\r\n})\r\n\r\n$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'#save-username\\\\\\\', async function () {\r\n var view = app.views.current\r\n\r\n const user = await getSessionUser()\r\n\r\n if (!user.can_update_username) {\r\n return\r\n }\r\n\r\n const username = $(\\\\\\\'.profile-edit-view input[name=\\\\\\\"username\\\\\\\"]\\\\\\\').val()\r\n\r\n if (username === \\\\\\\'\\\\\\\') {\r\n showToast(\\\\\\\'Please enter a username\\\\\\\', \\\\\\\'Error\\\\\\\')\r\n return\r\n }\r\n\r\n // username can only have letters, numbers, and underscores\r\n var usernamePattern = /^[a-zA-Z0-9_]+$/\r\n if (!usernamePattern.test(username)) {\r\n showToast(\\\\\\\'Username can only contain letters, numbers, and underscores\\\\\\\')\r\n return\r\n }\r\n\r\n // username must be at least 3 characters long\r\n if (username.length < 3) {\r\n showToast(\\\\\\\'Username must be at least 3 characters long\\\\\\\')\r\n return\r\n }\r\n\r\n if (username === user.username) {\r\n return\r\n }\r\n\r\n try {\r\n app.preloader.show()\r\n\r\n const response = await updateUsername(username)\r\n\r\n app.preloader.hide()\r\n\r\n if (response && response.success) {\r\n showToast(\\\\\\\'Username updated successfully\\\\\\\', \\\\\\\'Success\\\\\\\')\r\n view.router.navigate(\\\\\\\'/profile/\\\\\\\')\r\n\r\n store.dispatch(\\\\\\\'updateUserDetails\\\\\\\')\r\n } else {\r\n throw new Error(response.message)\r\n }\r\n } catch (error) {\r\n app.preloader.hide()\r\n app.notification.create({\r\n titleRightText: \\\\\\\'now\\\\\\\',\r\n subtitle: \\\\\\\'Oops, something went wrong\\\\\\\',\r\n text: error.message || \\\\\\\'Failed to update username\\\\\\\',\r\n }).open()\r\n }\r\n\r\n\r\n})\r\n// --------------- End Edit Username Page ---------------\r\n\r\n\r\n// --------------- Edit Profile images Page ---------------\r\n$(document).on(\\\\\\\'page:init\\\\\\\', \\\\\\\'.page[data-name=\\\\\\\"profile-edit-images\\\\\\\"]\\\\\\\', async function (e) {\r\n var view = app.views.current\r\n\r\n const user = await getSessionUser()\r\n\r\n if (!user) {\r\n view.router.navigate(\\\\\\\'/login\\\\\\\')\r\n return\r\n }\r\n\r\n // If a cover photo exists, use it as the background image of the upload label\r\n if (user.cover_image) {\r\n $(\\\\\\\'input[name=\\\\\\\"cover_image\\\\\\\"]\\\\\\\').closest(\\\\\\\'.custom-file-upload\\\\\\\').find(\\\\\\\'label\\\\\\\').css(\\\\\\\'background-image\\\\\\\', `url(\\\\\\\'${user.cover_image}\\\\\\\')`)\r\n $(\\\\\\\'input[name=\\\\\\\"cover_image\\\\\\\"]\\\\\\\').closest(\\\\\\\'.custom-file-upload\\\\\\\').find(\\\\\\\'label\\\\\\\').css(\\\\\\\'background-size\\\\\\\', \\\\\\\'cover\\\\\\\')\r\n }\r\n\r\n if (user.profile_image) {\r\n $(\\\\\\\'input[name=\\\\\\\"profile_image\\\\\\\"]\\\\\\\').closest(\\\\\\\'.custom-file-upload\\\\\\\').find(\\\\\\\'label\\\\\\\').css(\\\\\\\'background-image\\\\\\\', `url(\\\\\\\'${user.profile_image}\\\\\\\')`)\r\n $(\\\\\\\'input[name=\\\\\\\"profile_image\\\\\\\"]\\\\\\\').closest(\\\\\\\'.custom-file-upload\\\\\\\').find(\\\\\\\'label\\\\\\\').css(\\\\\\\'background-size\\\\\\\', \\\\\\\'contain\\\\\\\')\r\n $(\\\\\\\'input[name=\\\\\\\"profile_image\\\\\\\"]\\\\\\\').closest(\\\\\\\'.custom-file-upload\\\\\\\').find(\\\\\\\'label\\\\\\\').css(\\\\\\\'background-position\\\\\\\', \\\\\\\'center\\\\\\\')\r\n $(\\\\\\\'input[name=\\\\\\\"profile_image\\\\\\\"]\\\\\\\').closest(\\\\\\\'.custom-file-upload\\\\\\\').find(\\\\\\\'label\\\\\\\').css(\\\\\\\'background-repeat\\\\\\\', \\\\\\\'no-repeat\\\\\\\')\r\n }\r\n})\r\n\r\n$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'#save-profile-images\\\\\\\', async function () {\r\n var view = app.views.current\r\n\r\n const cover_image = $(\\\\\\\'input[name=\\\\\\\"cover_image\\\\\\\"]\\\\\\\').prop(\\\\\\\'files\\\\\\\')[0]\r\n const profile_image = $(\\\\\\\'input[name=\\\\\\\"profile_image\\\\\\\"]\\\\\\\').prop(\\\\\\\'files\\\\\\\')[0]\r\n\r\n\r\n let coverBase64 = null\r\n let profileBase64 = null\r\n\r\n if (cover_image) {\r\n // Wrap the FileReader in a Promise to wait for it to complete\r\n coverBase64 = await new Promise((resolve, reject) => {\r\n const reader = new FileReader()\r\n reader.readAsDataURL(cover_image)\r\n\r\n reader.onload = () => resolve(reader.result)\r\n reader.onerror = () => reject(new Error(\\\\\\\'Failed to read image as base64\\\\\\\'))\r\n })\r\n }\r\n\r\n if (profile_image) {\r\n // Wrap the FileReader in a Promise to wait for it to complete\r\n profileBase64 = await new Promise((resolve, reject) => {\r\n const reader = new FileReader()\r\n reader.readAsDataURL(profile_image)\r\n\r\n reader.onload = () => resolve(reader.result)\r\n reader.onerror = () => reject(new Error(\\\\\\\'Failed to read image as base64\\\\\\\'))\r\n })\r\n }\r\n\r\n if (!coverBase64 && !profileBase64) {\r\n return\r\n }\r\n\r\n try {\r\n app.preloader.show()\r\n\r\n let promises = []\r\n\r\n if (profileBase64) {\r\n promises.push(updateProfileImage(profileBase64))\r\n }\r\n\r\n if (coverBase64) {\r\n promises.push(updateCoverImage(coverBase64))\r\n }\r\n\r\n const responses = await Promise.all(promises)\r\n app.preloader.hide()\r\n\r\n if (responses.every(response => response && response.success)) {\r\n showToast(\\\\\\\'Images updated successfully\\\\\\\', \\\\\\\'Success\\\\\\\')\r\n view.router.navigate(\\\\\\\'/profile/\\\\\\\')\r\n\r\n store.dispatch(\\\\\\\'updateUserDetails\\\\\\\')\r\n return\r\n }\r\n\r\n if (responses.some(response => response && !response.success)) {\r\n throw new Error(\\\\\\\'Failed to update images\\\\\\\')\r\n }\r\n } catch (error) {\r\n app.preloader.hide()\r\n\r\n app.notification.create({\r\n titleRightText: \\\\\\\'now\\\\\\\',\r\n subtitle: \\\\\\\'Oops, something went wrong\\\\\\\',\r\n text: error.message || \\\\\\\'Failed to update images\\\\\\\',\r\n }).open()\r\n }\r\n})\r\n\r\n$(document).on(\\\\\\\'change\\\\\\\', \\\\\\\'input[name=\\\\\\\"cover_image\\\\\\\"]\\\\\\\', function (e) {\r\n const file = e.target.files[0];\r\n const reader = new FileReader();\r\n\r\n reader.onload = function (event) {\r\n console.log($(\\\\\\\'.custom-file-upload.cover\\\\\\\'));\r\n\r\n $(\\\\\\\'.custom-file-upload.cover\\\\\\\')\r\n .find(\\\\\\\'label\\\\\\\')\r\n .css(\\\\\\\'background-image\\\\\\\', `url(\\\\\\\'${event.target.result}\\\\\\\')`)\r\n .css(\\\\\\\'background-size\\\\\\\', \\\\\\\'cover\\\\\\\');\r\n };\r\n\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n});\r\n\r\n$(document).on(\\\\\\\'change\\\\\\\', \\\\\\\'input[name=\\\\\\\"profile_image\\\\\\\"]\\\\\\\', function (e) {\r\n const file = e.target.files[0];\r\n const reader = new FileReader();\r\n\r\n reader.onload = function (event) {\r\n console.log($(\\\\\\\'.custom-file-upload.profile\\\\\\\'));\r\n\r\n $(\\\\\\\'.custom-file-upload.profile\\\\\\\')\r\n .find(\\\\\\\'label\\\\\\\')\r\n .css(\\\\\\\'background-image\\\\\\\', `url(\\\\\\\'${event.target.result}\\\\\\\')`)\r\n .css(\\\\\\\'background-size\\\\\\\', \\\\\\\'cover\\\\\\\');\r\n };\r\n\r\n if (file) {\r\n reader.readAsDataURL(file);\r\n }\r\n});\r\n// --------------- End Profile images Page ---------------\r\n\r\n\r\n// --------------- Edit Socials Page ---------------\r\n$(document).on(\\\\\\\'page:init\\\\\\\', \\\\\\\'.page[data-name=\\\\\\\"profile-edit-socials\\\\\\\"]\\\\\\\', async function (e) {\r\n var view = app.views.current\r\n\r\n const user = await getSessionUser()\r\n\r\n if (!user) {\r\n view.router.navigate(\\\\\\\'/login\\\\\\\')\r\n return\r\n }\r\n\r\n const externalLinks = user.profile_links || {};\r\n\r\n app.popup.create({\r\n el: \\\\\\\'.add-link-popup\\\\\\\',\r\n swipeToClose: \\\\\\\'to-bottom\\\\\\\'\r\n });\r\n\r\n // Populate form fields\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"social_instagram\\\\\\\"]\\\\\\\').value = externalLinks.instagram || \\\\\\\'\\\\\\\';\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"social_facebook\\\\\\\"]\\\\\\\').value = externalLinks.facebook || \\\\\\\'\\\\\\\';\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"social_tiktok\\\\\\\"]\\\\\\\').value = externalLinks.tiktok || \\\\\\\'\\\\\\\';\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"social_youtube\\\\\\\"]\\\\\\\').value = externalLinks.youtube || \\\\\\\'\\\\\\\';\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"social_mivia\\\\\\\"]\\\\\\\').value = externalLinks.mivia || \\\\\\\'\\\\\\\';\r\n document.querySelector(\\\\\\\'input[name=\\\\\\\"social_custodian\\\\\\\"]\\\\\\\').value = externalLinks.custodian || \\\\\\\'\\\\\\\';\r\n\r\n // .social-other-links ul\r\n const externalLinksContainer = $(\\\\\\\'.social-other-links ul\\\\\\\')[0];\r\n\r\n externalLinks.external_links?.forEach(linkObj => {\r\n const listItem = document.createElement(\\\\\\\'li\\\\\\\');\r\n\r\n\r\n listItem.innerHTML = `\r\n \r\n

\r\n \r\n `;\r\n externalLinksContainer.appendChild(listItem);\r\n });\r\n})\r\n\r\n// Add event listener for the Save button\r\n$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'#add-link-btn\\\\\\\', async function () {\r\n const linkTitle = $(\\\\\\\'input[name=\\\\\\\"custom_link_title\\\\\\\"]\\\\\\\').val();\r\n const linkUrl = $(\\\\\\\'input[name=\\\\\\\"custom_link_url\\\\\\\"]\\\\\\\').val();\r\n\r\n // Validate the inputs\r\n if (linkTitle === \\\\\\\'\\\\\\\') {\r\n console.log(\\\\\\\'Please enter a link title.\\\\\\\', $(\\\\\\\'input[name=\\\\\\\"custom_link_title\\\\\\\"]\\\\\\\'));\r\n showToast(\\\\\\\'Please enter a link title.\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (linkUrl === \\\\\\\'\\\\\\\') {\r\n showToast(\\\\\\\'Please enter a link URL.\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n // Simple URL validation (basic check)\r\n // const urlPattern = /^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/;\r\n // if (!urlPattern.test(linkUrl)) {\r\n // showToast(\\\\\\\'Please enter a valid URL.\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n // return;\r\n // }\r\n\r\n\r\n const urlPattern = /^(https?:\\\\\\\\/\\\\\\\\/|www\\\\\\\\.)[\\\\\\\\da-z\\\\\\\\.-]+\\\\\\\\.[a-z]{2,6}\\\\\\\\/?$/;\r\n if (!urlPattern.test(linkUrl)) {\r\n showToast(\\\\\\\'Please enter a valid URL.\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n // Mock API request (POST request)\r\n const requestData = {\r\n label: linkTitle,\r\n url: linkUrl\r\n };\r\n\r\n app.popup.close()\r\n\r\n app.preloader.show()\r\n\r\n const response = await addUserProfileLinks({\r\n type: \\\\\\\'external_links\\\\\\\',\r\n link: requestData\r\n })\r\n\r\n if (response && response.success) {\r\n showToast(\\\\\\\'Link added successfully\\\\\\\', \\\\\\\'Success\\\\\\\');\r\n\r\n // Add the new link to the list\r\n const listItem = document.createElement(\\\\\\\'li\\\\\\\');\r\n listItem.innerHTML = `\r\n \r\n

\r\n

\r\n ${linkTitle}\r\n

\r\n

\r\n \r\n `;\r\n\r\n const externalLinksContainer = $(\\\\\\\'.social-other-links ul\\\\\\\')[0];\r\n externalLinksContainer.appendChild(listItem);\r\n store.dispatch(\\\\\\\'updateUserDetails\\\\\\\')\r\n }\r\n\r\n app.preloader.hide()\r\n});\r\n\r\n// Save social links\r\n$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'#save-profile-socials\\\\\\\', async function () {\r\n var view = app.views.current\r\n\r\n const user = await getSessionUser()\r\n\r\n const instagram = $(\\\\\\\'input[name=\\\\\\\"social_instagram\\\\\\\"]\\\\\\\').val();\r\n const facebook = $(\\\\\\\'input[name=\\\\\\\"social_facebook\\\\\\\"]\\\\\\\').val();\r\n const tiktok = $(\\\\\\\'input[name=\\\\\\\"social_tiktok\\\\\\\"]\\\\\\\').val();\r\n const youtube = $(\\\\\\\'input[name=\\\\\\\"social_youtube\\\\\\\"]\\\\\\\').val();\r\n const mivia = $(\\\\\\\'input[name=\\\\\\\"social_mivia\\\\\\\"]\\\\\\\').val();\r\n const custodian = $(\\\\\\\'input[name=\\\\\\\"social_custodian\\\\\\\"]\\\\\\\').val();\r\n\r\n const links = {\r\n instagram,\r\n facebook,\r\n tiktok,\r\n youtube,\r\n mivia,\r\n custodian\r\n };\r\n\r\n // ig, tiktok, yt. mivia, custodian must be string, no special characters except for _ and - and . and\r\n const usernamePattern = /^[a-zA-Z0-9._-]+$/;\r\n\r\n if (instagram && !usernamePattern.test(instagram)) {\r\n showToast(\\\\\\\'Please enter a valid Instagram username (letters, numbers, underscores, periods, hyphens only)\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (tiktok && !usernamePattern.test(tiktok)) {\r\n showToast(\\\\\\\'Please enter a valid TikTok username (letters, numbers, underscores, periods, hyphens only)\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (youtube && !usernamePattern.test(youtube)) {\r\n showToast(\\\\\\\'Please enter a valid YouTube username (letters, numbers, underscores, periods, hyphens only)\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (mivia && !usernamePattern.test(mivia)) {\r\n showToast(\\\\\\\'Please enter a valid Mivia username (letters, numbers, underscores, periods, hyphens only)\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (custodian && !usernamePattern.test(custodian)) {\r\n showToast(\\\\\\\'Please enter a valid Custodian username (letters, numbers, underscores, periods, hyphens only)\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n\r\n\r\n // facebook must be a valid facebook url\r\n const urlPattern = /^(https?:\\\\\\\\/\\\\\\\\/|www\\\\\\\\.)[\\\\\\\\da-z\\\\\\\\.-]+\\\\\\\\.[a-z]{2,6}\\\\\\\\/?$/;\r\n if (facebook && !usernamePattern.test(facebook)) {\r\n showToast(\\\\\\\'Please enter a valid Facebook username (letters, numbers, underscores, periods, hyphens only)\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n // check if the request data is the same as userdata\r\n let dirtied = false;\r\n\r\n for (const key in links) {\r\n if (links[key] !== user.profile_links[key]) {\r\n dirtied = true\r\n break;\r\n }\r\n }\r\n\r\n if (!dirtied) {\r\n return\r\n }\r\n\r\n app.preloader.show()\r\n\r\n const response = await updateSocialLinks(links);\r\n\r\n app.preloader.hide()\r\n\r\n if (response && response.success) {\r\n showToast(\\\\\\\'Social links updated successfully\\\\\\\', \\\\\\\'Success\\\\\\\');\r\n view.router.navigate(\\\\\\\'/profile/\\\\\\\')\r\n store.dispatch(\\\\\\\'updateUserDetails\\\\\\\')\r\n } else {\r\n showToast(\\\\\\\'Failed to update social links\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n }\r\n})\r\n\r\n// Delete link\r\n$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'.delete-external-link\\\\\\\', async function (e) {\r\n const linkId = e.target.closest(\\\\\\\'.item-link\\\\\\\').dataset.linkId;\r\n\r\n // confirm dialog\r\n app.dialog.confirm(\\\\\\\'Are you sure you want to delete this link?\\\\\\\', \\\\\\\'Delete Link\\\\\\\', async function () {\r\n app.preloader.show()\r\n\r\n const response = await removeProfileLink(linkId);\r\n\r\n app.preloader.hide()\r\n\r\n if (response) {\r\n showToast(\\\\\\\'Link deleted successfully\\\\\\\', \\\\\\\'Success\\\\\\\')\r\n // remove the link from the list\r\n e.target.closest(\\\\\\\'.item-link\\\\\\\').remove();\r\n store.dispatch(\\\\\\\'updateUserDetails\\\\\\\')\r\n\r\n } else {\r\n showToast(\\\\\\\'Failed to delete link\\\\\\\', \\\\\\\'Error\\\\\\\')\r\n }\r\n })\r\n})\r\n// --------------- End Edit Socials Page ---------------\r\n\r\n$(document).on(\\\\\\\'input\\\\\\\', \\\\\\\'#lowercaseInput\\\\\\\', function (event) {\r\n this.value = this.value.toLowerCase();\r\n});\r\n\r\n// --------------- Delete Profile Page ---------------\r\n// $(document).on(\\\\\\\'page:init\\\\\\\', \\\\\\\'.page[data-name=\\\\\\\"profile-edit-account-settings\\\\\\\"]\\\\\\\', function (e) {\r\n// });\r\n\r\n$(document).on(\\\\\\\'click\\\\\\\', \\\\\\\'.account-delete\\\\\\\', function (e) {\r\n app.dialog.confirm(\\\\\\\'Are you sure? It is not possible to restore accounts once deleted.\\\\\\\', \\\\\\\'Confirm\\\\\\\', function (name) {\r\n app.dialog.passwordConfirm(\\\\\\\'Please enter your password.\\\\\\\', \\\\\\\'Delete Account\\\\\\\', async function (password) {\r\n await handleDeleteAccount(password);\r\n });\r\n });\r\n});\r\n\r\nasync function handleDeleteAccount(password) {\r\n\r\n try {\r\n app.preloader.show();\r\n\r\n const response = await deleteUserAccount(password);\r\n\r\n app.preloader.hide();\r\n if (!response) {\r\n app.dialog.alert(\\\\\\\'Failed to delete account\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (response && response.success == false) {\r\n app.dialog.alert(response.message, \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n\r\n if (response && response.success) {\r\n app.dialog.alert(\\\\\\\'Account deleted successfully\\\\\\\', \\\\\\\'Success\\\\\\\');\r\n\r\n setTimeout(() => {\r\n store.dispatch(\\\\\\\'logout\\\\\\\');\r\n }, 1000);\r\n }\r\n } catch (error) {\r\n app.preloader.hide();\r\n app.dialog.alert(error.message || \\\\\\\'Failed to delete account\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n }\r\n}\r\n\r\n// Custom dialog to ask for password\r\napp.dialog.passwordConfirm = function (text, title, callback) {\r\n app.dialog.create({\r\n title: title,\r\n text: text,\r\n content: \\\\\\\'

\\\\\\\',\r\n buttons: [{\r\n text: \\\\\\\'Cancel\\\\\\\',\r\n onClick: function (dialog, e) {\r\n dialog.close();\r\n }\r\n },\r\n {\r\n text: \\\\\\\'Delete\\\\\\\',\r\n bold: true,\r\n onClick: function (dialog, e) {\r\n var password = dialog.$el.find(\\\\\\\'.dialog-input\\\\\\\').val(); // Get the password entered\r\n if (!password) {\r\n showToast(\\\\\\\'Please enter your password\\\\\\\', \\\\\\\'Error\\\\\\\');\r\n return;\r\n }\r\n callback(password); // Pass the password to the callback\r\n dialog.close();\r\n }\r\n }\r\n ]\r\n }).open();\r\n};');

Save File Also

Copy This

modul

file_name function_name content 25605

import {
    deleteUserAccount,
    getSessionUser,
    updatePassword,
    updateUsername
} from \\\"./api/auth.js\\\"
import {
    addUserProfileLinks,
    removeProfileLink,
    updateCoverImage,
    updateProfileImage,
    updateUserDetails,
    updateSocialLinks
} from \\\"./api/profile.js\\\"
import app, {
    showToast
} from \\\"./app.js\\\"
import store from \\\"./store.js\\\"

var $ = Dom7

// --------------- Edit Profile Page ---------------
$(document).on(\\\'page:init\\\', \\\'.page[data-name=\\\"profile-edit-mydetails\\\"]\\\', async function (e) {
    var view = app.views.current

const user = await getSessionUser()

if (!user) {
        view.router.navigate(\\\'/login\\\')
        return
    }

// Example of how to fill in the form fields with the provided data
    document.querySelector(\\\'input[name=\\\"email\\\"]\\\').value = user.email || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"first_name\\\"]\\\').value = user.first_name || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"last_name\\\"]\\\').value = user.last_name || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"tel_no\\\"]\\\').value = user.billing_info?.phone || \\\'\\\';
})

$(document).on(\\\'click\\\', \\\'#save-details\\\', async function () {
    var view = app.views.current

const user = await getSessionUser()

// Get the values from the input fields
    const firstName = $(\\\'input[name=\\\"first_name\\\"]\\\').val().trim();
    const lastName = $(\\\'input[name=\\\"last_name\\\"]\\\').val().trim();
    const email = $(\\\'input[name=\\\"email\\\"]\\\').val().trim();
    const telNo = $(\\\'input[name=\\\"tel_no\\\"]\\\').val().trim();
    const address = $(\\\'textarea[name=\\\"address\\\"]\\\').val().trim();
    const city = $(\\\'input[name=\\\"city\\\"]\\\').val().trim();
    const provincy = $(\\\'input[name=\\\"provincy\\\"]\\\').val().trim();
    const post_code = $(\\\'input[name=\\\"post_code\\\"]\\\').val().trim();

// Validate the input fields
    if (firstName === \\\'\\\') {
        showToast(\\\'Please enter your first name\\\', \\\'Error\\\');
        return;
    }

if (lastName === \\\'\\\') {
        showToast(\\\'Please enter your last name\\\', \\\'Error\\\');
        return;
    }

if (email === \\\'\\\') {
        showToast(\\\'Please enter your email\\\', \\\'Error\\\');
        return;
    }

// Simple email validation
    const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
    if (!emailPattern.test(email)) {
        showToast(\\\'Please enter a valid email address\\\', \\\'Error\\\');
        return;
    }

// // phone validation
    // if (telNo === \\\'\\\') {
    //     showToast(\\\'Please enter a valid phone number\\\', \\\'Error\\\');
    //     return
    // }

// Prepare the data for the API request
    const requestData = {
        first_name: firstName,
        last_name: lastName,
        email: email,
        phone: telNo,
        address: address,
        city: city,
        provincy: provincy,
        post_code: post_code,
    };

// check if the request data is the same as userdata
    let dirtied = false;

for (const key in requestData) {
        if (key == \\\'phone\\\') {
            if (requestData[key] !== user.billing_info.phone) {
                dirtied = true
                break;
            }
            continue
        }

if (requestData[key] !== user[key]) {
            dirtied = true
            break;
        }
    }

if (!dirtied) {
        return
    }

try {
        app.preloader.show()

const response = await updateUserDetails(requestData, email !== user.email)

app.preloader.hide()

if (response && response.success) {
            // showToast(\\\'Details updated successfully\\\', \\\'Success\\\');
            showToast(\\\'Details updated successfully\\\')
            view.router.navigate(\\\'/profile/\\\')
            store.dispatch(\\\'updateUserDetails\\\')
            return;
        }

throw new Error(response.message);
    } catch (error) {
        app.preloader.hide()
        app.notification.create({
            titleRightText: \\\'now\\\',
            subtitle: \\\'Oops, something went wrong\\\',
            text: error.message || \\\'Failed to update details\\\',
        }).open()
    }
});

$(document).on(\\\'click\\\', \\\'#update_password\\\', async function () {
    var view = app.views.current

// Get the values from the password input fields
    const password = $(\\\'input[name=\\\"password\\\"]\\\').val().trim();
    const current_password = $(\\\'input[name=\\\"current_password\\\"]\\\').val().trim();
    const confirmPassword = $(\\\'input[name=\\\"confirm_password\\\"]\\\').val().trim();

if (current_password === \\\'\\\') {
        showToast(\\\'Please enter your current password\\\', \\\'Error\\\');
        return
    }

if (password.length < 8) {
        showToast(\\\'Password must be at least 8 characters long.\\\')
        return
    }

// Check if password contains at least one lowercase letter
    if (!/[a-z]/.test(password)) {
        showToast(\\\'Password must contain at least one lowercase letter.\\\')
        return
    }

// Check if password contains at least one uppercase letter
    if (!/[A-Z]/.test(password)) {
        showToast(\\\'Password must contain at least one uppercase letter.\\\')
        return
    }

// Check if password contains at least one number
    if (!/d/.test(password)) {
        showToast(\\\'Password must contain at least one number.\\\')
        return
    }

if (confirmPassword === \\\'\\\') {
        showToast(\\\'Please confirm your password\\\', \\\'Error\\\');
        return;
    }

if (password !== confirmPassword) {
        showToast(\\\'Passwords do not match\\\', \\\'Error\\\');
        return;
    }

try {
        app.preloader.show()

const response = await updatePassword(password, current_password)

app.preloader.hide()

if (response && response.success) {
            showToast(\\\'Password updated successfully\\\')
            view.router.navigate(\\\'/profile/\\\')
            return;
        }

// --------------- Edit Username Page ---------------
$(document).on(\\\'page:beforein\\\', \\\'.page[data-name=\\\"profile-edit-username\\\"]\\\', async function (e) {
    var view = app.views.current

const user = await getSessionUser()

if (!user) {
        view.router.navigate(\\\'/login\\\')
        return
    }

// Example of how to fill in the form fields with the provided data
    $(\\\'.profile-edit-view input[name=\\\"username\\\"]\\\').val(user.username || \\\'\\\')

if (user.can_update_username) {
        $(\\\'#username-editable\\\').remove()
    } else {
        document.querySelector(\\\'#username-editable\\\').innerText = `You can change your username in ${user.next_update_username} days`
    }
})

$(document).on(\\\'click\\\', \\\'#save-username\\\', async function () {
    var view = app.views.current

const user = await getSessionUser()

if (!user.can_update_username) {
        return
    }

const username = $(\\\'.profile-edit-view input[name=\\\"username\\\"]\\\').val()

if (username === \\\'\\\') {
        showToast(\\\'Please enter a username\\\', \\\'Error\\\')
        return
    }

// username can only have letters, numbers, and underscores
    var usernamePattern = /^[a-zA-Z0-9_]+$/
    if (!usernamePattern.test(username)) {
        showToast(\\\'Username can only contain letters, numbers, and underscores\\\')
        return
    }

// username must be at least 3 characters long
    if (username.length < 3) {
        showToast(\\\'Username must be at least 3 characters long\\\')
        return
    }

if (username === user.username) {
        return
    }

try {
        app.preloader.show()

const response = await updateUsername(username)

app.preloader.hide()

if (response && response.success) {
            showToast(\\\'Username updated successfully\\\', \\\'Success\\\')
            view.router.navigate(\\\'/profile/\\\')

store.dispatch(\\\'updateUserDetails\\\')
        } else {
            throw new Error(response.message)
        }
    } catch (error) {
        app.preloader.hide()
        app.notification.create({
            titleRightText: \\\'now\\\',
            subtitle: \\\'Oops, something went wrong\\\',
            text: error.message || \\\'Failed to update username\\\',
        }).open()
    }

})
// --------------- End Edit Username Page ---------------

// --------------- Edit Profile images Page ---------------
$(document).on(\\\'page:init\\\', \\\'.page[data-name=\\\"profile-edit-images\\\"]\\\', async function (e) {
    var view = app.views.current

const user = await getSessionUser()

if (!user) {
        view.router.navigate(\\\'/login\\\')
        return
    }

// If a cover photo exists, use it as the background image of the upload label
    if (user.cover_image) {
        $(\\\'input[name=\\\"cover_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-image\\\', `url(\\\'${user.cover_image}\\\')`)
        $(\\\'input[name=\\\"cover_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-size\\\', \\\'cover\\\')
    }

if (user.profile_image) {
        $(\\\'input[name=\\\"profile_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-image\\\', `url(\\\'${user.profile_image}\\\')`)
        $(\\\'input[name=\\\"profile_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-size\\\', \\\'contain\\\')
        $(\\\'input[name=\\\"profile_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-position\\\', \\\'center\\\')
        $(\\\'input[name=\\\"profile_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-repeat\\\', \\\'no-repeat\\\')
    }
})

$(document).on(\\\'click\\\', \\\'#save-profile-images\\\', async function () {
    var view = app.views.current

const cover_image = $(\\\'input[name=\\\"cover_image\\\"]\\\').prop(\\\'files\\\')[0]
    const profile_image = $(\\\'input[name=\\\"profile_image\\\"]\\\').prop(\\\'files\\\')[0]

let coverBase64 = null
    let profileBase64 = null

if (cover_image) {
        // Wrap the FileReader in a Promise to wait for it to complete
        coverBase64 = await new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(cover_image)

reader.onload = () => resolve(reader.result)
            reader.onerror = () => reject(new Error(\\\'Failed to read image as base64\\\'))
        })
    }

if (profile_image) {
        // Wrap the FileReader in a Promise to wait for it to complete
        profileBase64 = await new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(profile_image)

reader.onload = () => resolve(reader.result)
            reader.onerror = () => reject(new Error(\\\'Failed to read image as base64\\\'))
        })
    }

if (!coverBase64 && !profileBase64) {
        return
    }

try {
        app.preloader.show()

let promises = []

if (profileBase64) {
            promises.push(updateProfileImage(profileBase64))
        }

if (coverBase64) {
            promises.push(updateCoverImage(coverBase64))
        }

const responses = await Promise.all(promises)
        app.preloader.hide()

if (responses.every(response => response && response.success)) {
            showToast(\\\'Images updated successfully\\\', \\\'Success\\\')
            view.router.navigate(\\\'/profile/\\\')

store.dispatch(\\\'updateUserDetails\\\')
            return
        }

if (responses.some(response => response && !response.success)) {
            throw new Error(\\\'Failed to update images\\\')
        }
    } catch (error) {
        app.preloader.hide()

app.notification.create({
            titleRightText: \\\'now\\\',
            subtitle: \\\'Oops, something went wrong\\\',
            text: error.message || \\\'Failed to update images\\\',
        }).open()
    }
})

$(document).on(\\\'change\\\', \\\'input[name=\\\"cover_image\\\"]\\\', function (e) {
    const file = e.target.files[0];
    const reader = new FileReader();

reader.onload = function (event) {
        console.log($(\\\'.custom-file-upload.cover\\\'));

$(\\\'.custom-file-upload.cover\\\')
            .find(\\\'label\\\')
            .css(\\\'background-image\\\', `url(\\\'${event.target.result}\\\')`)
            .css(\\\'background-size\\\', \\\'cover\\\');
    };

if (file) {
        reader.readAsDataURL(file);
    }
});

$(document).on(\\\'change\\\', \\\'input[name=\\\"profile_image\\\"]\\\', function (e) {
    const file = e.target.files[0];
    const reader = new FileReader();

reader.onload = function (event) {
        console.log($(\\\'.custom-file-upload.profile\\\'));

$(\\\'.custom-file-upload.profile\\\')
            .find(\\\'label\\\')
            .css(\\\'background-image\\\', `url(\\\'${event.target.result}\\\')`)
            .css(\\\'background-size\\\', \\\'cover\\\');
    };

if (file) {
        reader.readAsDataURL(file);
    }
});
// --------------- End Profile images Page ---------------

// --------------- Edit Socials Page ---------------
$(document).on(\\\'page:init\\\', \\\'.page[data-name=\\\"profile-edit-socials\\\"]\\\', async function (e) {
    var view = app.views.current

const user = await getSessionUser()

if (!user) {
        view.router.navigate(\\\'/login\\\')
        return
    }

const externalLinks = user.profile_links || {};

app.popup.create({
        el: \\\'.add-link-popup\\\',
        swipeToClose: \\\'to-bottom\\\'
    });

// Populate form fields
    document.querySelector(\\\'input[name=\\\"social_instagram\\\"]\\\').value = externalLinks.instagram || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_facebook\\\"]\\\').value = externalLinks.facebook || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_tiktok\\\"]\\\').value = externalLinks.tiktok || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_youtube\\\"]\\\').value = externalLinks.youtube || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_mivia\\\"]\\\').value = externalLinks.mivia || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_custodian\\\"]\\\').value = externalLinks.custodian || \\\'\\\';

// .social-other-links ul
    const externalLinksContainer = $(\\\'.social-other-links ul\\\')[0];

externalLinks.external_links?.forEach(linkObj => {
        const listItem = document.createElement(\\\'li\\\');

listItem.innerHTML = `
        <a class=\\\"item-link item-content\\\" href=\\\"${linkObj.link.url}\\\" data-link-id=\\\"${linkObj.id}\\\">
            <div class=\\\"item-inner\\\">
                <div class=\\\"item-title\\\">
                    ${linkObj.link.label}
                </div>
                <div class=\\\"item-after delete-external-link\\\"><i class=\\\"icon f7-icons\\\">xmark_circle</i></div>
            </div>
        </a>
        `;
        externalLinksContainer.appendChild(listItem);
    });
})

// Add event listener for the Save button
$(document).on(\\\'click\\\', \\\'#add-link-btn\\\', async function () {
    const linkTitle = $(\\\'input[name=\\\"custom_link_title\\\"]\\\').val();
    const linkUrl = $(\\\'input[name=\\\"custom_link_url\\\"]\\\').val();

// Validate the inputs
    if (linkTitle === \\\'\\\') {
        console.log(\\\'Please enter a link title.\\\', $(\\\'input[name=\\\"custom_link_title\\\"]\\\'));
        showToast(\\\'Please enter a link title.\\\', \\\'Error\\\');
        return;
    }

if (linkUrl === \\\'\\\') {
        showToast(\\\'Please enter a link URL.\\\', \\\'Error\\\');
        return;
    }

// Simple URL validation (basic check)
    // const urlPattern = /^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/;
    // if (!urlPattern.test(linkUrl)) {
    //     showToast(\\\'Please enter a valid URL.\\\', \\\'Error\\\');
    //     return;
    // }

const urlPattern = /^(https?:\\\\/\\\\/|www\\\\.)[\\\\da-z\\\\.-]+\\\\.[a-z]{2,6}\\\\/?$/;
    if (!urlPattern.test(linkUrl)) {
        showToast(\\\'Please enter a valid URL.\\\', \\\'Error\\\');
        return;
    }

// Mock API request (POST request)
    const requestData = {
        label: linkTitle,
        url: linkUrl
    };

app.popup.close()

app.preloader.show()

const response = await addUserProfileLinks({
        type: \\\'external_links\\\',
        link: requestData
    })

if (response && response.success) {
        showToast(\\\'Link added successfully\\\', \\\'Success\\\');

// Add the new link to the list
        const listItem = document.createElement(\\\'li\\\');
        listItem.innerHTML = `
            <a class=\\\"item-link item-content\\\" href=\\\"${linkUrl}\\\" data-link-id=\\\"${response.id}\\\">
                <div class=\\\"item-inner\\\">
                    <div class=\\\"item-title\\\">
                        ${linkTitle}
                    </div>
                    <div class=\\\"item-after\\\"><i class=\\\"icon f7-icons delete-external-link\\\">xmark_circle</i></div>
                </div>
            </a>
        `;

const externalLinksContainer = $(\\\'.social-other-links ul\\\')[0];
        externalLinksContainer.appendChild(listItem);
        store.dispatch(\\\'updateUserDetails\\\')
    }

app.preloader.hide()
});

// Save social links
$(document).on(\\\'click\\\', \\\'#save-profile-socials\\\', async function () {
    var view = app.views.current

const user = await getSessionUser()

const instagram = $(\\\'input[name=\\\"social_instagram\\\"]\\\').val();
    const facebook = $(\\\'input[name=\\\"social_facebook\\\"]\\\').val();
    const tiktok = $(\\\'input[name=\\\"social_tiktok\\\"]\\\').val();
    const youtube = $(\\\'input[name=\\\"social_youtube\\\"]\\\').val();
    const mivia = $(\\\'input[name=\\\"social_mivia\\\"]\\\').val();
    const custodian = $(\\\'input[name=\\\"social_custodian\\\"]\\\').val();

const links = {
        instagram,
        facebook,
        tiktok,
        youtube,
        mivia,
        custodian
    };

// ig, tiktok, yt. mivia, custodian must be string, no special characters except for _ and - and . and
    const usernamePattern = /^[a-zA-Z0-9._-]+$/;

if (instagram && !usernamePattern.test(instagram)) {
        showToast(\\\'Please enter a valid Instagram username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

if (tiktok && !usernamePattern.test(tiktok)) {
        showToast(\\\'Please enter a valid TikTok username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

if (youtube && !usernamePattern.test(youtube)) {
        showToast(\\\'Please enter a valid YouTube username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

if (mivia && !usernamePattern.test(mivia)) {
        showToast(\\\'Please enter a valid Mivia username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

if (custodian && !usernamePattern.test(custodian)) {
        showToast(\\\'Please enter a valid Custodian username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

// facebook must be a valid facebook url
    const urlPattern = /^(https?:\\\\/\\\\/|www\\\\.)[\\\\da-z\\\\.-]+\\\\.[a-z]{2,6}\\\\/?$/;
    if (facebook && !usernamePattern.test(facebook)) {
        showToast(\\\'Please enter a valid Facebook username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

// check if the request data is the same as userdata
    let dirtied = false;

for (const key in links) {
        if (links[key] !== user.profile_links[key]) {
            dirtied = true
            break;
        }
    }

if (!dirtied) {
        return
    }

app.preloader.show()

const response = await updateSocialLinks(links);

app.preloader.hide()

if (response && response.success) {
        showToast(\\\'Social links updated successfully\\\', \\\'Success\\\');
        view.router.navigate(\\\'/profile/\\\')
        store.dispatch(\\\'updateUserDetails\\\')
    } else {
        showToast(\\\'Failed to update social links\\\', \\\'Error\\\');
    }
})

// Delete link
$(document).on(\\\'click\\\', \\\'.delete-external-link\\\', async function (e) {
    const linkId = e.target.closest(\\\'.item-link\\\').dataset.linkId;

// confirm dialog
    app.dialog.confirm(\\\'Are you sure you want to delete this link?\\\', \\\'Delete Link\\\', async function () {
        app.preloader.show()

const response = await removeProfileLink(linkId);

app.preloader.hide()

if (response) {
            showToast(\\\'Link deleted successfully\\\', \\\'Success\\\')
            // remove the link from the list
            e.target.closest(\\\'.item-link\\\').remove();
            store.dispatch(\\\'updateUserDetails\\\')

} else {
            showToast(\\\'Failed to delete link\\\', \\\'Error\\\')
        }
    })
})
// --------------- End Edit Socials Page ---------------

$(document).on(\\\'input\\\', \\\'#lowercaseInput\\\', function (event) {
    this.value = this.value.toLowerCase();
});

// --------------- Delete Profile Page ---------------
// $(document).on(\\\'page:init\\\', \\\'.page[data-name=\\\"profile-edit-account-settings\\\"]\\\', function (e) {
// });

$(document).on(\\\'click\\\', \\\'.account-delete\\\', function (e) {
    app.dialog.confirm(\\\'Are you sure? It is not possible to restore accounts once deleted.\\\', \\\'Confirm\\\', function (name) {
        app.dialog.passwordConfirm(\\\'Please enter your password.\\\', \\\'Delete Account\\\', async function (password) {
            await handleDeleteAccount(password);
        });
    });
});

async function handleDeleteAccount(password) {

try {
        app.preloader.show();

const response = await deleteUserAccount(password);

app.preloader.hide();
        if (!response) {
            app.dialog.alert(\\\'Failed to delete account\\\', \\\'Error\\\');
            return;
        }

if (response && response.success == false) {
            app.dialog.alert(response.message, \\\'Error\\\');
            return;
        }

if (response && response.success) {
            app.dialog.alert(\\\'Account deleted successfully\\\', \\\'Success\\\');

setTimeout(() => {
                store.dispatch(\\\'logout\\\');
            }, 1000);
        }
    } catch (error) {
        app.preloader.hide();
        app.dialog.alert(error.message || \\\'Failed to delete account\\\', \\\'Error\\\');
    }
}

// Custom dialog to ask for password
app.dialog.passwordConfirm = function (text, title, callback) {
    app.dialog.create({
        title: title,
        text: text,
        content: \\\'<div class=\\\"dialog-input-field item-input\\\"><div class=\\\"item-input-wrap\\\"><input type=\\\"password\\\" name=\\\"password\\\" placeholder=\\\"Enter your password\\\" class=\\\"dialog-input\\\"></div></div>\\\',
        buttons: [{
                text: \\\'Cancel\\\',
                onClick: function (dialog, e) {
                    dialog.close();
                }
            },
            {
                text: \\\'Delete\\\',
                bold: true,
                onClick: function (dialog, e) {
                    var password = dialog.$el.find(\\\'.dialog-input\\\').val(); // Get the password entered
                    if (!password) {
                        showToast(\\\'Please enter your password\\\', \\\'Error\\\');
                        return;
                    }
                    callback(password); // Pass the password to the callback
                    dialog.close();
                }
            }
        ]
    }).open();
};

Warning: file_get_contents(/home/u340524018/domains/agniaga.com/public_html/sub/u2/creator/js/profile-edit.js--): Failed to open stream: No such file or directory in /home/u340524018/domains/agniaga.com/public_html/sub/u2/cp/inc.filejs.php on line 190
file content 0

import {
    deleteUserAccount,
    getSessionUser,
    updatePassword,
    updateUsername
} from \\\"./api/auth.js\\\"
import {
    addUserProfileLinks,
    removeProfileLink,
    updateCoverImage,
    updateProfileImage,
    updateUserDetails,
    updateSocialLinks
} from \\\"./api/profile.js\\\"
import app, {
    showToast
} from \\\"./app.js\\\"
import store from \\\"./store.js\\\"

var $ = Dom7

// --------------- Edit Profile Page ---------------
$(document).on(\\\'page:init\\\', \\\'.page[data-name=\\\"profile-edit-mydetails\\\"]\\\', async function (e) {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user) {
        view.router.navigate(\\\'/login\\\')
        return
    }

    // Example of how to fill in the form fields with the provided data
    document.querySelector(\\\'input[name=\\\"email\\\"]\\\').value = user.email || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"first_name\\\"]\\\').value = user.first_name || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"last_name\\\"]\\\').value = user.last_name || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"tel_no\\\"]\\\').value = user.billing_info?.phone || \\\'\\\';
})


$(document).on(\\\'click\\\', \\\'#save-details\\\', async function () {
    var view = app.views.current

    const user = await getSessionUser()

    // Get the values from the input fields
    const firstName = $(\\\'input[name=\\\"first_name\\\"]\\\').val().trim();
    const lastName = $(\\\'input[name=\\\"last_name\\\"]\\\').val().trim();
    const email = $(\\\'input[name=\\\"email\\\"]\\\').val().trim();
    const telNo = $(\\\'input[name=\\\"tel_no\\\"]\\\').val().trim();
    const address = $(\\\'textarea[name=\\\"address\\\"]\\\').val().trim();
    const city = $(\\\'input[name=\\\"city\\\"]\\\').val().trim();
    const provincy = $(\\\'input[name=\\\"provincy\\\"]\\\').val().trim();
    const post_code = $(\\\'input[name=\\\"post_code\\\"]\\\').val().trim();

    // Validate the input fields
    if (firstName === \\\'\\\') {
        showToast(\\\'Please enter your first name\\\', \\\'Error\\\');
        return;
    }

    if (lastName === \\\'\\\') {
        showToast(\\\'Please enter your last name\\\', \\\'Error\\\');
        return;
    }

    if (email === \\\'\\\') {
        showToast(\\\'Please enter your email\\\', \\\'Error\\\');
        return;
    }

    // Simple email validation
    const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
    if (!emailPattern.test(email)) {
        showToast(\\\'Please enter a valid email address\\\', \\\'Error\\\');
        return;
    }

    // // phone validation
    // if (telNo === \\\'\\\') {
    //     showToast(\\\'Please enter a valid phone number\\\', \\\'Error\\\');
    //     return
    // }

    // Prepare the data for the API request
    const requestData = {
        first_name: firstName,
        last_name: lastName,
        email: email,
        phone: telNo,
        address: address,
        city: city,
        provincy: provincy,
        post_code: post_code,
    };

    // check if the request data is the same as userdata
    let dirtied = false;

    for (const key in requestData) {
        if (key == \\\'phone\\\') {
            if (requestData[key] !== user.billing_info.phone) {
                dirtied = true
                break;
            }
            continue
        }

        if (requestData[key] !== user[key]) {
            dirtied = true
            break;
        }
    }

    if (!dirtied) {
        return
    }

    try {
        app.preloader.show()

        const response = await updateUserDetails(requestData, email !== user.email)

        app.preloader.hide()


        if (response && response.success) {
            // showToast(\\\'Details updated successfully\\\', \\\'Success\\\');
            showToast(\\\'Details updated successfully\\\')
            view.router.navigate(\\\'/profile/\\\')
            store.dispatch(\\\'updateUserDetails\\\')
            return;
        }

        throw new Error(response.message);
    } catch (error) {
        app.preloader.hide()
        app.notification.create({
            titleRightText: \\\'now\\\',
            subtitle: \\\'Oops, something went wrong\\\',
            text: error.message || \\\'Failed to update details\\\',
        }).open()
    }
});

$(document).on(\\\'click\\\', \\\'#update_password\\\', async function () {
    var view = app.views.current

    // Get the values from the password input fields
    const password = $(\\\'input[name=\\\"password\\\"]\\\').val().trim();
    const current_password = $(\\\'input[name=\\\"current_password\\\"]\\\').val().trim();
    const confirmPassword = $(\\\'input[name=\\\"confirm_password\\\"]\\\').val().trim();

    if (current_password === \\\'\\\') {
        showToast(\\\'Please enter your current password\\\', \\\'Error\\\');
        return
    }

    if (password.length < 8) {
        showToast(\\\'Password must be at least 8 characters long.\\\')
        return
    }

    // Check if password contains at least one lowercase letter
    if (!/[a-z]/.test(password)) {
        showToast(\\\'Password must contain at least one lowercase letter.\\\')
        return
    }

    // Check if password contains at least one uppercase letter
    if (!/[A-Z]/.test(password)) {
        showToast(\\\'Password must contain at least one uppercase letter.\\\')
        return
    }

    // Check if password contains at least one number
    if (!/d/.test(password)) {
        showToast(\\\'Password must contain at least one number.\\\')
        return
    }

    if (confirmPassword === \\\'\\\') {
        showToast(\\\'Please confirm your password\\\', \\\'Error\\\');
        return;
    }

    if (password !== confirmPassword) {
        showToast(\\\'Passwords do not match\\\', \\\'Error\\\');
        return;
    }

    try {
        app.preloader.show()

        const response = await updatePassword(password, current_password)

        app.preloader.hide()

        if (response && response.success) {
            showToast(\\\'Password updated successfully\\\')
            view.router.navigate(\\\'/profile/\\\')
            return;
        }

        throw new Error(response.message);
    } catch (error) {
        app.preloader.hide()
        app.notification.create({
            titleRightText: \\\'now\\\',
            subtitle: \\\'Oops, something went wrong\\\',
            text: error.message || \\\'Failed to update password\\\',
        }).open()
    }
})
// --------------- End Edit Profile Page ---------------


// --------------- Edit Username Page ---------------
$(document).on(\\\'page:beforein\\\', \\\'.page[data-name=\\\"profile-edit-username\\\"]\\\', async function (e) {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user) {
        view.router.navigate(\\\'/login\\\')
        return
    }


    // Example of how to fill in the form fields with the provided data
    $(\\\'.profile-edit-view input[name=\\\"username\\\"]\\\').val(user.username || \\\'\\\')

    if (user.can_update_username) {
        $(\\\'#username-editable\\\').remove()
    } else {
        document.querySelector(\\\'#username-editable\\\').innerText = `You can change your username in ${user.next_update_username} days`
    }
})

$(document).on(\\\'click\\\', \\\'#save-username\\\', async function () {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user.can_update_username) {
        return
    }

    const username = $(\\\'.profile-edit-view input[name=\\\"username\\\"]\\\').val()

    if (username === \\\'\\\') {
        showToast(\\\'Please enter a username\\\', \\\'Error\\\')
        return
    }

    // username can only have letters, numbers, and underscores
    var usernamePattern = /^[a-zA-Z0-9_]+$/
    if (!usernamePattern.test(username)) {
        showToast(\\\'Username can only contain letters, numbers, and underscores\\\')
        return
    }

    // username must be at least 3 characters long
    if (username.length < 3) {
        showToast(\\\'Username must be at least 3 characters long\\\')
        return
    }

    if (username === user.username) {
        return
    }

    try {
        app.preloader.show()

        const response = await updateUsername(username)

        app.preloader.hide()

        if (response && response.success) {
            showToast(\\\'Username updated successfully\\\', \\\'Success\\\')
            view.router.navigate(\\\'/profile/\\\')

            store.dispatch(\\\'updateUserDetails\\\')
        } else {
            throw new Error(response.message)
        }
    } catch (error) {
        app.preloader.hide()
        app.notification.create({
            titleRightText: \\\'now\\\',
            subtitle: \\\'Oops, something went wrong\\\',
            text: error.message || \\\'Failed to update username\\\',
        }).open()
    }


})
// --------------- End Edit Username Page ---------------


// --------------- Edit Profile images Page ---------------
$(document).on(\\\'page:init\\\', \\\'.page[data-name=\\\"profile-edit-images\\\"]\\\', async function (e) {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user) {
        view.router.navigate(\\\'/login\\\')
        return
    }

    // If a cover photo exists, use it as the background image of the upload label
    if (user.cover_image) {
        $(\\\'input[name=\\\"cover_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-image\\\', `url(\\\'${user.cover_image}\\\')`)
        $(\\\'input[name=\\\"cover_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-size\\\', \\\'cover\\\')
    }

    if (user.profile_image) {
        $(\\\'input[name=\\\"profile_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-image\\\', `url(\\\'${user.profile_image}\\\')`)
        $(\\\'input[name=\\\"profile_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-size\\\', \\\'contain\\\')
        $(\\\'input[name=\\\"profile_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-position\\\', \\\'center\\\')
        $(\\\'input[name=\\\"profile_image\\\"]\\\').closest(\\\'.custom-file-upload\\\').find(\\\'label\\\').css(\\\'background-repeat\\\', \\\'no-repeat\\\')
    }
})

$(document).on(\\\'click\\\', \\\'#save-profile-images\\\', async function () {
    var view = app.views.current

    const cover_image = $(\\\'input[name=\\\"cover_image\\\"]\\\').prop(\\\'files\\\')[0]
    const profile_image = $(\\\'input[name=\\\"profile_image\\\"]\\\').prop(\\\'files\\\')[0]


    let coverBase64 = null
    let profileBase64 = null

    if (cover_image) {
        // Wrap the FileReader in a Promise to wait for it to complete
        coverBase64 = await new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(cover_image)

            reader.onload = () => resolve(reader.result)
            reader.onerror = () => reject(new Error(\\\'Failed to read image as base64\\\'))
        })
    }

    if (profile_image) {
        // Wrap the FileReader in a Promise to wait for it to complete
        profileBase64 = await new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(profile_image)

            reader.onload = () => resolve(reader.result)
            reader.onerror = () => reject(new Error(\\\'Failed to read image as base64\\\'))
        })
    }

    if (!coverBase64 && !profileBase64) {
        return
    }

    try {
        app.preloader.show()

        let promises = []

        if (profileBase64) {
            promises.push(updateProfileImage(profileBase64))
        }

        if (coverBase64) {
            promises.push(updateCoverImage(coverBase64))
        }

        const responses = await Promise.all(promises)
        app.preloader.hide()

        if (responses.every(response => response && response.success)) {
            showToast(\\\'Images updated successfully\\\', \\\'Success\\\')
            view.router.navigate(\\\'/profile/\\\')

            store.dispatch(\\\'updateUserDetails\\\')
            return
        }

        if (responses.some(response => response && !response.success)) {
            throw new Error(\\\'Failed to update images\\\')
        }
    } catch (error) {
        app.preloader.hide()

        app.notification.create({
            titleRightText: \\\'now\\\',
            subtitle: \\\'Oops, something went wrong\\\',
            text: error.message || \\\'Failed to update images\\\',
        }).open()
    }
})

$(document).on(\\\'change\\\', \\\'input[name=\\\"cover_image\\\"]\\\', function (e) {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = function (event) {
        console.log($(\\\'.custom-file-upload.cover\\\'));

        $(\\\'.custom-file-upload.cover\\\')
            .find(\\\'label\\\')
            .css(\\\'background-image\\\', `url(\\\'${event.target.result}\\\')`)
            .css(\\\'background-size\\\', \\\'cover\\\');
    };

    if (file) {
        reader.readAsDataURL(file);
    }
});

$(document).on(\\\'change\\\', \\\'input[name=\\\"profile_image\\\"]\\\', function (e) {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = function (event) {
        console.log($(\\\'.custom-file-upload.profile\\\'));

        $(\\\'.custom-file-upload.profile\\\')
            .find(\\\'label\\\')
            .css(\\\'background-image\\\', `url(\\\'${event.target.result}\\\')`)
            .css(\\\'background-size\\\', \\\'cover\\\');
    };

    if (file) {
        reader.readAsDataURL(file);
    }
});
// --------------- End Profile images Page ---------------


// --------------- Edit Socials Page ---------------
$(document).on(\\\'page:init\\\', \\\'.page[data-name=\\\"profile-edit-socials\\\"]\\\', async function (e) {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user) {
        view.router.navigate(\\\'/login\\\')
        return
    }

    const externalLinks = user.profile_links || {};

    app.popup.create({
        el: \\\'.add-link-popup\\\',
        swipeToClose: \\\'to-bottom\\\'
    });

    // Populate form fields
    document.querySelector(\\\'input[name=\\\"social_instagram\\\"]\\\').value = externalLinks.instagram || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_facebook\\\"]\\\').value = externalLinks.facebook || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_tiktok\\\"]\\\').value = externalLinks.tiktok || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_youtube\\\"]\\\').value = externalLinks.youtube || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_mivia\\\"]\\\').value = externalLinks.mivia || \\\'\\\';
    document.querySelector(\\\'input[name=\\\"social_custodian\\\"]\\\').value = externalLinks.custodian || \\\'\\\';

    // .social-other-links ul
    const externalLinksContainer = $(\\\'.social-other-links ul\\\')[0];

    externalLinks.external_links?.forEach(linkObj => {
        const listItem = document.createElement(\\\'li\\\');


        listItem.innerHTML = `
        <a class=\\\"item-link item-content\\\" href=\\\"${linkObj.link.url}\\\" data-link-id=\\\"${linkObj.id}\\\">
            <div class=\\\"item-inner\\\">
                <div class=\\\"item-title\\\">
                    ${linkObj.link.label}
                </div>
                <div class=\\\"item-after delete-external-link\\\"><i class=\\\"icon f7-icons\\\">xmark_circle</i></div>
            </div>
        </a>
        `;
        externalLinksContainer.appendChild(listItem);
    });
})

// Add event listener for the Save button
$(document).on(\\\'click\\\', \\\'#add-link-btn\\\', async function () {
    const linkTitle = $(\\\'input[name=\\\"custom_link_title\\\"]\\\').val();
    const linkUrl = $(\\\'input[name=\\\"custom_link_url\\\"]\\\').val();

    // Validate the inputs
    if (linkTitle === \\\'\\\') {
        console.log(\\\'Please enter a link title.\\\', $(\\\'input[name=\\\"custom_link_title\\\"]\\\'));
        showToast(\\\'Please enter a link title.\\\', \\\'Error\\\');
        return;
    }

    if (linkUrl === \\\'\\\') {
        showToast(\\\'Please enter a link URL.\\\', \\\'Error\\\');
        return;
    }

    // Simple URL validation (basic check)
    // const urlPattern = /^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/;
    // if (!urlPattern.test(linkUrl)) {
    //     showToast(\\\'Please enter a valid URL.\\\', \\\'Error\\\');
    //     return;
    // }


    const urlPattern = /^(https?:\\\\/\\\\/|www\\\\.)[\\\\da-z\\\\.-]+\\\\.[a-z]{2,6}\\\\/?$/;
    if (!urlPattern.test(linkUrl)) {
        showToast(\\\'Please enter a valid URL.\\\', \\\'Error\\\');
        return;
    }

    // Mock API request (POST request)
    const requestData = {
        label: linkTitle,
        url: linkUrl
    };

    app.popup.close()

    app.preloader.show()

    const response = await addUserProfileLinks({
        type: \\\'external_links\\\',
        link: requestData
    })

    if (response && response.success) {
        showToast(\\\'Link added successfully\\\', \\\'Success\\\');

        // Add the new link to the list
        const listItem = document.createElement(\\\'li\\\');
        listItem.innerHTML = `
            <a class=\\\"item-link item-content\\\" href=\\\"${linkUrl}\\\" data-link-id=\\\"${response.id}\\\">
                <div class=\\\"item-inner\\\">
                    <div class=\\\"item-title\\\">
                        ${linkTitle}
                    </div>
                    <div class=\\\"item-after\\\"><i class=\\\"icon f7-icons delete-external-link\\\">xmark_circle</i></div>
                </div>
            </a>
        `;

        const externalLinksContainer = $(\\\'.social-other-links ul\\\')[0];
        externalLinksContainer.appendChild(listItem);
        store.dispatch(\\\'updateUserDetails\\\')
    }

    app.preloader.hide()
});

// Save social links
$(document).on(\\\'click\\\', \\\'#save-profile-socials\\\', async function () {
    var view = app.views.current

    const user = await getSessionUser()

    const instagram = $(\\\'input[name=\\\"social_instagram\\\"]\\\').val();
    const facebook = $(\\\'input[name=\\\"social_facebook\\\"]\\\').val();
    const tiktok = $(\\\'input[name=\\\"social_tiktok\\\"]\\\').val();
    const youtube = $(\\\'input[name=\\\"social_youtube\\\"]\\\').val();
    const mivia = $(\\\'input[name=\\\"social_mivia\\\"]\\\').val();
    const custodian = $(\\\'input[name=\\\"social_custodian\\\"]\\\').val();

    const links = {
        instagram,
        facebook,
        tiktok,
        youtube,
        mivia,
        custodian
    };

    // ig, tiktok, yt. mivia, custodian must be string, no special characters except for _ and - and . and
    const usernamePattern = /^[a-zA-Z0-9._-]+$/;

    if (instagram && !usernamePattern.test(instagram)) {
        showToast(\\\'Please enter a valid Instagram username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

    if (tiktok && !usernamePattern.test(tiktok)) {
        showToast(\\\'Please enter a valid TikTok username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

    if (youtube && !usernamePattern.test(youtube)) {
        showToast(\\\'Please enter a valid YouTube username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

    if (mivia && !usernamePattern.test(mivia)) {
        showToast(\\\'Please enter a valid Mivia username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

    if (custodian && !usernamePattern.test(custodian)) {
        showToast(\\\'Please enter a valid Custodian username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }



    // facebook must be a valid facebook url
    const urlPattern = /^(https?:\\\\/\\\\/|www\\\\.)[\\\\da-z\\\\.-]+\\\\.[a-z]{2,6}\\\\/?$/;
    if (facebook && !usernamePattern.test(facebook)) {
        showToast(\\\'Please enter a valid Facebook username (letters, numbers, underscores, periods, hyphens only)\\\', \\\'Error\\\');
        return;
    }

    // check if the request data is the same as userdata
    let dirtied = false;

    for (const key in links) {
        if (links[key] !== user.profile_links[key]) {
            dirtied = true
            break;
        }
    }

    if (!dirtied) {
        return
    }

    app.preloader.show()

    const response = await updateSocialLinks(links);

    app.preloader.hide()

    if (response && response.success) {
        showToast(\\\'Social links updated successfully\\\', \\\'Success\\\');
        view.router.navigate(\\\'/profile/\\\')
        store.dispatch(\\\'updateUserDetails\\\')
    } else {
        showToast(\\\'Failed to update social links\\\', \\\'Error\\\');
    }
})

// Delete link
$(document).on(\\\'click\\\', \\\'.delete-external-link\\\', async function (e) {
    const linkId = e.target.closest(\\\'.item-link\\\').dataset.linkId;

    // confirm dialog
    app.dialog.confirm(\\\'Are you sure you want to delete this link?\\\', \\\'Delete Link\\\', async function () {
        app.preloader.show()

        const response = await removeProfileLink(linkId);

        app.preloader.hide()

        if (response) {
            showToast(\\\'Link deleted successfully\\\', \\\'Success\\\')
            // remove the link from the list
            e.target.closest(\\\'.item-link\\\').remove();
            store.dispatch(\\\'updateUserDetails\\\')

        } else {
            showToast(\\\'Failed to delete link\\\', \\\'Error\\\')
        }
    })
})
// --------------- End Edit Socials Page ---------------

$(document).on(\\\'input\\\', \\\'#lowercaseInput\\\', function (event) {
    this.value = this.value.toLowerCase();
});

// --------------- Delete Profile Page ---------------
// $(document).on(\\\'page:init\\\', \\\'.page[data-name=\\\"profile-edit-account-settings\\\"]\\\', function (e) {
// });

$(document).on(\\\'click\\\', \\\'.account-delete\\\', function (e) {
    app.dialog.confirm(\\\'Are you sure? It is not possible to restore accounts once deleted.\\\', \\\'Confirm\\\', function (name) {
        app.dialog.passwordConfirm(\\\'Please enter your password.\\\', \\\'Delete Account\\\', async function (password) {
            await handleDeleteAccount(password);
        });
    });
});

async function handleDeleteAccount(password) {

    try {
        app.preloader.show();

        const response = await deleteUserAccount(password);

        app.preloader.hide();
        if (!response) {
            app.dialog.alert(\\\'Failed to delete account\\\', \\\'Error\\\');
            return;
        }

        if (response && response.success == false) {
            app.dialog.alert(response.message, \\\'Error\\\');
            return;
        }

        if (response && response.success) {
            app.dialog.alert(\\\'Account deleted successfully\\\', \\\'Success\\\');

            setTimeout(() => {
                store.dispatch(\\\'logout\\\');
            }, 1000);
        }
    } catch (error) {
        app.preloader.hide();
        app.dialog.alert(error.message || \\\'Failed to delete account\\\', \\\'Error\\\');
    }
}

// Custom dialog to ask for password
app.dialog.passwordConfirm = function (text, title, callback) {
    app.dialog.create({
        title: title,
        text: text,
        content: \\\'<div class=\\\"dialog-input-field item-input\\\"><div class=\\\"item-input-wrap\\\"><input type=\\\"password\\\" name=\\\"password\\\" placeholder=\\\"Enter your password\\\" class=\\\"dialog-input\\\"></div></div>\\\',
        buttons: [{
                text: \\\'Cancel\\\',
                onClick: function (dialog, e) {
                    dialog.close();
                }
            },
            {
                text: \\\'Delete\\\',
                bold: true,
                onClick: function (dialog, e) {
                    var password = dialog.$el.find(\\\'.dialog-input\\\').val(); // Get the password entered
                    if (!password) {
                        showToast(\\\'Please enter your password\\\', \\\'Error\\\');
                        return;
                    }
                    callback(password); // Pass the password to the callback
                    dialog.close();
                }
            }
        ]
    }).open();
};

Add JS Function Name

profile
js/view-user-profile.js-

js/view-user-profile.js--

js/view-user-profile.js---

js/view-user-profile.js----

js/profile.js-

js/profile-edit.js-

js/profile-edit.js--

js/profile-edit.js

js/profile.js

js/view-user-profile.js