Send a request to the server to delete account image

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

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,62 +56,130 @@ ComunicWeb.pages.settings.sections.accountImage = {
 				return;
 			}
 
-			//Apply account image settings
+			//Display the form
-			var accountImageForm = createElem2({
+			ComunicWeb.pages.settings.sections.accountImage._show_form(boxBody, result);
-				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 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();
+
+				});
+
+			});
+		});
+	}
 }