input styles

packages/web/public/global.css

@@ -79,3 +79,51 @@ body {
   box-sizing: border-box;
   border-radius: 4px;
 }
+
+body *::-webkit-scrollbar {
+  height: 0.8em;
+  width: 0.8em;
+}
+body *::-webkit-scrollbar-track {
+  border-radius: 1px;
+  background-color: var(--theme-bg-1);
+}
+body *::-webkit-scrollbar-corner {
+  border-radius: 1px;
+  background-color: var(--theme-bg-2);
+}
+
+body *::-webkit-scrollbar-thumb {
+  border-radius: 1px;
+  background-color: var(--theme-bg-3);
+}
+
+body *::-webkit-scrollbar-thumb:hover {
+  background-color: var(--theme-bg-4);
+}
+
+input {
+  background-color: var(--theme-bg-0);
+  color: var(--theme-font-1);
+  border: 1px solid var(--theme-border);
+}
+
+input[disabled] {
+  background-color: var(--theme-bg-1);
+}
+
+select {
+  background-color: var(--theme-bg-0);
+  color: var(--theme-font-1);
+  border: 1px solid var(--theme-border);
+}
+
+select[disabled] {
+  background-color: var(--theme-bg-1);
+}
+
+textarea {
+  background-color: var(--theme-bg-0);
+  color: var(--theme-font-1);
+  border: 1px solid var(--theme-border);
+}

packages/web/src/forms/FormPasswordField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import FormPasswordFieldRaw from './FormPasswordFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let templateProps = {};
+
+  const { template } = getFormContext();
+</script>
+
+<svelte:component this={template} type="text" {label} {...templateProps}>
+  <FormPasswordFieldRaw {name} {...$$restProps} />
+</svelte:component>

packages/web/src/forms/FormPasswordFieldRaw.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import InlineButton from '../widgets/InlineButton.svelte';
+
+  import { getFormContext } from './FormProviderCore.svelte';
+  import TextField from './TextField.svelte';
+
+  export let name;
+  export let disabled = false;
+
+  const { values, setFieldValue } = getFormContext();
+
+  let showPassword = false;
+
+  $: value = $values[name];
+  $: isCrypted = value && value.startsWith('crypt:');
+</script>
+
+<div class="flex">
+  <TextField
+    {...$$restProps}
+    {disabled}
+    value={isCrypted ? '' : value}
+    on:change={e => setFieldValue(name, e.target['value'])}
+    placeholder={isCrypted ? '(Password is encrypted)' : undefined}
+    type={isCrypted || showPassword ? 'text' : 'password'}
+  />
+  {#if !isCrypted}
+    <InlineButton on:click={() => (showPassword = !showPassword)} {disabled}>
+      <FontIcon icon="icon eye" />
+    </InlineButton>
+  {/if}
+</div>

packages/web/src/forms/FormTextField.svelte

@@ -5,10 +5,11 @@
   export let label;
   export let name;
   export let templateProps = {};
+  export let focused = false;
 
   const { template } = getFormContext();
 </script>
 
 <svelte:component this={template} type="text" {label} {...templateProps}>
-  <FromTextFieldRaw {name} {...$$restProps} />
+  <FromTextFieldRaw {name} {...$$restProps} {focused} />
 </svelte:component>

packages/web/src/forms/TextField.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+
   export let value;
+  export let focused;
+
+  let domEditor;
+
+  if (focused) onMount(() => domEditor.focus());
 </script>
 
-<input type="text" {...$$restProps} bind:value on:change />
+<input type="text" {...$$restProps} bind:value on:change bind:this={domEditor} />

packages/web/src/modals/ConnectionModalDriverFields.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import FormPasswordField from '../forms/FormPasswordField.svelte';
+
   import { getFormContext } from '../forms/FormProviderCore.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
 
@@ -27,6 +29,17 @@
   ]}
 />
 
+{#if $authTypes}
+  <FormSelectField
+    label="Authentication"
+    name="authType"
+    options={$authTypes.map(auth => ({
+      value: auth.name,
+      label: auth.title,
+    }))}
+  />
+{/if}
+
 <div class="row">
   <div class="col-9 mr-1">
     <FormTextField
@@ -47,6 +60,38 @@
   </div>
 </div>
 
+<div class="row">
+  <div class="col-6 mr-1">
+    <FormTextField
+      label="User"
+      name="user"
+      disabled={disabledFields.includes('user')}
+      templateProps={{ noMargin: true }}
+    />
+  </div>
+  <div class="col-6 mr-1">
+    <FormPasswordField
+      label="Password"
+      name="password"
+      disabled={disabledFields.includes('password')}
+      templateProps={{ noMargin: true }}
+    />
+  </div>
+</div>
+
+{#if !disabledFields.includes('password')}
+  <FormSelectField
+    label="Password mode"
+    name="passwordMode"
+    options={[
+      { value: 'saveEncrypted', label: 'Save and encrypt' },
+      { value: 'saveRaw', label: 'Save raw (UNSAFE!!)' },
+    ]}
+  />
+{/if}
+
+<FormTextField label="Display name" name="displayName" />
+
 <style>
   .row {
     margin: var(--dim-large-form-margin);