rquest/src/lib/components/Auth.svelte

<script lang="ts">
  import {
    state as _state,
    createAuth,
    deleteAuth,
    renameAuth,
    updateAuthParams,
  } from "$lib/state.svelte";

  import { Button } from "$lib/components/ui/button";
  import { Trash, Plus } from "@lucide/svelte";
  import { Input } from "./ui/input";
  import Editable from "./Editable.svelte";
  import AuthParams from "./AuthParams.svelte";
</script>

<div class="space-y-6">
  <!-- Inherit checkbox -->
  <!-- <div class="flex items-center gap-3"> -->
  <!-- <Checkbox checked={inherit} onCheckedChange={(v) => toggleInherit(!!v)} /> -->
  <!-- <span class="text-sm">Inherit auth from parent collection</span> -->
  <!-- </div> -->

  <div class="border">
    <h1 class="p-2">Workspace authentication</h1>
    <p class="p-2 text-sm">
      Create workspace-wide authentication schemes. Use the schemes created here
      in request/collection tabs.
    </p>
  </div>

  <!-- Create auth -->
  <div class="space-y-2">
    <div class="flex gap-2">
      <Button variant="outline" onclick={() => createAuth("Token")}>
        <Plus class="h-4 w-4 mr-2" /> Token
      </Button>
      <Button variant="outline" onclick={() => createAuth("Basic")}>
        <Plus class="h-4 w-4 mr-2" /> Basic
      </Button>
      <Button variant="outline" onclick={() => createAuth("OAuth")}>
        <Plus class="h-4 w-4 mr-2" /> OAuth
      </Button>
    </div>
  </div>

  {#each _state.auth as auth}
    <div class="border">
      <div class="flex items-center">
        <Editable
          bind:value={auth.name}
          onSave={(value) => {
            renameAuth(auth.id, value);
          }}
        >
          {#snippet display({ value, startEdit })}
            <h2 ondblclick={startEdit}>
              {auth.name}
            </h2>
          {/snippet}
        </Editable>
        <Trash
          class="ml-2 h-4 w-4 cursor-pointer text-muted-foreground hover:text-destructive"
          size={16}
          onclick={() => deleteAuth(auth.id)}
        />
      </div>
      <div class="p-2">
        <AuthParams {auth} readonly={false} />
      </div>
    </div>
  {/each}
</div>