Finish trust level implementation

Implementing chat trust level
Implementing logic for trusted contacts
Implementing automatic deletion of untrusted contacts

Author: adgohar

android/tinySSB/app/src/main/assets/web/prod/chat.js

@@ -393,30 +393,66 @@ function load_chat_list() {
                 load_chat_item(nm)
 }
 
-function load_chat_item(nm) { // appends a button for conversation with name nm to the conv list
-    var cl, mem, item, bg, row, badge, badgeId, cnt;
-    cl = document.getElementById('lst:chats');
-    // console.log(nm)
-    if (nm == "ALL")
-        mem = "ALL";
-    else
-        mem = "🔒 " + recps2display(tremola.chats[nm].members);
-    item = document.createElement('div');
-    // item.style = "padding: 0px 5px 10px 5px; margin: 3px 3px 6px 3px;";
-    item.setAttribute('class', 'chat_item_div'); // old JS (SDK 23)
-    if (tremola.chats[nm].forgotten) bg = ' gray'; else bg = ' light';
-    row = "<button class='chat_item_button w100" + bg + "' onclick='load_chat(\"" + nm + "\");' style='overflow: hidden; position: relative;'>";
-    row += "<div style='white-space: nowrap;'><div style='text-overflow: ellipsis; overflow: hidden;'>" + tremola.chats[nm].alias + "</div>";
-    row += "<div style='text-overflow: clip; overflow: ellipsis;'><font size=-2>" + escapeHTML(mem) + "</font></div></div>";
-    badgeId = nm + "-badge"
-    badge = "<div id='" + badgeId + "' style='display: none; position: absolute; right: 0.5em; bottom: 0.9em; text-align: center; border-radius: 1em; height: 2em; width: 2em; background: var(--red); color: white; font-size: small; line-height:2em;'>&gt;9</div>";
+function load_chat_item(nm) {
+    var cl = document.getElementById('lst:chats');
+    var item = document.createElement('div');
+    item.setAttribute('class', 'chat_item_div');
+
+    var mem = (nm == "ALL") ? "ALL" : "🔒 " + recps2display(tremola.chats[nm].members);
+    var bg = (tremola.chats[nm].forgotten) ? ' gray' : ' light';
+
+    // Get the current trust level
+    let trustLevel = getChatTrustLevel(nm);
+    let trustCircle = "🔴";
+    if (trustLevel == 1) {
+        trustCircle = "🟠";
+    } else if (trustLevel == 2) {
+        trustCircle = "🟢";
+    }
+
+    var row = "<button class='chat_item_button w100" + bg + "' onclick='load_chat(\"" + nm + "\");' style='overflow: hidden; position: relative;'>";
+    row += "<div style='white-space: nowrap;'><div style='text-overflow: ellipsis; overflow: hidden;'>";
+    row += tremola.chats[nm].alias + " ";
+    // Insert the trust circle with a unique ID
+    row += "<span id='trustCircle_" + nm + "'>" + trustCircle + "</span>";
+    row += "</div><div style='text-overflow: clip; overflow: ellipsis;'><font size=-2>" + escapeHTML(mem) + "</font></div></div>";
+
+    var badgeId = nm + "-badge";
+    var badge = "<div id='" + badgeId + "' style='display: none; position: absolute; right: 0.5em; bottom: 0.9em; text-align: center; border-radius: 1em; height: 2em; width: 2em; background: var(--red); color: white; font-size: small; line-height:2em;'>&gt;9</div>";
     row += badge + "</button>";
-    row += ""
     item.innerHTML = row;
     cl.appendChild(item);
-    set_chats_badge(nm)
+
+    set_chats_badge(nm);
+}
+
+function reloadChatTrustLevels() {
+    if (!tremola || !tremola.chats) {
+        console.error("tremola.chats not found.");
+        return;
+    }
+
+    for (var nm in tremola.chats) {
+        if (!tremola.chats.hasOwnProperty(nm)) continue;
+
+        var trustLevel = getChatTrustLevel(nm); // assume this returns 0,1,2
+        var trustCircle = "🔴"; // default
+        if (trustLevel == 1) {
+            trustCircle = "🟠";
+        } else if (trustLevel == 2) {
+            trustCircle = "🟢";
+        }
+
+        // Update the DOM element directly
+        var elem = document.getElementById("trustCircle_" + nm);
+        if (elem) {
+            elem.textContent = trustCircle;
+        }
+    }
 }
 
+
+
 function new_conversation() {
     // { "alias":"local notes (for my eyes only)", "posts":{}, "members":[myId], "touched": millis }
     var recps = []

android/tinySSB/app/src/main/assets/web/prod/contacts.js

@@ -75,19 +75,34 @@ function load_contact_item(c) { // [ id, { "alias": "thealias", "initial": "T",
         document.getElementById('lst:contacts-trustLevelTwo').appendChild(item);
     }
 }
+
+function unforget_contact(id) {
+    console.log("unforgetting contact " + id);
+    tremola.contacts[id].forgotten = false;
+    persist();
+    load_contact_list();
+    closeOverlay();
+}
+
 // reload trust levels of all contacts, parameter is a list of contact IDs and their trust levels
 function reloadContactsTrustLevels(contactsTrustLevelsJSON) {
     const contactsTrustLevels = JSON.parse(contactsTrustLevelsJSON);
     for (const contactId in contactsTrustLevels) {
         const id = encodeScuttlebuttId(contactId);
         console.log(tremola.contacts);
-        //check if contact trust level is different from the one in the contacts list
-        if (tremola.contacts[id]["trusted"] != contactsTrustLevels[contactId]) {
+        //check if contact trust level is lower than the one in the contacts list
+        if (tremola.contacts[id]["trusted"] < contactsTrustLevels[contactId]) {
+            //if contact is forgotten
+            if (tremola.contacts[id].forgotten) {
+                // ask the user if they want to unforget the contact
+                launch_toast("Unforget Contact", "This contact is in your forgotten list, do you also want to unforget it?", function() { unforget_contact(id); }, closeOverlay);
+            }
             launch_snackbar("Updated trust level for " + tremola.contacts[id].alias + " to " + contactsTrustLevels[contactId]);
         }
         tremola.contacts[id]["trusted"] = contactsTrustLevels[contactId];
         console.log("contactsTrustLevel: " + contactId + " " + contactsTrustLevels[contactId]);
     }
+    reloadChatTrustLevels();
     persist();
     load_contact_list();
 }
@@ -145,7 +160,33 @@ function encodeScuttlebuttId(hexString) {
     }
 }
 
+function deleteContactButton(contactID) {
+    backend("contacts:delete " + decodeScuttlebuttId(new_contact_id));
+    closeOverlay();
+}
+
+function getChatTrustLevel(chat) {
+    if (chat != "ALL") {
+        let contacts = tremola.chats[chat].members;
+        //get the minimum trust level of all contacts
+        let trustLevel = 2;
+        for (var i = 0; i < contacts.length; i++) {
+            let contact = tremola.contacts[contacts[i]];
+            if (contact.trusted < trustLevel) {
+                trustLevel = contact.trusted;
+            }
+        }
+        return trustLevel
+    } else {
+        return 0
+    }
+}
+
 function show_contact_details(id) {
+    //for each entry in tremola.chats
+    for (var chat in tremola.chats) {
+        console.log("chat: " + chat + "trust levell: " + getChatTrustLevel(chat));
+    }
     if (id == myId) {
         document.getElementById('old_contact_alias_hdr').innerHTML = "Alias: (own name, visible to others)"
     } else {
@@ -161,27 +202,35 @@ function show_contact_details(id) {
     details += '<br><div>IAM-Alias: &nbsp;' + (c.iam != "" ? c.iam : "&mdash;") + '</div>\n';
     details += '<br><div>Shortname: &nbsp;' + id2b32(id) + '</div>\n';
     details += '<br><div style="word-break: break-all;">SSB identity: &nbsp;<tt>' + id + '</tt></div>\n';
-    details += '<br><div class=settings style="padding: 0px;"><div class=settingsText>Forget this contact</div><div style="float: right;"><label class="switch"><input id="hide_contact" type="checkbox" onchange="toggle_forget_contact(this);"><span class="slider round"></span></label></div></div>'
-
-    // Add slider with colored gradient
-    details += '<br><div>Trust Level:</div>\n';
-    details += '<div style="display: flex; align-items: center;">';
-    details += '<input type="range" id="slider" min="0" max="2" step="1" value="' + c['trusted'] + '" style="flex: 1; margin-right: 10px; appearance: none; -webkit-appearance: none; background: linear-gradient(to right, red 0%, orange 50%, green 100%); height: 8px; border-radius: 5px;">';
-    details += '<button id="setButton" style="flex: 0;">Set</button>\n';
-    details += '</div>';
-
-    // Add the numbers under the slider with precise positioning using percentage for better alignment
-    details += '<div style="position: relative; width: 100%; padding: 0;">';
-    details += '<span style="position: absolute; left: 0;">0</span>';
-    details += '<span style="position: absolute; left: 40%; transform: translateX(-40%);">1</span>';
-    details += '<span style="position: absolute; right: 20%;">2</span>';
-    details += '</div>';
+    if (id != myId)
+        details += '<br><div class=settings style="padding: 0px;"><div class=settingsText>Forget this contact</div><div style="float: right;"><label class="switch"><input id="hide_contact" type="checkbox" onchange="toggle_forget_contact(this);"><span class="slider round"></span></label></div></div>'
+
+    if (id != myId) {
+        // Add slider with colored gradient
+        details += '<br><div>Trust Level:</div>\n';
+        details += '<div style="display: flex; align-items: center;">';
+        details += '<input type="range" id="slider" min="0" max="2" step="1" value="' + c['trusted'] + '" style="flex: 1; margin-right: 10px; appearance: none; -webkit-appearance: none; background: linear-gradient(to right, red 0%, orange 50%, green 100%); height: 8px; border-radius: 5px;">';
+        details += '<button id="setButton" style="flex: 0;">Set</button>\n';
+        details += '</div>';
+
+        // Add the numbers under the slider with precise positioning using percentage for better alignment
+        details += '<div style="position: relative; width: 100%; padding: 0;">';
+        details += '<span style="position: absolute; left: 0;">0</span>';
+        details += '<span style="position: absolute; left: 40%; transform: translateX(-40%);">1</span>';
+        details += '<span style="position: absolute; right: 20%;">2</span>';
+        details += '</div>';
+    }
 
     // Add error message field to the details HTML
     details += '<br><div id="errorMessage" class="error" style="color: red;"></div>\n';
 
+    // Add button to delete contact if id is not myId
+    if (id != myId)
+        details += '<br><button class="button" onclick="launch_toast(\'Delete Contact\', \'Are you sure you want to delete this contact?\', function() { deleteContactButton(\'' + decodeScuttlebuttId(id) + '\'); }, closeOverlay);">Delete Contact</button>';
+
     document.getElementById('old_contact_details').innerHTML = details;
     document.getElementById('old_contact-overlay').style.display = 'initial';
+
     document.getElementById('overlay-bg').style.display = 'initial';
     document.getElementById('hide_contact').checked = c.forgotten;
 
@@ -220,7 +269,6 @@ function show_contact_details(id) {
     // Attach event listener to the button after it is added to the DOM
     document.getElementById("setButton").addEventListener("click", setSliderValue);
 
-    document.getElementById('old_contact_alias').focus();
     overlayIsActive = true;
 }
 
@@ -239,8 +287,36 @@ function changeTrustLevel(contactID, value) {
 }
 
 function toggle_forget_contact(e) {
-    var c = tremola.contacts[new_contact_id];
-    c.forgotten = !c.forgotten;
+    if (e.checked) {
+        //get the contrast's trust level
+        let trustLevel = tremola.contacts[new_contact_id]["trusted"];
+        if (trustLevel == 2 || trustLevel == 1) {
+            var c = tremola.contacts[new_contact_id];
+            c.forgotten = !c.forgotten;
+            persist();
+            closeOverlay();
+            load_contact_list();
+            return;
+        } else if (trustLevel == 0) {
+            //send backend request to delete the contact's feed
+            backend("contacts:delete " + decodeScuttlebuttId(new_contact_id));
+            closeOverlay();
+            //reload the contact list
+            load_contact_list();
+        }
+    } else {
+        var c = tremola.contacts[new_contact_id];
+        c.forgotten = !c.forgotten;
+        persist();
+        closeOverlay();
+        load_contact_list();
+    }
+}
+
+//function to forget contact with id as paramter
+function forget_contact(contact_id) {
+    var c = tremola.contacts[encodeScuttlebuttId(contact_id)];
+    c.forgotten = true;
     persist();
     closeOverlay();
     load_contact_list();
@@ -290,4 +366,15 @@ function save_content_alias() {
     closeOverlay();
 }
 
+function deleteContact(contactID) {
+    //convert the contactID to scuttlebutt format
+    contactID = encodeScuttlebuttId(contactID);
+    //remove the contact from the contacts list
+    delete tremola.contacts[contactID];
+    persist();
+    closeOverlay();
+    load_contact_list();
+    launch_snackbar("Contact deleted successfully");
+}
+
 // --- eof

android/tinySSB/app/src/main/assets/web/tremola.css

@@ -399,6 +399,43 @@
   animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }
 
+#toast-overlay {
+    display: none;
+    position: fixed;
+    top: 40vh;
+    background-color: var(--neutralCol); /* Black background color */
+    z-index: 1; /* Add a z-index if needed */
+
+}
+
+#toast-button-yes {
+    background-color: var(--lightA);
+    color: var(--fontCol);
+    border: none;
+    border-radius: 4px;
+    padding: 10px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
+#toast-button-no {
+    background-color: var(--lightB);
+    color: var(--fontCol);
+    border: none;
+    border-radius: 4px;
+    padding: 10px 24px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
 /* Animations to fade the snackbar in and out */
 @-webkit-keyframes fadein {
   from {bottom: 0; opacity: 0;}

android/tinySSB/app/src/main/assets/web/tremola.html

@@ -191,6 +191,15 @@ <h3><span class="circle red"></span> Other Contacts</h3>
         &nbsp;<br><div style="word-break: break-all;">SSB identifier: &nbsp;@sdfjdskfhdshfjkdhfhdjskfhdshfhdsjfkdhf.ed25519</div>
       </div>
     </div>
+
+    <div id="toast-overlay" class="qr-overlay">
+      <div id="toast-title" style="margin-bottom: 25px;">Confirmation</div>
+      <div id="toast-text" style="margin-bottom: 25px;">Are you sure you want to delete this item?</div>
+      <div style="text-align: right; margin-top: 20px;">
+        <button id ="toast-button-yes" onclick="confirmation_yes()">Yes</button>
+        <button id="toast-button-no" onclick="confirmation_no()">No</button>
+      </div>
+    </div>
     &nbsp;
     <div id='confirm_contact-overlay' class='qr-overlay'>
       Enter desired alias:<br>

android/tinySSB/app/src/main/assets/web/tremola.js

@@ -646,11 +646,8 @@ function b2f_new_event(e) { // incoming SSB log event: we get map with three ent
                 ch["posts"][e.header.ref] = p;
                 // console.log(`chat add tips ${a[1]}`)
                 ch.timeline.add(e.header.ref, a[1])
-                if (ch["touched"] < e.header.tst)
-                    ch["touched"] = e.header.tst
                 if (curr_scenario == "posts" && curr_chat == conv_name) {
                     load_chat(conv_name); // reload all messages (not very efficient ...)
-                    ch.lastRead = Object.keys(ch.posts).length; // Date.now();
                 }
                 set_chats_badge(conv_name)
             } else {
@@ -752,6 +749,7 @@ function b2f_new_contact(fid, trustLevel="untrusted", alias="") {
         "color": colors[Math.floor(colors.length * Math.random())],
         "iam": "", "forgotten": false, "trusted": trusted
     };
+    backend("contacts:checkDeleted " + decodeScuttlebuttId(fid));
     console.log(tremola.contacts[fid]);
     persist();
     load_contact_list();

android/tinySSB/app/src/main/assets/web/tremola_ui.js

@@ -309,6 +309,7 @@ function closeOverlay() {
     document.getElementById('div:modal_img').style.display = 'none';
     document.getElementById('connection-overlay').style.display = 'none';
     document.getElementById('import-id-overlay').style.display = 'none';
+    document.getElementById('toast-overlay').style.display = 'none';
 
     // kanban overlays
     document.getElementById('div:menu_history').style.display = 'none';
@@ -376,6 +377,20 @@ function launch_snackbar(txt) {
     }, 3000);
 }
 
+function launch_toast(title, description, function_yes, function_no) {
+    closeOverlay();
+    var ts = document.getElementById("toast-overlay");
+    //set the title
+    document.getElementById("toast-title").innerHTML = title;
+    //set the description
+    document.getElementById("toast-text").innerHTML = description;
+    //set the functions
+    document.getElementById("toast-button-yes").onclick = function_yes;
+    document.getElementById("toast-button-no").onclick = function_no;
+    //show the toast
+    ts.style.display = 'inline';
+}
+
 function chat_open_attachments_menu() {
     closeOverlay()
     document.getElementById('overlay-bg').style.display = 'initial'
@@ -449,7 +464,11 @@ function qr_scan_success(s) {
                     }
                     backend("contacts:setTrust " + decodeScuttlebuttId(new_contact_id) + " 2" + " " + tips);
                 } else if (tremola.contacts[new_contact_id].trusted == 2) {
-                    launch_snackbar("This contact already exists and is verified");
+                    if (tremola.contacts[new_contact_id].forgotten) {
+                        launch_toast("Unforget Contact", "This contact is in your forgotten list, do you also want to unforget it?", function() { unforget_contact(new_contact_id); }, closeOverlay);
+                    } else {
+                        launch_snackbar("This contact already exists and is verified");
+                    }
                 }
                 return;
             }