ask password logic & modal

packages/web/src/modals/DatabaseLoginModal.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" context="module">
+  let currentModalConid = null;
+
+  export function isDatabaseLoginVisible() {
+    return !!currentModalConid;
+  }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import { onDestroy, onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import FormPasswordField from '../forms/FormPasswordField.svelte';
+  import FormProviderCore from '../forms/FormProviderCore.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import { apiCall, setVolatileConnectionRemapping } from '../utility/api';
+
+  import { getConnectionInfo } from '../utility/metadataLoaders';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let conid;
+  export let passwordMode;
+
+  const values = writable({});
+  let connection;
+
+  currentModalConid = conid;
+
+  onMount(async () => {
+    connection = await getConnectionInfo({ conid });
+    if (passwordMode == 'askPassword') {
+      $values = {
+        ...$values,
+        user: connection.user,
+        server: connection.server,
+      };
+    }
+  });
+
+  onDestroy(() => {
+    currentModalConid = null;
+  });
+
+  async function handleSubmit(ev) {
+    const con = await apiCall('connections/save-volatile', {
+      conid,
+      user: ev.detail.user,
+      password: ev.detail.password,
+    });
+    setVolatileConnectionRemapping(conid, con._id);
+    closeCurrentModal();
+  }
+</script>
+
+<FormProviderCore {values}>
+  <ModalBase {...$$restProps} simple>
+    <svelte:fragment slot="header">Database Log In</svelte:fragment>
+
+    <FormTextField label="Server" name="server" disabled />
+    <FormTextField
+      label="Username"
+      name="user"
+      autocomplete="username"
+      disabled={passwordMode == 'askPassword'}
+      focused={passwordMode == 'askUser'}
+    />
+    <FormPasswordField
+      label="Password"
+      name="password"
+      autocomplete="current-password"
+      focused={passwordMode == 'askPassword'}
+    />
+
+    <svelte:fragment slot="footer">
+      <FormSubmit value="Connect" on:click={handleSubmit} />
+      <FormStyledButton value="Cancel" on:click={closeCurrentModal} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProviderCore>

packages/web/src/settings/ConnectionDriverFields.svelte

@@ -28,8 +28,12 @@
   $: driver = $extensions.drivers.find(x => x.engine == engine);
   $: defaultDatabase = $values.defaultDatabase;
 
-  $: showUser = driver?.showConnectionField('user', $values);
-  $: showPassword = driver?.showConnectionField('password', $values);
+  $: showUser = driver?.showConnectionField('user', $values) && $values.passwordMode != 'askUser';
+  $: showPassword =
+    driver?.showConnectionField('password', $values) &&
+    $values.passwordMode != 'askPassword' &&
+    $values.passwordMode != 'askUser';
+  $: showPasswordMode = driver?.showConnectionField('password', $values);
   $: isConnected = $openedConnections.includes($values._id) || $openedSingleDatabaseConnections.includes($values._id);
 </script>
 
@@ -159,7 +163,7 @@
   <FormPasswordField label="Password" name="password" disabled={isConnected || disabledFields.includes('password')} />
 {/if}
 
-{#if !disabledFields.includes('password') && showPassword}
+{#if !disabledFields.includes('password') && showPasswordMode}
   <FormSelectField
     label="Password mode"
     isNative
@@ -169,6 +173,8 @@
     options={[
       { value: 'saveEncrypted', label: 'Save and encrypt' },
       { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
+      { value: 'askPassword', label: "Don't save, ask for password" },
+      { value: 'askUser', label: "Don't save, ask for login and password" },
     ]}
   />
 {/if}

packages/web/src/utility/api.ts

@@ -5,6 +5,9 @@ import getElectron from './getElectron';
 // import socket from './socket';
 import { showSnackbarError } from '../utility/snackbar';
 import { isOauthCallback, redirectToLogin } from '../clientAuth';
+import { showModal } from '../modals/modalTools';
+import DatabaseLoginModal, { isDatabaseLoginVisible } from '../modals/DatabaseLoginModal.svelte';
+import _ from 'lodash';
 
 let eventSource;
 let apiLogging = false;
@@ -12,6 +15,8 @@ let apiLogging = false;
 let apiDisabled = false;
 const disabledOnOauth = isOauthCallback();
 
+const volatileConnectionMap = {};
+
 export function disableApi() {
   apiDisabled = true;
 }
@@ -20,6 +25,10 @@ export function enableApi() {
   apiDisabled = false;
 }
 
+export function setVolatileConnectionRemapping(existingConnectionId, volatileConnectionId) {
+  volatileConnectionMap[existingConnectionId] = volatileConnectionId;
+}
+
 function wantEventSource() {
   if (!eventSource) {
     eventSource = new EventSource(`${resolveApi()}/stream`);
@@ -32,7 +41,16 @@ function processApiResponse(route, args, resp) {
   //   console.log('<<< API RESPONSE', route, args, resp);
   // }
 
-  if (resp?.apiErrorMessage) {
+  if (resp?.missingCredentials) {
+    if (!isDatabaseLoginVisible()) {
+      showModal(DatabaseLoginModal, resp.detail);
+    }
+    return null;
+    // return {
+    //   errorMessage: resp.apiErrorMessage,
+    //   missingCredentials: true,
+    // };
+  } else if (resp?.apiErrorMessage) {
     showSnackbarError('API error:' + resp?.apiErrorMessage);
     return {
       errorMessage: resp.apiErrorMessage,
@@ -42,6 +60,10 @@ function processApiResponse(route, args, resp) {
   return resp;
 }
 
+function transformApiArgs(args) {
+  return _.mapValues(args, (v, k) => (k == 'conid' && v && volatileConnectionMap[v] ? volatileConnectionMap[v] : v));
+}
+
 export async function apiCall(route: string, args: {} = undefined) {
   if (apiLogging) {
     console.log('>>> API CALL', route, args);
@@ -55,6 +77,8 @@ export async function apiCall(route: string, args: {} = undefined) {
     return;
   }
 
+  args = transformApiArgs(args);
+
   const electron = getElectron();
   if (electron) {
     const resp = await electron.invoke(route.replace('/', '-'), args);