more work on mail

onionr/api.py

@@ -437,6 +437,14 @@ class API:
         def showUptime():
             return Response(str(self.getUptime()))
         
+        @app.route('/getActivePubkey')
+        def getActivePubkey():
+            return Response(self._core._crypto.pubKey)
+
+        @app.route('/getHumanReadable/<name>')
+        def getHumanReadable(name):
+            return Response(self._core._utils.getHumanReadableID(name))
+
         self.httpServer = WSGIServer((self.host, bindPort), app, log=None, handler_class=FDSafeHandler)
         self.httpServer.serve_forever()
 

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

@@ -15,10 +15,10 @@
         <img class='logo' src='/shared/onionr-icon.png' alt='onionr logo'>
         <span class='logoText'>Onionr Mail</span>
         <div class='content'>
-            <button class='refresh'>Refresh</button>
+            <div>Current Used Identity: <input class='myPub' type='text' readonly> <button class='refresh'>Refresh Page</button></div>
             <br><br>
-            <div class="btn-group">
+            <div class="btn-group" id='tabBtns'>
-                <button>Inbox</button><button>Sentbox</button><button>Drafts</button>
+                <button class='activeTab'>Inbox</button><button>Sentbox</button><button>Drafts</button><button>Send Message</button>
             </div>
             <div id='threads' class='threads'>
                 <div id='threadPlaceholder'>Nothing here yet 😞</div>

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

@@ -31,3 +31,13 @@ input{
   .btn-group {
       margin-bottom: 2em;
   }
+
+#tabBtns{
+    margin-bottom: 3em;
+    display: block;
+}
+
+  .activeTab{
+      color: black;
+      background-color: gray;
+  }

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

@@ -1,6 +1,47 @@
+/*
+    Onionr - P2P Anonymous Storage Network
+
+    This file handles the mail interface
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
 pms = ''
 threadPart = document.getElementById('threads')
 threadPlaceholder = document.getElementById('threadPlaceholder')
+tabBtns = document.getElementById('tabBtns')
+
+myPub = httpGet('/getActivePubkey')
+
+function setActiveTab(tabName){
+    threadPart.innerHTML = ""
+    switch(tabName){
+        case 'inbox':
+            getInbox();
+            break
+        case 'sentbox':
+            console.log(tabName)
+            break
+        case 'drafts':
+            console.log(tabName)
+            break
+        case 'send message':
+            console.log(tabName)
+            break
+    }
+}
+
 function getInbox(){
     var showed = false
     for(var i = 0; i < pms.length; i++) {
@@ -26,7 +67,7 @@ function getInbox(){
             var dateStr = document.createElement('span')
             var humanDate = new Date(0)
             humanDate.setUTCSeconds(resp['meta']['time'])
-            senderInput.value = resp['meta']['signer']
+            senderInput.value = httpGet('/getHumanReadable/' + resp['meta']['signer'])
             bHashDisplay.innerText = pms[i - 1].substring(0, 10)
             bHashDisplay.setAttribute('hash', pms[i - 1]);
             senderInput.readOnly = true
@@ -52,6 +93,7 @@ function getInbox(){
 
 }
 
+
 fetch('/getblocksbytype/pm', {
     headers: {
       "token": webpass
@@ -59,6 +101,31 @@ fetch('/getblocksbytype/pm', {
 .then((resp) => resp.text()) // Transform the data into json
 .then(function(data) {
     pms = data.split(',')
-    getInbox(pms)
+    setActiveTab('inbox')
   })
 
+tabBtns.onclick = function(event){
+    var children = tabBtns.children
+    for (var i = 0; i < children.length; i++) {
+        var btn = children[i]
+        btn.classList.remove('activeTab')
+    }
+    event.target.classList.add('activeTab')
+    setActiveTab(event.target.innerText.toLowerCase())
+}
+
+
+var idStrings = document.getElementsByClassName('myPub')
+var myHumanReadable = httpGet('/getHumanReadable/' + myPub)
+for (var i = 0; i < idStrings.length; i++){
+    if (idStrings[i].tagName.toLowerCase() == 'input'){
+        idStrings[i].value = myHumanReadable
+    }
+    else{
+        idStrings[i].innerText = myHumanReadable
+    }
+}
+
+for (var i = 0; i < document.getElementsByClassName('refresh').length; i++){
+    document.getElementsByClassName('refresh')[i].style.float = 'right'
+}

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

@@ -37,7 +37,7 @@ body{
     align-items:center;
  }
  .logo{
-    max-width: 25%;
+    max-width: 20%;
     vertical-align: middle;
  }
  .logoText{