rquest/src/lib/components/AuthParams.svelte

<script lang="ts">
  import * as Select from "$lib/components/ui/select";
  import { state as _state, updateAuthParams } from "$lib/state.svelte";
  import { Input } from "./ui/input";
  import type { Authentication } from "$lib/types";

  let {
    auth = $bindable(),
    readonly,
  }: { auth: Authentication; readonly: boolean } = $props();
</script>

{#if auth.params.type === "Token"}
  <div class="grid grid-cols-[auto_1fr] gap-2 items-center">
    <p>Name</p>
    <Input
      class="w-80"
      bind:value={auth.params.value.name}
      oninput={() => updateAuthParams(auth.id)}
      {readonly}
    ></Input>
    <p>Value</p>
    <Input
      class="w-80"
      bind:value={auth.params.value.value}
      oninput={() => updateAuthParams(auth.id)}
      {readonly}
    ></Input>
    <p class="pr-2">Placement</p>
    <Select.Root
      type="single"
      disabled={readonly}
      value={auth.params.value.placement}
    >
      <Select.Trigger disabled={readonly} class="w-80">
        {auth.params.value.placement}
      </Select.Trigger>

      <Select.Content>
        <Select.Item
          onclick={() => {
            auth.params.value.placement = "Query";
            updateAuthParams(auth.id);
          }}
          value={"Query"}
        >
          Query
        </Select.Item>
        <Select.Item
          onclick={() => {
            auth.params.value.placement = "Header";
            updateAuthParams(auth.id);
          }}
          value={"Header"}
        >
          Header
        </Select.Item>
      </Select.Content>
    </Select.Root>
  </div>
{:else if auth.params.type === "Basic"}
  <div class="grid grid-cols-[auto_1fr] gap-2 items-center">
    <p>Username</p>
    <Input
      class="w-80"
      bind:value={auth.params.value.user}
      oninput={() => updateAuthParams(auth.id)}
      {readonly}
    ></Input>
    <p>Password</p>
    <Input
      class="w-80"
      bind:value={auth.params.value.password}
      oninput={() => updateAuthParams(auth.id)}
      {readonly}
    ></Input>
  </div>
{/if}