Progress on login page

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

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){
+                if(cacheResponse){
-                    ComunicWeb.network.cache[cacheEntryName] = xhrRequest.responseText;
+                    ComunicWeb.common.network.cache[cacheEntryName] = xhrRequest.responseText;
                 }
 
+                ComunicWeb.debug.logMessage("GET request: " + url + " Success (" + xhrRequest.status + ")");
+
                 //Call next action
                 GETnextAction(xhrRequest.responseText);
             }

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

assets/js/pages/login.js

@@ -13,6 +13,37 @@ ComunicWeb.pages.login = {
      * @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);
     }
 };

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": "<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"
+                                                            }
+
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

assets/templates/pages/login/loginPage.tpl

@@ -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 -->
+

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