5 files changed, 697 insertions, 666 deletions

diff --git a/assets/js/lang/bundle.js b/assets/js/lang/bundle.js
index 7e269b0..6c53d94 100644
--- a/assets/js/lang/bundle.js
+++ b/assets/js/lang/bundle.js
@@ -290,6 +290,7 @@ var langstrings = {
         theme: "theme",
         themeLight: "light theme (default)",
         themeDark: "dark theme",
+        themeNight: "night theme",
         selectTheme: "select a theme",
         themeSet: "theme set, open another page for the changes to take effect",
         errorReportingSet: "error reporting preference set",
@@ -485,6 +486,7 @@ var langstrings = {
         theme: "izgled",
         themeLight: "svetel izgled (privzeto)",
         themeDark: "temen izgled",
+        themeNight: "nočni izgled",
         themeSet: "izgled nastavljen, odprite neko drugo stran da se spremembe uveljavijo",
         selectTheme: "izberite željen izgled",
         errorReportingSet: "nastavitev pošiljanja napak izbrana",
diff --git a/assets/js/lib/themes.js b/assets/js/lib/themes.js
index 14ef436..75dedfd 100644
--- a/assets/js/lib/themes.js
+++ b/assets/js/lib/themes.js
@@ -25,7 +25,7 @@ const THEME_COLOR_SCHEMES = {
         "color-divider": "rgba(224, 224, 224, 1)",
 
         "color-btn-flat": "rgba(52, 52, 52, 1)",
-        "color-btn-flat-disabled": "rgba(178, 178, 178, 1)",
+        "color-btn-flat-disabled": "rgba(178, 178, 178, 1)"
 
     },
     dark: {
@@ -54,7 +54,35 @@ const THEME_COLOR_SCHEMES = {
         "color-divider": "rgba(80, 80, 80, 1)",
 
         "color-btn-flat": "rgba(178, 178, 178, 1)",
-        "color-btn-flat-disabled": "rgba(52, 52, 52, 1)",
+        "color-btn-flat-disabled": "rgba(52, 52, 52, 1)"
+    },
+    black: {
+        "color-primary": "rgba(0, 79, 51, 1)",
+        "color-secondary": "rgba(0, 94, 61, 1)",
+        "color-accent": "rgba(28, 107, 79, 1)",
+        "color-primary-light": "rgba(0, 77, 2, 1)", // it's not really light anymore, is it?
+        "color-invalid": "rgba(138, 0, 0, 1)",
+        "color-primary-transparent": "rgba(0, 79, 51, 0.3)",
+
+        "background-color": "rgba(0, 0, 0, 1)",
+        "background-accent": "rgba(0, 38, 18, 0.2)",
+        "background-accent-1": "rgb(20, 33, 25, 1)",
+
+        "color-header-bold": "rgba(255, 255, 255, 1)",
+        "color-header-span": "rgba(255, 255, 255, 1)",
+
+        "color-text": "rgba(189, 189, 189, 1)",
+        "color-text-light": "rgba(160, 160, 160, 1)",
+        "color-label-text": "rgba(158, 158, 158, 1)",
+        "color-table-hover": "rgba(43, 43, 43, 0.5)",
+
+        "color-sidenav-background": "rgba(0, 0, 0, 1)",
+        "color-sidenav-text": "rgba(189, 189, 189, 1)",
+        "color-sidenav-header": "rgba(189, 189, 189, 0.54)",
+        "color-divider": "rgba(50, 50, 50, 1)",
+
+        "color-btn-flat": "rgba(178, 178, 178, 1)",
+        "color-btn-flat-disabled": "rgba(52, 52, 52, 1)"
     }
 }
 
diff --git a/assets/js/messaging.js b/assets/js/messaging.js
index dba57ef..305b355 100644
--- a/assets/js/messaging.js
+++ b/assets/js/messaging.js
@@ -6,34 +6,34 @@ const ENCRYPTED_MESSAGE_REGEX = /<!-- ba-e2eemsg-(\d{4}) -->(\S+?)<!-- end-msg -
 // "Global" object for name directory and messages
 var directory = null;
 var messages = {
-    "0": [],
-    "1": [],
-    "2": []
+	"0": [],
+	"1": [],
+	"2": []
 }
 var current_tab = 0;
 
 async function checkLogin() {
-    localforage.getItem("logged_in").then(function (value) {
-        // This code runs once the value has been loaded
-        // from the offline store.
-        if (value !== true) {
-            window.location.replace("/index.html");
-        }
-    }).catch(function (err) {
-        // This code runs if there were any errors
-        console.log(err);
-    });
+	localforage.getItem("logged_in").then(function (value) {
+		// This code runs once the value has been loaded
+		// from the offline store.
+		if (value !== true) {
+			window.location.replace("/index.html");
+		}
+	}).catch(function (err) {
+		// This code runs if there were any errors
+		console.log(err);
+	});
 }
 
 // -----------HTML HELPERS-----------
 function htmlEncode(value) {
-    // Create a in-memory element, set its inner text (which is automatically encoded)
-    // Then grab the encoded contents back out. The element never exists on the DOM.
-    return $("<textarea/>").text(value).html();
+	// Create a in-memory element, set its inner text (which is automatically encoded)
+	// Then grab the encoded contents back out. The element never exists on the DOM.
+	return $("<textarea/>").text(value).html();
 }
 
 function htmlDecode(value) {
-    return $("<textarea/>").html(value).text();
+	return $("<textarea/>").html(value).text();
 }
 // ---------------------------------
 
@@ -97,302 +97,302 @@ async function loadDirectory() {
 }
 
 function populateAutocomplete() {
-    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
-    // samo guglal sem "copying an object js"
-    let autocomplete_entries = Object.assign({}, directory);
-    for (let variableKey in autocomplete_entries) {
-        autocomplete_entries[variableKey] = null;
-    }
-
-    M.Autocomplete.init(elems, {
-        data: autocomplete_entries,
-        onAutocomplete: validateName,
-        minLength: 0
-    });
-
-    $(document).ready(function () {
-        if (window.location.hash.length > 1 && !window.location.hash.substring(1).startsWith("beziapp")) {
-            var hashValue = decodeURIComponent(window.location.hash.substring(1));
-            $("#full-name").val(hashValue);
-            if (hashValue in directory) {
-                $("#msg-send").removeAttr("disabled");
-            }
-            $("#beziapp-new-message").modal();
-            $("#beziapp-new-message").modal("open"); 
-        }
-    });
-
-    M.updateTextFields();
-    validateName();
+	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
+	// samo guglal sem "copying an object js"
+	let autocomplete_entries = Object.assign({}, directory);
+	for (let variableKey in autocomplete_entries) {
+		autocomplete_entries[variableKey] = null;
+	}
+
+	M.Autocomplete.init(elems, {
+		data: autocomplete_entries,
+		onAutocomplete: validateName,
+		minLength: 0
+	});
+
+	$(document).ready(function () {
+		if (window.location.hash.length > 1 && !window.location.hash.substring(1).startsWith("beziapp")) {
+			var hashValue = decodeURIComponent(window.location.hash.substring(1));
+			$("#full-name").val(hashValue);
+			if (hashValue in directory) {
+				$("#msg-send").removeAttr("disabled");
+			}
+			$("#beziapp-new-message").modal();
+			$("#beziapp-new-message").modal("open"); 
+		}
+	});
+
+	M.updateTextFields();
+	validateName();
 }
 
 // Function to toggle loading bar
 function setLoading(state) {
-    if (state) {
-        $("#loading-bar").removeClass("hidden");
-    } else {
-        $("#loading-bar").addClass("hidden");
-    }
+	if (state) {
+		$("#loading-bar").removeClass("hidden");
+	} else {
+		$("#loading-bar").addClass("hidden");
+	}
 }
 
 // Function, responsible for fetching and displaying data
 async function loadMessages(force_refresh = true, messageType = 0) {
-    setLoading(true);
-    // Load required data
-    let promises_to_run = [
-        localforage.getItem("username").then((value) => {
-            username = value;
-        }),
-        localforage.getItem("password").then((value) => {
-            password = value;
-        }),
-        localforage.getItem("messages").then((value) => {
-            messages = value;
-        })
-    ];
-
-    Promise.all(promises_to_run).then(() => {
-
-        if (messages[messageType] == null || messages[messageType].length === 0 || force_refresh) {
-            $.ajax({
-                url: API_ENDPOINT,
-                crossDomain: true,
-                data: {
-                    "u": username,
-                    "p": password,
-                    "m": "fetchsporocilaseznam",
-                    "a": messageType // Message type, see API doc for details
-                },
-                dataType: "json",
-                cache: false,
-                type: "GET",
-
-                success: (data) => {
-                    // If data is null, the request failed
-                    if (data === null) {
-                        UIAlert( D("requestFailed") );
-                        setLoading(false);
-                    } else {
-                        // Save messages & populate view
-                        // console.log(data); // debug
-                        messages[messageType.toString()] = data;
-                        localforage.setItem("messages", messages).then((value) => {
-                            displayData(messageType);
-                            setLoading(false);
-                        });
-                    }
-                },
-
-                error: () => {
-                    UIAlert( D("errorFetchingMessages") );
-                    setLoading(false);
-                }
-            })
-        } else {
-            displayData(messageType);
-            setLoading(false);
-        }
-    });
+	setLoading(true);
+	// Load required data
+	let promises_to_run = [
+		localforage.getItem("username").then((value) => {
+			username = value;
+		}),
+		localforage.getItem("password").then((value) => {
+			password = value;
+		}),
+		localforage.getItem("messages").then((value) => {
+			messages = value;
+		})
+	];
+
+	Promise.all(promises_to_run).then(() => {
+
+		if (messages[messageType] == null || messages[messageType].length === 0 || force_refresh) {
+			$.ajax({
+				url: API_ENDPOINT,
+				crossDomain: true,
+				data: {
+					"u": username,
+					"p": password,
+					"m": "fetchsporocilaseznam",
+					"a": messageType // Message type, see API doc for details
+				},
+				dataType: "json",
+				cache: false,
+				type: "GET",
+
+				success: (data) => {
+					// If data is null, the request failed
+					if (data === null) {
+						UIAlert( D("requestFailed") );
+						setLoading(false);
+					} else {
+						// Save messages & populate view
+						// console.log(data); // debug
+						messages[messageType.toString()] = data;
+						localforage.setItem("messages", messages).then((value) => {
+							displayData(messageType);
+							setLoading(false);
+						});
+					}
+				},
+
+				error: () => {
+					UIAlert( D("errorFetchingMessages") );
+					setLoading(false);
+				}
+			})
+		} else {
+			displayData(messageType);
+			setLoading(false);
+		}
+	});
 }
 
 async function loadMsg(id) {
 
-    setLoading(true);
-    // Load required data
-    let promises_to_run = [
-        localforage.getItem("username").then((value) => {
-            username = value;
-        }),
-        localforage.getItem("password").then((value) => {
-            password = value;
-        }),
-    ];
-
-    Promise.all(promises_to_run).then(() => {
-        $.ajax({
-            url: API_ENDPOINT,
-            crossDomain: true,
-            data: {
-                "u": username,
-                "p": password,
-                "m": "fetchsporocilo",
-                "a": id.replace(/_/g, "|")
-            },
-            dataType: "json",
-            cache: false,
-            type: "GET",
-            success: (data) => {
-                // If data is null, the request failed
-                if (data === null) {
-                    UIAlert( `${D("unableToReceiveTheMessage")} ${D("requestFailed")}` );
-                } else {
-                    displayMessage(id, data);
-                }
-                setLoading(false);
-            },
-
-            error: () => {
-                UIAlert( `${D("unableToReceiveTheMessage")} ${D("noInternetConnection")}` );
-                setLoading(false);
-            }
-
-        })
-    });
+	setLoading(true);
+	// Load required data
+	let promises_to_run = [
+		localforage.getItem("username").then((value) => {
+			username = value;
+		}),
+		localforage.getItem("password").then((value) => {
+			password = value;
+		}),
+	];
+
+	Promise.all(promises_to_run).then(() => {
+		$.ajax({
+			url: API_ENDPOINT,
+			crossDomain: true,
+			data: {
+				"u": username,
+				"p": password,
+				"m": "fetchsporocilo",
+				"a": id.replace(/_/g, "|")
+			},
+			dataType: "json",
+			cache: false,
+			type: "GET",
+			success: (data) => {
+				// If data is null, the request failed
+				if (data === null) {
+					UIAlert( `${D("unableToReceiveTheMessage")} ${D("requestFailed")}` );
+				} else {
+					displayMessage(id, data);
+				}
+				setLoading(false);
+			},
+
+			error: () => {
+				UIAlert( `${D("unableToReceiveTheMessage")} ${D("noInternetConnection")}` );
+				setLoading(false);
+			}
+
+		})
+	});
 }
 
 
 async function deleteMsg(id) {
-    setLoading(true);
-    // Load required data
-    let promises_to_run = [
-        localforage.getItem("username").then((value) => {
-            username = value;
-        }), localforage.getItem("password").then((value) => {
-            password = value;
-        }),
-    ];
-    Promise.all(promises_to_run).then(() => {
-        $.ajax({
-            url: API_ENDPOINT,
-            crossDomain: true,
-            data: {
-                "u": username,
-                "p": password,
-                "m": "izbrisisporocilo",
-                "a": id
-            },
-            dataType: "json",
-            cache: false,
-            type: "GET",
-            success: (data) => {
-                // If data is null, the request failed
-                if (data === null) {
-                    UIAlert( `${D("unableToDeleteTheMessage")} ${D("requestFailed")}` );
-                } else {
-                    document.getElementById("msg_box-" + id).remove();
-                }
-                setLoading(false);
-            },
-
-            error: () => {
-                UIAlert( `${D("unableToDeleteTheMessage")} ${D("noInternetConnection")}` );
-                setLoading(false);
-            }
-
-        })
-    });
+	setLoading(true);
+	// Load required data
+	let promises_to_run = [
+		localforage.getItem("username").then((value) => {
+			username = value;
+		}), localforage.getItem("password").then((value) => {
+			password = value;
+		}),
+	];
+	Promise.all(promises_to_run).then(() => {
+		$.ajax({
+			url: API_ENDPOINT,
+			crossDomain: true,
+			data: {
+				"u": username,
+				"p": password,
+				"m": "izbrisisporocilo",
+				"a": id
+			},
+			dataType: "json",
+			cache: false,
+			type: "GET",
+			success: (data) => {
+				// If data is null, the request failed
+				if (data === null) {
+					UIAlert( `${D("unableToDeleteTheMessage")} ${D("requestFailed")}` );
+				} else {
+					document.getElementById("msg_box-" + id).remove();
+				}
+				setLoading(false);
+			},
+
+			error: () => {
+				UIAlert( `${D("unableToDeleteTheMessage")} ${D("noInternetConnection")}` );
+				setLoading(false);
+			}
+
+		})
+	});
 }
 
 function displayMessage(id, data) {
-    let regex_results = ENCRYPTED_MESSAGE_REGEX.exec(data["telo"]);
-    if (regex_results != null) {
-        var datatodecrypt = regex_results[2];
-        var randomencdivid = Math.floor(Math.random() * 9999).toString().padStart(4, "0");
-
-        var msgcontent = `
-        <div id='ba-msg-e2ee-form-${randomencdivid}'>
-            ${D("thisMessageWasEncrypted")}
-            <input type="password" autocomplete="new-password" id="ba-msg-e2ee-password-${randomencdivid}" placeholder="${S("password")} ...">
-            <button
-                type="button"
-                value="Decrypt"
-                class="btn waves-effect waves-light"
-                onclick="
-                    try {
-                        $('#ba-msg-e2ee-content-${randomencdivid}').html(
-                            filterXSS(
-                                sjcl.decrypt(
-                                        $('#ba-msg-e2ee-password-${randomencdivid}').val(),
-                                        $('#ba-msg-e2ee-content-${randomencdivid}').html()
-                                )
-                            )
-                        );
-                        $('#ba-msg-e2ee-content-${randomencdivid}').show();
-                        $('#ba-msg-e2ee-form-${randomencdivid}').hide();
-                    } catch (err) {
-                        alert('${D("incorrectPassword")}');
-                    }
-                "
-            >
-                ${S("decrypt")}
-            </button>
-        </div>
-        <div id="ba-msg-e2ee-content-${randomencdivid}" hidden>
-            ${datatodecrypt}
-        </div>
-        `
-        $(`#msg_body-${id.replace(/\|/g, "_")}`).html(msgcontent);
-    } else {
-        $(`#msg_body-${id.replace(/\|/g, "_")}`).html(filterXSS(data["telo"]));
-    }
+	let regex_results = ENCRYPTED_MESSAGE_REGEX.exec(data["telo"]);
+	if (regex_results != null) {
+		var datatodecrypt = regex_results[2];
+		var randomencdivid = Math.floor(Math.random() * 9999).toString().padStart(4, "0");
+
+		var msgcontent = `
+		<div id='ba-msg-e2ee-form-${randomencdivid}'>
+			${D("thisMessageWasEncrypted")}
+			<input type="password" autocomplete="new-password" id="ba-msg-e2ee-password-${randomencdivid}" placeholder="${S("password")} ...">
+			<button
+				type="button"
+				value="Decrypt"
+				class="btn waves-effect waves-light"
+				onclick="
+					try {
+						$('#ba-msg-e2ee-content-${randomencdivid}').html(
+							filterXSS(
+								sjcl.decrypt(
+										$('#ba-msg-e2ee-password-${randomencdivid}').val(),
+										$('#ba-msg-e2ee-content-${randomencdivid}').html()
+								)
+							)
+						);
+						$('#ba-msg-e2ee-content-${randomencdivid}').show();
+						$('#ba-msg-e2ee-form-${randomencdivid}').hide();
+					} catch (err) {
+						alert('${D("incorrectPassword")}');
+					}
+				"
+			>
+				${S("decrypt")}
+			</button>
+		</div>
+		<div id="ba-msg-e2ee-content-${randomencdivid}" hidden>
+			${datatodecrypt}
+		</div>
+		`
+		$(`#msg_body-${id.replace(/\|/g, "_")}`).html(msgcontent);
+	} else {
+		$(`#msg_body-${id.replace(/\|/g, "_")}`).html(filterXSS(data["telo"]));
+	}
 }
 
 // Function for displaying data
 function displayData(messageType) {
-    let div_selector = "";
-    switch (messageType) {
-        case 0:
-            div_selector = "#beziapp-received";
-            break;
-        case 1:
-            div_selector = "#beziapp-sent";
-            break;
-        case 2:
-            div_selector = "#beziapp-deleted";
-            break;
-    }
-
-    // $("#storage-bar").show();
-    $("#storage-progressbar").width(Number(Number(getNumMessages(messageType) / 120) * 100).toFixed(2) + "%");
-    $("#storage-stats").text(`${getNumMessages(messageType)}/120`);
-
-    let msg_list = $(div_selector);
-    msg_list.html("");
-    messages[messageType.toString()].forEach(element => {
-        if (!element["zadeva"].startsWith("ba-ctlmsg")) {
-
-            msg_list.append(`
-                <div class="col s12 m12" 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"]).replace(/\|/g, "_")}">
-                                <button
-                                    class="btn waves-effect waves-light"
-                                    onclick="loadMsg('${filterXSS(element["id"])}')"
-                                    type="submit"
-                                >
-                                    Load message
-                                    <i class="material-icons right">move_to_inbox</i>
-                                </button>
-                            <p>
-                        </div>
-                        <div class="card-action general-text">
-                            <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();
-                                "
-                                data-target="beziapp-new-message"
-                                class="modal-trigger"
-                            >
-                                <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"]).padStart(2, "0")}:${filterXSS(element["cas"]["minuta"]).padStart(2, "0")}
-                        </div>
-                    </div>
-                </div>
-            `);
-        }
-    });
+	let div_selector = "";
+	switch (messageType) {
+		case 0:
+			div_selector = "#beziapp-received";
+			break;
+		case 1:
+			div_selector = "#beziapp-sent";
+			break;
+		case 2:
+			div_selector = "#beziapp-deleted";
+			break;
+	}
+
+	// $("#storage-bar").show();
+	$("#storage-progressbar").width(Number(Number(getNumMessages(messageType) / 120) * 100).toFixed(2) + "%");
+	$("#storage-stats").text(`${getNumMessages(messageType)}/120`);
+
+	let msg_list = $(div_selector);
+	msg_list.html("");
+	messages[messageType.toString()].forEach(element => {
+		if (!element["zadeva"].startsWith("ba-ctlmsg")) {
+
+			msg_list.append(`
+				<div class="col s12 m12" 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"]).replace(/\|/g, "_")}">
+								<button
+									class="btn waves-effect waves-light"
+									onclick="loadMsg('${filterXSS(element["id"])}')"
+									type="submit"
+								>
+									Load message
+									<i class="material-icons right">move_to_inbox</i>
+								</button>
+							<p>
+						</div>
+						<div class="card-action general-text">
+							<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();
+								"
+								data-target="beziapp-new-message"
+								class="modal-trigger"
+							>
+								<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"]).padStart(2, "0")}:${filterXSS(element["cas"]["minuta"]).padStart(2, "0")}
+						</div>
+					</div>
+				</div>
+			`);
+		}
+	});
 }
 
 // -1 = cumulative
@@ -412,239 +412,239 @@ function getNumMessages(messageType = -1) {
 }
 
 async function sendMessage(recipient_number, subject, body) {
-    setLoading(true);
-    let promises_to_run = [
-        localforage.getItem("username").then((value) => {
-            username = value;
-        }),
-        localforage.getItem("password").then((value) => {
-            password = value;
-        }),
-    ];
-    Promise.all(promises_to_run).then(() => {
-        $.ajax({
-            url: API_ENDPOINT,
-            crossDomain: true,
-            data: {
-                "u": username,
-                "p": password,
-                "m": "posljisporocilo",
-                "a": recipient_number,
-                "b": subject,
-                "c": body
-            },
-
-            dataType: "json",
-            cache: false,
-
-            type: "POST",
-            success: () => {
-                // we CAN'T know wether the message was delievered
-                UIAlert(D("messageWasProbablySent"));
-                setLoading(false);
-            },
-            error: () => {
-                UIAlert(D("errorSendingMessage"), D("noInternetConnection"));
-                setLoading(false);
-            }
-        })
-    });
+	setLoading(true);
+	let promises_to_run = [
+		localforage.getItem("username").then((value) => {
+			username = value;
+		}),
+		localforage.getItem("password").then((value) => {
+			password = value;
+		}),
+	];
+	Promise.all(promises_to_run).then(() => {
+		$.ajax({
+			url: API_ENDPOINT,
+			crossDomain: true,
+			data: {
+				"u": username,
+				"p": password,
+				"m": "posljisporocilo",
+				"a": recipient_number,
+				"b": subject,
+				"c": body
+			},
+
+			dataType: "json",
+			cache: false,
+
+			type: "POST",
+			success: () => {
+				// we CAN'T know wether the message was delievered
+				UIAlert(D("messageWasProbablySent"));
+				setLoading(false);
+			},
+			error: () => {
+				UIAlert(D("errorSendingMessage"), D("noInternetConnection"));
+				setLoading(false);
+			}
+		})
+	});
 }
 
 async function validateName() {
-    if (directory !== null) {
-        if ($("#full-name").val() in directory) {
-            $("#full-name").addClass("valid");
-            $("#full-name").removeClass("invalid");
-            $("#msg-send").removeAttr("disabled");
-        } else {
-            $("#full-name").addClass("invalid");
-            $("#full-name").removeClass("valid");
-            $("#msg-send").attr("disabled", "disabled");
-        }
-    }
+	if (directory !== null) {
+		if ($("#full-name").val() in directory) {
+			$("#full-name").addClass("valid");
+			$("#full-name").removeClass("invalid");
+			$("#msg-send").removeAttr("disabled");
+		} else {
+			$("#full-name").addClass("invalid");
+			$("#full-name").removeClass("valid");
+			$("#msg-send").attr("disabled", "disabled");
+		}
+	}
 }
 
 // Setup event listeners for buttons
 function setupEventListeners() {
-    // Button to add a photo
-    $("#msg-add-photo").click(() => {
-        let input = document.createElement("input");
-        input.type = "file";
-        input.onchange = (e) => {
-            // getting a hold of the file reference
-            let file = e.target.files[0];
-            // 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 ($("#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();
-    });
-
-    // Verify recipient when input loses focus
-    $("#full-name").on("blur", validateName);
-
-    // Setup refresh icon
-    $("#refresh-icon").click(() => {
-        loadMessages(true, current_tab);
-    });
-
-    // Setup checkbox handler
-    $("#encrypt-checkbox").change(function() {
-        if (this.checked) {
-            $("#encryption-key-input").prop("hidden", false);
-        } else {
-            $("#encryption-key-input").prop("hidden", true);
-        }
-    });
-
-    // Button to send message
-    $("#msg-send").click(() => {
-        localforage.getItem("directory").then(function (value) {
-            var msgcontent = $("#msg-body").val() + additionalstufftoaddtomessage;
-            var msgsubject = $("#msg-subject").val();
-            if ($("#encryption-key-input").prop("hidden") !== true) {
-                var randomencdivid = Math.floor(Math.random() * 9999).toString().padStart(4, "0");
-                var addrparts = window.location.href.split("/"); // engleski
-
-                var encrypted_message = sjcl.encrypt($("#msg-e2ee-pass-input").val(), msgcontent);
-                msgcontent = `
-                    <script src="${addrparts[0]}//${addrparts[2]}/js/lib/sjcl.js"></script>
-                    <div id="ba-msg-e2ee-form-${randomencdivid}">
-                        This message was encrypted by BežiApp.
-                        <input type="password" autocomplete="new-password" id="ba-msg-e2ee-password-${randomencdivid}" placeholder="Enter password ...">
-                        <input type="button" value="Decrypt" onclick="
-                            try {
-                                console.log($('ba-msg-e2ee-content-${randomencdivid}').text());
-                                $('#ba-msg-e2ee-content-${randomencdivid}').html(
-                                    sjcl.decrypt(
-                                        $('#ba-msg-e2ee-password-${randomencdivid}').val(),
-                                        $('#ba-msg-e2ee-content-${randomencdivid}').text()
-                                    )
-                                );
-                                $('#ba-msg-e2ee-content-${randomencdivid}').show();
-                                $('#ba-msg-e2ee-form-${randomencdivid}').hide();
-                            } catch(err) {
-                                alert('${D("incorrectPassword")}');
-                            }
-                        ">
-                    </div>
-                    <div id="ba-msg-e2ee-content-${randomencdivid}" hidden>
-                        <!-- ba-e2eemsg-${msgcontent.length.toString().padStart(4, "0")} -->${encrypted_message}<!-- end-msg -->
-                    </div>
-                `
-            }
-
-            console.log(msgcontent);
-            console.log(encrypted_message);
-
-            sendMessage(value[$("#full-name").val()], msgsubject, htmlEncode(msgcontent));
-            $("#msg-body").val("");
-            $("#full-name").val("");
-            $("#msg-subject").val("");
-            // $("#msg-send").prop("disabled", true);
-            $("#msg-send").attr("disabled", "disabled");
-            additionalstufftoaddtomessage = "";
-
-            $("#msg-added-image").html("");
-            $("#msg-e2ee-pass").hide();
-
-        }).catch(function (err) {
-            UIAlert( `${D("unableToReadDirectory")} ${D("messageCouldNotBeSend")}`, "45245" );
-            console.log(err);
-        });
-    });
+	// Button to add a photo
+	$("#msg-add-photo").click(() => {
+		let input = document.createElement("input");
+		input.type = "file";
+		input.onchange = (e) => {
+			// getting a hold of the file reference
+			let file = e.target.files[0];
+			// 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 ($("#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();
+	});
+
+	// Verify recipient when input loses focus
+	$("#full-name").on("blur", validateName);
+
+	// Setup refresh icon
+	$("#refresh-icon").click(() => {
+		loadMessages(true, current_tab);
+	});
+
+	// Setup checkbox handler
+	$("#encrypt-checkbox").change(function() {
+		if (this.checked) {
+			$("#encryption-key-input").prop("hidden", false);
+		} else {
+			$("#encryption-key-input").prop("hidden", true);
+		}
+	});
+
+	// Button to send message
+	$("#msg-send").click(() => {
+		localforage.getItem("directory").then(function (value) {
+			var msgcontent = $("#msg-body").val() + additionalstufftoaddtomessage;
+			var msgsubject = $("#msg-subject").val();
+			if ($("#encryption-key-input").prop("hidden") !== true) {
+				var randomencdivid = Math.floor(Math.random() * 9999).toString().padStart(4, "0");
+				var addrparts = window.location.href.split("/"); // engleski
+
+				var encrypted_message = sjcl.encrypt($("#msg-e2ee-pass-input").val(), msgcontent);
+				msgcontent = `
+					<script src="${addrparts[0]}//${addrparts[2]}/js/lib/sjcl.js"></script>
+					<div id="ba-msg-e2ee-form-${randomencdivid}">
+						This message was encrypted by BežiApp.
+						<input type="password" autocomplete="new-password" id="ba-msg-e2ee-password-${randomencdivid}" placeholder="Enter password ...">
+						<input type="button" value="Decrypt" onclick="
+							try {
+								console.log($('ba-msg-e2ee-content-${randomencdivid}').text());
+								$('#ba-msg-e2ee-content-${randomencdivid}').html(
+									sjcl.decrypt(
+										$('#ba-msg-e2ee-password-${randomencdivid}').val(),
+										$('#ba-msg-e2ee-content-${randomencdivid}').text()
+									)
+								);
+								$('#ba-msg-e2ee-content-${randomencdivid}').show();
+								$('#ba-msg-e2ee-form-${randomencdivid}').hide();
+							} catch(err) {
+								alert('${D("incorrectPassword")}');
+							}
+						">
+					</div>
+					<div id="ba-msg-e2ee-content-${randomencdivid}" hidden>
+						<!-- ba-e2eemsg-${msgcontent.length.toString().padStart(4, "0")} -->${encrypted_message}<!-- end-msg -->
+					</div>
+				`
+			}
+
+			console.log(msgcontent);
+			console.log(encrypted_message);
+
+			sendMessage(value[$("#full-name").val()], msgsubject, htmlEncode(msgcontent));
+			$("#msg-body").val("");
+			$("#full-name").val("");
+			$("#msg-subject").val("");
+			// $("#msg-send").prop("disabled", true);
+			$("#msg-send").attr("disabled", "disabled");
+			additionalstufftoaddtomessage = "";
+
+			$("#msg-added-image").html("");
+			$("#msg-e2ee-pass").hide();
+
+		}).catch(function (err) {
+			UIAlert( `${D("unableToReadDirectory")} ${D("messageCouldNotBeSend")}`, "45245" );
+			console.log(err);
+		});
+	});
 }
 
 function getUrlParameter(sParam) {
-    const url_params = new URLSearchParams(window.location.search);
-    const found_param = url_params.get(sParam);
-    return found_param
+	const url_params = new URLSearchParams(window.location.search);
+	const found_param = url_params.get(sParam);
+	return found_param
 }
 
 var additionalstufftoaddtomessage = "";
 document.addEventListener("DOMContentLoaded", () => {
 
-    checkLogin();
-
-    // Setup modals
-    const modal_elems = document.querySelectorAll('.modal');
-    const modal_options = {
-        onOpenStart: () => { $("#fab-new").hide() },
-        onCloseEnd: () => { $("#fab-new").show() },
-        dismissible: false
-    };
-    M.Modal.init(modal_elems, modal_options);
-
-    loadDirectory();
-    setupEventListeners();
-
-    // Setup tabs
-    const tabs = document.querySelectorAll(".tabs");
-    const tab_options = {
-        // swipeable: true, // TODO: figure out how to fix height when it's enabled (it's good for UX to have it enabled)
-        onShow: (tab) => {
-            if ($(tab).hasClass("active")) {
-                switch (tab.id) {
-                    case "beziapp-received":
-                        current_tab = 0;
-                        loadMessages(false, 0);
-                        break;
-                    case "beziapp-sent":
-                        current_tab = 1;
-                        loadMessages(false, 1);
-                        break;
-                    case "beziapp-deleted":
-                        current_tab = 2;
-                        loadMessages(false, 2);
-                        break;
-                }
-            }
-        }
-    };
-    M.Tabs.init(tabs, tab_options);
-
-    // Setup floating action button
-    const fab_options = {
-        hoverEnabled: false,
-        toolbarEnabled: false
-    }
-    const fab_elem = document.querySelectorAll(".fixed-action-btn");
-    M.FloatingActionButton.init(fab_elem, fab_options);
-
-    var receivedmessages = null;
-    loadMessages(true, 0);
-    M.updateTextFields();
-
-    // Setup side menu
-    const menus = document.querySelectorAll(".side-menu");
-    M.Sidenav.init(menus, { edge: "right", draggable: true });
+	checkLogin();
+
+	// Setup modals
+	const modal_elems = document.querySelectorAll('.modal');
+	const modal_options = {
+		onOpenStart: () => { $("#fab-new").hide() },
+		onCloseEnd: () => { $("#fab-new").show() },
+		dismissible: false
+	};
+	M.Modal.init(modal_elems, modal_options);
+
+	loadDirectory();
+	setupEventListeners();
+
+	// Setup tabs
+	const tabs = document.querySelectorAll(".tabs");
+	const tab_options = {
+		// swipeable: true, // TODO: figure out how to fix height when it's enabled (it's good for UX to have it enabled)
+		onShow: (tab) => {
+			if ($(tab).hasClass("active")) {
+				switch (tab.id) {
+					case "beziapp-received":
+						current_tab = 0;
+						loadMessages(false, 0);
+						break;
+					case "beziapp-sent":
+						current_tab = 1;
+						loadMessages(false, 1);
+						break;
+					case "beziapp-deleted":
+						current_tab = 2;
+						loadMessages(false, 2);
+						break;
+				}
+			}
+		}
+	};
+	M.Tabs.init(tabs, tab_options);
+
+	// Setup floating action button
+	const fab_options = {
+		hoverEnabled: false,
+		toolbarEnabled: false
+	}
+	const fab_elem = document.querySelectorAll(".fixed-action-btn");
+	M.FloatingActionButton.init(fab_elem, fab_options);
+
+	var receivedmessages = null;
+	loadMessages(true, 0);
+	M.updateTextFields();
+
+	// Setup side menu
+	const menus = document.querySelectorAll(".side-menu");
+	M.Sidenav.init(menus, { edge: "right", draggable: true });
 });
diff --git a/assets/pages-src/messaging.bvr b/assets/pages-src/messaging.bvr
index abc7e79..80bb80d 100644
--- a/assets/pages-src/messaging.bvr
+++ b/assets/pages-src/messaging.bvr
@@ -2,91 +2,91 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta name="google" content="notranslate">
-    <title>Messaging &laquo; BežiApp</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<meta name="google" content="notranslate">
+	<title>Messaging &laquo; BežiApp</title>
 
-    <!-- Materialize -->
-    <link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
-    <link href="/css/materialicons.css" rel="stylesheet">
-    <script type="text/javascript" src="/js/lib/materialize.min.js"></script>
+	<!-- Materialize -->
+	<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
+	<link href="/css/materialicons.css" rel="stylesheet">
+	<script type="text/javascript" src="/js/lib/materialize.min.js"></script>
 
-    <script src="/js/lib/jquery.min.js"></script>
-    <script type="text/javascript" src="/js/lib/localforage.min.js"></script>
+	<script src="/js/lib/jquery.min.js"></script>
+	<script type="text/javascript" src="/js/lib/localforage.min.js"></script>
 
-    <link type="text/css" href="/css/styles.css" rel="stylesheet">
+	<link type="text/css" href="/css/styles.css" rel="stylesheet">
 
-    <link rel="manifest" href="/manifest.json">
-    <script src="/js/app.js"></script>
-    <script src="/js/lib/themes.js"></script>
-    <script src="/js/lang/bundle.js"></script>
-    <script src="/js/lib/xss.js"></script>
-    <script src="/js/lib/sjcl.js"></script>
-		<script src="/js/gsec.js"></script>
-    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
-    <script type="text/javascript" src="/js/messaging.js"></script>
+	<link rel="manifest" href="/manifest.json">
+	<script src="/js/app.js"></script>
+	<script src="/js/lib/themes.js"></script>
+	<script src="/js/lang/bundle.js"></script>
+	<script src="/js/lib/xss.js"></script>
+	<script src="/js/lib/sjcl.js"></script>
+	<script src="/js/gsec.js"></script>
+	<link rel="shortcut icon" type="image/png" href="/favicon.png" />
+	<script type="text/javascript" src="/js/messaging.js"></script>
 
-    <!-- iOS support -->
-    <link rel="apple-touch-icon" href="/img/icons/icon_96.png">
-    <link rel="apple-touch-icon" href="/img/icons/icon_512.png">
-    <meta name="apple-mobile-web-app-status-bar" content="#004d32">
+	<!-- iOS support -->
+	<link rel="apple-touch-icon" href="/img/icons/icon_96.png">
+	<link rel="apple-touch-icon" href="/img/icons/icon_512.png">
+	<meta name="apple-mobile-web-app-status-bar" content="#004d32">
 </head>
 
 <body>
-    <nav class="z-depth-0" id="navigation-main">
-        <div class="nav-wrapper container">
-            <b class="app-header-bold">Beži</b><span class="app-header-span">App</span> &raquo; <x-su>messaging</x-su>
-            <span class="right white-text">
-                <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
-            </span>
-            <span class="right white-text" id="refresh-icon">
-                <a href="#"><i class="material-icons">refresh</i></a>
-            </span>
-        </div>
-        <div id="loading-bar" class="progress hidden">
-            <div class="indeterminate"></div>
-        </div>
-    </nav>
+	<nav class="z-depth-0" id="navigation-main">
+		<div class="nav-wrapper container">
+			<b class="app-header-bold">Beži</b><span class="app-header-span">App</span> &raquo; <x-su>messaging</x-su>
+			<span class="right white-text">
+				<i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
+			</span>
+			<span class="right white-text" id="refresh-icon">
+				<a href="#"><i class="material-icons">refresh</i></a>
+			</span>
+		</div>
+		<div id="loading-bar" class="progress hidden">
+			<div class="indeterminate"></div>
+		</div>
+	</nav>
 	<@?i navigation@>
-    <div class="container">
-        <div class="row">
+	<div class="container">
+		<div class="row">
 
-            <br>
-            <div class="row light-text" id="storage-bar">
-                <div class="col s6">
-                    <x-su>messageStorageUsed</x-su>: <span id="storage-stats">0/120</span> <x-sl>messages</x-sl>
-                </div>
-                <div class="progress col s6">
-                    <div class="determinate" id="storage-progressbar" style="width: 0%"></div>
-                </div>
-            </div>
+			<br>
+			<div class="row light-text" id="storage-bar">
+				<div class="col s6">
+					<x-su>messageStorageUsed</x-su>: <span id="storage-stats">0/120</span> <x-sl>messages</x-sl>
+				</div>
+				<div class="progress col s6">
+					<div class="determinate" id="storage-progressbar" style="width: 0%"></div>
+				</div>
+			</div>
 
-            <div class="row light-text" style="text-align: center;">
-                <x-du>maxMessagesNote</x-du>
-            </div>
+			<div class="row light-text" style="text-align: center;">
+				<x-du>maxMessagesNote</x-du>
+			</div>
 
-            <div class="col s12 m12">
-                <ul class="tabs">
-                    <li class="tab col s4"><a href="#beziapp-received" class="active">Received</a></li>
-                    <li class="tab col s4"><a href="#beziapp-sent">Sent</a></li>
-                    <li class="tab col s4"><a href="#beziapp-deleted">Deleted</a></li>
-                </ul>
-            </div>
-            <br>
-            <div id="beziapp-received" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
-            <div id="beziapp-sent" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
-            <div id="beziapp-deleted" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
-        </div>
-    </div>
+			<div class="col s12 m12">
+				<ul class="tabs">
+					<li class="tab col s4"><a href="#beziapp-received" class="active">Received</a></li>
+					<li class="tab col s4"><a href="#beziapp-sent">Sent</a></li>
+					<li class="tab col s4"><a href="#beziapp-deleted">Deleted</a></li>
+				</ul>
+			</div>
+			<br>
+			<div id="beziapp-received" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
+			<div id="beziapp-sent" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
+			<div id="beziapp-deleted" class="col s12"><p class="center-align light-text"><x-su>loadingMessages</x-su></p></div>
+		</div>
+	</div>
 
-    <!-- FAB -->
-    <div class="fixed-action-btn" id="fab-new">
-        <a class="btn-floating btn-large fab-new-message modal-trigger" href="#beziapp-new-message">
-          <i class="large material-icons">mode_edit</i>
-        </a>
-    </div>
+	<!-- FAB -->
+	<div class="fixed-action-btn" id="fab-new">
+		<a class="btn-floating btn-large fab-new-message modal-trigger" href="#beziapp-new-message">
+		  <i class="large material-icons">mode_edit</i>
+		</a>
+	</div>
 		<@?i msg-compose-modal@>
 </body>
 </html>
diff --git a/assets/pages-src/settings.bvr b/assets/pages-src/settings.bvr
index 4c55da6..960adb5 100644
--- a/assets/pages-src/settings.bvr
+++ b/assets/pages-src/settings.bvr
@@ -2,102 +2,103 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta name="google" content="notranslate">
-    <title>Settings &laquo; BežiApp</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<meta name="google" content="notranslate">
+	<title>Settings &laquo; BežiApp</title>
 
-    <!-- Materialize -->
-    <link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
-    <link href="/css/materialicons.css" rel="stylesheet">
-    <link href="/css/fontawesome.min.css" rel="stylesheet">
-    <script type="text/javascript" src="/js/lib/materialize.min.js"></script>
+	<!-- Materialize -->
+	<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
+	<link href="/css/materialicons.css" rel="stylesheet">
+	<link href="/css/fontawesome.min.css" rel="stylesheet">
+	<script type="text/javascript" src="/js/lib/materialize.min.js"></script>
 
-    <script src="/js/lib/jquery.min.js"></script>
-    <script type="text/javascript" src="/js/lib/localforage.min.js"></script>
+	<script src="/js/lib/jquery.min.js"></script>
+	<script type="text/javascript" src="/js/lib/localforage.min.js"></script>
 
-    <link type="text/css" href="/css/styles.css" rel="stylesheet">
+	<link type="text/css" href="/css/styles.css" rel="stylesheet">
 
-    <link rel="manifest" href="/manifest.json">
-    <script src="/js/app.js"></script>
-    <script src="/js/lib/themes.js"></script>
-    <script src="/js/lang/bundle.js"></script>
-    <script type="text/javascript" src="/js/settings.js"></script>
-    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+	<link rel="manifest" href="/manifest.json">
+	<script src="/js/app.js"></script>
+	<script src="/js/lib/themes.js"></script>
+	<script src="/js/lang/bundle.js"></script>
+	<script type="text/javascript" src="/js/settings.js"></script>
+	<link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
-    <!-- iOS support -->
-    <link rel="apple-touch-icon" href="/img/icons/icon_96.png">
-    <link rel="apple-touch-icon" href="/img/icons/icon_512.png">
-    <meta name="apple-mobile-web-app-status-bar" content="#004d32">
+	<!-- iOS support -->
+	<link rel="apple-touch-icon" href="/img/icons/icon_96.png">
+	<link rel="apple-touch-icon" href="/img/icons/icon_512.png">
+	<meta name="apple-mobile-web-app-status-bar" content="#004d32">
 </head>
 
 <body>
-    <nav class="z-depth-0" id="navigation-main">
-        <div class="nav-wrapper container">
-            <b class="app-header-bold">Beži</b><span class="app-header-span">App</span> &raquo; <x-su>settings</x-su>
-            <span class="right white-text">
-                <i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
-            </span>
-        </div>
-        <div id="loading-bar" class="progress hidden">
-            <div class="indeterminate"></div>
-        </div>
-    </nav>
+	<nav class="z-depth-0" id="navigation-main">
+		<div class="nav-wrapper container">
+			<b class="app-header-bold">Beži</b><span class="app-header-span">App</span> &raquo; <x-su>settings</x-su>
+			<span class="right white-text">
+				<i class="material-icons sidenav-trigger" data-target="side-menu">menu</i>
+			</span>
+		</div>
+		<div id="loading-bar" class="progress hidden">
+			<div class="indeterminate"></div>
+		</div>
+	</nav>
 		<@?i navigation@>
 
-    <div class="container">
-        <div class="row">
-            <div class="col s12">
-                <h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
-                </h3>
-                <h4 class="subheader general-text"><x-su>settings</x-su></h4>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col s12">
-                <h5 class="general-text"><x-su>language</x-su></h5>
-            </div>
-            <div class="input-field col s12">
-                <i class="material-icons prefix">translate</i>
-                <select class="lang-select icons input-select" id="select-language">
-                    <option value="sl" id="option-sl" data-icon="/img/flags/sl.svg" selected>Slovenščina</option>
-                    <option value="en" id="option-en" data-icon="/img/flags/en.svg">English</option>
-                </select>
-                <label><x-su>selectLanguage</x-su></label>
-            </div>
-        </div>
+	<div class="container">
+		<div class="row">
+			<div class="col s12">
+				<h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
+				</h3>
+				<h4 class="subheader general-text"><x-su>settings</x-su></h4>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col s12">
+				<h5 class="general-text"><x-su>language</x-su></h5>
+			</div>
+			<div class="input-field col s12">
+				<i class="material-icons prefix">translate</i>
+				<select class="lang-select icons input-select" id="select-language">
+					<option value="sl" id="option-sl" data-icon="/img/flags/sl.svg" selected>Slovenščina</option>
+					<option value="en" id="option-en" data-icon="/img/flags/en.svg">English</option>
+				</select>
+				<label><x-su>selectLanguage</x-su></label>
+			</div>
+		</div>
 
-        <div class="row">
-            <div class="col s12">
-                <h5 class="general-text"><x-su>theme</x-su></h5>
-            </div>
-            <div class="input-field col s12">
-                <i class="material-icons prefix">palette</i>
-                <select class="theme-select input-select" id="select-theme">
-                    <option value="light" id="option-light" data-theme="light" selected><x-su>themeLight</x-su></option>
-                    <option value="dark" id="option-dark" data-theme="dark"><x-su>themeDark</x-su></option>
-                </select>
-                <label><x-su>selectTheme</x-su></label>
-            </div>
-        </div>
+		<div class="row">
+			<div class="col s12">
+				<h5 class="general-text"><x-su>theme</x-su></h5>
+			</div>
+			<div class="input-field col s12">
+				<i class="material-icons prefix">palette</i>
+				<select class="theme-select input-select" id="select-theme">
+					<option value="light" id="option-light" data-theme="light" selected><x-su>themeLight</x-su></option>
+					<option value="dark" id="option-dark" data-theme="dark"><x-su>themeDark</x-su></option>
+					<option value="night" id="option-night" data-theme="night"><x-su>themeNight</x-su></option>
+				</select>
+				<label><x-su>selectTheme</x-su></label>
+			</div>
+		</div>
 
 
-        <div class="row">
-            <div class="col s12">
-                <h5 class="general-text"><x-su>errorReporting</x-su></h5>
-            </div>
-            <div class="input-field col s12">
-                <i class="material-icons prefix">report_problem</i>
-                <select class="errorreporting-select input-select" id="select-errorreporting">
-                    <option value="on" id="option-on" data-errorreporting="on" selected><x-su>on</x-su></option>
-                   <option value="off" id="option-off" data-errorreporting="off"><x-su>off</x-su></option>
-                </select>
-                <label><x-su>selectErrorReporting</x-su></label>
-            </div>
-        </div>
+		<div class="row">
+			<div class="col s12">
+				<h5 class="general-text"><x-su>errorReporting</x-su></h5>
+			</div>
+			<div class="input-field col s12">
+				<i class="material-icons prefix">report_problem</i>
+				<select class="errorreporting-select input-select" id="select-errorreporting">
+					<option value="on" id="option-on" data-errorreporting="on" selected><x-su>on</x-su></option>
+				   <option value="off" id="option-off" data-errorreporting="off"><x-su>off</x-su></option>
+				</select>
+				<label><x-su>selectErrorReporting</x-su></label>
+			</div>
+		</div>
 
-    </div>
+	</div>
 </body>
 
 </html>