Allowing "Known remotes" to be import and exported

ui/widgets/connect.vue

@@ -46,6 +46,8 @@
         v-if="tab === 'known' && !inputting"
         :knowns="knowns"
         :launcher-builder="knownsLauncherBuilder"
+        :knowns-export="knownsExport"
+        :knowns-import="knownsImport"
         @select="selectKnown"
         @remove="removeKnown"
         @clear-session="clearSessionKnown"
@@ -106,6 +108,14 @@ export default {
       type: Function,
       default: () => []
     },
+    knownsExport: {
+      type: Function,
+      default: () => []
+    },
+    knownsImport: {
+      type: Function,
+      default: () => []
+    },
     connectors: {
       type: Array,
       default: () => []

ui/widgets/connect_known.css

@@ -24,6 +24,34 @@
   font-size: 0.75em;
   padding: 15px;
   background: #3a3a3a;
+  display: flex;
+  flex-direction: column;
+}
+
+#connect-known-list-list,
+#connect-known-list-empty {
+  flex: auto;
+}
+
+#connect-known-list-empty {
+  text-align: center;
+  color: #999;
+  font-size: 1.2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#connect-known-list-import {
+  margin: 15px 0 10px 0;
+  color: #aaa;
+  font-size: 1.1em;
+  text-align: center;
+}
+
+#connect-known-list-import a {
+  color: #e9a;
+  text-decoration: none;
 }
 
 #connect-known-list li {

ui/widgets/connect_known.vue

@@ -19,7 +19,10 @@
 
 <template>
   <div id="connect-known-list">
-    <ul class="hlst lstcl1">
+    <div v-if="knownList.length <= 0" id="connect-known-list-empty">
+      No known remote available
+    </div>
+    <ul v-else id="connect-known-list-list" class="hlst lstcl1">
       <li v-for="(known, kk) in knownList" :key="kk">
         <div class="labels">
           <span class="type" :style="'background-color: ' + known.data.color">
@@ -63,6 +66,13 @@
         </div>
       </li>
     </ul>
+
+    <div id="connect-known-list-import">
+      Tip: You can
+      <a href="javascript:;" @click="importHosts">import</a> and
+      <a href="javascript:;" @click="exportHosts">export</a>
+      known remotes from and to a file.
+    </div>
   </div>
 </template>
 
@@ -78,6 +88,14 @@ export default {
     launcherBuilder: {
       type: Function,
       default: () => []
+    },
+    knownsExport: {
+      type: Function,
+      default: () => []
+    },
+    knownsImport: {
+      type: Function,
+      default: () => []
     }
   },
   data() {
@@ -159,6 +177,86 @@ export default {
       }
 
       this.$emit("clear-session", uid);
+    },
+    exportHosts() {
+      let el = null;
+
+      try {
+        const dataStr = JSON.stringify(this.knownsExport());
+
+        el = document.createElement("a");
+        el.setAttribute(
+          "href",
+          "data:text/plain;charset=utf-8," + btoa(dataStr)
+        );
+        el.setAttribute("target", "_blank");
+        el.setAttribute("download", "sshwifty.known-remotes.txt");
+        el.setAttribute(
+          "style",
+          "overflow: hidden; opacity: 0; width: 1px; height: 1px; top: -1px;" +
+            "left: -1px; position: absolute;"
+        );
+
+        document.body.appendChild(el);
+
+        el.click();
+      } catch (e) {
+        alert("Unable to export known remotes: " + e);
+      }
+
+      if (el === null) {
+        return;
+      }
+
+      document.body.removeChild(el);
+    },
+    importHosts() {
+      const self = this;
+
+      let el = null;
+
+      try {
+        el = document.createElement("input");
+        el.setAttribute("type", "file");
+        el.setAttribute(
+          "style",
+          "overflow: hidden; opacity: 0; width: 1px; height: 1px; top: -1px;" +
+            "left: -1px; position: absolute;"
+        );
+        el.addEventListener("change", ev => {
+          const t = ev.target;
+
+          if (t.files.length <= 0) {
+            return;
+          }
+
+          t.disabled = "disabled";
+
+          let r = new FileReader();
+
+          r.onload = () => {
+            try {
+              self.knownsImport(JSON.parse(atob(r.result)));
+            } catch (e) {
+              alert("Unable to import known remotes due to error: " + e);
+            }
+          };
+
+          r.readAsText(t.files[0], "utf-8");
+        });
+
+        document.body.appendChild(el);
+
+        el.click();
+      } catch (e) {
+        alert("Unable to load known remotes data due to error: " + e);
+      }
+
+      if (el === null) {
+        return;
+      }
+
+      document.body.removeChild(el);
     }
   }
 };

ui/widgets/connect_switch.vue

@@ -23,12 +23,8 @@
       New remote
     </li>
 
-    <li
-      :class="{ active: tab === 'known', disabled: knownsLength <= 0 }"
-      @click="knownsLength > 0 && switchTab('known')"
-    >
-      Known remotes
-      <span v-if="knownsLength > 0" class="label">{{ knownsLength }}</span>
+    <li :class="{ active: tab === 'known' }" @click="switchTab('known')">
+      Known remotes <span class="label">{{ knownsLength }}</span>
     </li>
   </ul>
 </template>
@@ -47,15 +43,6 @@ export default {
       default: 0
     }
   },
-  watch: {
-    knownsLength(newVal) {
-      if (newVal > 0) {
-        return;
-      }
-
-      this.switchTab("new");
-    }
-  },
   methods: {
     switchTab(to) {
       this.$emit("switch", to);