Add cancel and save buttons to form

src/Form.svelte

@@ -9,8 +9,14 @@
 </script>
 
 <script lang="typescript">
+  import { createEventDispatcher } from 'svelte';
+
   export let fields: Field[];
   export let editable = false ;
+
+  const dispatch = createEventDispatcher();
+  const save = () => dispatch('save');
+  const cancel = () => dispatch('cancel');
 </script>
 
 <style>
@@ -55,6 +61,18 @@
   .label {
     border: 1px solid transparent;
   }
+
+  .actions {
+    margin-top: 2rem;
+    text-align: center;
+    visibility: hidden;
+  }
+  .actions button {
+    margin-left: 1rem;
+  }
+  .actions.editable {
+    visibility: visible;
+  }
 </style>
 
 <div class="fields">
@@ -69,3 +87,12 @@
     </div>
   {/each}
 </div>
+
+<div class="actions" class:editable>
+  <button on:click={cancel} class="small">
+    Cancel
+  </button>
+  <button on:click={save} class="small primary">
+    Save
+  </button>
+</div>

src/base/register/Registration.svelte

@@ -28,6 +28,8 @@
       return registration;
     });
 
+  const save = () => {};
+
   $: isOwner = (registration: Registration): boolean => {
     return registration.owner === ($session && $session.address);
   };
@@ -61,7 +63,7 @@
           Transfer
         </button>
       </header>
-      <Form {editable} {fields} />
+      <Form {editable} {fields} on:save={save} on:cancel={() => editable = false} />
     </main>
   {:else}
     <Modal subtle>