From ba87b35382f4f54346b5f9f49487c7b8f77a6367 Mon Sep 17 00:00:00 2001 From: Pierre Date: Mon, 16 Apr 2018 18:44:13 +0200 Subject: [PATCH] Display user ID and email in settings --- .../css/pages/settings/sections/general.css | 16 ++++++ assets/js/common/utils.js | 26 ++++++++++ assets/js/pages/settings/sections/general.js | 50 +++++++++++++++++-- system/config/dev.config.php | 4 ++ 4 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 assets/css/pages/settings/sections/general.css diff --git a/assets/css/pages/settings/sections/general.css b/assets/css/pages/settings/sections/general.css new file mode 100644 index 00000000..dd05766a --- /dev/null +++ b/assets/css/pages/settings/sections/general.css @@ -0,0 +1,16 @@ +/** + * General settings stylesheet + * + * @author Pierre HUBERT + */ + +.box-general-settings .input-user-id { + width: 29%; + display: inline-block; +} + +.box-general-settings .input-user-email { + width: 70%; + display: inline-block; + margin-left: 1%; +} \ No newline at end of file diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index ecb54b40..2c2a1405 100644 --- a/assets/js/common/utils.js +++ b/assets/js/common/utils.js @@ -39,6 +39,7 @@ function createElem(nodeType, appendTo){ * @info {String} value The value of the new element * @info {String} placeholder The placeholder of the new element * @info {String} innerHTML Specify the html content of the newly created element + * @info {boolean} disabled Set whether the field should be disabled or not (input only) * @return {HTMLElement} The newly created element */ function createElem2(infos){ @@ -101,6 +102,10 @@ function createElem2(infos){ if(infos.innerHTML) newElem.innerHTML = infos.innerHTML; + //Set field state + if(infos.disabled) + infos.disabled = true; + //Return newly created element return newElem; } @@ -190,13 +195,28 @@ function checkMail(emailAddress){ * * @info {Boolean} checked Defines if the fields has to be checked or not (checkbox 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 + * * @info {boolean} disabled Set whether the field should be disabled or not + * * @info {string} additionalGroupClasses Additionnal form group class names * @return {HTMLElement} The input */ function createFormGroup(infos){ + + //Check for default value + var value = infos.value ? infos.value : ""; + + //Check if the field has to be disabled + var disabled = infos.disabled; + //Create formgroup var formGroup = createElem("div", infos.target); formGroup.className = "form-group"; + //Add optionnal classes if required + if(infos.additionalGroupClasses){ + formGroup.className += " " + infos.additionalGroupClasses; + } + //Add label var labelElem = createElem("label", formGroup); @@ -206,6 +226,7 @@ function createFormGroup(infos){ //Create checkbox var input = createElem("input", labelElem) ; input.type = "checkbox"; + input.disabled = disabled; //Check if input has to be checked by default if(infos.checked){ @@ -236,6 +257,7 @@ function createFormGroup(infos){ var input = createElem("select", formGroup); input.style.width = "100%"; input.className = "form-control select2"; + input.disabled = disabled; if(infos.multiple) //For multiple changes input.setAttribute("multiple", "multiple"); if(infos.placeholder) //Placeholder if required @@ -256,6 +278,8 @@ function createFormGroup(infos){ type: "textarea", class: "form-control", placeholder: infos.placeholder, + value: value, + disabled: disabled }); } @@ -273,6 +297,8 @@ function createFormGroup(infos){ input.className = "form-control"; input.type = infos.type; input.placeholder = infos.placeholder; + input.value = value; + input.disabled = disabled; } //Return input diff --git a/assets/js/pages/settings/sections/general.js b/assets/js/pages/settings/sections/general.js index 2d26af0f..a5ab2050 100644 --- a/assets/js/pages/settings/sections/general.js +++ b/assets/js/pages/settings/sections/general.js @@ -18,7 +18,20 @@ ComunicWeb.pages.settings.sections.general = { var box = createElem2({ appendTo: target, type: "div", - class: "box box-primary" + class: "box box-primary box-general-settings" + }); + + //Add box header + var boxHead = createElem2({ + appendTo: box, + type: "div", + class: "box-header", + }); + var boxTitle = createElem2({ + appendTo: boxHead, + type: "h3", + class: "box-title", + innerHTML: "General settings" }); //Create box body @@ -44,8 +57,39 @@ ComunicWeb.pages.settings.sections.general = { boxBody.appendChild(errMsg); } - + //Display the settings form + ComunicWeb.pages.settings.sections.general._show_form(infos, boxBody); }); - } + }, + + /** + * Show the settings form + * + * @param {object} infos Informations about the user (General settings) + * @param {HTMLElement} target The target for the page + */ + _show_form: function(infos, target){ + + //Display user ID + createFormGroup({ + target: target, + label: "User ID", + type: "text", + value: infos.id, + disabled: true, + additionalGroupClasses: "input-user-id" + }); + + //Display user name + createFormGroup({ + target: target, + label: "Email address", + type: "email", + value: infos.email, + disabled: true, + additionalGroupClasses: "input-user-email" + }); + + }, }; \ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 09bc184c..6f90e61d 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -164,6 +164,10 @@ class Dev { //Post page "css/pages/postPage/main.css", + //Settings page + //Sections sections + "css/pages/settings/sections/general.css", + //Latest post page stylesheet "css/pages/latestPosts/main.css",