Grammar change in the license declaration.
[citadel.git] / webcit-ng / static / js / view_mail.js
index fac046decf109e5b9fc85b94144d5967d1dff155..b6e09893ce5c32bbd8067c92923e0cfa46c947d3 100644 (file)
 // This module handles the view for "mailbox" rooms.
 //
-// Copyright (c) 2016-2022 by the citadel.org team
+// Copyright (c) 2016-2023 by the citadel.org team
 //
 // This program is open source software.  Use, duplication, or
-// disclosure are subject to the GNU General Public License v3.
+// disclosure is subject to the GNU General Public License v3.
 
 
-var selected_message = 0;                                                      // Remember the last message that was selected
+var displayed_message = 0;                                                     // ID of message currently being displayed
 var RefreshMailboxInterval;                                                    // We store our refresh timer here
+var highest_mailnum;                                                           // This is used to detect newly arrived mail
+var newmail_notify = {
+        NO  : 0,                                                               // do not perform new mail notifications
+        YES : 1                                                                        // yes, perform new mail notifications
+};
+
+
+// This is the async back end for mail_delete_selected()
+mail_delete_func = async(table, row) => {
+       let m = parseInt(row["id"].substring(12));                              // derive msgnum from row id
+
+       if (is_trash_folder) {
+               response = await fetch(
+                       "/ctdl/r/" + escapeHTMLURI(current_room) + "/" + m,
+                       {
+                               method: "DELETE"                                // If this is the Trash folder, delete permanently
+                       },
+               );
+       }
+       else {
+               response = await fetch(
+                       "/ctdl/r/" + escapeHTMLURI(current_room) + "/" + m,
+                       {
+                               method: "MOVE",                                 // Otherwise, move to the Trash folder
+                               headers: { "Destination" : "/ctdl/r/_TRASH_" }
+                       },
+               );
+       }
+
+       if (response.ok) {                              // If the server accepted the delete, blank out the message div
+               table.deleteRow(row.rowIndex);
+               if (m == displayed_message) {
+                       document.getElementById("ctdl-mailbox-reading-pane").innerHTML = "";
+                       displayed_message = 0;
+               }
+       }
+}
 
 
-// Render reply address for a message (FIXME we might want to figure out in-reply-to)
-function reply_addr(msg) {
-       if (msg.locl) {
-               return([msg.from]);
+// Delete the selected messages (can be activated by mouse click or keypress)
+function mail_delete_selected() {
+       let table = document.getElementById("ctdl-onscreen-mailbox");
+       let i, row;
+       for (i=0; row=table.rows[i]; ++i) {
+               if (row.classList.contains("ctdl-mail-selected")) {
+                       mail_delete_func(table, row);
+               }
+       }
+}
+
+
+// Handler function for keypresses detected while the mail view is displayed.  Mainly for deleting messages.
+function mail_keypress(event) {
+
+       // If the "ctdl-mailbox-pane" no longer exists, the user has navigated to a different part of the site,
+       // so cancel the event listener.
+       try {
+               document.getElementById("ctdl-mailbox-pane").innerHTML;
+       }
+       catch {
+               document.removeEventListener("keydown", mail_keypress);
+               return;
+       }
+
+       const key = event.key.toLowerCase();
+       if (key == "delete") {
+               mail_delete_selected();
+       }
+
+}
+
+
+// Handler function for dragging email messages to other folders
+function mail_dragstart(event) {
+       let i;
+       let count = 0;
+       let table = document.getElementById("ctdl-onscreen-mailbox");
+       let messages_being_dragged = [] ;
+
+       if (event.target.classList.contains("ctdl-mail-selected")) {
+               // The row being dragged IS selected.  See if any OTHER rows are selected, and they will come along for the ride.
+               for (i=1; row=table.rows[i]; ++i) {
+                       if (row.classList.contains("ctdl-mail-selected")) {
+                               count = count + 1;
+                               messages_being_dragged.push(row.id);    // Tell the clipboard what's being moved.
+                       }
+               }
        }
        else {
-               return([msg.from + " <" + msg.rfca + ">"]);
+               // The row being dragged is NOT selected.  It will be dragged on its own, ignoring the selected rows.
+               count = 1;
+               messages_being_dragged.push(event.target.id);           // Tell the clipboard what's being moved.
        }
+
+       // Set the custom drag image to an envelope + number of messages being dragged
+       d = document.getElementById("ctdl_draggo");
+       d.innerHTML = "<font size='+2'><i class='fa fa-envelope' style='color: red'></i> " + count + "</font>"
+       event.dataTransfer.setDragImage(d, 0, 0);
+       event.dataTransfer.setData("text", messages_being_dragged);
+}
+
+
+// Render reply address for a message (FIXME figure out how to deal with "reply-to:")
+function reply_addr(msg) {
+       //if (msg.locl) {
+               //return([msg.from]);
+       //}
+       //else {
+               return([msg.from + " &lt;" + msg.rfca + "&gt;"]);
+       //}
 }
 
 
@@ -30,35 +130,44 @@ function replyall_to(msg) {
 // Render a message into the mailbox view
 // (We want the message number and the message itself because we need to keep the msgnum for reply purposes)
 function mail_render_one(msgnum, msg, target_div, include_controls) {
-       let div = "FIXME";
+       let div = "";
        try {
                outmsg =
                  "<div class=\"ctdl-mmsg-wrapper\">"                           // begin message wrapper
                ;
 
                if (include_controls) {                                         // omit controls if this is a pull quote
+
+                       let subject     = msg.subj              ? escapeJS(msg.subj)            : "" ;
+
                        outmsg +=
                          render_userpic(msg.from)                              // user avatar
                        + "<div class=\"ctdl-mmsg-content\">"                   // begin content
                        + "<div class=\"ctdl-msg-header\">"                     // begin header
                        + "<span class=\"ctdl-msg-header-info\">"               // begin header info on left side
-                       + render_msg_author(msg)
+                       + render_msg_author(msg, views.VIEW_MAILBOX)
                        + "<span class=\"ctdl-msgdate\">"
                        + string_timestamp(msg.time,0)
                        + "</span>"                                             // end msgdate
                        + "</span>"                                             // end header info on left side
                        + "<span class=\"ctdl-msg-header-buttons\">"            // begin buttons on right side
                
-                       + "<span class=\"ctdl-msg-button\">"                    // Reply (mail is always Quoted)
-                       + "<a href=\"javascript:mail_compose(true,'"+msg.wefw+"','"+msgnum+"', reply_addr(msg), [], 'Re: '+msg.subj);\">"
+                       + "<span class=\"ctdl-msg-button\">"                    // Reply
+                       + `<a href="javascript:mail_compose(msg.wefw, ${msgnum}, reply_addr(msg), [], 'Re: ${subject}');">`
                        + "<i class=\"fa fa-reply\"></i> " 
                        + _("Reply")
                        + "</a></span>"
                
-                       + "<span class=\"ctdl-msg-button\">"                    // Reply-All (mail is always Quoted)
-                       + "<a href=\"javascript:mail_compose(true,'"+msg.wefw+"','"+msgnum+"', replyall_to(msg), msg.cccc, 'Re: '+msg.subj);\">"
+                       + "<span class=\"ctdl-msg-button\">"                    // Reply-All
+                       + `<a href="javascript:mail_compose(msg.wefw, ${msgnum}, replyall_to(msg), msg.cccc, 'Re: ${subject}');">`
                        + "<i class=\"fa fa-reply-all\"></i> " 
                        + _("ReplyAll")
+                       + "</a></span>"
+               
+                       + "<span class=\"ctdl-msg-button\">"
+                       + `<a href="javascript:mail_compose(msg.wefw, ${msgnum}, [], [], 'Fwd: ${subject}');">`
+                       + "<i class=\"fa fa-mail-forward\"></i> " 
+                       + _("Forward")
                        + "</a></span>";
                
                        if (can_delete_messages) {
@@ -76,7 +185,7 @@ function mail_render_one(msgnum, msg, target_div, include_controls) {
                        // Display the To: recipients, if any are present
                        if (msg.rcpt) {
                                outmsg += "<br><span>" + _("To:") + " ";
-                               for (var r=0; r<msg.rcpt.length; ++r) {
+                               for (let r=0; r<msg.rcpt.length; ++r) {
                                        if (r != 0) {
                                                outmsg += ", ";
                                        }
@@ -88,7 +197,7 @@ function mail_render_one(msgnum, msg, target_div, include_controls) {
                        // Display the Cc: recipients, if any are present
                        if (msg.cccc) {
                                outmsg += "<br><span>" + _("Cc:") + " ";
-                               for (var r=0; r<msg.cccc.length; ++r) {
+                               for (let r=0; r<msg.cccc.length; ++r) {
                                        if (r != 0) {
                                                outmsg += ", ";
                                        }
@@ -107,6 +216,29 @@ function mail_render_one(msgnum, msg, target_div, include_controls) {
                          "</div>";                                             // end header
                }
 
+               // Display attachments, if any are present (don't do this if we're quoting the message)
+               if ( (msg.part) && (include_controls) ) {
+                       let display_attachments = 0;
+                       for (let r=0; r<msg.part.length; ++r) {
+                               if (msg.part[r].disp == "attachment") {
+                                       if (display_attachments == 0) {
+                                               outmsg += "<ul>";
+                                       }
+                                       display_attachments += 1;
+                                       outmsg += "<li>"
+                                               + "<a href=\"/ctdl/r/" + escapeHTMLURI(current_room) + "/" + msgnum + "/" + msg.part[r].partnum + "/" + escapeHTMLURI(msg.part[r].filename) + "\" target=\"_blank\">"
+                                               + "<i class=\"fa fa-paperclip\"></i>&nbsp;" + msg.part[r].partnum + ": " + msg.part[r].filename
+                                               + " (" + msg.part[r].len + " " + _("bytes") + ")"
+                                               + "</a>"
+                                               + "</li>";
+                               }
+                       }
+                       if (display_attachments > 0) {
+                               outmsg += "</ul><br>";
+                       }
+               }
+
+
                outmsg +=
                  "<div class=\"ctdl-msg-body\" id=\"" + div + "_body\">"       // begin body
                + msg.text
@@ -138,33 +270,60 @@ function mail_display_message(msgnum, target_div, include_controls) {
 
 
 // A message has been selected...
-function select_message(msgnum) {
-       // unhighlight any previously selected message
-       try {
-               document.getElementById("ctdl-msgsum-" + selected_message).classList.remove("ctdl-mail-selected");
+function click_message(event, msgnum) {
+       var table = document.getElementById("ctdl-onscreen-mailbox");
+       var i, m, row;
+
+       // ctrl + click = toggle an individual message without changing existing selection
+       if (event.ctrlKey) {
+               document.getElementById("ctdl-msgsum-" + msgnum).classList.toggle("ctdl-mail-selected");
        }
-       catch {
+
+       // shift + click = select a range of messages (start with row 1 because row 0 is the header)
+       else if (event.shiftKey) {
+               for (i=1; row=table.rows[i]; ++i) {
+                       m = parseInt(row["id"].substring(12));                          // derive msgnum from row id
+                       if (
+                               ((msgnum >= displayed_message) && (m >= displayed_message) && (m <= msgnum))
+                               || ((msgnum <= displayed_message) && (m <= displayed_message) && (m >= msgnum))
+                       ) {
+                               row.classList.add("ctdl-mail-selected");
+                       }
+                       else {
+                               row.classList.remove("ctdl-mail-selected");
+                       }
+               }
        }
 
-       // highlight the newly selected message
-       document.getElementById("ctdl-msgsum-" + msgnum).classList.add("ctdl-mail-selected");
-       //document.getElementById("ctdl-msgsum-" + msgnum).scrollIntoView();
+       // click + no modifiers = select one message and unselect all others (start with row 1 because row 0 is the header)
+       else {
+               for (i=1; row=table.rows[i]; ++i) {
+                       if (row["id"] == "ctdl-msgsum-" + msgnum) {
+                               row.classList.add("ctdl-mail-selected");
+                       }
+                       else {
+                               row.classList.remove("ctdl-mail-selected");
+                       }
+               }
+       }
 
        // display the message if it isn't already displayed
-       if (selected_message != msgnum) {
-               selected_message = msgnum;
+       if (displayed_message != msgnum) {
+               displayed_message = msgnum;
                mail_display_message(msgnum, document.getElementById("ctdl-mailbox-reading-pane"), 1);
        }
 }
 
 
 // render one row in the mailbox table (this could be called from one of several places)
-function mail_render_row(msg) {
-       row     = "<tr "
+function mail_render_row(msg, is_selected) {
+       let row = "<tr "
                + "id=\"ctdl-msgsum-" + msg["msgnum"] + "\" "
-               + "onClick=\"select_message(" + msg["msgnum"] + ");\" "
-               //+ "onmouseenter=\"console.log('mouse in');\" "
-               //+ "onmouseleave=\"console.log('mouse out');\""
+               + (is_selected ? "class=\"ctdl-mail-selected\" " : "")
+               + "onClick=\"click_message(event," + msg["msgnum"] + ");\""
+               + "onselectstart=\"return false;\" "
+               + "draggable=\"true\" "
+               + "ondragstart=\"mail_dragstart(event)\" "
                + ">"
                + "<td class=\"ctdl-mail-subject\">" + msg["subject"] + "</td>"
                + "<td class=\"ctdl-mail-sender\">" + msg["author"] + "</td>"
@@ -175,21 +334,27 @@ function mail_render_row(msg) {
 }
 
 
-// Set up the mailbox view
-function mail_display() {
-
-       // Put the "enter new message" button into the sidebar
-       document.getElementById("ctdl-newmsg-button").innerHTML = "<i class=\"fa fa-edit\"></i>" + _("Write mail");
+// RENDERER FOR THIS VIEW
+function view_render_mail() {
+       // Put the "enter new message" button into the topbar
+       document.getElementById("ctdl-newmsg-button").innerHTML = `<i class="fa fa-edit"></i>&nbsp;` + _("Write mail");
        document.getElementById("ctdl-newmsg-button").style.display = "block";
 
-       document.getElementById("ctdl-main").innerHTML
-               = "<div id=\"ctdl-mailbox-grid-container\" class=\"ctdl-mailbox-grid-container\">"
-               + "<div id=\"ctdl-mailbox-pane\" class=\"ctdl-mailbox-pane\"></div>"
-               + "<div id=\"ctdl-mailbox-reading-pane\" class=\"ctdl-mailbox-reading-pane\"></div>"
-               + "</div>"
-       ;
-
-       render_mailbox_display();
+       // Put the "delete message(s)" button into the topbar
+       let d = document.getElementById("ctdl-delete-button");
+       d.innerHTML = `<i class="fa fa-trash"></i>&nbsp;` + _("Delete");
+       d.style.display = "block";
+       //d.addEventListener("click", mail_delete_selected);
+
+       document.getElementById("ctdl-main").innerHTML = `
+               <div id="ctdl-mailbox-grid-container" class="ctdl-mailbox-grid-container">
+               <div id="ctdl-mailbox-pane" class="ctdl-mailbox-pane"></div>
+               <div id="ctdl-mailbox-reading-pane" class="ctdl-mailbox-reading-pane"></div>
+               </div>
+       `;
+
+       highest_mailnum = 0;                                    // Keep track of highest msg number to track newly arrived msgs
+       render_mailbox_display(newmail_notify.NO);
        try {                                                   // if this was already set up, clear it so there aren't multiple
                clearInterval(RefreshMailboxInterval);
        }
@@ -201,14 +366,12 @@ function mail_display() {
 
 // Refresh the mailbox, either for the first time or whenever needed
 function refresh_mail_display() {
-
        // If the "ctdl-mailbox-pane" no longer exists, the user has navigated to a different part of the site,
        // so cancel the refresh.
        try {
                document.getElementById("ctdl-mailbox-pane").innerHTML;
        }
        catch {
-               console.log("ending refresh_mail_display()");
                clearInterval(RefreshMailboxInterval);
                return;
        }
@@ -218,9 +381,9 @@ function refresh_mail_display() {
        fetch_stat = async() => {
                response = await fetch(url);
                stat = await(response.json());
-               if (stat.room_mtime > room_mtime) {
+               if (stat.room_mtime > room_mtime) {                     // if modified...
                        room_mtime = stat.room_mtime;
-                       render_mailbox_display();
+                       render_mailbox_display(newmail_notify.YES);     // ...force a refresh
                }
        }
        fetch_stat();
@@ -228,85 +391,117 @@ function refresh_mail_display() {
 
 
 // This is where the rendering of the message list in the mailbox view is performed.
-function render_mailbox_display() {
+// Set notify to newmail_notify.NO or newmail_notify.YES depending on whether we are interested in the arrival of new messages.
+function render_mailbox_display(notify) {
 
        url = "/ctdl/r/" + escapeHTMLURI(current_room) + "/mailbox";
        fetch_mailbox = async() => {
                response = await fetch(url);
                msgs = await(response.json());
                if (response.ok) {
+                       var previously_selected = [];
+                       var oldtable = document.getElementById("ctdl-onscreen-mailbox");
+                       var i, row;
+
+                       // If one or more messages was already selected, remember them so we can re-select them
+                       if ( (displayed_message > 0) && (oldtable) ) {
+                               for (i=0; row=oldtable.rows[i]; ++i) {
+                                       if (row.classList.contains("ctdl-mail-selected")) {
+                                               previously_selected.push(parseInt(row["id"].substring(12)));
+                                       }
+                               }
+                       }
 
-                       box =   "<table class=\"ctdl-mailbox-table\" width=100%><tr>"
-                               + "<th>" + _("Subject") + "</th>"
-                               + "<th>" + _("Sender") + "</th>"
-                               + "<th>" + _("Date") + "</th>"
-                               + "<th>#</th>"
-                               + "</tr>";
-
-                       for (var i=0; i<msgs.length; ++i) {
-                               box += mail_render_row(msgs[i]);
+                       // begin rendering the mailbox table
+                       box = `
+                               <table id="ctdl-onscreen-mailbox" class="ctdl-mailbox-table" width=100%><tr>
+                               <th>${_("Subject")}</th>
+                               <th>${ _("Sender")}</th>
+                               <th>${_("Date")}</th>
+                               <th>#</th>
+                               </tr>
+                       `;
+
+                       for (let i=0; i<msgs.length; ++i) {
+                               let m = parseInt(msgs[i].msgnum);
+                               let s = (previously_selected.includes(m));
+                               box += mail_render_row(msgs[i], s);
+                               if (m > highest_mailnum) {
+                                       highest_mailnum = m;
+                               }
                        }
 
                        box +=  "</table>";
                        document.getElementById("ctdl-mailbox-pane").innerHTML = box;
-
-                       if (selected_message > 0) {                     // if we had a message selected, keep it selected
-                               select_message(selected_message);
-                       }
+                       document.addEventListener("keydown", mail_keypress);
                }
        }
        fetch_mailbox();
 }
 
 
-// Compose a new mail message (called by the Reply button here, or by the dispatcher in views.js)
-function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subject) {
-       console.log("mail_compose()");
+// helper function for mail_compose() -- converts a recipient array to a string suitable for the To: or Cc: field
+function recipient_array_to_string(recps_arr) {
 
-       // m_to will be an array of zero or more recipients for the To: field.  Convert it to a string.
-       if (m_to) {
-               m_to = Array.from(new Set(m_to));       // remove dupes
-               m_to_str = "";
-               for (i=0; i<m_to.length; ++i) {
-                       if (i > 0) {
-                               m_to_str += ", ";
-                       }
-                       m_to_str += m_to[i].replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+       let returned_string = ""
+
+       if (recps_arr) {
+               is_reply = 1;
+
+               // first clean up the recipients
+               for (i=0; i<recps_arr.length; ++i) {
+                       recps_arr[i] = recps_arr[i].replaceAll("<", "&lt;").replaceAll(">", "&gt;");
                }
-       }
-       else {
-               m_to_str = "";
-       }
 
-       // m_to will be an array of zero or more recipients for the Cc: field.  Convert it to a string.
-       if (m_cc) {
-               m_cc = Array.from(new Set(m_cc));       // remove dupes
-               m_cc_str = "";
-               for (i=0; i<m_cc.length; ++i) {
+               // remove dupes
+               recps_arr = Array.from(new Set(recps_arr));
+
+               // now convert it to a string
+               returned_string = "";
+               for (i=0; i<recps_arr.length; ++i) {
                        if (i > 0) {
-                               m_cc_str += ", ";
+                               returned_string += ", ";
                        }
-                       m_cc_str += m_cc[i].replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+                       returned_string += recps_arr[i];
                }
        }
-       else {
-               m_cc_str = "";
-       }
+
+       return(returned_string);
+}
+
+
+
+// Compose a new mail message (called by the Reply button here, or by the dispatcher in views.js)
+//
+// references          list of references, be sure to use this in a reply
+// quoted_msgnum       if a reply, the msgid of the most recent message in the chain, the one to which we are replying
+//                     (set to 0 if this is not a reply)
+// m_to                        an ARRAY of zero or more recipients to pre-insert into the To: field
+// m_cc                        an ARRAY of zero or more recipients to pre-insert into the Cc: field
+// m_subject           a string to pre-insert into the Subject: field
+//
+function mail_compose(references, quoted_msgnum, m_to, m_cc, m_subject) {
+
+       let is_reply = 0;
+       let is_quoted = (quoted_msgnum > 0) ? true : false ;
+       let is_fwd = (is_quoted && m_to.length==0 && m_cc.length==0) ;
+
+       // m_to will be an array of zero or more recipients for the To: field.  Convert it to a string.
+       m_to_str = recipient_array_to_string(m_to);
+
+       // m_cc will be an array of zero or more recipients for the Cc: field.  Convert it to a string.
+       m_cc_str = recipient_array_to_string(m_cc);
 
        quoted_div_name = randomString();
 
        // Make the "Write mail" button disappear.  We're already there!
        document.getElementById("ctdl-newmsg-button").style.display = "none";
 
-       // is_quoted    true or false depending on whether the user selected "reply quoted" (is this appropriate for mail?)
-       // references   list of references, be sure to use this in a reply
-       // msgid        if a reply, the msgid of the most recent message in the chain, the one to which we are replying
-
-       // Now display the screen.
+       // Now display the screen.  (Yes, I combined regular strings + template literals.
+       // I just learned template literals.  Converting the whole thing to template literals would be fine.)
        compose_screen =
                // Hidden values that we are storing right here in the document tree for later
-                 "<input id=\"ctdl_mc_is_quoted\" style=\"display:none\" value=\"" + is_quoted + "\"></input>"
-               + "<input id=\"ctdl_mc_references\" style=\"display:none\" value=\"" + references + "\"></input>"
+                 "<div id=\"ctdl-mc-references\" style=\"display:none\">" + references + "</div>"
 
                // Header fields, the composition window, and the button bar are arranged using a Grid layout.
                + "<div id=\"ctdl-compose-mail\" class=\"ctdl-compose-mail\">"
@@ -334,43 +529,76 @@ function mail_compose(is_quoted, references, quoted_msgnum, m_to, m_cc, m_subjec
                + "<div class=\"ctdl-compose-message-box\" id=\"ctdl-editor-body\" contenteditable=\"true\">"
        ;
 
-       if (is_quoted) {
-               compose_screen += "<br><br><blockquote><div id=\"" + quoted_div_name + "\"></div></blockquote>";
+       // If this is a quoted reply, insert a div within which we will render the original message.
+       if (is_quoted && is_fwd) {
+               compose_screen += "<br><br>" + _("--- forwarded message ---") + "<br><div id=\"" + quoted_div_name + "\">QUOTE</div>";
+       }
+       else if (is_quoted) {
+               compose_screen += "<br><br><blockquote><div id=\"" + quoted_div_name + "\">QUOTE</div></blockquote>";
        }
 
-       compose_screen +=
-                 "</div>"
-
-               // The button bar is a Grid element, and is also a Flexbox container.
-               + "<div class=\"ctdl-compose-toolbar\">"
-               + "<span class=\"ctdl-msg-button\" onclick=\"mail_send_message()\"><i class=\"fa fa-paper-plane\" style=\"color:green\"></i> " + _("Send message") + "</span>"
-               + "<span class=\"ctdl-msg-button\">" + _("Save to Drafts") + "</span>"
-               + "<span class=\"ctdl-msg-button\">" + _("Attachments:") + " 0" + "</span>"
-               + "<span class=\"ctdl-msg-button\">" + _("Contacts") + "</span>"
-               + "<span class=\"ctdl-msg-button\" onClick=\"gotoroom(current_room)\"><i class=\"fa fa-trash\" style=\"color:red\"></i> " + _("Cancel") + "</span>"
-               + "</div>"
+       // The button bar is a Grid element, and is also a Flexbox container.
+       compose_screen += `
+               </div>
+               <div class="ctdl-compose-toolbar">
+               <span class="ctdl-msg-button" onclick="mail_send_message()"><i class="fa fa-paper-plane" style="color:green"></i> ${_("Send message")} </span>
+               <span class="ctdl-msg-button"> ${_("Save to Drafts")} </span>
+               <span class="ctdl-msg-button" onClick="show_or_hide_upload_window()"><i class="fa fa-paperclip" style="color:grey"></i> ${_("Attachments:")} <span id="ctdl_num_attachments"> ${uploads.length} </span></span>
+               <span class="ctdl-msg-button">  ${_("Contacts")} </span>
+               <span class="ctdl-msg-button" onClick="flush_uploads();gotoroom(current_room)"><i class="fa fa-trash" style="color:red"></i> ${_("Cancel")} </span>
+               </div>`
        ;
 
+
        document.getElementById("ctdl-main").innerHTML = compose_screen;
-       mail_display_message(quoted_msgnum, document.getElementById(quoted_div_name), 0);
+
        if (m_cc) {
                document.getElementById("ctdl-compose-cc-label").style.display = "block";
                document.getElementById("ctdl-compose-cc-field").style.display = "block";
        }
-}
 
+       activate_uploads("ctdl-editor-body");                           // create the attachments window
+       attachment_counter_divs.push("ctdl_num_attachments");           // make the Attachments: count at the bottom update too
 
+       // If this is a quoted reply, render the original message into the div we set up earlier.
+       if (is_quoted) {
+               mail_display_message(quoted_msgnum, document.getElementById(quoted_div_name), 0);
+       }
+
+       // If this is a forwarded messages, preload its attachments into the forwarded copy.
+       if (is_fwd) {
+               forward_attachments(quoted_msgnum);
+       }
+
+       if (is_reply) {
+               setTimeout(() => { document.getElementById("ctdl-editor-body").focus(); }, 0);
+       }
+       else {
+               setTimeout(() => { document.getElementById("ctdl-compose-to-field").focus(); }, 0);
+       }
+
+}
+
+// Called when the user clicks the button to make the hidden "CC" and "BCC" lines appear.
+// It is also called automatically during a Reply when CC is pre-populated.
 function make_cc_bcc_visible() {
        document.getElementById("ctdl-cc-bcc-buttons").style.display = "none";
+       document.getElementById("ctdl-compose-cc-label").style.display = "block";
+       document.getElementById("ctdl-compose-cc-field").style.display = "block";
        document.getElementById("ctdl-compose-bcc-label").style.display = "block";
        document.getElementById("ctdl-compose-bcc-field").style.display = "block";
 }
 
 
-// Helper function for mail_send_messages() to extract form values.
-// (We have to replace "|" with "!" because "|" is a field separator in the Citadel protocol)
+// Helper function for mail_send_messages() to extract and decode metadata values.
 function msm_field(element_name, separator) {
-       return (document.getElementById(element_name).innerHTML).replaceAll("|",separator);
+       let s1 = document.getElementById(element_name).innerHTML;
+       let s2 = s1.replaceAll("|",separator);          // Replace "|" with "!" because "|" is a field separator in Citadel
+       let s3 = decodeURI(s2);
+       let s4 = document.createElement("textarea");    // This One Weird Trick Unescapes All HTML Entities
+       s4.innerHTML = s3;
+       let s5 = s4.value;
+       return(s5);
 }
 
 
@@ -378,30 +606,29 @@ function msm_field(element_name, separator) {
 function mail_send_message() {
 
        document.body.style.cursor = "wait";
-       url = "/ctdl/r/" + escapeHTMLURI(current_room)
+       deactivate_uploads();
+       let url = "/ctdl/r/" + escapeHTMLURI(current_room)
                + "/dummy_name_for_new_mail"
-               + "?wefw="      + msm_field("ctdl_mc_references", "!")                          // references (if present)
+               + "?wefw="      + msm_field("ctdl-mc-references", "!")                          // references (if present)
                + "&subj="      + msm_field("ctdl-compose-subject-field", " ")                  // subject (if present)
                + "&mailto="    + msm_field("ctdl-compose-to-field", ",")                       // To: (required)
                + "&mailcc="    + msm_field("ctdl-compose-cc-field", ",")                       // Cc: (if present)
                + "&mailbcc="   + msm_field("ctdl-compose-bcc-field", ",")                      // Bcc: (if present)
        ;
-       console.log(url);
-       boundary = randomString();
-       body_text =
-               "--" + boundary + "\r\n"
-               + "Content-type: text/html\r\n"
-               + "Content-transfer-encoding: quoted-printable\r\n"
-               + "\r\n"
-               + quoted_printable_encode(
-                       "<html><body>" + document.getElementById("ctdl-editor-body").innerHTML + "</body></html>"
-               ) + "\r\n"
-               + "--" + boundary + "--\r\n"
-       ;
+       if (uploads.length > 0) {
+               url += "&att=";
+               for (let i=0; i<uploads.length; ++i) {
+                       url += uploads[i]["ref"];
+                       if (i != uploads.length - 1) {
+                               url += ",";
+                       }
+               }
+       }
+       body_text = "<html><body>" + document.getElementById("ctdl-editor-body").innerHTML + "</body></html>\r\n";
 
        var request = new XMLHttpRequest();
        request.open("PUT", url, true);
-       request.setRequestHeader("Content-type", "multipart/mixed; boundary=\"" + boundary + "\"");
+       request.setRequestHeader("Content-type", "text/html");
        request.onreadystatechange = function() {
                if (request.readyState == 4) {
                        document.body.style.cursor = "default";
@@ -413,6 +640,9 @@ function mail_send_message() {
                                        }
                                }
 
+                               // successfully saving a message means the attachments are now gone from the server.
+                               uploads = [];
+
                                // After saving the message, go back to the mailbox view.
                                gotoroom(current_room);
 
@@ -428,4 +658,3 @@ function mail_send_message() {
        };
        request.send(body_text);
 }
-