:art: Add CLI hints to UI

api/public/blockchain.html

@@ -85,13 +85,7 @@
       </div>
     </section>
     <section class="section">
-        <div class="container">
-
-        </div>
-    </section>
-
-
-    <div class="container">
+     <div class="container">
         <table  data-toggle="table"
           data-search="true"
           data-show-columns="true"
@@ -108,7 +102,8 @@
           </thead>    
         </table>
       </div>
-        <script type="text/javascript">
+    </section>
+          <script type="text/javascript">
             $(document).ready(function() {
                 var table = $('#table').DataTable( {
                     "processing": true,

api/public/files.html

@@ -14,6 +14,7 @@
 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
 
 <script src="/js/dt.js"></script> 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
 
 <link rel="stylesheet" type="text/css" href="/css/style.css">
 
@@ -81,19 +82,42 @@
           </h1>
           <h2 class="subtitle">
             Accessible via api at <a href="/api/files" target=_blank><code> /api/files </code></a><br>
-            Receive files by running <code>edgevpn file-receive --name "file_name" --path /dst/file </code>
           </h2>
+
+          <div class="notification is-info is-light">
+            <h1>Send files</h1>
+            <div class="field has-addons">
+              <div class="control has-icons-left">
+                <input id="sendfile" type="text" class="input is-info is-small" size=40 value='edgevpn file-send --name "file_name" --path /src/file'>
+                <span class="icon is-small is-left">
+                  <i class="fas fa-terminal"></i>
+                </span>
+              </div>
+              <div class="control">
+                <button class="btn button is-dark is-small" data-clipboard-target="#sendfile"> Copy to clipboard</button>
+              </div>
+            </div>
+            <hr>
+            <h1>Receive files</h1>
+            <div class="field has-addons">
+              <div class="control has-icons-left">
+                <input id="receivefile" type="text" class="input is-info is-small" size=40 value='edgevpn file-receive --name "file_name" --path /dst/file'>
+                <span class="icon is-small is-left">
+                  <i class="fas fa-terminal"></i>
+                </span>
+              </div>
+              <div class="control">
+                <button class="btn button is-dark is-small" data-clipboard-target="#receivefile"> Copy to clipboard</button>
+              </div>
+            </div>
         </div>
       </div>
     </section>
     <section class="section">
+      
         <div class="container">
-        </div>
-    </section>
-
-
-    <div class="container">
-        <table  data-toggle="table"
+      
+          <table  data-toggle="table"
           data-search="true"
           data-show-columns="true"
           id="table"  >
@@ -106,10 +130,13 @@
             </tr>
           </thead>
         </table> 
-      </div>
+
+        </div>
+    </section>
       
         <script type="text/javascript">
             $(document).ready(function() {
+                var btn = new ClipboardJS('.btn');
                 var table = $('#table').DataTable( {
                     "processing": true,
                     "ajax": {

api/public/index.html

@@ -72,7 +72,6 @@
       </div>
     </div>
   </nav>
-
     <section class="hero">
       <div class="hero-body">
         <div class="container">
@@ -87,7 +86,6 @@
     </section>
     <section class="section">
         <div class="container">
-
           <div class="tile is-ancestor has-text-centered">
             <div class="tile is-parent">
                 <article class="tile is-child box">
@@ -120,13 +118,8 @@
               </article>
           </div>
         </div>
-  
         </div>
     </section>
-
-
- 
-      
         <script type="text/javascript">
             $(document).ready(function() {
 

api/public/machines.html

@@ -86,12 +86,6 @@
       </div>
     </section>
     <section class="section">
-        <div class="container">
-
-        </div>
-    </section>
-
-
     <div class="container">
         <table  data-toggle="table"
           data-search="true"
@@ -110,7 +104,10 @@
             </tr>
           </thead>
         </table> 
+
       </div>
+    </section>
+
       
         <script type="text/javascript">
             $(document).ready(function() {

api/public/services.html

@@ -12,6 +12,7 @@
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
 
 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
 
 <script src="/js/dt.js"></script> 
 
@@ -81,17 +82,38 @@
           </h1>
           <h2 class="subtitle">
             Accessible via api at <a href="/api/services" target=_blank><code> /api/services </code></a><br>
-            Connect to any service by running <code>edgevpn service-connect --name "service_name" --srcaddress ":9090"</code>
           </h2>
+            <div class="notification is-info is-light">
+              <h1>Expose a service</h1>
+              <div class="field has-addons">
+                <div class="control has-icons-left">
+                  <input id="expose" type="text" class="input is-info is-small" size=40 value='edgevpn service-add --name "service_name" --remoteaddress "192.168.1.1:80"'>
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-terminal"></i>
+                  </span>
+                </div>
+                <div class="control">
+                  <button class="btn button is-dark is-small" data-clipboard-target="#expose"> Copy to clipboard</button>
+                </div>
+              </div>
+              <hr>
+              <h1>Connect to a service</h1>
+              <div class="field has-addons">
+                <div class="control has-icons-left">
+                  <input id="connect" type="text" class="input is-info is-small" size=40 value='edgevpn service-connect --name "service_name" --srcaddress ":9090"'>
+                  <span class="icon is-small is-left">
+                    <i class="fas fa-terminal"></i>
+                  </span>
+                </div>
+                <div class="control">
+                  <button class="btn button is-dark is-small" data-clipboard-target="#connect"> Copy to clipboard</button>
+                </div>
+              </div>
+          </div>
         </div>
       </div>
     </section>
     <section class="section">
-        <div class="container">
-        </div>
-    </section>
-
-
     <div class="container">
         <table  data-toggle="table"
           data-search="true"
@@ -107,9 +129,11 @@
           </thead>
         </table> 
       </div>
+    </section>
       
         <script type="text/javascript">
             $(document).ready(function() {
+              var btn = new ClipboardJS('.btn');
                 var table = $('#table').DataTable( {
                     "processing": true,
                     "ajax": {

api/public/users.html

@@ -86,12 +86,7 @@
       </div>
     </section>
     <section class="section">
-        <div class="container">
-        </div>
-    </section>
-
-
-    <div class="container">
+     <div class="container">
         <table  data-toggle="table"
           data-search="true"
           data-show-columns="true"
@@ -106,6 +101,7 @@
           </thead>
         </table> 
       </div>
+    </section>
       
         <script type="text/javascript">
             $(document).ready(function() {