form provider

packages/web/src/modals/ConnectionModal.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
   import registerCommand from '../commands/registerCommand';
   import FormButton from '../forms/FormButton.svelte';
+  import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
 
   import ModalBase from './ModalBase.svelte';
 </script>
 
-<ModalBase {...$$restProps}>
-  <div slot="header">Add connection</div>
-  xxx
-  <div slot="footer" class="flex">
-    <div class="buttons">
-      <FormButton value="Test" />
-      <FormSubmit value="Save" />
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <div slot="header">Add connection</div>
+    xxx
+    <div slot="footer" class="flex">
+      <div class="buttons">
+        <FormButton value="Test" />
+        <FormSubmit value="Save" on:click={() => console.log('SAVE')} />
+      </div>
     </div>
-  </div>
-</ModalBase>
+  </ModalBase>
+</FormProvider>
 
 <style>
   .buttons {

packages/web/src/modals/ModalBase.svelte

@@ -2,6 +2,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import { closeModal } from './modalTools';
   import clickOutside from '../utility/clickOutside';
+  import keycodes from '../utility/keycodes';
 
   export let fullScreen;
   export let noPadding;
@@ -10,6 +11,12 @@
   function handleCloseModal() {
     closeModal(modalId);
   }
+
+  function handleEscape(e) {
+    if (e.keyCode == keycodes.escape) {
+      closeModal(modalId);
+    }
+  }
 </script>
 
 <!-- The Modal -->
@@ -31,6 +38,8 @@
   </div>
 </div>
 
+<svelte:window on:keydown={handleEscape} />
+
 <style>
   .bglayer {
     position: fixed;