work on UI friends manager

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

@@ -18,6 +18,24 @@
 */
 
 friendListDisplay = document.getElementById('friendList')
+addForm = document.getElementById('addFriend')
+
+addForm.onsubmit = function(){
+    var friend = document.getElementsByName('addKey')[0]
+    var alias = document.getElementsByName('data')[0]
+
+    fetch('/friends/add/' + friend.value, {
+        method: 'POST',
+        headers: {
+          "token": webpass
+        }}).then(function(data) {
+            if (alias.value.trim().length > 0){
+            post_to_url('/friends/setinfo/' + friend.value + '/name', {'data': alias.value, 'token': webpass})
+            }
+        })
+
+    return false
+}
 
 fetch('/friends/list', {
     headers: {
@@ -28,16 +46,26 @@ fetch('/friends/list', {
     var keys = [];
     for(var k in resp) keys.push(k);
     console.log(keys)
+    friendListDisplay.innerHTML = 'Click name to view info<br><br>'
     for (var i = 0; i < keys.length; i++){
-        friendListDisplay.innerText = ''
         var peer = keys[i]
         var name = resp[keys[i]]['name']
         if (name === null || name === ''){
-            name = 'Anonymous'
+            name = peer
         }
         var entry = document.createElement('div')
+        var nameText = document.createElement('input')
+        removeButton = document.createElement('button')
+        removeButton.classList.add('friendRemove')
+        removeButton.classList.add('dangerBtn')
+        entry.setAttribute('data-pubkey', peer)
+        removeButton.innerText = 'X'
+        nameText.value = name
+        nameText.readOnly = true
+        nameText.style.fontStyle = "italic"
         entry.style.paddingTop = '8px'
-        entry.innerText = name + ' - ' + peer
+        entry.appendChild(removeButton)
+        entry.appendChild(nameText)
         friendListDisplay.appendChild(entry)
     }
   })

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

@@ -16,8 +16,8 @@
             <h2>Friend Manager</h2>
             <form id='addFriend' action='/' method='POST'>
                 <label>Friend ID: <input type='text' name='addKey' placeholder='public key/ID' required></label>
-                <label>Set Alias: <input type='text' name='addAlias' placeholder='what to call them' required></label>
-                <input type='submit' value='Add Friend'>
+                <label>Set Alias: <input type='text' name='data' placeholder='what to call them'></label>
+                <input type='submit' value='Add Friend' class='successBtn'>
             </form>
             <h2>Friend List:</h2>
             <div id='friendList'>None Yet :(</div>

onionr/static-data/www/friends/style.css

@@ -12,4 +12,15 @@ form label{
     display: block;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
+}
+
+#friendList{
+    display: inline;
+}
+#friendList span{
+    text-align: center;
+}
+#friendList button{
+    display: inline;
+    margin-right: 10px;
 }

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

@@ -150,4 +150,22 @@ body{
  .closeOverlay:after{
      content: '❌';
      padding: 5px;
- }
+ }
+
+ .btn, .warnBtn, .dangerBtn, .successBtn{
+     padding: 5px;
+     border-radius: 5px;
+     border: 2px solid black;
+ }
+.warnBtn{
+    background-color: orange;
+    color: black;
+}
+.dangerBtn{
+    background-color: #f44336;
+    color: black;
+}
+.successBtn{
+    background-color: #4CAF50;
+    color: black;
+}

onionr/static-data/www/shared/misc.js

@@ -20,6 +20,25 @@
 webpass = document.location.hash.replace('#', '')
 nowebpass = false
 
+function post_to_url(path, params) {
+
+    var form = document.createElement("form")
+
+    form.setAttribute("method", "POST")
+    form.setAttribute("action", path)
+
+    for(var key in params) {
+        var hiddenField = document.createElement("input")
+        hiddenField.setAttribute("type", "hidden")
+        hiddenField.setAttribute("name", key)
+        hiddenField.setAttribute("value", params[key])
+        form.appendChild(hiddenField)
+    }
+
+    document.body.appendChild(form)
+    form.submit() 
+}
+
 if (typeof webpass == "undefined"){
     webpass = localStorage['webpass']
 }
@@ -67,3 +86,4 @@ for(var i = 0; i < refreshLinks.length; i++) {
         location.reload()
     }
 }
+