mirror of
https://github.com/pierre42100/ComunicWeb
synced 2025-11-04 12:14:12 +00:00
Progress on login page
This commit is contained in:
Pierre
@@ -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){},
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
};
|
||||
@@ -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);
|
||||
}
|
||||
};
|
||||
118
assets/templates/pages/login/loginPage.json
Normal file
118
assets/templates/pages/login/loginPage.json
Normal 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"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
37
assets/templates/pages/login/loginPage.tpl
Normal file
37
assets/templates/pages/login/loginPage.tpl
Normal 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 -->
|
||||
|
||||
Reference in New Issue
Block a user