Rename term "device" => "client". Add some WIP ui components

ui/src/About.svelte

@@ -0,0 +1,3 @@
+<h1>About</h1>
+
+Wireguard is nice.

ui/src/App.svelte

@@ -1,11 +1,20 @@
 <script>
-	export let name;
+  import { Router, Link, Route } from "svelte-routing";
+  import About from "./About.svelte";
+  import Clients from "./Clients.svelte";
+  import EditClient from "./EditClient.svelte";
+  import Nav from "./Nav.svelte";
+
+  export let url = "";
 </script>
 
-<style>
-	h1 {
-		color: purple;
-	}
-</style>
-
-<h1>Hello {name}!</h1>
+<Router url="{url}">
+  <Nav />
+  <main role="main" class="container">
+    <div>
+      <Route path="client/:clientId" component="{EditClient}" />
+      <Route path="about" component="{About}" />
+      <Route path="/"><Clients /></Route>
+    </div>
+  </main>
+</Router>

ui/src/Client.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { link } from "svelte-routing";
+
+  export let client;
+
+  let clientId = client[0];
+  let dev = client[1];
+</script>
+
+<div>
+  <h4>{client.Name}</h4>
+  <dl>
+    <dt>IP</dt><dd>{dev.IP}</dd>
+    <dt>PrivateKey</dt><dd>{dev.PrivateKey}</dd>
+    <dt>PublicKey</dt><dd>{dev.PublicKey}</dd>
+  </dl>
+<a href="/client/{clientId}" use:link role="button" class="btn btn-primary material-icons">
+    edit
+</a>
+</div>

ui/src/Clients.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { onMount } from 'svelte';
+	import Client from './Client.svelte';
+
+  let user = "anonymous";
+
+  let clients = [];
+
+	onMount(async () => {
+		const res = await fetch(`/api/v1/users/` + user + `/clients`);
+		clients = Object.entries(await res.json());
+	});
+</script>
+
+
+<h2>My Clients</h2>
+
+<ul>
+	{#each clients as dev}
+    <li><Client client={dev}/></li>
+  {/each}
+</ul>
+
+<button type="button" class="btn btn-primary bmd-btn-fab">
+  <i class="material-icons">add</i>
+</button>

ui/src/EditClient.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { onMount } from 'svelte';
+  import { link } from "svelte-routing";
+
+  export let clientId;
+
+
+  let user = "anonymous";
+
+  let client = {};
+
+	onMount(async () => {
+		const res = await fetch(`/api/v1/users/` + user + `/clients/` + clientId);
+		client = Object.entries(await res.json());
+	});
+</script>
+
+<h2>Edit Client {client.Name}</h2>
+<form>
+
+<div class="form-group">
+    <label for="name" class="bmd-label-floating">Client Name</label>
+    <input type="email" class="form-control" id="name" value={client.Name}>
+    <span class="bmd-help">Friendly name of client.</span>
+  </div>
+</form>
+<p>
+{client}
+</p>

ui/src/Nav.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { Router, Link, Route } from "svelte-routing";
+  import About from "./About.svelte";
+  import Clients from "./Clients.svelte";
+  import NavLink from "./NavLink.svelte";
+</script>
+
+<header>
+  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+    <a class="navbar-brand" href="/">Wireguard VPN</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarCollapse">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item"><NavLink to="/">Clients</NavLink></li>
+        <li class="nav-item"><NavLink to="about">About</NavLink></li>
+      </ul>
+    </div>
+  </nav>
+</header>

ui/src/NavLink.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { Link } from "svelte-routing";
+  export let to = "";
+
+  function getProps({ location, href, isPartiallyCurrent, isCurrent }) {
+    const isActive = href === "/" ? isCurrent : isPartiallyCurrent || isCurrent;
+    // The object returned here is spread on the anchor element's attributes
+    if (isActive) {
+      return { class: "nav-link active" };
+    }
+    return { class: "nav-link" };
+  }
+</script>
+
+<Link to="{to}" getProps="{getProps}">
+  <slot />
+</Link>

ui/src/main.js

@@ -1,10 +1,7 @@
 import App from './App.svelte';
 
-const app = new App({
-	target: document.body,
-	props: {
-		name: 'Wireguard'
-	}
+new App({
+  target: document.body,
+  // hydrate: true,
 });
 
-export default app;

ui/src/server.js

@@ -0,0 +1,14 @@
+const { createServer } = require("http");
+const app = require("./dist/App.js");
+
+createServer((req, res) => {
+  const { html } = app.render({ url: req.url });
+
+  res.write(`
+    <!DOCTYPE html>
+    <body>${html}</body>
+    <script src="/dist/bundle.js"></script>
+  `);
+
+  res.end();
+}).listen(5000);