Added some basic input validation

platforms/android/app/src/main/assets/www/index.html

@@ -259,7 +259,7 @@
                             //'title':'${Artesano.Nombre}','esp': '${info}'
                             //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
                             //And puts this into the 'item' variable
-                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre.replace(/"/g, " ")}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
+                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre.replace(/"/g, " ")}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', red1: '${Artesano["Red Social 1"]}', red2: '${Artesano["Red Social 2"]}', ecom: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
                         <div class="title">${Artesano.Nombre}</div>
                     </ons-list-item>`);
 
@@ -364,14 +364,14 @@
                              });*/
 
                              for(var i=0; i<results.length; i++) {
-
+                                
                                  //if(Esp[num] in artesanos_json.) {}
                                  //results[i].Nombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
                                  ANombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
                                  Artesanos+=`${ANombre}|`
-                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["Email"]}|${results[i].Especificacion}|${results[i]["Tecnica"]}&&`
+                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["Email"]}|${results[i].Especificacion}|${results[i]["E-Commerce 1"]}|${results[i]["Red Social 1"]}|${results[i]["Red Social 2"]}|${results[i]["Tecnica"]}&&`
                                  //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
-                             }
+                                }
 
                              return {
                                  name: Esp[num],
@@ -400,17 +400,20 @@
                                      tel = lot[1],
                                      email = lot[2],
                                      esp = lot[3],
-                                     redes = lot[4],
-                                     tecnicas = lot[5];
+                                     ecom = lot[4],
+                                     red1 = lot[5];
+                                     red2 = lot[6];
+                                     tecnicas = lot[7]
+                                     console.log(lot)
 
-                                 listaArt += `<ons-item tappable onclick="myNavigator.pushPage('artesano.html', {data: {title:'${arts[i].replace(/"/g, " ")}', mun: '${mun}', tel: '${tel}', email: '${email}', esp: '${esp}', redes: '${redes}', tecnicas: '${tecnicas}' }} )" ><div class="center">`+ arts[i] +`</div></ons-item><br>`;
+                                 listaArt += `<ons-item tappable onclick="myNavigator.pushPage('artesano.html', {data: {title:'${arts[i].replace(/"/g, " ")}', mun: '${mun}', tel: '${tel}', email: '${email}', esp: '${esp}', red1: '${red1}', red2: '${red2}', ecom: '${ecom}', tecnicas: '${tecnicas}' }} )" ><div class="center">`+ arts[i] +`</div></ons-item><br>`;
                              }
 
                              if (Artesania.name == "Figuras y simbolos indigenas") {
                                  Artesania.name = "Figuras y símbolos indígenas";
                              } 
 
-                             console.log(Artesania.name);
+        
 
                              return ons.createElement(`
               <ons-list-item expandable tappable>
@@ -469,6 +472,11 @@
                 var inputarte = document.getElementById('searchartesania').value;
                 var inputmuni = document.getElementById('searchbarmunicipio').value;
                 var x = document.getElementsByClassName('artists');
+
+                //validating input so that its not as easy to attack
+                input = input_validation(input);
+                inputarte = input_validation(inputarte);
+                inputmuni = input_validation(inputmuni);
                 //just making sure everything is at the same format by taking out special characters, trimming it and putting it in lowercase (same thing will be done to the arguments it's being compared to later on)
                 //acento_replace(): it's a function I made that takes out any special characters of a word and changes them back to the plain ones (quitar acentos o cosas asi)
                 input = input.trim().toLowerCase();
@@ -551,7 +559,7 @@
                     for (i = 0; i < all_artesanos.length;i++){
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
-                        onclick="SNavigator.pushPage('artesano_s.html', { data: {title: '${all_artesanos[i].Nombre.replace(/"/g, " ")}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["Email"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
+                        onclick="SNavigator.pushPage('artesano_s.html', { data: {title: '${all_artesanos[i].Nombre.replace(/"/g, " ")}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["Email"]}', esp: '${all_artesanos[i].Especificacion}', red1: '${all_artesanos[i]["Red Social 1"]}', red2: '${all_artesanos[i]["Red Social 2"]}', ecom: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
                         <div>${all_artesanos[i].Nombre}</div>
                     </ons-list-item>`);
                         document.getElementById('results').appendChild(artesano);
@@ -587,9 +595,13 @@
                             tel = this.data.tel,
                             em = this.data.email,
                             esp = this.data.esp,
-                            redes = this.data.redes,
+                            red1 = this.data.red1,
+                            red2 = this.data.red2,
+                            ecom = this.data.ecom,
                             tecnicas = this.data.tecnicas;
 
+                            
+
                         //here the email is the string made from the start to where the '#' is.
                         
 
@@ -638,37 +650,43 @@
                             data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
                         }
 
-                        console.log("Redes: "+redes);
+                        
 
                         //Here it has to decide what to do depending on the links they give to their social media pages
                         //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
-                        //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
-                        //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
+                        
+                        
                         //If it's none of them then it will not display anything
-                        if(redes.includes("facebook")){
-
-                            console.log(redes.substring(1,redes.length-2));
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
+                        //First Social Media
+                        if(red1.includes("facebook")){
+                            data+='<a style="margin-right:10px;" href="'+ red1 + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;">';
                         }
-                        else if(redes.includes("instagram")){
-                            console.log(redes.substring(1,redes.length-2));
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
+                        else if(red1.includes("instagram")){
+                            data+='<a style="margin-right:10px;" href="'+ red1 + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;">';
                         }
-                        else if(redes.includes("myspace")){
-                            console.log(redes.substring(1,redes.length-2));
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
+                        else if(red1.includes("myspace")){
+                            data+='<a style="margin-right:10px;" href="'+ red1 + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;">';
                         }
-                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
-                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
-                            redes = redes.substr(0, redes.length-1);
-                            console.log(redes);
-                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
+
+                        //Second Social Media
+                        if(red2.includes("facebook")){
+                            data+='<a style="margin-right:10px;" href="'+ red2 + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;">';
+                        }
+                        else if(red2.includes("instagram")){
+                            data+='<a style="margin-right:10px;" href="'+ red2 + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;">';
                         }
-                        else if(redes.includes("#") || redes.includes("mailto")){
-                            console.log("tiene un disparate");
-                        } else {
-                            console.log("no tiene nada");
+                        else if(red2.includes("myspace")){
+                            data+='<a style="margin-right:10px;" href="'+ red2 + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;">';
                         }
+                        
+                        //E-commerce 
+                        if ((ecom.includes(".org") || ecom.includes(".com")) && !ecom.includes("mailto")){
+                            ecom = ecom.substr(ecom.indexOf("#")+1,ecom.length);
+                            ecom = ecom.substr(0, ecom.length-1);
+                            
+                            data+='<a href="'+ ecom + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;">';
+                        }
+                        
 
                         //This is the part that allows eveything (data) to be displayed
                         document.getElementById("all").innerHTML = `${data}`;
@@ -701,7 +719,9 @@
                             tel = this.data.tel,
                             em = this.data.email,
                             esp = this.data.esp,
-                            redes = this.data.redes,
+                            red1 = this.data.red1,
+                            red2 = this.data.red2,
+                            ecom = this.data.ecom,
                             tecnicas = this.data.tecnicas;
 
                         //here the email is the string made from the start to where the '#' is.
@@ -711,6 +731,11 @@
                         //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
                         //but if theres only one then you just write it into the page
                         if(esp.trim() != ""){
+
+                            if(esp.includes("Figuras y simbolos indigenas")) {
+                                esp = esp.replace("Figuras y simbolos indigenas", "Figuras y símbolos indígenas")
+                            }
+
                             if(esp.includes(";", 0)){
                                 esp=esp.replace(/;/g,", ");
                                 data+='Tipos de artesanías: '+esp+'<br>';
@@ -746,37 +771,42 @@
                             data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
                         }
 
-                        console.log("Redes: "+redes);
+                        
 
                         //Here it has to decide what to do depending on the links they give to their social media pages
                         //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
                         //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
                         //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
                         //If it's none of them then it will not display anything
-                        if(redes.includes("facebook")){
-
-                            console.log(redes.substring(1,redes.length-2));
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
+                        if(red1.includes("facebook")){
+                            data+='<a style="margin-right:10px;" href="'+ red1 + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;">';
+                        }
+                        else if(red1.includes("instagram")){
+                            data+='<a style="margin-right:10px;" href="'+ red1 + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;">';
                         }
-                        else if(redes.includes("instagram")){
-                            console.log(redes.substring(1,redes.length-2));
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
+                        else if(red1.includes("myspace")){
+                            data+='<a style="margin-right:10px;" href="'+ red1 + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;">';
+                        }
+
+                        //Second Social Media
+                        if(red2.includes("facebook")){
+                            data+='<a style="margin-right:10px;" href="'+ red2 + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;">';
                         }
-                        else if(redes.includes("myspace")){
-                            console.log(redes.substring(1,redes.length-2));
-                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
+                        else if(red2.includes("instagram")){
+                            data+='<a style="margin-right:10px;" href="'+ red2 + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;">';
                         }
-                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
-                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
-                            redes = redes.substr(0, redes.length-1);
-                            console.log(redes);
-                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
+                        else if(red2.includes("myspace")){
+                            data+='<a style="margin-right:10px;" href="'+ red2 + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;">';
                         }
-                        else if(redes.includes("#") || redes.includes("mailto")){
-                            console.log("tiene un disparate");
-                        } else {
-                            console.log("no tiene nada");
+
+
+                        if((ecom.includes(".org") || ecom.includes(".com")) && !ecom.includes("mailto")){
+                            ecom = ecom.substr(ecom.indexOf("#")+1,ecom.length);
+                            ecom = ecom.substr(0, ecom.length-1);
+
+                            data+='<a href="'+ ecom + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;">';
                         }
+                        
 
                         //This is the part that allows eveything (data) to be displayed
                         document.getElementById("all2").innerHTML = `${data}`;
@@ -840,7 +870,7 @@
                 </div>
                 <br><br>
                 <div id="button" style="text-align: center">
-                <button onclick="redirect()">Pasar a la página de eventos</button>
+                <ons-button onclick="redirect()" modifier="large" style="background-color: #00abc1;"> Pasar a la página de eventos </ons-button>
                 </div>
                 <br><br>
                 <div id="Mensaje">

platforms/android/app/src/main/assets/www/js/index.js

@@ -28,7 +28,12 @@ var app = {
     // 'pause', 'resume', etc.
     onDeviceReady: function() {
 
-        if (ons.platform.isIPhone()) { 
+        //A list of device models that have notches that interfere with page content.
+        //OnsenUi has the isIPhoneX boolean value, however, it does not detect IPhone 11 or 12 types. 
+        var notchDevices = ["iPhone12,1", "iPhone12,3", "iPhone12,5", "iPhone13,1", "iPhone13,2", "iPhone13,3", "iPhone13,4"]
+
+
+        if (ons.platform.isIPhoneX() || notchDevices.includes(device.model)) { 
             document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
             document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
         }

platforms/android/app/src/main/assets/www/js/saveLocal.js

@@ -1,5 +1,11 @@
-localStorage.setItem("RENGLONES", loadFile("https://artesaniaspr.website/renglones2.json"));
-localStorage.setItem("AZAR", loadFile("https://artesaniaspr.website/azar.json"));
+try {
+  localStorage.setItem("RENGLONES", loadFile("https://artesaniaspr.website/renglones2.json"));
+  localStorage.setItem("AZAR", loadFile("https://artesaniaspr.website/azar.json"));
+  
+} catch {
+  console.log("Files not found")
+}
+
 let renglones = JSON.parse(window.localStorage.getItem("RENGLONES"));
 
 //A synchronous request to the server 
@@ -18,7 +24,7 @@ function loadFile(filePath) {
 //Checks if date has changed in the server or if number or renglones has been shortened (since local storage can be erased when the device runs out of memory)
 function checkDate() {
   var date = loadFile("https://artesaniaspr.website/date.txt");
-  if (localStorage.getItem("DATE") == null || localStorage.getItem("DATE") != date || localStorage.length < 17) {
+  if (localStorage.getItem("DATE") == null || localStorage.getItem("DATE") != date || localStorage.length < 18) {
   localStorage.setItem("DATE", date);
     return false;
   }

platforms/android/app/src/main/assets/www/js/searchfunctions.js

@@ -280,5 +280,20 @@ function acento_replace(string){
             }
         }
     }
-    return string;
+    return string;   
+}
+function input_validation(input){
+    if (input.length > 40){
+        input = "";
+        return input;
+    }
+    else if (input.search('<') != -1){
+        input = "";
+        return input;
+    }
+    else if (input.search('>') != -1){
+    	input = "";
+    	return input;
+    }
+    return input;
 }

www/index.html

@@ -472,6 +472,12 @@
                 var inputarte = document.getElementById('searchartesania').value;
                 var inputmuni = document.getElementById('searchbarmunicipio').value;
                 var x = document.getElementsByClassName('artists');
+
+                //validating input so that its not as easy to attack
+                //no acepta strings mayores que 40 caracteres y no acepta '>' o '<' en el string
+                input = input_validation(input);
+                inputarte = input_validation(inputarte);
+                inputmuni = input_validation(inputmuni);
                 //just making sure everything is at the same format by taking out special characters, trimming it and putting it in lowercase (same thing will be done to the arguments it's being compared to later on)
                 //acento_replace(): it's a function I made that takes out any special characters of a word and changes them back to the plain ones (quitar acentos o cosas asi)
                 input = input.trim().toLowerCase();

www/js/searchfunctions.js

@@ -280,5 +280,20 @@ function acento_replace(string){
             }
         }
     }
-    return string;
+    return string;   
+}
+function input_validation(input){
+    if (input.length > 40){
+        input = "";
+        return input;
+    }
+    else if (input.search('<') != -1){
+        input = "";
+        return input;
+    }
+    else if (input.search('>') != -1){
+    	input = "";
+    	return input;
+    }
+    return input;
 }