database login - ask user - test connection

packages/web/src/modals/DatabaseLoginModal.svelte

@@ -30,6 +30,11 @@
 
   export let conid;
   export let passwordMode;
+  export let testedConnection;
+  export let onConnect = null;
+  export let onCancel = null;
+
+  $: usedPasswordMode = testedConnection?.passwordMode ?? passwordMode;
 
   const values = writable({});
   let connection;
@@ -39,19 +44,24 @@
   const testIdRef = createRef(0);
 
   let engineTitle;
+  let closedWithOk = false;
 
   currentModalConid = conid;
 
   onMount(async () => {
-    connection = await getConnectionInfo({ conid });
-    if (passwordMode == 'askPassword') {
+    if (testedConnection) {
+      connection = testedConnection;
+    } else {
+      connection = await getConnectionInfo({ conid });
+    }
+    if (usedPasswordMode == 'askPassword') {
       $values = {
         ...$values,
         user: connection.user,
         connectionLabel: getConnectionLabel(connection),
       };
     }
-    if (passwordMode == 'askUser') {
+    if (usedPasswordMode == 'askUser') {
       $values = {
         ...$values,
         connectionLabel: getConnectionLabel(connection),
@@ -64,6 +74,7 @@
 
   onDestroy(() => {
     currentModalConid = null;
+    if (onCancel && !closedWithOk) onCancel();
   });
 
   function handleCancelTest() {
@@ -72,6 +83,17 @@
   }
 
   async function handleSubmit(ev) {
+    if (onConnect) {
+      closedWithOk = true;
+      onConnect({
+        ...testedConnection,
+        user: usedPasswordMode == 'askUser' ? $values['user'] : testedConnection.user,
+        password: $values['password'],
+      });
+      closeCurrentModal();
+      return;
+    }
+
     isTesting = true;
     testIdRef.update(x => x + 1);
     const testid = testIdRef.get();
@@ -104,8 +126,8 @@
       label="Username"
       name="user"
       autocomplete="username"
-      disabled={passwordMode == 'askPassword'}
-      focused={passwordMode == 'askUser'}
+      disabled={usedPasswordMode == 'askPassword'}
+      focused={usedPasswordMode == 'askUser'}
       saveOnInput
       data-testid="DatabaseLoginModal_username"
     />
@@ -113,7 +135,7 @@
       label="Password"
       name="password"
       autocomplete="current-password"
-      focused={passwordMode == 'askPassword'}
+      focused={usedPasswordMode == 'askPassword'}
       saveOnInput
       data-testid="DatabaseLoginModal_password"
     />

packages/web/src/tabs/ConnectionTab.svelte

@@ -34,6 +34,7 @@
   import { disconnectDatabaseConnection } from '../appobj/DatabaseAppObject.svelte';
   import { useConfig } from '../utility/metadataLoaders';
   import ConnectionAdvancedDriverFields from '../settings/ConnectionAdvancedDriverFields.svelte';
+  import DatabaseLoginModal from '../modals/DatabaseLoginModal.svelte';
 
   export let connection;
   export let tabid;
@@ -63,11 +64,26 @@
 
   const testIdRef = createRef(0);
 
-  async function handleTest(e, requestDbList = false) {
+  function handleTest(requestDbList = false) {
+    const connection = getCurrentConnection();
+    return new Promise((resolve, reject) => {
+      if (connection.passwordMode == 'askPassword' || connection.passwordMode == 'askUser') {
+        showModal(DatabaseLoginModal, {
+          testedConnection: connection,
+          onConnect: conn => handleTestCore(conn, requestDbList).then(res => resolve(res)),
+          onCancel: () => resolve(null),
+        });
+      } else {
+        return handleTestCore(connection, requestDbList);
+      }
+    });
+  }
+
+  async function handleTestCore(connection, requestDbList = false) {
     isTesting = true;
     testIdRef.update(x => x + 1);
     const testid = testIdRef.get();
-    const resp = await apiCall('connections/test', { connection: getCurrentConnection(), requestDbList });
+    const resp = await apiCall('connections/test', { connection, requestDbList });
     if (testIdRef.get() != testid) return;
 
     isTesting = false;
@@ -207,7 +223,7 @@
   // $: console.log('CONN VALUES', $values);
 
   async function getDatabaseList() {
-    const resp = await handleTest({ detail: getCurrentConnection() }, true);
+    const resp = await handleTest(true);
     if (resp && resp.msgtype == 'connected') {
       return resp.databases;
     }
@@ -257,7 +273,11 @@
                 data-testid="ConnectionTab_buttonCancelTest"
               />
             {:else}
-              <FormButton value="Test connection" on:click={handleTest} data-testid="ConnectionTab_buttonDisconnect" />
+              <FormButton
+                value="Test connection"
+                on:click={() => handleTest(false)}
+                data-testid="ConnectionTab_buttonDisconnect"
+              />
             {/if}
           {:else if isConnected}
             <FormButton value="Disconnect" on:click={handleDisconnect} data-testid="ConnectionTab_buttonDisconnect" />
@@ -266,7 +286,7 @@
             {#if isTesting}
               <FormButton value="Cancel test" on:click={handleCancelTest} />
             {:else}
-              <FormButton value="Test" on:click={handleTest} data-testid="ConnectionTab_buttonTest" />
+              <FormButton value="Test" on:click={() => handleTest(false)} data-testid="ConnectionTab_buttonTest" />
             {/if}
             <FormButton value="Save" on:click={handleSave} data-testid="ConnectionTab_buttonSave" />
           {/if}