Check login inputs

assets/js/common/formChecker.js

@@ -0,0 +1,76 @@
+/**
+ * Function to check data input in forms
+ * 
+ * @author Pierre HUBERT
+ */
+ComunicWeb.common.formChecker = {
+
+    /**
+     * Check an input
+     * 
+     * @param {elem} input The input element to check
+     * @param {Boolean} inFormGroup Specify wether the input is in a formgroup or not
+     * @return {Boolean} True or false depending of the validity of the field
+     */
+    checkInput: function(input, inFormGroup){
+        //Check input existence
+        if(!input){
+            //Error message
+            ComunicWeb.debug.logMessage("ComunicWeb.common.formChecker.checkInput requires at least on input !");
+            return false;
+        }
+
+        //Extract input type
+        var inputType = input.type;
+
+        //Prepare checking
+        var inputOK = true;
+
+        //TextInput
+        if(inputType == "text"){
+            inputOK = (input.value == "" ? false:true);
+        }
+
+        //MailInput
+        else if(inputType == "email"){
+            inputOK = input.value.match(/^[a-zA-Z0-9_.]+@[a-zA-Z0-9-]{1,}[.][a-zA-Z]{2,3}$/);
+        }
+
+        //Password input
+        else if(inputType == "password"){
+            inputOK = (input.value == "" ? false:true);
+        }
+
+        //Unsupported input type
+        else {
+            ComunicWeb.debug.logMessage("ComunicWeb.common.formChecker.checkInput input type '" + inputType + "' not supported !");
+            return false;
+        }
+
+        //If possible, change input state
+        if(inFormGroup){
+            //Retrieve parent node
+            var parentNode = input.parentNode;
+
+            //If there is no error, remove has-error attribute
+            if(inputOK){
+                if(parentNode.className.indexOf("has-error") != -1){
+                    //Remove has-error attribute
+                    parentNode.className = parentNode.className.replace("has-error", "");
+                }
+            }
+
+            //If there is an error, check the has-error attribute is present
+            if(!inputOK){
+                if(parentNode.className.indexOf("has-error") == -1){
+                    //Add has-error attribute
+                    parentNode.className = parentNode.className + " has-error";
+                }
+            }
+        }
+
+        //Return result
+        return inputOK;
+    }
+
+};

assets/js/common/functionsSchema.js

@@ -140,6 +140,25 @@ var ComunicWeb = {
             getAndShowJSONtemplate: function(targetElem, templateURI, additionalData, afterParsingJSONtemplate, cleanContener){},
         },
 
+        /**
+         * Functions to check data input in forms
+         */
+        formChecker: {
+            //TODO : implement
+        },
+
+        /**
+         * Notification system
+         */
+        notificationSystem: {
+            
+            /**
+             * Display a notification
+             */
+            showNotification: function(message, notifType, notifDuration, notifTitle){},
+
+        },
+
         /**
          * Network common requests
          */

assets/js/common/notifications.js

@@ -0,0 +1,38 @@
+/**
+ * Notification system
+ * 
+ * @author Pierre HUBERT
+ */
+
+ComunicWeb.common.notificationSystem = {
+
+    /**
+     * Display a notification
+     * 
+     * @param {String} message The message to show on the screen
+     * @param {String} notifType Specify the notification type (info, error, success)
+     * @param {Integer} notifDuration Optionnal, specify how much time the message will appear in seconds
+     * @param {String} notifTitle The title of the notification
+     */
+    showNotification: function(message, notifType, notifDuration, notifTitle){
+        
+        //Check if a notification type was specified
+        if(!notifType){
+            notifType = "info";
+        }
+
+        //Check if a notification duration was specified
+        if(!notifDuration){
+            notifDuration = 4;
+        }
+
+        //Check if a notification title was specified
+        if(!notifTitle){
+            notifTitle = "";
+        }
+
+        //DEV - show an alert while no notif system is implemented
+        alert("notif " + notifType + ": " + message);
+    }
+
+}

assets/js/pages/login.js

@@ -61,8 +61,24 @@ ComunicWeb.pages.login = {
      * @return {Boolean} False if it fails
      */
     loginSubmit: function(){
-        alert("Login");
+        //Get inputs
+        var usermail = document.getElementById("usermail"); //Usermail
+        var userpassword = document.getElementById("userpassword"); //Password
+        var rememberLogin = document.getElementById("rememberLogin"); //Remember login
 
-        //var overlay = ComunicWeb.common.page.showTransparentWaitSplashScreen();
+        //Check inputs
+        if(!(
+            ComunicWeb.common.formChecker.checkInput(usermail, true) && //Check usermail input
+            ComunicWeb.common.formChecker.checkInput(userpassword, true) //Check password input
+        )){
+           //Error notification
+           ComunicWeb.common.notificationSystem.showNotification("Please check what you've typed !", "error");
+
+           //Stop function execution
+           return false;
+        }
+       
+
+        var overlay = ComunicWeb.common.page.showTransparentWaitSplashScreen();
     },
 };

assets/templates/pages/login/loginPage.tpl

@@ -10,18 +10,18 @@
 
     <div id="loginForm">
       <div class="form-group has-feedback">
-        <input type="email" class="form-control" placeholder="Email" />
+        <input type="email" class="form-control" placeholder="Email" id="usermail" />
         <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
       </div>
       <div class="form-group has-feedback">
-        <input type="password" class="form-control" placeholder="Password" />
+        <input type="password" class="form-control" placeholder="Password" id="userpassword" />
         <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
+              <input type="checkbox" id="rememberLogin" /> Remember Me
             </label>
           </div>
         </div>

corePage/config/dev.config.php

@@ -45,6 +45,8 @@ $config['JSfiles'] = array(
     "%PATH_ASSETS%js/common/debug.js",
     "%PATH_ASSETS%js/langs/en.inc.js",
     "%PATH_ASSETS%js/common/page.js",
+    "%PATH_ASSETS%js/common/notifications.js",
+    "%PATH_ASSETS%js/common/formChecker.js",
 
     //User scripts
     "%PATH_ASSETS%js/user/loginTokens.js",