Send a request to the server to update account image visibility

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

@@ -4,7 +4,7 @@
  * @author Pierre HUBERT
  */
 
-.box-account-image-settings {
+.box-account-image-settings .box-body {
 	text-align: center;
 }
 
@@ -15,3 +15,7 @@
 	margin-top: 10px;
 	margin-bottom: 10px;
 }
+
+.box-account-image-settings .account-image-visibility-form {
+	text-align: justify;
+}

assets/js/common/utils.js

@@ -191,8 +191,9 @@ function checkMail(emailAddress){
  * @param {Object} infos Informations about the formgroup element to create
  * * @info {HTMLElement} target The target of the field
  * * @info {String} label The label of the field
+ * * @info {string} name The name of the field
  * * @info {String} placeholder The placeholder of the field
- * * @info {Boolean} checked Defines if the fields has to be checked or not (checkbox only)
+ * * @info {Boolean} checked Defines if the fields has to be checked or not (checkbox/radio only)
  * * @info {Boolean} multiple Defines if the fields can accept more than one response
  * * @info {String} type The type of the field
  * * @info {string} value The default value of the input
@@ -245,6 +246,41 @@ function createFormGroup(infos){
       		radioClass: 'iradio_flat-blue'
 		});
 	}
+
+	//In case of radio input
+	else if(infos.type == "radio"){
+
+		//Create radio
+		var input = createElem("input", labelElem) ;
+		input.type = "radio";
+		input.disabled = disabled;
+
+		if(infos.name)
+			input.name = infos.name;
+		
+		if(infos.value)
+			input.value = infos.value;
+
+		//Check if input has to be checked by default
+		if(infos.checked){
+			if(infos.checked === true){
+				input.checked = "true";
+			}
+		}
+
+		//Add label value
+		var labelValue = createElem("span", labelElem);
+		labelValue.innerHTML = " "+infos.label;
+
+		//Enable iCheck
+		$(input).iCheck({
+			checkboxClass: 'icheckbox_flat-blue',
+      		radioClass: 'iradio_flat-blue'
+		});
+
+	}
+
+	//Select2
 	else if(infos.type == "select2"){
 		//In case of select2 element
 		//Check for label

assets/js/components/settings/interface.js

@@ -117,5 +117,19 @@ ComunicWeb.components.settings.interface = {
 		var apiURI = "settings/delete_account_image";
 		var params = {};
 		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
+	},
+
+	/**
+	 * Update the visibility of the account image
+	 * 
+	 * @param {string} visibility The new visibility level for the account image
+	 * @param {function} callback
+	 */
+	updateAccountImageVisibility: function(visibility, callback){
+		var apiURI = "settings/set_account_image_visibility";
+		var params = {
+			visibility: visibility
+		};
+		ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback);
 	}
 }

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

@@ -152,6 +152,7 @@ ComunicWeb.pages.settings.sections.accountImage = {
 			innerHTML: "Delete image"
 		});
 
+		//Make delete button lives
 		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){
 
@@ -181,5 +182,80 @@ ComunicWeb.pages.settings.sections.accountImage = {
 
 			});
 		});
+
+		//Add the form to update visibility level
+		add_space(accountImageForm);
+		add_space(accountImageForm);
+
+		var visibilityForm = createElem2({
+			appendTo: accountImageForm,
+			type: "form",
+			class: "account-image-visibility-form"
+		});
+
+		//Title
+		createElem2({
+			appendTo: visibilityForm,
+			type: "h4",
+			innerHTML: "Account image visibility"
+		});
+
+		//Add the options
+		//Open
+		createFormGroup({
+			target: visibilityForm,
+			label: "Everyone",
+			name: "account-image-visibility",
+			type: "radio",
+			value: "open",
+			checked: info.visibility == "open"
+		});
+
+		//Public
+		createFormGroup({
+			target: visibilityForm,
+			label: "All Comunic users",
+			name: "account-image-visibility",
+			type: "radio",
+			value: "public",
+			checked: info.visibility == "public"
+		});
+
+		//Friends
+		createFormGroup({
+			target: visibilityForm,
+			label: "My friends only",
+			name: "account-image-visibility",
+			type: "radio", 
+			value: "friends",
+			checked: info.visibility == "friends"
+		});
+
+		//Add update button
+		var updateButton = createElem2({
+			appendTo: visibilityForm,
+			type: "div",
+			class: "btn btn-primary",
+			innerHTML: "Update visibility"
+		});
+
+		updateButton.addEventListener("click", function(e){
+
+			//Get the new visibility level
+			var newVisibility = visibilityForm.elements["account-image-visibility"].value;
+
+			//Make a request over the server
+			ComunicWeb.components.settings.interface.updateAccountImageVisibility(newVisibility, function(callback){
+
+				//Check for errors
+				if(callback.error){
+					notify("Could update the visibility of your account image!", "danger");
+				}
+				else
+					notify("The visibility of your account image have been successfully updated!", "success");
+
+			});
+
+		});
 	}
 }