Moved text input dialog to frontend

frontend/src/dialogs/input.svelte

@@ -0,0 +1,38 @@
+<script>
+  import Modal from '$components/modal.svelte';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
+
+  export let title = '';
+  export let description = '';
+  export let value = '';
+
+  const dispatch = createEventDispatcher();
+  let input;
+
+  function submit() {
+    dispatch('submit', { value });
+  }
+
+  function close() {
+    dispatch('close');
+  }
+
+  onMount(() => tick().then(() => input.select()));
+</script>
+
+<Modal {title} on:close width="350px">
+  {#if description}
+    <p>{description}</p>
+  {/if}
+
+  <form on:submit|preventDefault={submit}>
+    <label class="field">
+      <input type="text" bind:value bind:this={input} spellcheck="false" />
+    </label>
+  </form>
+
+  <svelte:fragment slot="footer">
+    <button on:click={submit} class="btn">OK</button>
+    <button on:click={close} class="btn secondary">Cancel</button>
+  </svelte:fragment>
+</Modal>

frontend/src/lib/dialogs.js

@@ -1,3 +1,5 @@
+import InputDialog from '../dialogs/input.svelte';
+
 function newDialog(dialogComponent, data = {}) {
   const outlet = document.createElement('div');
   outlet.className = 'dialogoutlet';
@@ -15,6 +17,17 @@ function newDialog(dialogComponent, data = {}) {
   return instance;
 }
 
-const dialogs = { new: newDialog };
+function enterText(title = '', description = '', value = '') {
+  const instance = newDialog(InputDialog, { title, description, value });
+
+  return new Promise(resolve => {
+    instance.$on('submit', event => {
+      instance.$close();
+      resolve(event.detail.value);
+    });
+  });
+}
+
+const dialogs = { new: newDialog, enterText };
 
 export default dialogs;