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>

packages/web/src/modals/ConnectionModalSshTunnelFields.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import FormElectronFileSelector from '../forms/FormElectronFileSelector.svelte';
+
+  import FormPasswordField from '../forms/FormPasswordField.svelte';
+
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
+
+  import FormTextField from '../forms/FormTextField.svelte';
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import getElectron from '../utility/getElectron';
+  import { usePlatformInfo } from '../utility/metadataLoaders';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  const { values, setFieldValue } = getFormContext();
+  const electron = getElectron();
+
+  $: useSshTunnel = $values.useSshTunnel;
+  $: platformInfo = usePlatformInfo();
+
+  $: {
+    if (!$values.sshMode) setFieldValue('sshMode', 'userPassword');
+    if (!$values.sshPort) setFieldValue('sshPort', '22');
+    if (!$values.sshKeyfile && $platformInfo) setFieldValue('sshKeyfile', $platformInfo.defaultKeyFile);
+  }
+</script>
+
+<FormCheckboxField label="Use SSH tunnel" name="useSshTunnel" />
+
+<div class="row">
+  <div class="col-9 mr-1">
+    <FormTextField label="Host" name="sshHost" disabled={!useSshTunnel} templateProps={{ noMargin: true }} />
+  </div>
+  <div class="col-3">
+    <FormTextField label="Port" name="sshPort" disabled={!useSshTunnel} templateProps={{ noMargin: true }} />
+  </div>
+</div>
+<FormTextField label="Bastion host (Jump host)" name="sshBastionHost" disabled={!useSshTunnel} />
+
+<FormSelectField
+  label="SSH Authentication"
+  name="sshMode"
+  disabled={!useSshTunnel}
+  options={[
+    { value: 'userPassword', label: 'Username & password' },
+    { value: 'agent', label: 'SSH agent' },
+    electron && { value: 'keyFile', label: 'Key file' },
+  ]}
+/>
+
+{#if $values.sshMode != 'userPassword'}
+  <FormTextField label="Login" name="sshLogin" disabled={!useSshTunnel} />
+{/if}
+
+{#if $values.sshMode == 'userPassword'}
+  <div class="row">
+    <div class="col-6 mr-1">
+      <FormTextField label="Login" name="sshLogin" disabled={!useSshTunnel} templateProps={{ noMargin: true }} />
+    </div>
+    <div class="col-6">
+      <FormPasswordField
+        label="Password"
+        name="sshPassword"
+        disabled={!useSshTunnel}
+        templateProps={{ noMargin: true }}
+      />
+    </div>
+  </div>
+{/if}
+
+{#if $values.sshMode == 'keyFile'}
+  <div class="row">
+    <div class="col-6 mr-1">
+      <FormElectronFileSelector
+        label="Private key file"
+        name="sshKeyfile"
+        disabled={!useSshTunnel}
+        templateProps={{ noMargin: true }}
+      />
+    </div>
+    <div class="col-6">
+      <FormPasswordField
+        label="Key file passphrase"
+        name="sshKeyfilePassword"
+        disabled={!useSshTunnel}
+        templateProps={{ noMargin: true }}
+      />
+    </div>
+  </div>
+{/if}
+
+{#if useSshTunnel && $values.sshMode == 'agent'}
+  <div class="ml-3 mb-3">
+    {#if $platformInfo && $platformInfo.sshAuthSock}
+      <FontIcon icon="img ok" /> SSH Agent found
+    {:else}
+      <FontIcon icon="img error" /> SSH Agent not found
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .row {
+    margin: var(--dim-large-form-margin);
+    display: flex;
+  }
+</style>

packages/web/src/modals/ConnectionModalSslFields.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import FormElectronFileSelector from '../forms/FormElectronFileSelector.svelte';
+
+  import { getFormContext } from '../forms/FormProviderCore.svelte';
+
+  import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import getElectron from '../utility/getElectron';
+
+  const { values, setFieldValue } = getFormContext();
+  const electron = getElectron();
+
+  $: useSsl = $values.useSsl;
+</script>
+
+<FormCheckboxField label="Use SSL" name="useSsl" />
+<FormElectronFileSelector label="CA Cert (optional)" name="sslCaFile" disabled={!useSsl || !electron} />
+<FormElectronFileSelector label="Certificate (optional)" name="sslCertFile" disabled={!useSsl || !electron} />
+<FormElectronFileSelector label="Key file (optional)" name="sslKeyFile" disabled={!useSsl || !electron} />
+<FormCheckboxField label="Reject unauthorized" name="sslRejectUnauthorized" disabled={!useSsl} />