handle ssh tunnel error

packages/web/src/modals/ConnectionModal.js

@@ -20,6 +20,7 @@ import { FormProvider, useForm } from '../utility/FormProvider';
 import { TabControl, TabPage } from '../widgets/TabControl';
 import { usePlatformInfo } from '../utility/metadataLoaders';
 import getElectron from '../utility/getElectron';
+import { FormFieldTemplateLarge } from '../utility/formStyle';
 // import FormikForm from '../utility/FormikForm';
 
 function DriverFields({ extensions }) {
@@ -154,7 +155,10 @@ export default function ConnectionModal({ modalState, connection = undefined })
   return (
     <ModalBase modalState={modalState}>
       <ModalHeader modalState={modalState}>{connection ? 'Edit connection' : 'Add connection'}</ModalHeader>
-      <FormProvider initialValues={connection || { server: 'localhost', engine: 'mssql@dbgate-plugin-mssql' }}>
+      <FormProvider
+        initialValues={connection || { server: 'localhost', engine: 'mssql@dbgate-plugin-mssql' }}
+        template={FormFieldTemplateLarge}
+      >
         <ModalContent noPadding>
           <TabControl isInline>
             <TabPage label="Main" key="main">

packages/web/src/utility/formStyle.js

@@ -52,3 +52,33 @@ export function FormFieldTemplateTiny({ label, children, type }) {
     </FormRowTiny>
   );
 }
+
+export const FormRowLarge = styled.div`
+  margin: 5px;
+`;
+
+export const FormLabelLarge = styled.div`
+  color: ${props => props.theme.manager_font3};
+`;
+
+export const FormValueLarge = styled.div`
+  margin-left: 15px;
+  margin-top: 3px;
+`;
+
+export function FormFieldTemplateLarge({ label, children, type }) {
+  const theme = useTheme();
+  if (type == 'checkbox') {
+    return (
+      <FormRowTiny>
+        {children} {label}
+      </FormRowTiny>
+    );
+  }
+  return (
+    <FormRowTiny>
+      <FormLabelTiny theme={theme}>{label}</FormLabelTiny>
+      <FormValueTiny>{children}</FormValueTiny>
+    </FormRowTiny>
+  );
+}