From 59004555ec55f562b17ee942c9cb4f8f730c23ae Mon Sep 17 00:00:00 2001 From: Pierre Date: Tue, 21 Feb 2017 12:37:26 +0100 Subject: [PATCH] Progress on login page --- assets/js/common/functionsSchema.js | 12 +- assets/js/common/network.js | 14 +- assets/js/common/page.js | 134 +++++++++++++++++++- assets/js/pages/login.js | 35 ++++- assets/templates/pages/login/loginPage.json | 118 +++++++++++++++++ assets/templates/pages/login/loginPage.tpl | 37 ++++++ corePage/config/dev.config.php | 2 + 7 files changed, 338 insertions(+), 14 deletions(-) create mode 100644 assets/templates/pages/login/loginPage.json create mode 100644 assets/templates/pages/login/loginPage.tpl diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index f5a4b0bf..011283d8 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -115,9 +115,19 @@ var ComunicWeb = { prepareLoadTemplate: function(){}, /** - * Load, parse and show a template + * Load, parse and show an HTML template */ getAndShowTemplate: function(targetElem, dataTemplate, templateURI, nextAction, cleanContener){}, + + /** + * Convert a JSON object into html elements + */ + convertJSONobjectTOhtmlElement: function(parentNodeChilds, values){}, + + /** + * Get and show a JSON template + */ + getAndShowJSONtemplate: function(targetElem, templateURI, additionalData, afterParsingJSONtemplate, cleanContener){}, }, /** diff --git a/assets/js/common/network.js b/assets/js/common/network.js index 5e0d8b3a..2edc2b72 100644 --- a/assets/js/common/network.js +++ b/assets/js/common/network.js @@ -5,7 +5,7 @@ */ -ComunicWeb.network = { +ComunicWeb.common.network = { /** * @var {object} Cache contener @@ -16,13 +16,13 @@ ComunicWeb.network = { * Make a GET request * * @param {String} url Destination URL - * @param {Boolean} cache Specify if data can be cached or not (optimize network) + * @param {Boolean} cacheResponse Specify if data can be cached or not (optimize network) * @param {function} GETnextAction What to do next * @return {Boolean} False if it fails */ - getRequest: function(url, cache, GETnextAction){ + getRequest: function(url, cacheResponse, GETnextAction){ //First, check if it is required to cache the request - if(cache){ + if(cacheResponse){ //Prepare cache entry name var cacheEntryName = encodeURIComponent(url); @@ -50,10 +50,12 @@ ComunicWeb.network = { } //Check if it is required to cache result - if(cache){ - ComunicWeb.network.cache[cacheEntryName] = xhrRequest.responseText; + if(cacheResponse){ + ComunicWeb.common.network.cache[cacheEntryName] = xhrRequest.responseText; } + ComunicWeb.debug.logMessage("GET request: " + url + " Success (" + xhrRequest.status + ")"); + //Call next action GETnextAction(xhrRequest.responseText); } diff --git a/assets/js/common/page.js b/assets/js/common/page.js index 227f2390..f95908cb 100644 --- a/assets/js/common/page.js +++ b/assets/js/common/page.js @@ -127,16 +127,16 @@ ComunicWeb.common.page = { }, /** - * Load, parse and show a template + * Load, parse and show an HTML template * * @param {Object} targetElem The target element where the template will be applied * @param {Object} dataTemplate Datas to pass to the template (to parse it) * @param {String} templateURI URI pointing on the template - * @param {function} nextAction What to do once the template is loaded + * @param {function} afterParsingHTMLtemplate What to do once the template is loaded * @param {Boolean} cleanContener Specify if contener has to be cleaned or not * @return {Boolean} False if it fails */ - getAndShowTemplate: function(targetElem, dataTemplate, templateURI, nextAction, cleanContener){ + getAndShowTemplate: function(targetElem, dataTemplate, templateURI, afterParsingHTMLtemplate, cleanContener){ //First, get the template URL templateURL = ComunicWeb.__config.templatesURL + templateURI; @@ -144,6 +144,11 @@ ComunicWeb.common.page = { //Define how to apply the template var afterDownloadTemplateContent = function(templateContent){ + //If required, clean the contener + if(cleanContener){ + targetElem.innerHTML = ""; + } + //Apply data templates for(elemName in dataTemplate){ //We change the template content while it still exists @@ -154,11 +159,130 @@ ComunicWeb.common.page = { //Apply template source targetElem.innerHTML = templateContent; - } + + //Perform next action (if there is) + if(afterParsingHTMLtemplate) + afterParsingHTMLtemplate(); + + }; //Perform request - if(!ComunicWeb.network.getRequest(templateURL, true, afterDownloadTemplateContent)) + if(!ComunicWeb.common.network.getRequest(templateURL, true, afterDownloadTemplateContent)) //An error occured return false; }, + + /** + * Convert a JSON object into html elements + * + * @param {Object} parentNodeChilds The parent which contains the childs to convert (an object) + * @param {Object} values Optionnal, fill the template with predefined values + * @returns {HTMLObject} The processed JSON code + */ + convertJSONobjectTOhtmlElement: function(parentNodeChilds, values){ + //Create variable + var resultElements = {}; + + //Process each element of the array + for(elemID in parentNodeChilds){ + + //Determine object type + var objType = (parentNodeChilds[elemID].nodeType ? parentNodeChilds[elemID].nodeType : elemID); + + //Create object + var element = document.createElement(objType); + element.elemID = elemID; + + //Populate it with its informations + for(fieldName in parentNodeChilds[elemID]){ + if(fieldName == "nodeType"){ + //Do nothing + } + + //We perform children generation if required + else if(fieldName == "children"){ + //Call the function to get the element's childs and apply them + var elemChilds = this.convertJSONobjectTOhtmlElement(parentNodeChilds[elemID][fieldName], values); + for(childID in elemChilds){ + element.appendChild(elemChilds[childID]); + } + } + + //We check if it is innerHTML filling + else if(fieldName == "innerHTML"){ + element.innerHTML = parentNodeChilds[elemID][fieldName]; + } + + //We check if it is auto filling system which is called + else if (fieldName == "autofill"){ + //Check if required value exists in the data + if(values){ + if(values[parentNodeChilds[elemID][fieldName]]){ + //Then fill field with the value + element.innerHTML = values[parentNodeChilds[elemID][fieldName]]; + } + } + } + + //For other input, we use "setAttribute" + else{ + element.setAttribute(fieldName, parentNodeChilds[elemID][fieldName]); + } + } + + //Save element + resultElements[element.elemID] = element; + } + + //Return result + return resultElements; + }, + + /** + * Get and show a JSON template + * + * @param {Object} targetElem The target element where the template will be applied + * @param {String} templateURI URI pointing on the template + * @param {Object} additionalData Additionnal to pass to the template + * @param {function} afterParsingJSONtemplate What to do once JSON template is loaded + * @param {Boolean} cleanContener Specify wether the template contener has to be cleaned or not + * @return {Boolean} Flase if it fails + */ + getAndShowJSONtemplate: function(targetElem, templateURI, additionalData, afterParsingJSONtemplate, cleanContener){ + //Define template URL + var templateURL = ComunicWeb.__config.templatesURL + templateURI; + + //Define how to apply the template + var afterTemplateDownload = function(templateContent){ + //Decode JSON content + var JSONobject = JSON.parse(templateContent); + + //Check if parsing failed + if(!JSONobject){ + ComunicWeb.debug.logMessage("Parsing JSON failed with this file: " + templateURL); + return false; + } + + //Parse JSON object + var result = ComunicWeb.common.page.convertJSONobjectTOhtmlElement(JSONobject, additionalData); + + //Apply each result element + for(elem in result){ + targetElem.appendChild(result[elem]); + } + + //Perform next action if required + if(afterParsingJSONtemplate){ + afterParsingJSONtemplate(); + } + + //Everything OK + return true; + }; + + //Perform request + if(!ComunicWeb.common.network.getRequest(templateURL, true, afterTemplateDownload)) + //An error occured + return false; + } }; \ No newline at end of file diff --git a/assets/js/pages/login.js b/assets/js/pages/login.js index d01ffece..5a6f44ea 100644 --- a/assets/js/pages/login.js +++ b/assets/js/pages/login.js @@ -10,9 +10,40 @@ ComunicWeb.pages.login = { * * @param {Object} additionnalData Additionnal data passed in the method * @param {element} targetElement Where the template will be applied - * @returns {Boolean} False if it fails + * @returns {Boolean} False if it fails */ openLoginPage: function(additionnalData, targetElement){ - alert("login page to open !"); + //First, check if user is already logged in or not + if(ComunicWeb.user.userLogin.getUserLoginState() === true){ + //Log message + ComunicWeb.debug.logMessage("Couldn't open login page because user is already logged in !"); + + //Open home page + ComunicWeb.common.page.openPage("home"); + + //Quit page + return false; + } + + //Prepare additional data + var additionalData = {}; + + //Preparing next actions + var afterParsingTemplate = function(){ + //Change body class name + document.body.className = "login-page hold-transition"; + + //Enable iCheck + $(function () { + $('input').iCheck({ + checkboxClass: 'icheckbox_square-blue', + radioClass: 'iradio_square-blue', + increaseArea: '20%' // optional + }); + }); + }; + + //Apply template + ComunicWeb.common.page.getAndShowTemplate(targetElement, additionalData, "pages/login/loginPage.tpl", afterParsingTemplate, true); } }; \ No newline at end of file diff --git a/assets/templates/pages/login/loginPage.json b/assets/templates/pages/login/loginPage.json new file mode 100644 index 00000000..d78dbbb2 --- /dev/null +++ b/assets/templates/pages/login/loginPage.json @@ -0,0 +1,118 @@ +{ + "1":{ + "nodeType": "div", + "class": "login-box", + "children":{ + "0":{ + "nodeType": "div", + "class": "login-logo", + + "children": { + "0":{ + "nodeType": "a", + "href": "#", + "innerHTML": "Comunic" + } + } + }, + + "1":{ + "nodeType": "div", + "class": "login-box-body", + + "children":{ + "0":{ + "nodeType": "p", + "class": "login-box-msg", + "innerHTML": "Login to your Comunic account." + }, + + "1":{ + "nodeType": "form", + + "children":{ + "0":{ + "nodeType": "div", + "class": "form-group has-feedback", + + "children":{ + "0":{ + "nodeType": "input", + "type": "email", + "class": "form-control", + "placeholder": "Email", + "id": "account-email" + }, + + "1":{ + "nodeType": "span", + "class": "glyphicon glyphicon-envelope form-control-feedback" + } + } + }, + + "1":{ + "nodeType": "div", + "class": "form-group has-feedback", + + "children":{ + "0":{ + "nodeType": "input", + "type": "password", + "class": "form-control", + "placeholder": "Password", + "id": "account-password" + }, + + "1":{ + "nodeType": "span", + "class": "glyphicon glyphicon-lock form-control-feedback" + } + } + }, + + "2":{ + "nodeType": "div", + "class": "row", + + "children":{ + "0":{ + "nodeType": "div", + "class": "col-xs-8", + "children":{ + "0":{ + "nodeType": "div", + "class": "checkbox icheck", + + "children":{ + "0":{ + "nodeType": "label", + + "children":{ + + "0":{ + "nodeType": "input", + "type": "checkbox", + "id": "permanentLogin" + }, + + "1":{ + "nodeType": "text", + "innerHTML": " Remember me" + } + + } + } + } + } + } + } + } + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/assets/templates/pages/login/loginPage.tpl b/assets/templates/pages/login/loginPage.tpl new file mode 100644 index 00000000..c08681f2 --- /dev/null +++ b/assets/templates/pages/login/loginPage.tpl @@ -0,0 +1,37 @@ +
+ + + + +
+ + diff --git a/corePage/config/dev.config.php b/corePage/config/dev.config.php index e4d47f7f..1e9405e4 100644 --- a/corePage/config/dev.config.php +++ b/corePage/config/dev.config.php @@ -14,6 +14,7 @@ $config['CSSfiles'] = array( "%PATH_ASSETS%adminLTE/bootstrap/css/bootstrap.min.css", "%PATH_ASSETS%adminLTE/plugins/font-awesome/css/font-awesome.min.css", "%PATH_ASSETS%adminLTE/plugins/ionicons/css/ionicons.min.css", + "%PATH_ASSETS%adminLTE/plugins/iCheck/square/blue.css", "%PATH_ASSETS%adminLTE/dist/css/AdminLTE.min.css", "%PATH_ASSETS%adminLTE/dist/css/skins/_all-skins.min.css", @@ -26,6 +27,7 @@ $config['JSfiles'] = array( //Framewokr inclusions "%PATH_ASSETS%adminLTE/plugins/jQuery/jquery-2.2.3.min.js", "%PATH_ASSETS%adminLTE/plugins/jquery-ui/jquery-ui.min.js", + "%PATH_ASSETS%adminLTE/plugins/iCheck/icheck.min.js", //Functions schema "%PATH_ASSETS%js/common/functionsSchema.js",