connection modal converted

packages/web/src/modals/ConnectionModal.svelte

@@ -3,20 +3,52 @@
   import FormButton from '../forms/FormButton.svelte';
   import FormProvider from '../forms/FormProvider.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import axios from '../utility/axios';
   import TabControl from '../widgets/TabControl.svelte';
   import ConnectionModalDriverFields from './ConnectionModalDriverFields.svelte';
+  import ConnectionModalSshTunnelFields from './ConnectionModalSshTunnelFields.svelte';
+  import ConnectionModalSslFields from './ConnectionModalSslFields.svelte';
   import FormFieldTemplateLarge from './FormFieldTemplateLarge.svelte';
 
   import ModalBase from './ModalBase.svelte';
+  import { closeModal } from './modalTools';
 
   export let connection;
+  export let modalId;
+
+  let isTesting;
+  let sqlConnectResult;
+
+  const testIdRef = { current: 0 };
+
+  async function handleTest(e) {
+    isTesting = true;
+    testIdRef.current += 1;
+    const testid = testIdRef.current;
+    const resp = await axios.post('connections/test', e.detail);
+    if (testIdRef.current != testid) return;
+
+    isTesting = false;
+    sqlConnectResult = resp.data;
+  }
+
+  function handleCancelTest() {
+    testIdRef.current += 1; // invalidate current test
+    isTesting = false;
+  }
+
+  async function handleSubmit(e) {
+    axios.post('connections/save', e.detail);
+    closeModal(modalId);
+  }
 </script>
 
 <FormProvider
   template={FormFieldTemplateLarge}
   initialValues={connection || { server: 'localhost', engine: 'mssql@dbgate-plugin-mssql' }}
 >
-  <ModalBase {...$$restProps} noPadding>
+  <ModalBase {...$$restProps} {modalId} noPadding>
     <div slot="header">Add connection</div>
 
     <TabControl
@@ -28,17 +60,42 @@
         },
         {
           label: 'SSH Tunnel',
-          slot: 1,
+          component: ConnectionModalSshTunnelFields,
+        },
+        {
+          label: 'SSL',
+          component: ConnectionModalSslFields,
         },
       ]}
-    >
-      <div slot="1">SSH</div>
-    </TabControl>
+    />
 
     <div slot="footer" class="flex">
       <div class="buttons">
-        <FormButton value="Test" />
-        <FormSubmit value="Save" on:click={v => console.log('SAVE', v.detail)} />
+        {#if isTesting}
+          <FormButton value="Cancel test" on:click={handleCancelTest} />
+        {:else}
+          <FormButton value="Test" on:click={handleTest} />
+        {/if}
+        <FormSubmit value="Save" on:click={handleSubmit} />
+      </div>
+      <div class="test-result">
+        {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'connected'}
+          <div>
+            Connected: <FontIcon icon="img ok" />
+            {sqlConnectResult.version}
+          </div>
+        {/if}
+        {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
+          <div>
+            Connect failed: <FontIcon icon="img error" />
+            {sqlConnectResult.error}
+          </div>
+        {/if}
+        {#if isTesting}
+          <div>
+            <FontIcon icon="icon loading" /> Testing connection
+          </div>
+        {/if}
       </div>
     </div>
   </ModalBase>
@@ -48,4 +105,12 @@
   .buttons {
     flex-shrink: 0;
   }
+
+  .test-result {
+    margin-left: 10px;
+    align-self: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>