Change ui to use svelte material ui everywhere

ui/package-lock.json

@@ -1074,6 +1074,26 @@
                 "@material/typography": "^3.1.0"
             }
         },
+        "@material/dialog": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-3.2.0.tgz",
+            "integrity": "sha512-qcxPxIxEYlDWvWAIaYbgRXluctzIvuCMZISuIUomXnd8t7nc4xVLuNHRubXGCtnIHyoE3Vb7IQEqAGM2ZjWxuw==",
+            "dev": true,
+            "requires": {
+                "@material/animation": "^3.1.0",
+                "@material/base": "^3.1.0",
+                "@material/dom": "^3.1.0",
+                "@material/elevation": "^3.1.0",
+                "@material/feature-targeting": "^3.1.0",
+                "@material/ripple": "^3.2.0",
+                "@material/rtl": "^3.2.0",
+                "@material/shape": "^3.1.0",
+                "@material/theme": "^3.1.0",
+                "@material/typography": "^3.1.0",
+                "focus-trap": "^5.0.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/dom": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@material/dom/-/dom-3.1.0.tgz",
@@ -1116,6 +1136,20 @@
             "integrity": "sha512-aXAa1Pv6w32URacE9LfMsl9zI6hFwx1K0Lp3Xpyf4rAkmaAB6z0gOkhicOrVFc0f64YheJgHjE7hJFieVenQdw==",
             "dev": true
         },
+        "@material/floating-label": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-3.2.0.tgz",
+            "integrity": "sha512-szzsSou+xXj3E6InEuOCr8E28IE5EdcBfKRaHoR5EBkzgcRxLuZkFSqD19zsUgVErdTCcRSbeU9mYa6cP8+Nzw==",
+            "dev": true,
+            "requires": {
+                "@material/animation": "^3.1.0",
+                "@material/base": "^3.1.0",
+                "@material/rtl": "^3.2.0",
+                "@material/theme": "^3.1.0",
+                "@material/typography": "^3.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/icon-button": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-3.2.0.tgz",
@@ -1129,6 +1163,33 @@
                 "tslib": "^1.9.3"
             }
         },
+        "@material/line-ripple": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-3.1.0.tgz",
+            "integrity": "sha512-o6E6wrDqoOK4esCnM1MQ9t7DC/JQrzSrwYsYdqtOpGnr3G5Jx7WWVt6GEVh2eNXy8OnVYkJdQbMjyPVEVJb/Dg==",
+            "dev": true,
+            "requires": {
+                "@material/animation": "^3.1.0",
+                "@material/base": "^3.1.0",
+                "@material/theme": "^3.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/notched-outline": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-3.2.0.tgz",
+            "integrity": "sha512-IFuxVoQqlOy/WSSawI2Fglh/U1hS0QtVUiGsc8GUoVUd1pifn7RXidHP3vQrMDEo8M/RwA9p6uveQKjPwW41RA==",
+            "dev": true,
+            "requires": {
+                "@material/animation": "^3.1.0",
+                "@material/base": "^3.1.0",
+                "@material/floating-label": "^3.2.0",
+                "@material/rtl": "^3.2.0",
+                "@material/shape": "^3.1.0",
+                "@material/theme": "^3.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/ripple": {
             "version": "3.2.0",
             "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-3.2.0.tgz",
@@ -1158,6 +1219,26 @@
                 "@material/feature-targeting": "^3.1.0"
             }
         },
+        "@material/textfield": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-3.2.0.tgz",
+            "integrity": "sha512-xPWDkTzurMOxvH0+DsenzboF7dFoUeLcbqX/9vyhWe3aPlO6ZWFNn3lAmYN24ElqR5FEr5zXNYfeIQ4JLT5mYw==",
+            "dev": true,
+            "requires": {
+                "@material/animation": "^3.1.0",
+                "@material/base": "^3.1.0",
+                "@material/dom": "^3.1.0",
+                "@material/floating-label": "^3.2.0",
+                "@material/line-ripple": "^3.1.0",
+                "@material/notched-outline": "^3.2.0",
+                "@material/ripple": "^3.2.0",
+                "@material/rtl": "^3.2.0",
+                "@material/shape": "^3.1.0",
+                "@material/theme": "^3.1.0",
+                "@material/typography": "^3.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/theme": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@material/theme/-/theme-3.1.0.tgz",
@@ -1251,6 +1332,16 @@
                 "svelte": "^3.0"
             }
         },
+        "@smui/dialog": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/dialog/-/dialog-1.0.0-beta.16.tgz",
+            "integrity": "sha512-TOgOUV6lCul3tLfX5Bc7zQrpHQ26RpDtGSy5SDof+K5Q5pQhHU/tCNbAuXaDqnfS9j9nEuaDiDuGFiLecKKMUw==",
+            "dev": true,
+            "requires": {
+                "@material/dialog": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15"
+            }
+        },
         "@smui/fab": {
             "version": "1.0.0-beta.16",
             "resolved": "https://registry.npmjs.org/@smui/fab/-/fab-1.0.0-beta.16.tgz",
@@ -1263,6 +1354,16 @@
                 "@smui/ripple": "^1.0.0-beta.16"
             }
         },
+        "@smui/floating-label": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/floating-label/-/floating-label-1.0.0-beta.16.tgz",
+            "integrity": "sha512-I3LxKegj2dn9FZzdqvoPsBxYXbTjUXEkvzVYZTqVg/tvo8gQgCSCxg4CNet62hw1sk6VHoXfQDvnoksqoTikzw==",
+            "dev": true,
+            "requires": {
+                "@material/floating-label": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15"
+            }
+        },
         "@smui/icon-button": {
             "version": "1.0.0-beta.16",
             "resolved": "https://registry.npmjs.org/@smui/icon-button/-/icon-button-1.0.0-beta.16.tgz",
@@ -1274,6 +1375,26 @@
                 "@smui/ripple": "^1.0.0-beta.16"
             }
         },
+        "@smui/line-ripple": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/line-ripple/-/line-ripple-1.0.0-beta.16.tgz",
+            "integrity": "sha512-4RH/8GAxD2erIMM+2JZRn7UkNxPaeNztstD0KNAY6VEb4cT8XjWs6RNN+Vvp7UD1zkWB/4A9h+JZ0NX5WBZ77Q==",
+            "dev": true,
+            "requires": {
+                "@material/line-ripple": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15"
+            }
+        },
+        "@smui/notched-outline": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/notched-outline/-/notched-outline-1.0.0-beta.16.tgz",
+            "integrity": "sha512-2OX+JfelIY6emb6RPf1+TIQ70Z1q5a+nunDTXQUKKRblv1VKwaPhlvWwh6MJAgn0r49HQ9x1HqXUvGD+cpvBJQ==",
+            "dev": true,
+            "requires": {
+                "@material/notched-outline": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15"
+            }
+        },
         "@smui/paper": {
             "version": "1.0.0-beta.16",
             "resolved": "https://registry.npmjs.org/@smui/paper/-/paper-1.0.0-beta.16.tgz",
@@ -1297,6 +1418,22 @@
                 "@material/ripple": "^3.1.0"
             }
         },
+        "@smui/textfield": {
+            "version": "1.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@smui/textfield/-/textfield-1.0.0-beta.16.tgz",
+            "integrity": "sha512-PKzp8Nua4j7DhOnDe1ysmFb1tx6ypXVTBl0c2SPMKTqI6jqdacrIrLhuD0AMjzMYtktWslKwHCAV0BHwLA07Dw==",
+            "dev": true,
+            "requires": {
+                "@material/feature-targeting": "^3.1.0",
+                "@material/ripple": "^3.1.0",
+                "@material/rtl": "^3.1.0",
+                "@material/textfield": "^3.1.0",
+                "@smui/common": "^1.0.0-beta.15",
+                "@smui/floating-label": "^1.0.0-beta.16",
+                "@smui/line-ripple": "^1.0.0-beta.16",
+                "@smui/notched-outline": "^1.0.0-beta.16"
+            }
+        },
         "@smui/top-app-bar": {
             "version": "1.0.0-beta.16",
             "resolved": "https://registry.npmjs.org/@smui/top-app-bar/-/top-app-bar-1.0.0-beta.16.tgz",
@@ -4294,6 +4431,16 @@
                 "readable-stream": "^2.3.6"
             }
         },
+        "focus-trap": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-5.0.2.tgz",
+            "integrity": "sha512-jQf4ZkX9qOhiNrga4pRh9N2vMqYLRuGM7RZ6VRDLgti04cbG8m7XD4xlU/N0M0cqwDYtXbdzSBQDbRIwqn0FIg==",
+            "dev": true,
+            "requires": {
+                "tabbable": "^4.0.0",
+                "xtend": "^4.0.1"
+            }
+        },
         "follow-redirects": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.9.0.tgz",
@@ -10668,6 +10815,12 @@
             "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
             "dev": true
         },
+        "tabbable": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
+            "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==",
+            "dev": true
+        },
         "tapable": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",

ui/package.json

@@ -20,9 +20,11 @@
         "@babel/preset-env": "^7.6.2",
         "@material/typography": "^3.1.0",
         "@smui/button": "^1.0.0-beta.16",
+        "@smui/dialog": "^1.0.0-beta.16",
         "@smui/fab": "^1.0.0-beta.16",
         "@smui/icon-button": "^1.0.0-beta.16",
         "@smui/paper": "^1.0.0-beta.16",
+        "@smui/textfield": "^1.0.0-beta.16",
         "@smui/top-app-bar": "^1.0.0-beta.16",
         "babel-jest": "^24.9.0",
         "babel-loader": "^8.0.6",

ui/src/EditClient.svelte

@@ -1,4 +1,11 @@
 <script>
+  import Dialog, {Actions, InitialFocus} from '@smui/dialog';
+  import Textfield, {Input, Textarea} from '@smui/textfield';
+  import Icon from '@smui/textfield/icon/index';
+  import HelperText from '@smui/textfield/helper-text/index';
+  import Button, {Group, GroupItem, Label} from '@smui/button';
+  import Paper, {Title, Subtitle, Content} from '@smui/paper';
+
   import Cookie from "cookie-universal";
   import { onMount } from 'svelte';
   import { link, navigate } from "svelte-routing";
@@ -10,14 +17,21 @@
   const clientUrl = `/api/v1/users/` + user + `/clients/` + clientId;
 
   let client = {};
+  let clientName = "";
+  let clientNotes = "";
+  let deleteDialog;
 
   async function getClient() {
     const res = await fetch(clientUrl);
     client = await res.json();
+    clientName = client.Name;
+    clientNotes = client.Notes;
     console.log("Fetched client", client);
   }
 
   async function handleSubmit(event) {
+    client.Name = clientName;
+    client.Notes = clientNotes;
     const res = await fetch(clientUrl, {
       method: "PUT",
       headers: {
@@ -40,75 +54,75 @@
     console.log("Delete!");
   }
 
+  async function deleteHandler(e) {
+    switch (e.detail.action) {
+      case 'delete':
+        const res = await fetch(clientUrl, {
+          method: "DELETE",
+        });
+        await res;
+        navigate("/", { replace: true });
+        break;
+      default:
+        break;
+    }
+  }
+
 	onMount(getClient);
 </script>
 
-<style>
-.container {
-  margin-bottom: 2em;
-}
-
-button {
-margin-top: 1em;
-}
-
-</style>
-
 <div class="container">
-  <h2>Client Properties <small class="text-muted"> {client.Name}</h2>
+
+  <h3 class="mdc-typography--headline3">Client Properties <small class="text-muted">({client.Name})</small></h3>
+
   <form on:submit|preventDefault={handleSubmit}>
-    <div class="form-group">
+
-      <label for="name" class="bmd-label-floating">Name</label>
+    <div class="margins">
-      <input type="text" class="form-control" id="name" bind:value={client.Name}>
+      <Textfield input$id="name" bind:value={clientName} variant="outlined" label="Client Name" input$aria-controls="client-name" input$aria-describedby="client-name-help" />
-      <span class="bmd-help">Friendly name of client.</span>
+      <HelperText id="client-name-help">Friendly name of client / device</HelperText>
     </div>
 
-    <div class="form-group">
+    <div class="margins">
-      <label for="notes" class="bmd-label-floating">Notes</label>
+      <Textfield input$id="notes" fullwidth textarea bind:value={clientNotes} label="Label" input$aria-controls="client-notes" input$aria-describedby="client-notes-help" />
-      <textarea class="form-control" id="notes" rows="3" bind:value={client.Notes}/>
+      <HelperText id="client-notes-help">Notes about the client.</HelperText>
-      <span class="bmd-help">Notes about client.</span>
     </div>
 
-    <button type="submit" class="btn btn-raised btn-primary">Save Changes</button>
+    <Button variant="raised"><Label>Save Changes</Label></Button>
   </form>
 </div>
 
 <div class="container">
-  <h3>Additional Properties</h3>
+  <h3 class="mdc-typography--headline5">Additional Properties</h3>
-  <dl class="row">
+  <dl>
-    <dt class="col-sm-2">IP Address</dt>
+    <dt>IP Address</dt>
-    <dd class="col-sm-10">{client.IP}</dd>
+    <dd>{client.IP}</dd>
-    <dt class="col-sm-2">Private Key</dt>
+    <dt>Private Key</dt>
-    <dd class="col-sm-10">{client.PrivateKey}</dd>
+    <dd>{client.PrivateKey}</dd>
-    <dt class="col-sm-2">Public Key</dt>
+    <dt>Public Key</dt>
-    <dd class="col-sm-10">{client.PublicKey}</dd>
+    <dd>{client.PublicKey}</dd>
   </dl>
 </div>
 
 <div class="container">
-  <h3>Danger Zone</h3>
+  <h3 class="mdc-typography--headline4">Danger Zone</h3>
-  <button type="button" class="btn btn-sm btn-secondary btn-raised btn-danger" data-toggle="modal" data-target="#deleteClient">
-    Delete Client Config
-  </button>
 
-  <div class="modal fade" id="deleteClient" tabindex="-1" role="dialog" aria-labelledby="deleteClientLabel" aria-hidden="true">
+  <Dialog bind:this={deleteDialog} aria-labelledby="delete-title" aria-describedby="delete-content" on:MDCDialog:closed={deleteHandler}>
-    <div class="modal-dialog" role="document">
+  <div class="container">
-      <div class="modal-content">
+    <Title id="delete-title">Delete Client Config</Title>
-        <div class="modal-header">
+    <Content id="delete-content">
-          <h5 class="modal-title" id="deleteClientLabel">Delete {client.Name}</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
       Are you sure you want to delete this client configuration?
+    </Content>
+    <Actions>
+      <Button action="none">
+        <Label>No</Label>
+      </Button>
+      <Button action="delete" default use={[InitialFocus]}>
+        <Label>Yes</Label>
+      </Button>
+    </Actions>
     </div>
-        <div class="modal-footer">
+  </Dialog>
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+
-          <button on:click={handleDeleteClick} type="button" class="btn btn-primary btn-danger" data-dismiss="modal">Delete</button>
+  <Button id="delete" variant="raised" on:click={() => deleteDialog.open()}><Label>Delete Client Config</Label></Button>
-        </div>
-      </div>
-    </div>
-  </div>
 
 </div>

ui/webpack.config.js

@@ -39,6 +39,7 @@ module.exports = {
         ? "source-map" // For development
         : "#eval-source-map",
     output: {
+        publicPath: "/",
         path: __dirname + "/dist",
         filename: "[name].js",
         chunkFilename: "[name].[id].js"