5 files changed, 320 insertions, 150 deletions

diff --git a/css/styles.css b/css/styles.css
index a06c906..c728463 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -5,6 +5,7 @@
     --color-primary-light: rgba(230, 250, 231, 1);
     --color-invalid: rgba(192, 0, 0, 1);
     --background-color: rgba(255, 255, 255, 1);
+    --background-accent: rgba(0, 156, 101, 0.2);
 }
 
 body {
@@ -162,3 +163,29 @@ a.collection-item {
 	text-align: center;
 	z-index: 60;
 }
+
+/* Tabs */
+.tab a {
+    color: var(--color-secondary) !important;
+}
+
+.tab a:hover {
+    color: var(--color-primary) !important;
+}
+
+.tab a.active {
+    color: var(--color-primary) !important;
+}
+
+.tab a:focus.active {
+    background-color: var(--background-accent) !important;
+}
+
+.tabs .indicator {
+    background-color: var(--color-primary) !important;
+}
+
+/* Floating action button */
+.fab-new-message {
+    background-color: var(--color-secondary) !important;
+}
diff --git a/js/lang/bundle.js b/js/lang/bundle.js
index 6e6c5b6..bf1a361 100644
--- a/js/lang/bundle.js
+++ b/js/lang/bundle.js
@@ -181,6 +181,7 @@ var langstrings = {
 		unauthorizedAbsence: "unauthorized",
 		doesNotCount: "does not count",
 		// messaging
+		loadingMessages: "Loading messages...",
 		sendAMessage: "send a message",
 		recipient: "recipient",
 		messageSubject: "subject",
@@ -189,6 +190,7 @@ var langstrings = {
 		note: "note",
 		largeImagesNote: "GimB servers don't like large messages, so only very small images may be attached or your message will not be delivered",
 		attachedImages: "attached images",
+		encryptMessage: "Encrypt message",
 		passwordForE2EE: "password for encrypting the message",
 		messages: "messages",
 		received: "received",
@@ -361,6 +363,7 @@ var langstrings = {
 		unauthorizedAbsence: "neopravičeno",
 		doesNotCount: "ne šteje",
 		// messaging
+		loadingMessages: "Nalagam sporočila...",
 		sendAMessage: "pošlji sporočilo",
 		recipient: "prejemnik",
 		messageSubject: "zadeva",
@@ -369,13 +372,14 @@ var langstrings = {
 		note: "opomba",
 		largeImagesNote: "GimB strežniki ne marajo velikih sporočil, zato lahko pošiljate le zelo majhne slike, v nasprotnem primeru sporočilo ne bo dostavljeno",
 		attachedImages: "pripete slike",
+		encryptMessage: "Šifriraj sporočilo",
 		passwordForE2EE: "geslo za šifriranje sporočila",
 		messages: "sporočila",
 		received: "prejeta",
 		sent: "poslana",
 		deleted: "izbrisana",
 		messageStorageUsed: "zasedenost shrambe sporočil v tej mapi",
-		maxMessagesNote: "v vsaki mapi imate lahko največ sto dvajset sporočil. Starejša sporočila ne bodo prikazana. Redno brišite sporočila, da se izognete morebitnim težavam.",
+		maxMessagesNote: "v vsaki mapi imate lahko največ 120 sporočil. Starejša sporočila ne bodo prikazana. Redno brišite sporočila, da se izognete morebitnim težavam.",
 		loadMessageBody: "naloži telo sporočila",
 		thisMessageWasEncrypted: "to sporočilo je šifriral BežiApp",
 		enterPassword: "vnesite geslo",
diff --git a/js/messaging.js b/js/messaging.js
index 145711d..a061ca9 100644
--- a/js/messaging.js
+++ b/js/messaging.js
@@ -3,8 +3,14 @@ const DIRECTORY_URL = "/directory.json";
 
 const ENCRYPTED_MESSAGE_REGEX = /<!-- beziapp-e2eemsg-(\d{4}) -->(\S+?)<!-- end-msg -->/g;
 
-// "Global" object for name directory
+// "Global" object for name directory and messages
 var directory = null;
+var messages = {
+    "0": [],
+    "1": [],
+    "2": []
+}
+var current_tab = 0;
 
 async function checkLogin() {
     localforage.getItem("logged_in").then(function (value) {
@@ -85,10 +91,8 @@ function populateAutocomplete() {
         minLength: 0
     });
 
-    if(window.location.hash.length > 1) {
+    if (window.location.hash.length > 1 && !window.location.hash.substring(1).startsWith("beziapp")) {
     	$("#full-name").val(decodeURIComponent(window.location.hash.substring(1)));
-    } else {
-    	$("#full-name").val(getUrlParameter("m"));
     }
 
     M.updateTextFields();
@@ -105,7 +109,7 @@ function setLoading(state) {
 }
 
 // Function, responsible for fetching and displaying data
-async function loadMessages(force_refresh = true, katera = 0) {
+async function loadMessages(force_refresh = true, messageType = 0) {
     setLoading(true);
     // Load required data
     let promises_to_run = [
@@ -122,7 +126,7 @@ async function loadMessages(force_refresh = true, katera = 0) {
 
     Promise.all(promises_to_run).then(() => {
 
-        if (messages === null || force_refresh) {
+        if (messages[messageType] == null || messages[messageType].length === 0 || force_refresh) {
             $.ajax({
                 url: API_ENDPOINT,
                 crossDomain: true,
@@ -130,7 +134,7 @@ async function loadMessages(force_refresh = true, katera = 0) {
                     "u": username,
                     "p": password,
                     "m": "fetchsporocilaseznam",
-                    "a": katera // Message type, see API doc for details
+                    "a": messageType // Message type, see API doc for details
                 },
                 dataType: "json",
                 cache: false,
@@ -144,9 +148,9 @@ async function loadMessages(force_refresh = true, katera = 0) {
                     } else {
                         // Save messages & populate view
                         // console.log(data); // debug
-                        localforage.setItem("messages", data).then((value) => {
-                            messages = value;
-                            displayData();
+                        messages[messageType.toString()] = data;
+                        localforage.setItem("messages", messages).then((value) => {
+                            displayData(messageType);
                             setLoading(false);
                         });
                     }
@@ -158,7 +162,7 @@ async function loadMessages(force_refresh = true, katera = 0) {
                 }
             })
         } else {
-            displayData();
+            displayData(messageType);
             setLoading(false);
         }
     });
@@ -293,13 +297,27 @@ function displayMessage(id, data) {
 }
 
 // Function for displaying data
-function displayData() {
-    let msg_list = $("#msg-list");
+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;
+    }
+
+    let msg_list = $(div_selector);
     msg_list.html("");
-    messages.forEach(element => {
-        if (element["zadeva"].substr(0, 14) != "beziapp-ctlmsg") {
+    messages[messageType].forEach(element => {
+        if (!element["zadeva"].startsWith("beziapp-ctlmsg")) {
+
             msg_list.append(`
-                <div class="col s12 m6" id="msg_box-${filterXSS(element["id"])}">
+                <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">
@@ -311,8 +329,8 @@ function displayData() {
                                     onclick="loadMsg('${filterXSS(element["id"])}')"
                                     type="submit"
                                 >
-                                    Load message body
-                                    <i class="material-icons right">system_update</i>
+                                    Load message
+                                    <i class="material-icons right">move_to_inbox</i>
                                 </button>
                             <p>
                         </div>
@@ -329,16 +347,30 @@ function displayData() {
                             >
                                 <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"])}
+                            ${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>
             `);
-	}
+	    }
     });
+
     $("#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()}`);
+    $("#storage-progressbar").width(Number(Number(getNumMessages(messageType) / 120) * 100).toFixed(2) + "%");
+    $("#storage-desc").html( `${getNumMessages(messageType)}/120 ${s("messages")} ${$("#storage-progressbar").width()}`);
+}
+
+// -1 = cumulative
+function getNumMessages(messageType = -1) {
+    if (messageType === -1) {
+        let sum = 0;
+        for (const [messageType, messageList] of Object.entries(messages)) {
+            sum += messageList.length;
+        }
+        return sum;
+    } else {
+        return (messages[messageType].length ?? 0);
+    }
 }
 
 async function sendMessage(recipient_number, subject, body) {
@@ -442,6 +474,20 @@ function setupEventListeners() {
     // 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) {
@@ -510,6 +556,48 @@ document.addEventListener("DOMContentLoaded", () => {
     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;
+                }
+            }
+        }
+    };
+    var instance = 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");
+    var instances = M.FloatingActionButton.init(fab_elem, fab_options);
+
+    // Setup modals
+    const modal_elems = document.querySelectorAll('.modal');
+    const modal_options = {
+        onOpenStart: () => { $("#fab-new").hide() },
+        onCloseEnd: () => { $("#fab-new").show() },
+        dismissible: false
+    };
+    var instances = M.Modal.init(modal_elems, modal_options);
+
     var receivedmessages = null;
     loadMessages(true, 0);
     M.updateTextFields();
@@ -517,5 +605,4 @@ document.addEventListener("DOMContentLoaded", () => {
     // Setup side menu
     const menus = document.querySelectorAll(".side-menu");
     M.Sidenav.init(menus, { edge: "right", draggable: true });
-
 });
\ No newline at end of file
diff --git a/pages-src/messaging.bvr b/pages-src/messaging.bvr
index ad1d33a..dff3d00 100644
--- a/pages-src/messaging.bvr
+++ b/pages-src/messaging.bvr
@@ -39,75 +39,18 @@
             <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@>
+	<@?i navigation@>
     <div class="container">
-        <h4><x-su>sendAMessage</x-su></h4>
         <div class="row">
-            <div class="col s12">
-                <div class="row">
-                    <div class="input-field col s5">
-                        <i class="material-icons prefix">account_circle</i>
-                        <input id="full-name" type="text" class="autocomplete-fullname validate">
-                        <label for="full-name"><x-su>recipient</x-su></label>
-                    </div>
-                    <div class="input-field col s5">
-                        <i class="material-icons prefix">subject</i>
-                        <input id="msg-subject" type="text" class="">
-                        <label for="msg-subject"><x-su>messageSubject</x-su></label>
-                    </div>
-                    <div class="input-field col s2">
-                        <button class="btn waves-effect waves-light" id="msg-send" type="button" disabled="disabled" name="action">
-                            <i class="material-icons">send</i>
-                        </button>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="input-field col s8">
-                        <i class="material-icons prefix">mode_edit</i>
-                        <textarea id="msg-body" class="materialize-textarea"></textarea>
-                        <label for="msg-body"><x-su>messageBody</x-su></label>
-                    </div>
-                    <div class="input-field col s2">
-                        <button class="btn waves-effect waves-light" id="msg-add-photo" type="button">
-                            <i class="material-icons" style="margin: 0 auto">add_a_photo</i>
-                        </button>
-                    </div>
-                    <div class="input-field col s2">
-                        <button onclick="document.getElementById('msg-e2ee-pass').hidden = false" class="btn waves-effect waves-light" id="msg-use-e2ee" type="button">
-                            <i class="material-icons" style="margin: 0 auto">vpn_key</i>
-                        </button>
-                    </div>
-                </div>
-		        <div hidden="hidden" class="row" id="msg-e2ee-pass">
-                    <div class="input-field col s12">
-                        <i class="material-icons prefix">lock</i>
-                        <input id="msg-e2ee-pass-input" type="password" autocomplete="new-password" class="">
-                        <label for="msg-e2ee-pass-input"><x-su>passwordForE2EE</x-su></label>
-                    </div>
-		        </div>
-            </div>
-            <div id="msg-added-image"></div>
-        </div>
-        <h4><x-su>messages</x-su></h4>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 0);" type="button">
-			<x-su>received</x-su>
-			<i class="material-icons right">inbox</i>
-        </button>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 1);" type="button">
-			<x-su>sent</x-su>
-			<i class="material-icons right">forward</i>
-        </button>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 2);" type="button">
-			<x-su>deleted</x-su>
-			<i class="material-icons right">delete</i>
-        </button>
-        <div id="msg-list"></div>
-        <p>
+
             <div class="row" id="storage-bar">
                 <div class="col s4">
                     <x-su>messageStorageUsed</x-su>: 
@@ -124,7 +67,90 @@
                     <x-du>maxMessagesNote</x-du>
                 </p>
             </div>
-        </p>
+
+            <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 grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-sent" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-deleted" class="col s12"><p class="center-align grey-text text-darken-2"><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>
+
+    <!-- Modal Structure -->
+    <div id="beziapp-new-message" class="modal modal-fixed-footer">
+
+        <div class="modal-content">
+
+            <h4><x-su>sendAMessage</x-su></h4>
+
+            <div class="input-field">
+                <i class="material-icons prefix">account_circle</i>
+                <input id="full-name" type="text" class="autocomplete-fullname validate">
+                <label for="full-name"><x-su>recipient</x-su></label>
+            </div>
+
+            <div class="row">
+
+                <div class="col 11s 11m">
+                    <div class="input-field">
+                        <i class="material-icons prefix">subject</i>
+                        <input id="msg-subject" type="text" class="">
+                        <label for="msg-subject"><x-su>messageSubject</x-su></label>
+                    </div>
+                </div>
+
+                <div class="col 1s 1m">
+                    <button class="btn waves-effect waves-light" id="msg-add-photo" type="button">
+                        <i class="material-icons" style="margin: 0 auto">add_a_photo</i>
+                    </button>
+                </div>
+
+            </div>
+
+            <div class="row">
+                <div class="col s6 m4">
+                    <label>
+                        <input type="checkbox" id="encrypt-checkbox" />
+                        <span><x-su>encryptMessage</x-su></span>
+                    </label>
+                </div>
+
+                <div class="col s6 m8">
+                    <div class="input-field" id="encryption-key-input" hidden>
+                        <i class="material-icons prefix">lock</i>
+                        <input id="msg-e2ee-pass-input" type="password" autocomplete="new-password" class="">
+                        <label for="msg-e2ee-pass-input"><x-su>passwordForE2EE</x-su></label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="input-field">
+                <i class="material-icons prefix">mode_edit</i>
+                <textarea id="msg-body" class="materialize-textarea"></textarea>
+                <label for="msg-body"><x-su>messageBody</x-su></label>
+            </div>
+
+        </div>
+
+        <div class="modal-footer">
+            <div id="modal-footer-right">    
+                <a href="#" class="modal-close waves-effect waves-green btn-flat">Cancel <i class="material-icons right">close</i></a>
+                <a href="#" id="msg-send" class="modal-close waves-effect waves-green btn-flat" disabled>Send <i class="material-icons right">send</i></a>
+            </div>
+        </div>
     </div>
 </body>
 </html>
diff --git a/pages/messaging.html b/pages/messaging.html
index 515770a..31c4749 100644
--- a/pages/messaging.html
+++ b/pages/messaging.html
@@ -42,12 +42,15 @@
             <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>
-		
+	
 <ul id="side-menu" class="sidenav side-menu">
   <li><a class="subheader"><h4><b>Beži</b>App</h4></a></li>
   <li><a href="/pages/timetable.html" class="waves-effect"><i class="material-icons">view_module</i><x-su>timetable</x-su></a></li>
@@ -68,68 +71,8 @@
 
 
     <div class="container">
-        <h4><x-su>sendAMessage</x-su></h4>
         <div class="row">
-            <div class="col s12">
-                <div class="row">
-                    <div class="input-field col s5">
-                        <i class="material-icons prefix">account_circle</i>
-                        <input id="full-name" type="text" class="autocomplete-fullname validate">
-                        <label for="full-name"><x-su>recipient</x-su></label>
-                    </div>
-                    <div class="input-field col s5">
-                        <i class="material-icons prefix">subject</i>
-                        <input id="msg-subject" type="text" class="">
-                        <label for="msg-subject"><x-su>messageSubject</x-su></label>
-                    </div>
-                    <div class="input-field col s2">
-                        <button class="btn waves-effect waves-light" id="msg-send" type="button" disabled="disabled" name="action">
-                            <i class="material-icons">send</i>
-                        </button>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="input-field col s8">
-                        <i class="material-icons prefix">mode_edit</i>
-                        <textarea id="msg-body" class="materialize-textarea"></textarea>
-                        <label for="msg-body"><x-su>messageBody</x-su></label>
-                    </div>
-                    <div class="input-field col s2">
-                        <button class="btn waves-effect waves-light" id="msg-add-photo" type="button">
-                            <i class="material-icons" style="margin: 0 auto">add_a_photo</i>
-                        </button>
-                    </div>
-                    <div class="input-field col s2">
-                        <button onclick="document.getElementById('msg-e2ee-pass').hidden = false" class="btn waves-effect waves-light" id="msg-use-e2ee" type="button">
-                            <i class="material-icons" style="margin: 0 auto">vpn_key</i>
-                        </button>
-                    </div>
-                </div>
-		        <div hidden="hidden" class="row" id="msg-e2ee-pass">
-                    <div class="input-field col s12">
-                        <i class="material-icons prefix">lock</i>
-                        <input id="msg-e2ee-pass-input" type="password" autocomplete="new-password" class="">
-                        <label for="msg-e2ee-pass-input"><x-su>passwordForE2EE</x-su></label>
-                    </div>
-		        </div>
-            </div>
-            <div id="msg-added-image"></div>
-        </div>
-        <h4><x-su>messages</x-su></h4>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 0);" type="button">
-			<x-su>received</x-su>
-			<i class="material-icons right">inbox</i>
-        </button>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 1);" type="button">
-			<x-su>sent</x-su>
-			<i class="material-icons right">forward</i>
-        </button>
-        <button class="btn waves-effect waves-light" id="msg-load-btn" onclick="loadMessages(true, 2);" type="button">
-			<x-su>deleted</x-su>
-			<i class="material-icons right">delete</i>
-        </button>
-        <div id="msg-list"></div>
-        <p>
+
             <div class="row" id="storage-bar">
                 <div class="col s4">
                     <x-su>messageStorageUsed</x-su>: 
@@ -146,7 +89,90 @@
                     <x-du>maxMessagesNote</x-du>
                 </p>
             </div>
-        </p>
+
+            <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 grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-sent" class="col s12"><p class="center-align grey-text text-darken-2"><x-su>loadingMessages</x-su></p></div>
+            <div id="beziapp-deleted" class="col s12"><p class="center-align grey-text text-darken-2"><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>
+
+    <!-- Modal Structure -->
+    <div id="beziapp-new-message" class="modal modal-fixed-footer">
+
+        <div class="modal-content">
+
+            <h4><x-su>sendAMessage</x-su></h4>
+
+            <div class="input-field">
+                <i class="material-icons prefix">account_circle</i>
+                <input id="full-name" type="text" class="autocomplete-fullname validate">
+                <label for="full-name"><x-su>recipient</x-su></label>
+            </div>
+
+            <div class="row">
+
+                <div class="col 11s 11m">
+                    <div class="input-field">
+                        <i class="material-icons prefix">subject</i>
+                        <input id="msg-subject" type="text" class="">
+                        <label for="msg-subject"><x-su>messageSubject</x-su></label>
+                    </div>
+                </div>
+
+                <div class="col 1s 1m">
+                    <button class="btn waves-effect waves-light" id="msg-add-photo" type="button">
+                        <i class="material-icons" style="margin: 0 auto">add_a_photo</i>
+                    </button>
+                </div>
+
+            </div>
+
+            <div class="row">
+                <div class="col s6 m4">
+                    <label>
+                        <input type="checkbox" id="encrypt-checkbox" />
+                        <span><x-su>encryptMessage</x-su></span>
+                    </label>
+                </div>
+
+                <div class="col s6 m8">
+                    <div class="input-field" id="encryption-key-input" hidden>
+                        <i class="material-icons prefix">lock</i>
+                        <input id="msg-e2ee-pass-input" type="password" autocomplete="new-password" class="">
+                        <label for="msg-e2ee-pass-input"><x-su>passwordForE2EE</x-su></label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="input-field">
+                <i class="material-icons prefix">mode_edit</i>
+                <textarea id="msg-body" class="materialize-textarea"></textarea>
+                <label for="msg-body"><x-su>messageBody</x-su></label>
+            </div>
+
+        </div>
+
+        <div class="modal-footer">
+            <div id="modal-footer-right">    
+                <a href="#" class="modal-close waves-effect waves-green btn-flat">Cancel <i class="material-icons right">close</i></a>
+                <a href="#" id="msg-send" class="modal-close waves-effect waves-green btn-flat" disabled>Send <i class="material-icons right">send</i></a>
+            </div>
+        </div>
     </div>
 </body>
 </html>