Progress on login page

This commit is contained in:
Pierre 2017-02-21 12:37:26 +01:00
parent 7ead57ce24
commit 59004555ec
7 changed files with 338 additions and 14 deletions

View File

@ -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){},
},
/**

View File

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

View File

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

View File

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

View File

@ -0,0 +1,118 @@
{
"1":{
"nodeType": "div",
"class": "login-box",
"children":{
"0":{
"nodeType": "div",
"class": "login-logo",
"children": {
"0":{
"nodeType": "a",
"href": "#",
"innerHTML": "<b>Comunic</b>"
}
}
},
"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"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

View File

@ -0,0 +1,37 @@
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Comunic</b></a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">Login to your Comunic account.</p>
<form>
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email" />
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox" /> Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->

View File

@ -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",