From f7cdc43978aa2ff4ad8555ce17cb6d7653ace35c Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 19 Apr 2018 10:20:49 +0200 Subject: [PATCH] Send a request to the API to update security settings --- .../css/pages/settings/sections/security.css | 7 +- assets/js/components/settings/interface.js | 13 +- assets/js/pages/settings/sections/security.js | 134 +++++++++++++++++- 3 files changed, 150 insertions(+), 4 deletions(-) diff --git a/assets/css/pages/settings/sections/security.css b/assets/css/pages/settings/sections/security.css index f54be90e..7050ac66 100644 --- a/assets/css/pages/settings/sections/security.css +++ b/assets/css/pages/settings/sections/security.css @@ -27,4 +27,9 @@ /** * Global box rules - */ \ No newline at end of file + */ +.security-settings-form .submit-form { + width: 150px; + margin: auto; + display: block; +} \ No newline at end of file diff --git a/assets/js/components/settings/interface.js b/assets/js/components/settings/interface.js index d988a739..4d6de3be 100644 --- a/assets/js/components/settings/interface.js +++ b/assets/js/components/settings/interface.js @@ -35,7 +35,7 @@ ComunicWeb.components.settings.interface = { * Check the availability of the virtual directory for user * * @param {string} directory The directory to check - * @param {function} callback The result of the request + * @param {function} callback */ checkUserDirectoryAvailability: function(directory, callback){ var apiURI = "settings/check_user_directory_availability"; @@ -59,4 +59,15 @@ ComunicWeb.components.settings.interface = { ComunicWeb.common.api.makeAPIrequest(apiURI, params, true, callback); }, + /** + * Set (update) security account settings + * + * @param {object} settings New settings + * @param {function} callback + */ + setSecurity: function(settings, callback){ + var apiURI = "settings/set_security"; + ComunicWeb.common.api.makeAPIrequest(apiURI, settings, true, callback); + } + } \ No newline at end of file diff --git a/assets/js/pages/settings/sections/security.js b/assets/js/pages/settings/sections/security.js index 772a4ee7..916e11d7 100644 --- a/assets/js/pages/settings/sections/security.js +++ b/assets/js/pages/settings/sections/security.js @@ -55,7 +55,7 @@ ComunicWeb.pages.settings.sections.security = { //Create form contener (allows easier manipulations then) var formContener = createElem2({ appendTo: target, - type: "div", + type: "form", class: "prompt-user-password" }); @@ -117,8 +117,138 @@ ComunicWeb.pages.settings.sections.security = { emptyElem(formContener); //Show security information update form - + ComunicWeb.pages.settings.sections.security._show_update_form(result, target); }); }; + + //Make the submit button triggered when the user hit enter + formContener.onsubmit = function(){ + sendButton.onclick(); + return false; + } }, + + /** + * Show security update form + * + * @param {object} settings The settings to update + * @param {HTMLElement} target The target for the form + */ + _show_update_form: function(settings, target){ + + //Create form contener + var formContener = createElem2({ + appendTo: target, + type: "div", + class: "security-settings-form" + }) + + //Display a message to explain to the user what is on this page + createElem2({ + appendTo: formContener, + type: "p", + innerHTML: "In this section, you can set two security question that will help you to " + + "recover an access to your account if you lose your password. Do not worry about " + + "uppercase and lowercase characters." + }); + + //Display first security question + var firstSecurityQuestion = createFormGroup({ + target: formContener, + label: "First security question", + type: "text", + placeholder: "Type your question here...", + value: settings.security_question_1 + }); + + //Display first security answer + var firstSecurityAnswer = createFormGroup({ + target: formContener, + label: "First security answer", + type: "text", + placeholder: "Type your answer here...", + value: settings.security_answer_1 + }); + + //Display second security question + var secondSecurityQuestion = createFormGroup({ + target: formContener, + label: "Second security question", + type: "text", + placeholder: "Type your question here...", + value: settings.security_question_2 + }); + + //Display second security answer + var secondSecurityAnswer = createFormGroup({ + target: formContener, + label: "Second security answer", + type: "text", + placeholder: "Type your answer here...", + value: settings.security_answer_2 + }); + + + //User password form + add_space(formContener); + createElem2({ + appendTo: formContener, + type: "p", + innerHTML: "We need your password to update these information..." + }); + var passwordInput = createFormGroup({ + target: formContener, + label: "Your password", + placeholder: "Your password", + type: "password" + }); + + //Add submit button + var sendButton = createElem2({ + appendTo: formContener, + type: "div", + class: "btn btn-primary submit-form", + innerHTML: "Update information" + }); + + //Make the send button lives + sendButton.onclick = function(){ + + //Check the values given by the user + if(!ComunicWeb.common.formChecker.checkInput(passwordInput, true)){ + notify("Please specify your password to submit information!", "danger"); + return; + } + + //Prepare the request over the server + var params = { + security_question_1: firstSecurityQuestion.value, + security_answer_1: firstSecurityAnswer.value, + security_question_2: secondSecurityQuestion.value, + security_answer_2: secondSecurityAnswer.value, + + //Security check + password: passwordInput.value + }; + + //Hide send button + sendButton.style.visibility = "hidden"; + + //Perform the request on the server + ComunicWeb.components.settings.interface.setSecurity(params, function(response){ + + //Show send button + sendButton.style.visibility = "visible"; + + //Check for errors + if(response.error){ + notify("An error occurred while trying to update security settings ! Please check your password...", "danger"); + return; + } + + //Success + notify("Your security settings have been successfully updated!", "success"); + }); + } + } } \ No newline at end of file