finished sentbox, started message compose

onionr/static-data/www/mail/index.html

@@ -14,12 +14,12 @@
         <div id="infoOverlay" class='overlay'>
         </div>
         <img class='logo' src='/shared/onionr-icon.png' alt='onionr logo'>
-        <span class='logoText'>Onionr Mail</span>
+        <span class='logoText'>Onionr Mail ✉️</span>
         <div class='content'>
             <div>Current Used Identity: <input class='myPub' type='text' readonly> <button class='refresh'>Refresh Page</button></div>
             <br><br>
             <div class="btn-group" id='tabBtns'>
-                <button class='activeTab'>Inbox</button><button>Sentbox</button><button>Drafts</button><button>Send Message</button>
+                <button class='activeTab'>Inbox</button><button>Sentbox</button><button>Send Message</button>
             </div>
             <div id='threads' class='threads'>
                 <div id='threadPlaceholder'>Nothing here yet 😞</div>
@@ -35,6 +35,22 @@
                     </div>
                 </div>
             </div>
+            <div id='sentboxDisplay' class='overlay'>
+                <div class='overlayContent'>
+                    <span class='closeOverlay' overlay='sentboxDisplay'></span>
+                    To: <input id='toID' readonly type='text'>
+                    <div id='sentboxDisplayText' class='pre messageContent'>
+                    </div>
+                </div>
+            </div>
+            <div id='sendMessage' class='overlay'>
+                <div class='overlayContent'>
+                    <span class='closeOverlay' overlay='sendMessage'></span>
+                    To: <input id='draftID' type='text'>
+                    <textarea rows=10 cols=10 placeholder='type your message...' id='draftText'></textarea>
+                    <button id='sendMail' class='successBtn'>Send</button>
+                </div>
+            </div>
         </div>
         <script src='/shared/base64.min.js'></script>
         <script src='/shared/misc.js'></script>

onionr/static-data/www/mail/mail.css

@@ -46,7 +46,6 @@ input{
       background-color: lightgray;
       border: 3px solid black;
       border-radius: 3px;
-      opacity: 1.0;
       color: black;
       font-family: Verdana, Geneva, Tahoma, sans-serif;
       min-height: 100%;
@@ -74,4 +73,25 @@ input{
 }
 .messageContent{
     font-size: 1.5em;
+}
+
+#draftText{
+    margin-top: 1em;
+    margin-bottom: 1em;
+    display: block;
+    width: 50%;
+    height: 75%;
+    min-width: 2%;
+    min-height: 5%;
+    background: white;
+    color: black;
+}
+
+.successBtn{
+    background-color: #28a745;
+    border-radius: 3px;
+    padding: 5px;
+    color: black;
+    font-size: 1.5em;
+    width: 10%;
 }

onionr/static-data/www/mail/mail.js

@@ -54,11 +54,8 @@ function setActiveTab(tabName){
         case 'sentbox':
             getSentbox()
             break
-        case 'drafts':
-            console.log(tabName)
-            break
         case 'send message':
-            console.log(tabName)
+            overlay('sendMessage')
             break
     }
 }
@@ -70,7 +67,7 @@ function loadInboxEntrys(bHash){
         }})
     .then((resp) => resp.json()) // Transform the data into json
     .then(function(resp) {
-        console.log(resp)
+        //console.log(resp)
         var entry = document.createElement('div')
         var bHashDisplay = document.createElement('span')
         var senderInput = document.createElement('input')
@@ -86,13 +83,13 @@ function loadInboxEntrys(bHash){
         }
         else{
             validSig.innerText = 'Signature Validity: Bad'
-            validSig.style.color = 'red';
+            validSig.style.color = 'red'
         }
         if (senderInput.value == ''){
             senderInput.value = 'Anonymous'
         }
         bHashDisplay.innerText = bHash.substring(0, 10)
-        entry.setAttribute('hash', bHash);
+        entry.setAttribute('hash', bHash)
         senderInput.readOnly = true
         dateStr.innerText = humanDate.toString()
         if (metadata['subject'] === undefined || metadata['subject'] === null) {
@@ -140,10 +137,40 @@ function getSentbox(){
         headers: {
           "token": webpass
         }})
-    .then((resp) => resp.text()) // Transform the data into json
-    .then(function(data) {
-        sentbox = data
-      })
+    .then((resp) => resp.json()) // Transform the data into json
+    .then(function(resp) {
+        var keys = [];
+        var entry = document.createElement('div')
+        var entryUsed;
+        for(var k in resp) keys.push(k);
+        for (var i = 0; i < keys.length; i++){
+            var entry = document.createElement('div')
+            var obj = resp[i];
+            var toLabel = document.createElement('span')
+            toLabel.innerText = 'To: '
+            var toEl = document.createElement('input')
+            var preview = document.createElement('span')
+            toEl.readOnly = true
+            toEl.value = resp[keys[i]][1]
+            preview.innerText = resp[keys[i]][0].split('\n')[0];
+            entry.appendChild(toLabel)
+            entry.appendChild(toEl)
+            entry.appendChild(preview)
+            entryUsed = resp[keys[i]]
+            entry.onclick = function(){
+                console.log(resp)
+                showSentboxWindow(toEl.value, entryUsed[0])
+            }
+            threadPart.appendChild(entry)
+        } 
+        threadPart.appendChild(entry)
+      }.bind(threadPart))
+}
+
+function showSentboxWindow(to, content){
+    document.getElementById('toID').value = to
+    document.getElementById('sentboxDisplayText').innerText = content
+    overlay('sentboxDisplay')
 }
 
 fetch('/getblocksbytype/pm', {

onionr/static-data/www/shared/main/style.css

@@ -132,7 +132,6 @@ body{
     left: 0px;
     top: 0px;
     width:100%;
-    opacity: 0.95;
     height:100%;
     text-align:left;
     z-index: 1000;