Implemented the host name auto suggestion, and added Preset feature

ui/widgets/connect.vue

@@ -44,11 +44,14 @@
 
       <connect-known
         v-if="tab === 'known' && !inputting"
+        :presets="presets"
+        :restricted-to-presets="restrictedToPresets"
         :knowns="knowns"
         :launcher-builder="knownsLauncherBuilder"
         :knowns-export="knownsExport"
         :knowns-import="knownsImport"
         @select="selectKnown"
+        @select-preset="selectPreset"
         @remove="removeKnown"
         @clear-session="clearSessionKnown"
       ></connect-known>
@@ -100,6 +103,14 @@ export default {
       type: Boolean,
       default: false
     },
+    presets: {
+      type: Array,
+      default: () => []
+    },
+    restrictedToPresets: {
+      type: Boolean,
+      default: () => false
+    },
     knowns: {
       type: Array,
       default: () => []
@@ -160,6 +171,13 @@ export default {
 
       this.$emit("known-remove", uid);
     },
+    selectPreset(preset) {
+      if (this.inputting) {
+        return;
+      }
+
+      this.$emit("preset-select", preset);
+    },
     clearSessionKnown(uid) {
       if (this.inputting) {
         return;

ui/widgets/connect_known.css

@@ -22,13 +22,20 @@
 #connect-known-list {
   min-height: 200px;
   font-size: 0.75em;
-  padding: 15px;
   background: #3a3a3a;
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
+#connect-known-list h3 {
+  font-size: 1.1em;
+  color: #999;
+  margin: 5px 0 15px 0;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
 #connect-known-list.reloaded {
 }
 
@@ -62,10 +69,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 20px;
 }
 
 #connect-known-list-import {
-  margin: 15px 0 10px 0;
+  margin: 15px 0;
   color: #aaa;
   font-size: 1.1em;
   text-align: center;
@@ -76,26 +84,30 @@
   text-decoration: none;
 }
 
-#connect-known-list li {
+#connect-known-list-list {
+  padding: 15px 20px 20px 20px;
+}
+
+#connect-known-list-list li {
   width: 50%;
   position: relative;
 }
 
 @media (max-width: 480px) {
-  #connect-known-list li {
+  #connect-known-list-list li {
     width: 100%;
   }
 }
 
-#connect-known-list li .lst-wrap {
+#connect-known-list-list li > .lst-wrap {
   cursor: pointer;
 }
 
-#connect-known-list li .lst-wrap:hover {
+#connect-known-list-list li > .lst-wrap:hover {
   background: #444;
 }
 
-#connect-known-list li .labels {
+#connect-known-list-list li > .labels {
   position: absolute;
   top: 0;
   left: 0;
@@ -104,14 +116,14 @@
   letter-spacing: 1px;
 }
 
-#connect-known-list li .labels > .type {
+#connect-known-list-list li > .labels > .type {
   display: inline-block;
   padding: 3px;
   background: #a56;
   color: #fff;
 }
 
-#connect-known-list li .labels > .opt {
+#connect-known-list-list li > .labels > .opt {
   display: none;
   padding: 3px;
   background: #a56;
@@ -121,43 +133,44 @@
 }
 
 @media (max-width: 480px) {
-  #connect-known-list li .labels > .opt {
+  #connect-known-list-list li > .labels > .opt {
     display: inline-block;
   }
 }
 
-#connect-known-list li .labels > .opt.link {
+#connect-known-list-list li > .labels > .opt.link {
   background: #287;
   color: #fff;
 }
 
-#connect-known-list li .labels > .opt.link:after {
+#connect-known-list-list li > .labels > .opt.link:after {
   content: "\02936";
 }
 
-#connect-known-list li .labels > .opt.del {
+#connect-known-list-list li > .labels > .opt.del {
   background: #a56;
   color: #fff;
 }
 
-#connect-known-list li .labels > .opt.clr {
+#connect-known-list-list li > .labels > .opt.clr {
   background: #b71;
   color: #fff;
 }
 
-#connect-known-list li:hover .labels > .opt,
-#connect-known-list li:focus .labels > .opt {
+#connect-known-list-list li:hover > .labels > .opt,
+#connect-known-list-list li:focus > .labels > .opt {
   display: inline-block;
 }
 
-#connect-known-list li h2 {
+#connect-known-list-list li > .lst-wrap > h4 {
+  font-size: 1.5em;
   margin-top: 5px;
   margin-bottom: 5px;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
-#connect-known-list li h2::before {
+#connect-known-list-list li > .lst-wrap > h4::before {
   content: ">_";
   color: #555;
   font-size: 0.8em;
@@ -167,7 +180,70 @@
   border-radius: 2px;
 }
 
-#connect-known-list li h2.highlight::before {
+#connect-known-list-list li > .lst-wrap > h4.highlight::before {
   color: #eee;
   background: #555;
 }
+
+#connect-known-list-presets {
+  margin-top: 10px;
+  padding: 15px 20px 20px 20px;
+}
+
+#connect-known-list-presets.last-planel {
+  background: #3f3f3f;
+}
+
+#connect-known-list-presets li {
+  width: 50%;
+  position: relative;
+}
+
+#connect-known-list-presets li.disabled {
+  opacity: 0.5;
+}
+
+@media (max-width: 480px) {
+  #connect-known-list-presets li {
+    width: 100%;
+  }
+}
+
+#connect-known-list-presets li > .lst-wrap {
+  cursor: pointer;
+  border-radius: 0 3px 3px 3px;
+  margin: 12px 10px 10px 0;
+  padding: 10px;
+}
+
+#connect-known-list-presets li > .lst-wrap > .labels {
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-transform: uppercase;
+  font-size: 0.85em;
+  letter-spacing: 1px;
+}
+
+#connect-known-list-presets li > .lst-wrap > .labels > .type {
+  display: inline-block;
+  padding: 3px;
+  background: #a56;
+  color: #fff;
+  border-radius: 3px 3px 3px 0;
+}
+
+#connect-known-list-presets li > .lst-wrap > h4 {
+  font-size: 1.3em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+#connect-known-list-presets-alert {
+  font-size: 1.15em;
+  color: #fff;
+  background: #c73;
+  padding: 10px;
+  margin-top: 10px;
+  line-height: 1.5;
+}

ui/widgets/connect_known.vue

@@ -19,53 +19,104 @@
 
 <template>
   <div id="connect-known-list" :class="{ reloaded: reloaded }">
-    <div v-if="knownList.length <= 0" id="connect-known-list-empty">
+    <div
+      v-if="knownList.length <= 0 && presets <= 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">
-            {{ known.data.type }}
-          </span>
+    <div v-else>
+      <div v-if="knownList.length > 0" id="connect-known-list-list">
+        <h3>Connected before</h3>
 
-          <a
-            class="opt link"
-            href="javascript:;"
-            @click="launcher(known, $event)"
-          >
-            {{ known.copyStatus }}
-          </a>
+        <ul class="hlst lstcl1">
+          <li v-for="(known, kk) in knownList" :key="kk">
+            <div class="labels">
+              <span
+                class="type"
+                :style="'background-color: ' + known.data.color"
+              >
+                {{ known.data.type }}
+              </span>
 
-          <a
-            v-if="!known.data.session"
-            class="opt del"
-            href="javascript:;"
-            @click="remove(known.data.uid)"
+              <a
+                class="opt link"
+                href="javascript:;"
+                @click="launcher(known, $event)"
+              >
+                {{ 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)">
+              <h4
+                :title="known.data.title"
+                :class="{ highlight: known.data.session }"
+              >
+                {{ known.data.title }}
+              </h4>
+              Last: {{ known.data.last.toLocaleString() }}
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <div
+        v-if="presets.length > 0"
+        id="connect-known-list-presets"
+        :class="{
+          'last-planel': knownList.length > 0
+        }"
+      >
+        <h3>Presets</h3>
+
+        <ul class="hlst lstcl2">
+          <li
+            v-for="(preset, pk) in presets"
+            :key="pk"
+            :class="{ disabled: presetDisabled(preset) }"
           >
-            Remove
-          </a>
-          <a
-            v-else
-            class="opt clr"
-            href="javascript:;"
-            title="Clear session data"
-            @click="clearSession(known.data.uid)"
-          >
-            Clear
-          </a>
+            <div class="lst-wrap" @click="selectPreset(preset)">
+              <div class="labels">
+                <span
+                  class="type"
+                  :style="'background-color: ' + preset.command.color()"
+                >
+                  {{ preset.command.name() }}
+                </span>
+              </div>
+
+              <h4 :title="preset.preset.title()">
+                {{ preset.preset.title() }}
+              </h4>
+            </div>
+          </li>
+        </ul>
+
+        <div v-if="restrictedToPresets" id="connect-known-list-presets-alert">
+          The operator has disabled outgoing access to all remote hosts except
+          those been defined as preset.
         </div>
-        <div class="lst-wrap" @click="select(known.data)">
-          <h2
-            :title="known.data.title"
-            :class="{ highlight: known.data.session }"
-          >
-            {{ known.data.title }}
-          </h2>
-          Last: {{ known.data.last.toLocaleString() }}
-        </div>
-      </li>
-    </ul>
+      </div>
+    </div>
 
     <div id="connect-known-list-import">
       Tip: You can
@@ -81,6 +132,14 @@ import "./connect_known.css";
 
 export default {
   props: {
+    presets: {
+      type: Array,
+      default: () => []
+    },
+    restrictedToPresets: {
+      type: Boolean,
+      default: () => false
+    },
     knowns: {
       type: Array,
       default: () => []
@@ -147,6 +206,20 @@ export default {
 
       this.$emit("select", known);
     },
+    presetDisabled(preset) {
+      if (!this.restrictedToPresets || preset.preset.host().length > 0) {
+        return false;
+      }
+
+      return true;
+    },
+    selectPreset(preset) {
+      if (this.busy || this.presetDisabled(preset)) {
+        return;
+      }
+
+      this.$emit("select-preset", preset);
+    },
     async launcher(known, ev) {
       if (known.copying || this.busy) {
         return;