Send a request to the server to delete account image

assets/css/pages/settings/sections/accountImage.css

@@ -7,3 +7,9 @@
 .box-account-image-settings {
 	text-align: center;
 }
+
+.box-account-image-settings .settings-account-image-preview {
+	max-width: 100%;
+	margin-top: 10px;
+	margin-bottom: 10px;
+}

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);
 	}
 }

assets/js/pages/settings/sections/accountImage.js

@@ -56,10 +56,23 @@ ComunicWeb.pages.settings.sections.accountImage = {
 				return;
 			}
 
+			//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: boxBody
+			appendTo: target
 		});
 		
 		//First, offer the user to upload a new account image
@@ -90,7 +103,7 @@ ComunicWeb.pages.settings.sections.accountImage = {
 			//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);
+			target.insertBefore(message, accountImageForm);
 
 			//Upload the image
 			var fd = new FormData();
@@ -112,6 +125,61 @@ ComunicWeb.pages.settings.sections.accountImage = {
 				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();
+
+				});
+
+			});
+		});
+	}
 }