1 files changed, 159 insertions, 85 deletions

diff --git a/js/messaging.js b/js/messaging.js
index 2b5c065..187df17 100644
--- a/js/messaging.js
+++ b/js/messaging.js
@@ -51,7 +51,7 @@ function loadDirectory() {
             localforage.getItem("directory").then((stored_directory) => {
                 if (stored_directory === null) {
                     // If unable, set directory to null (so other functions know that we don't have it)
-										UIAlert( D("nameDirectoryNotSet"), "loadDirectory(): stored_directory === null" );
+					UIAlert( D("nameDirectoryNotSet"), "loadDirectory(): stored_directory === null" );
                     directory = null;
                     // Disable send button
                     document.getElementById("msg-send").disabled = true;
@@ -66,7 +66,7 @@ function loadDirectory() {
 }
 
 function populateAutocomplete() {
-    let elems = document.querySelectorAll('.autocomplete-fullname');
+    let elems = document.querySelectorAll(".autocomplete-fullname");
     // če se uporablja globalna var directory, ki je shranjena kot objekt (vedno shranjen kot reference), bo pri let x=y x le pointer na object y
     // in se bo spremenil z spremembo "originala". spodnja stvar itak ni preveč efficent, loop čez vseh 7000 ljudi bi lahko delal težave...
     // kakšen Object.keys bi bila boljša varianta ampak raje napišem tale komentar... idk, to se mi je zdelo uporabno ampak sedaj obžalujem
@@ -75,16 +75,19 @@ function populateAutocomplete() {
     for (let variableKey in autocomplete_entries) {
         autocomplete_entries[variableKey] = null;
     }
+
     M.Autocomplete.init(elems, {
         data: autocomplete_entries,
         onAutocomplete: validateName,
         minLength: 0
     });
+
     if(window.location.hash.length > 1) {
-    	document.getElementById("full-name").value = decodeURIComponent(window.location.hash.substring(1));
+    	$("#full-name").val(decodeURIComponent(window.location.hash.substring(1)));
     } else {
-    	document.getElementById("full-name").value = getUrlParameter("m");
+    	$("#full-name").val(getUrlParameter("m"));
     }
+
     M.updateTextFields();
     validateName();
 }
@@ -133,7 +136,7 @@ async function loadMessages(force_refresh = true, katera = 0) {
                 success: (data) => {
                     // If data is null, the request failed
                     if (data === null) {
-												UIAlert( D("requestFailed") );
+						UIAlert( D("requestFailed") );
                         setLoading(false);
                     } else {
                         // Save messages & populate view
@@ -147,10 +150,9 @@ async function loadMessages(force_refresh = true, katera = 0) {
                 },
 
                 error: () => {
-										UIAlert( D("errorFetchingMessages") );
+					UIAlert( D("errorFetchingMessages") );
                     setLoading(false);
                 }
-
             })
         } else {
             displayData();
@@ -187,16 +189,15 @@ async function loadMsg(id) {
             success: (data) => {
                 // If data is null, the request failed
                 if (data === null) {
-										UIAlert( D("unableToReceiveTheMessage") + " " + D("requestFailed") );
-                    setLoading(false);
+					UIAlert( `${D("unableToReceiveTheMessage")} ${D("requestFailed")}` );
                 } else {
                     displayMessage(id, data);
-                    setLoading(false);
                 }
+                setLoading(false);
             },
 
             error: () => {
-								UIAlert( D("unableToReceiveTheMessage") + " " + D("noInternetConnection") );
+				UIAlert( `${D("unableToReceiveTheMessage")} ${D("noInternetConnection")}` );
                 setLoading(false);
             }
 
@@ -231,16 +232,15 @@ async function deleteMsg(id) {
             success: (data) => {
                 // If data is null, the request failed
                 if (data === null) {
-										UIAlert( D("unableToDeleteTheMessage") + " " + D("requestFailed") );
-                    setLoading(false);
+					UIAlert( `${D("unableToDeleteTheMessage")} ${D("requestFailed")}` );
                 } else {
                     document.getElementById("msg_box-" + id).remove();
-                    setLoading(false);
                 }
+                setLoading(false);
             },
 
             error: () => {
-								UIAlert( D("unableToDeleteTheMessage") + " " + D("noInternetConnection") );
+				UIAlert( `${D("unableToDeleteTheMessage")} ${D("noInternetConnection")}` );
                 setLoading(false);
             }
 
@@ -250,50 +250,90 @@ async function deleteMsg(id) {
 
 function displayMessage(id, data) {
     if(data["telo"].substring(0, 21) == "<!-- beziapp-e2eemsg-") {
-	    	var datatodecrypt = data["telo"].substring(29+Number(data["telo"].substring(21, 25)), data["telo"].length-6) // length-6 da zbrišemo zadnji </div>
-		var randomencdivid = Math.floor(Math.random() * 9999).toString().padStart(4, '0');
-		var msgcontent = "<div id='beziapp-msg-e2ee-form-"+randomencdivid+"'>"+D("thisMessageWasEncrypted")
-			+"<input type=password autocomplete=new-password id=beziapp-msg-e2ee-password-"+randomencdivid+" placeholder='"+S("password")+" ...'><button type=button"
-			+"value=Decrypt! class='btn waves-effect waves-light' onclick=document.getElementById('beziapp-msg-e2ee-content-"+randomencdivid+"').innerHTML="
-			+"filterXSS(sjcl.decrypt(document.getElementById('beziapp-msg-e2ee-password-"+randomencdivid+"').value,document.getElementById('beziapp-msg-e2ee-content-"
-			+randomencdivid+"').innerHTML));document.getElementById('beziapp-msg-e2ee-content-"+randomencdivid+"').hidden=false;document."
-			+"getElementById('beziapp-msg-e2ee-form-"+randomencdivid+"').hidden=true >"+S("decrypt")+"!</button></div><div id='beziapp-msg-e2ee-content-"+randomencdivid+"' hidden='hidden'>"
-			+datatodecrypt+"</div>";
-	    document.getElementById("msg_body-" + id).innerHTML = msgcontent;
+	    var datatodecrypt = data["telo"].substring(29 + Number(data["telo"].substring(21, 25)), data["telo"].length - 6) // length-6 da zbrišemo zadnji </div>
+        var randomencdivid = Math.floor(Math.random() * 9999).toString().padStart(4, "0");
+
+        var msgcontent = `
+        <div id='beziapp-msg-e2ee-form-${randomencdivid}'>
+            ${D("thisMessageWasEncrypted")}
+            <input type="password" autocomplete="new-password" id="beziapp-msg-e2ee-password-${randomencdivid}" placeholder="${S("password")} ...">
+            <button
+                type="button"
+                value="Decrypt"
+                class="btn waves-effect waves-light"
+                onclick="
+                    $('#beziapp-msg-e2ee-content-${randomencdivid}').html(
+                        filterXSS(
+                            sjcl.decrypt(
+                                $('#beziapp-msg-e2ee-password-${randomencdivid}').val(),
+                                $('#beziapp-msg-e2ee-content-${randomencdivid}').html()
+                            )
+                        )
+                    );
+                    $('#beziapp-msg-e2ee-content-${randomencdivid}').show();
+                    $('#beziapp-msg-e2ee-form-${randomencdivid}').hide();
+                "
+            >
+                ${S("decrypt")}!
+            </button>
+        </div>
+        <div id="beziapp-msg-e2ee-content-${randomencdivid}" hidden>
+            ${datatodecrypt}
+        </div>
+        `
+	    $(`#msg_body-${id}`).html(msgcontent);
     } else {
-    	document.getElementById("msg_body-" + id).innerHTML = filterXSS(data["telo"]);
+        $(`#msg_body-${id}`).html(filterXSS(data["telo"]));
     }
 }
 
 // Function for displaying data
 function displayData() {
-    let msg_list = document.getElementById("msg-list");
-    msg_list.innerHTML = "";
+    let msg_list = $("#msg-list");
+    msg_list.html("");
     messages.forEach(element => {
         if (element["zadeva"].substr(0, 14) != "beziapp-ctlmsg") {
-            msg_list.innerHTML += '<div class="col s12 m6" id="msg_box-' +
-                filterXSS(element["id"]) +
-                '"><div class="card blue-grey darken-1"><div class="card-content white-text"><span class="card-title">' +
-		filterXSS(element["zadeva"]) +
-                '</span><p id="msg_body-' +
-                filterXSS(element["id"]) +
-                '"><button class="btn waves-effect waves-light" onclick=loadMsg("' +
-                filterXSS(element["id"]) +
-                '"); type="submit">Load message body<i class="material-icons right">system_update</i></button></p></div><div class="card-action"><a href=javascript:deleteMsg("' +
-                filterXSS(element["id"]) +
-                '");><i class="material-icons">delete</i></a><a href=\'javascript:document.getElementById("full_name").value="' +
-                filterXSS(element["posiljatelj"]) +
-                '";document.getElementById("msg_subject").value="Re: ' +
-                filterXSS(element["zadeva"]) +
-                '";M.updateTextFields();document.getElementById("navigation-main").scrollIntoView();\'><i class="material-icons">reply</i></a>' +
-                filterXSS(element["posiljatelj"]) + " &raquo; " + filterXSS(element["datum"]["dan"]) + ". " + filterXSS(element["datum"]["mesec"]) + ". " + filterXSS(element["datum"]["leto"]) + " at " +
-                filterXSS(element["cas"]["ura"]) + ":" + filterXSS(element["cas"]["minuta"]) +
-                '</div></div></div>';
+            msg_list.append(`
+                <div class="col s12 m6" id="msg_box-${filterXSS(element["id"])}">
+                    <div class="card blue-grey darken-1">
+                        <div class="card-content white-text">
+                            <span class="card-title">
+                                ${filterXSS(element["id"])}
+                            </span>
+                            <p id="msg_body-${filterXSS(element["id"])}">
+                                <button
+                                    class="btn waves-effect waves-light"
+                                    onclick="loadMsg('${filterXSS(element["id"])}')"
+                                    type="submit"
+                                >
+                                    Load message body
+                                    <i class="material-icons right">system_update</i>
+                                </button>
+                            <p>
+                        </div>
+                        <div class="card-action">
+                            <a onclick="deleteMsg('${filterXSS(element["id"])}')">
+                                <i class="material-icons">delete</i>
+                            </a>
+                            <a onclick="
+                                $('#full_name').val('${filterXSS(element["posiljatelj"])}');
+                                $('#msg_subject').val('Re: ${filterXSS(element["zadeva"])}');
+                                M.updateTextFields();
+                                $('#navigation-main').scrollIntoView();
+                                "
+                            >
+                                <i class="material-icons">reply</i>
+                            </a>
+                            ${filterXSS(element["posiljatelj"])} &raquo; ${filterXSS(element["datum"]["dan"])}. ${filterXSS(element["datum"]["mesec"])}. ${filterXSS(element["datum"]["leto"])} at ${filterXSS(element["cas"]["ura"])} : ${filterXSS(element["cas"]["minuta"])}
+                        </div>
+                    </div>
+                </div>
+            `);
 	}
     });
-    document.getElementById("storage-bar").hidden = false;
-    document.getElementById("storage-progressbar").style.width = Number(Number(messages.length/120)*100).toFixed(2)+"%";
-    document.getElementById("storage-desc").innerHTML = messages.length+"/120 "+s("messages")+" "+document.getElementById("storage-progressbar").style.width;
+    $("#storage-bar").show();
+    $("#storage-progressbar").width(Number(Number(messages.length / 120) * 100).toFixed(2) + "%");
+    $("#storage-desc").html( `${messages.length}/120 ${s("messages")} ${$("#storage-progressbar").width()}`);
 }
 
 async function sendMessage(recipient_number, subject, body) {
@@ -324,12 +364,12 @@ async function sendMessage(recipient_number, subject, body) {
 
             type: "POST",
             success: () => {
-                // we CAN'T know wether the mesgg was delievered
-								UIAlert(D("messageWasProbablySent"));
+                // we CAN'T know wether the message was delievered
+				UIAlert(D("messageWasProbablySent"));
                 setLoading(false);
             },
             error: () => {
-								UIAlert(D("errorSendingMessage"), D("noInternetConnection"));
+				UIAlert(D("errorSendingMessage"), D("noInternetConnection"));
                 setLoading(false);
             }
         })
@@ -341,11 +381,11 @@ async function validateName() {
         if ($("#full-name").val() in directory) {
             $("#full-name").addClass("valid");
             $("#full-name").removeClass("invalid");
-            document.getElementById("msg-send").disabled = false;
+            $("#msg-send").prop("disabled", false);
         } else {
             $("#full-name").addClass("invalid");
             $("#full-name").removeClass("valid");
-            document.getElementById("msg-send").disabled = true;
+            $("#msg-send").prop("disabled", true);
         }
     }
 }
@@ -362,17 +402,33 @@ function setupEventListeners() {
             // setting up the reader
             let reader = new FileReader();
             reader.readAsDataURL(file); // this is reading as data url
+
             // here we tell the reader what to do when it's done reading...
             reader.onload = readerEvent => {
-                additionalstufftoaddtomessage += '<br><img src="' + readerEvent.target.result + '" />'; // this is the content!
-                if(document.getElementById("msg-added-image").innerHTML.length > 1) {
-			document.getElementById("msg-added-image").innerHTML += '<img style=width:20mm src="' + readerEvent.target.result + '" />'; // this is the content!
-		} else {
-			document.getElementById("msg-added-image").innerHTML = "<input type=button value='"+S("removeImages")+"' class='btn waves-effect waves-light' "
-			+"onclick=additionalstufftoaddtomessage='';document.getElementById('msg-added-image').innerHTML='' /><br>"+D("largeImagesNote")+"<br>"+S("attachedImages")+":<br><img style=width:20mm "
-			+"src='"+readerEvent.target.result+"' />"; // ravno obratni narekovaji
-		}
-		UIAlert(D("imageAddedAsAnAttachment"));
+                additionalstufftoaddtomessage += `<br><img src="${readerEvent.target.result}" />`; // this is the content!
+                if ($("#msg-added-image").html().length > 1) {
+                    $("#msg-added-image").append(`<img style="width: 20mm" src="${readerEvent.target.result}" />`);
+		        } else {
+                    $("#msg-added-image").html(`
+                        <input
+                            type="button"
+                            value="${S("removeImages")}"
+                            class="btn waves-effect waves-light"
+                            onclick="
+                                additionalstufftoaddtomessage = '';
+                                $('#msg-added-image').html('');
+                            "
+                        />
+                        <br>
+                        ${D("largeImagesNote")}
+                        <br>
+                        ${S("attachedImages")}:
+                        <br>
+                        <img style="width:20mm" src="${readerEvent.target.result}" />
+                    `);
+                    // ravno obratni narekovaji
+		        }
+		        UIAlert(D("imageAddedAsAnAttachment"));
             }
         }
         input.click();
@@ -384,30 +440,48 @@ function setupEventListeners() {
     // Button to send message
     $("#msg-send").click(() => {
         localforage.getItem("directory").then(function (value) {
-            var msgcontent = document.getElementById("msg-body").value + additionalstufftoaddtomessage;
-            var msgsubject = document.getElementById("msg-subject").value;
-	    if(document.getElementById("msg-e2ee-pass").hidden == false) {
-		var randomencdivid = Math.floor(Math.random() * 9999).toString().padStart(4, '0');
-		var addrparts = window.location.href.split("/"); // engleski
-		msgcontent = "<script src='"+addrparts[0]+"//"+addrparts[2]+"/js/lib/sjcl.js'></script><div id='beziapp-msg-e2ee-form-"+randomencdivid+"'>This message was encrypted by BežiApp."
-			+"<input type=password autocomplete=new-password id=beziapp-msg-e2ee-password-"+randomencdivid+" placeholder='Enter password ...'><input type=button value=Decrypt! onclick="
-			+"document.getElementById('beziapp-msg-e2ee-content-"+randomencdivid+"').innerHTML=sjcl.decrypt(document.getElementById('beziapp-msg-e2ee-password-"
-			+randomencdivid+"').value,document.getElementById('beziapp-msg-e2ee-content-"+randomencdivid+"').innerText);document.getElementById('beziapp-msg-e2ee-content-"+randomencdivid
-			+"').hidden=false;document.getElementById('beziapp-msg-e2ee-form-"+randomencdivid+"').hidden=true ></div><div id='beziapp-msg-e2ee-content-"+randomencdivid+"' hidden='hidden'>";
-		msgcontent = "<!-- beziapp-e2eemsg-"+msgcontent.length.toString().padStart(4, '0')+" -->"+msgcontent
-			+sjcl.encrypt(document.getElementById("msg-e2ee-pass-input").value, document.getElementById("msg-body").value)+"</div>";
-	    }
-            sendMessage(value[document.getElementById("full-name").value], msgsubject,
-                htmlEncode(msgcontent));
-            document.getElementById("msg-body").value = "";
-            document.getElementById("full-name").value = "";
-            document.getElementById("msg-subject").value = "";
-            document.getElementById("msg-send").disabled = true;
+            var msgcontent = $("#msg-body").val() + additionalstufftoaddtomessage;
+            var msgsubject = $("#msg-subject").val();
+	        if ($("#msg-e2ee-pass").prop("hidden") !== true) {
+		        var randomencdivid = Math.floor(Math.random() * 9999).toString().padStart(4, "0");
+                var addrparts = window.location.href.split("/"); // engleski
+                
+                msgcontent = `
+                    <script src="${addrparts[0]}//${addrparts[2]}/js/lib/sjcl.js"></script>
+                    <div id="beziapp-msg-e2ee-form-${randomencdivid}">
+                        This message was encrypted by BežiApp.
+                        <input type="password" autocomplete="new-password" id="beziapp-msg-e2ee-password-${randomencdivid}" placeholder="Enter password ...">
+                        <input type="button" value="Decrypt" onclick="
+                            $('#beziapp-msg-e2ee-content-${randomencdivid}').html(
+                                sjcl.decrypt(
+                                    $('#beziapp-msg-e2ee-password-${randomencdivid}').val(),
+                                    $('beziapp-msg-e2ee-content-${randomencdivid}').text()
+                                )
+                            );
+                            $('#beziapp-msg-e2ee-content-${randomencdivid}').show();
+                            $('#beziapp-msg-e2ee-form-${randomencdivid}').hide();
+                            "
+                        >
+                    </div>
+                    <div id="beziapp-msg-e2ee-content-${randomencdivid}" hidden>
+                        <!-- beziapp-e2eemsg-${msgcontent.length.toString().padStart(4, "0")} -->
+                        ${msgcontent}
+                        ${sjcl.encrypt($("#msg-e2ee-pass-input").val(), $("#msg-body").val())}
+                    </div>
+                `
+	        }
+            sendMessage(value[$("#full-name").val()], msgsubject, htmlEncode(msgcontent));
+            $("#msg-body").val("");
+            $("#full-name").val("");
+            $("#msg-subject").val("");
+            $("#msg-send").prop("disabled", true);
             additionalstufftoaddtomessage = "";
-	    document.getElementById("msg-added-image").innerHTML = "";
-	    document.getElementById("msg-e2ee-pass").hidden = true;
+
+	        $("#msg-added-image").html("");
+            $("#msg-e2ee-pass").hide();
+            
         }).catch(function (err) {
-						UIAlert( D("unableToReadDirectory") + " " + D("messageCouldNotBeSend"), "45245" );
+			UIAlert( `${D("unableToReadDirectory")} ${D("messageCouldNotBeSend")}`, "45245" );
             console.log(err);
         });
     });