ssh tunnel - alternative modes

packages/web/src/impexp/createImpExpScript.js

@@ -31,7 +31,7 @@ async function getConnection(extensions, storageType, conid, database) {
     const driver = findEngineDriver(conn, extensions);
     return [
       {
-        ..._.pick(conn, ['server', 'engine', 'user', 'password', 'port', 'authType']),
+        ..._.omit(conn, ['_id', 'displayName']),
         database,
       },
       driver,

packages/web/src/modals/ConnectionModal.js

@@ -8,6 +8,7 @@ import {
   FormSubmit,
   FormPasswordField,
   FormCheckboxField,
+  FormElectronFileSelector,
 } from '../utility/forms';
 import ModalHeader from './ModalHeader';
 import ModalFooter from './ModalFooter';
@@ -17,6 +18,8 @@ import LoadingInfo from '../widgets/LoadingInfo';
 import { FontIcon } from '../icons';
 import { FormProvider, useForm } from '../utility/FormProvider';
 import { TabControl, TabPage } from '../widgets/TabControl';
+import { usePlatformInfo } from '../utility/metadataLoaders';
+import getElectron from '../utility/getElectron';
 // import FormikForm from '../utility/FormikForm';
 
 function DriverFields({ extensions }) {
@@ -69,15 +72,55 @@ function DriverFields({ extensions }) {
 }
 
 function SshTunnelFields() {
-  const { values } = useForm();
-  const { useSshTunnel } = values;
+  const { values, setFieldValue } = useForm();
+  const { useSshTunnel, sshMode, sshKeyfile } = values;
+  const platformInfo = usePlatformInfo();
+  const electron = getElectron();
+
+  React.useEffect(() => {
+    if (useSshTunnel && !sshMode) {
+      setFieldValue('sshMode', 'userPassword');
+    }
+    if (useSshTunnel && sshMode == 'keyFile' && !sshKeyfile) {
+      setFieldValue('sshKeyfile', platformInfo.defaultKeyFile);
+    }
+  }, [useSshTunnel, sshMode]);
+
   return (
     <>
       <FormCheckboxField label="Use SSH tunnel" name="useSshTunnel" />
-      <FormTextField label="SSH Host" name="sshHost" disabled={!useSshTunnel} />
-      <FormTextField label="SSH Port" name="sshPort" disabled={!useSshTunnel} />
-      <FormTextField label="SSH Login" name="sshLogin" disabled={!useSshTunnel} />
-      <FormPasswordField label="SSH Password" name="sshPassword" disabled={!useSshTunnel} />
+      <FormTextField label="Host" name="sshHost" disabled={!useSshTunnel} />
+      <FormTextField label="Port" name="sshPort" disabled={!useSshTunnel} />
+      <FormTextField label="Bastion host (Jump host)" name="sshBastionHost" disabled={!useSshTunnel} />
+
+      <FormSelectField label="SSH Authentication" name="sshMode" disabled={!useSshTunnel}>
+        <option value="userPassword">Username &amp; password</option>
+        <option value="agent">SSH agent</option>
+        {!!electron && <option value="keyFile">Key file</option>}
+      </FormSelectField>
+
+      <FormTextField label="Login" name="sshLogin" disabled={!useSshTunnel} />
+
+      {sshMode == 'userPassword' && <FormPasswordField label="Password" name="sshPassword" disabled={!useSshTunnel} />}
+      {useSshTunnel &&
+        sshMode == 'agent' &&
+        (platformInfo.sshAuthSock ? (
+          <div>
+            <FontIcon icon="img ok" /> SSH Agent found
+          </div>
+        ) : (
+          <div>
+            <FontIcon icon="img error" /> SSH Agent not found
+          </div>
+        ))}
+
+      {sshMode == 'keyFile' && (
+        <FormElectronFileSelector label="Private key file" name="sshKeyfile" disabled={!useSshTunnel} />
+      )}
+
+      {sshMode == 'keyFile' && (
+        <FormPasswordField label="Key file passphrase" name="sshKeyfilePassword" disabled={!useSshTunnel} />
+      )}
     </>
   );
 }

packages/web/src/utility/forms.js

@@ -15,6 +15,13 @@ import axios from './axios';
 import useTheme from '../theme/useTheme';
 import { useForm, useFormFieldTemplate } from './FormProvider';
 import { FontIcon } from '../icons';
+import getElectron from './getElectron';
+import InlineButton from '../widgets/InlineButton';
+import styled from 'styled-components';
+
+const FlexContainer = styled.div`
+  display: flex;
+`;
 
 export function FormFieldTemplate({ label, children, type }) {
   const FieldTemplate = useFormFieldTemplate();
@@ -321,3 +328,32 @@ export function FormArchiveFolderSelect({ name, additionalFolders = [], ...other
     />
   );
 }
+
+export function FormElectronFileSelectorRaw({ name }) {
+  const { values, setFieldValue } = useForm();
+  const handleBrowse = () => {
+    const electron = getElectron();
+    if (!electron) return;
+    const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+      defaultPath: values[name],
+      properties: ['showHiddenFiles'],
+    });
+    const filePath = filePaths && filePaths[0];
+    if (filePath) setFieldValue(name, filePath);
+  };
+  return (
+    <FlexContainer>
+      <TextField value={values[name]} onClick={handleBrowse} readOnly />
+      <InlineButton onClick={handleBrowse}>Browse</InlineButton>
+    </FlexContainer>
+  );
+}
+
+export function FormElectronFileSelector({ label, name, ...other }) {
+  const FieldTemplate = useFormFieldTemplate();
+  return (
+    <FieldTemplate label={label} type="select">
+      <FormElectronFileSelectorRaw name={name} {...other} />
+    </FieldTemplate>
+  );
+}

packages/web/src/utility/metadataLoaders.js

@@ -46,6 +46,12 @@ const configLoader = () => ({
   reloadTrigger: 'config-changed',
 });
 
+const platformInfoLoader = () => ({
+  url: 'config/platform-info',
+  params: {},
+  reloadTrigger: 'platform-info-changed',
+});
+
 const favoritesLoader = () => ({
   url: 'files/favorites',
   params: {},
@@ -253,6 +259,13 @@ export function useConfig() {
   return useCore(configLoader, {}) || {};
 }
 
+export function getPlatformInfo() {
+  return getCore(platformInfoLoader, {}) || {};
+}
+export function usePlatformInfo() {
+  return useCore(platformInfoLoader, {}) || {};
+}
+
 export function getArchiveFiles(args) {
   return getCore(archiveFilesLoader, args);
 }