summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--css/styles.css27
-rw-r--r--js/lang/bundle.js6
-rw-r--r--js/messaging.js133
-rw-r--r--pages-src/messaging.bvr152
-rw-r--r--pages/messaging.html152
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>