From 2dc1bb073252806a492c9f0a42d68e3db2ebe4f3 Mon Sep 17 00:00:00 2001 From: Pierre Date: Tue, 1 May 2018 10:57:58 +0200 Subject: [PATCH] Send a request to the server to delete account image --- .../pages/settings/sections/accountImage.css | 6 + assets/js/components/settings/interface.js | 11 ++ .../pages/settings/sections/accountImage.js | 180 ++++++++++++------ 3 files changed, 141 insertions(+), 56 deletions(-) diff --git a/assets/css/pages/settings/sections/accountImage.css b/assets/css/pages/settings/sections/accountImage.css index 32c7b7c2..f9100b74 100644 --- a/assets/css/pages/settings/sections/accountImage.css +++ b/assets/css/pages/settings/sections/accountImage.css @@ -6,4 +6,10 @@ .box-account-image-settings { text-align: center; +} + +.box-account-image-settings .settings-account-image-preview { + max-width: 100%; + margin-top: 10px; + margin-bottom: 10px; } \ No newline at end of file diff --git a/assets/js/components/settings/interface.js b/assets/js/components/settings/interface.js index c70e0c65..4a0dab76 100644 --- a/assets/js/components/settings/interface.js +++ b/assets/js/components/settings/interface.js @@ -106,5 +106,16 @@ ComunicWeb.components.settings.interface = { uploadAccountImage: function(data, callback){ var apiURI = "settings/upload_account_image"; ComunicWeb.common.api.makeFormDatarequest(apiURI, data, true, callback); + }, + + /** + * Delete current user account image + * + * @param {function} callback + */ + deleteAccountImage: function(callback){ + var apiURI = "settings/delete_account_image"; + var params = {}; + ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); } } \ No newline at end of file diff --git a/assets/js/pages/settings/sections/accountImage.js b/assets/js/pages/settings/sections/accountImage.js index 1b9d1c2b..dddb4dfc 100644 --- a/assets/js/pages/settings/sections/accountImage.js +++ b/assets/js/pages/settings/sections/accountImage.js @@ -56,62 +56,130 @@ ComunicWeb.pages.settings.sections.accountImage = { return; } - //Apply account image settings - var accountImageForm = createElem2({ - type: "div", - appendTo: boxBody - }); - - //First, offer the user to upload a new account image - var newAccountImageLabel = createElem2({ - appendTo: accountImageForm, - type: "label" - }); - var fileInput = createElem2({ - appendTo: newAccountImageLabel, - type: "input", - elemType: "file" - }); - fileInput.style.display = "none"; - var chooseButton = createElem2({ - appendTo: newAccountImageLabel, - type: "div", - class: "btn btn-primary", - innerHTML: "Upload a new account image" - }); - - //Add event listener - fileInput.addEventListener("change", function(e){ - - //Check if no file have been selected - if(fileInput.files.length == 0) - return; - - //Upload the new file - //Display a callout message - var message = ComunicWeb.common.messages.createCalloutElem("", "Please wait while your picture is being uploaded..."); - boxBody.insertBefore(message, accountImageForm); - - //Upload the image - var fd = new FormData(); - fd.append("picture", fileInput.files[0], fileInput.files[0].name); - ComunicWeb.components.settings.interface.uploadAccountImage(fd, function(result){ - - //Remove message - message.remove(); - - //Check for errors - if(result.error){ - notify("An error occured while trying to upload your image !", "danger"); - return; - } - - notify("Your picture has been successfully uploaded !", "success"); - - //Reload current page - ComunicWeb.common.system.reset(); - }); - }); + //Display the form + ComunicWeb.pages.settings.sections.accountImage._show_form(boxBody, result); }); }, + + /** + * Display account images form + * + * @param {HTMLElement} target The target for the form + * @param {object} info Information about the form + */ + _show_form: function(target, info){ + + //Apply account image settings + var accountImageForm = createElem2({ + type: "div", + appendTo: target + }); + + //First, offer the user to upload a new account image + var newAccountImageLabel = createElem2({ + appendTo: accountImageForm, + type: "label" + }); + var fileInput = createElem2({ + appendTo: newAccountImageLabel, + type: "input", + elemType: "file" + }); + fileInput.style.display = "none"; + var chooseButton = createElem2({ + appendTo: newAccountImageLabel, + type: "div", + class: "btn btn-primary", + innerHTML: "Upload a new account image" + }); + + //Add event listener + fileInput.addEventListener("change", function(e){ + + //Check if no file have been selected + if(fileInput.files.length == 0) + return; + + //Upload the new file + //Display a callout message + var message = ComunicWeb.common.messages.createCalloutElem("", "Please wait while your picture is being uploaded..."); + target.insertBefore(message, accountImageForm); + + //Upload the image + var fd = new FormData(); + fd.append("picture", fileInput.files[0], fileInput.files[0].name); + ComunicWeb.components.settings.interface.uploadAccountImage(fd, function(result){ + + //Remove message + message.remove(); + + //Check for errors + if(result.error){ + notify("An error occured while trying to upload your image !", "danger"); + return; + } + + notify("Your picture has been successfully uploaded !", "success"); + + //Reload current page + ComunicWeb.common.system.reset(); + }); + }); + + //Stop here if the user does not have any account image + if(!info.has_image) + return; + + //Display user account image + createElem2({ + appendTo: accountImageForm, + type: "img", + src: info.image_url, + class: "settings-account-image-preview" + }); + + //Create actions contener + var actionsContener = createElem2({ + appendTo: accountImageForm, + type: "div" + }); + + //Delete account image + var deleteImage = createElem2({ + appendTo: accountImageForm, + type: "div", + class: "btn btn-danger", + innerHTML: "Delete image" + }); + + deleteImage.addEventListener("click", function(e){ + ComunicWeb.common.messages.confirm("Do you really want to delete your account image ? The operation can not be reverted !", function(res){ + + if(!res) + return; + + //Make a request on the server + ComunicWeb.components.settings.interface.deleteAccountImage(function(callback){ + + //Delay action to let the time to the page to restart + setTimeout(function(){ + + //Check for errors + if(callback.error){ + notify("Could not delete your account image !", "danger"); + } + else + notify("Your account image has been successfully deleted!", "success"); + + }, 500); + + + //Reset the page + ComunicWeb.common.system.reset(); + + }); + + }); + }); + } } \ No newline at end of file