Session data can be cleared without reloading the page

ui/commands/history.js

@@ -113,6 +113,23 @@ export class History {
     this.saver(this, this.records);
   }
 
+  /**
+   * Clear session data
+   *
+   * @param {string} uid unique name
+   *
+   */
+  clearSession(uid) {
+    for (let i in this.records) {
+      if (this.records[i].uname !== uid) {
+        continue;
+      }
+
+      this.records[i].session = null;
+      break;
+    }
+  }
+
   /**
    * Return all history records
    *

ui/home.vue

@@ -115,6 +115,7 @@
       @connector-select="connectNew"
       @known-select="connectKnown"
       @known-remove="removeKnown"
+      @known-clear-session="clearSessionKnown"
     >
       <connector
         :connector="connector.connector"
@@ -430,6 +431,11 @@ export default {
     removeKnown(uid) {
       this.connector.historyRec.del(uid);
     },
+    clearSessionKnown(uid) {
+      this.connector.historyRec.clearSession(uid);
+
+      this.connector.knowns = this.connector.historyRec.all();
+    },
     cancelConnection() {
       this.connector.inputting = false;
       this.connector.acquired = false;

ui/widgets/connect.vue

@@ -48,6 +48,7 @@
         :launcher-builder="knownsLauncherBuilder"
         @select="selectKnown"
         @remove="removeKnown"
+        @clear-session="clearSessionKnown"
       ></connect-known>
 
       <div id="connect-warning">
@@ -148,6 +149,13 @@ export default {
       }
 
       this.$emit("known-remove", uid);
+    },
+    clearSessionKnown(uid) {
+      if (this.inputting) {
+        return;
+      }
+
+      this.$emit("known-clear-session", uid);
     }
   }
 };

ui/widgets/connect_known.css

@@ -90,6 +90,11 @@
   color: #fff;
 }
 
+#connect-known-list li .labels > .opt.clr {
+  background: #b71;
+  color: #fff;
+}
+
 #connect-known-list li:hover .labels > .opt,
 #connect-known-list li:focus .labels > .opt {
   display: inline-block;

ui/widgets/connect_known.vue

@@ -25,6 +25,7 @@
           <span class="type" :style="'background-color: ' + known.data.color">
             {{ known.data.type }}
           </span>
+
           <a
             class="opt link"
             href="javascript:;"
@@ -32,13 +33,24 @@
           >
             {{ known.copyStatus }}
           </a>
+
           <a
+            v-if="!known.data.session"
             class="opt del"
             href="javascript:;"
             @click="remove(known.data.uid)"
           >
             Remove
           </a>
+          <a
+            v-else
+            class="opt clr"
+            href="javascript:;"
+            title="Clear session data"
+            @click="clearSession(known.data.uid)"
+          >
+            Clear
+          </a>
         </div>
         <div class="lst-wrap" @click="select(known.data)">
           <h2
@@ -140,6 +152,13 @@ export default {
       }
 
       this.$emit("remove", uid);
+    },
+    clearSession(uid) {
+      if (this.busy) {
+        return;
+      }
+
+      this.$emit("clear-session", uid);
     }
   }
 };