input styles

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} />