Files
OpenAPI.gg/src/lib/components/atoms/OAuthFlow.svelte
2024-05-20 00:09:46 +02:00

81 lines
2.2 KiB
Svelte

<script lang="ts">
import ScopeList from './ScopeList.svelte';
import type { Flows } from '$lib/types/auth';
export let flow: Flows;
const addScope = () => {
flow.scopes = [...flow.scopes, [{ scope: '', description: '' }]];
};
const removeScope = (index: number) => {
flow.scopes = flow.scopes.filter((_, i) => i !== index);
};
</script>
<div class="flex flex-col gap-4">
{#if flow.name == 'authorizationCode'}
<h3 class="h3">Authorization Code</h3>
<label class="space-y-2">
<h4 class="h4">Authorization URL</h4>
<input
type="text"
name="authorizationURL"
class="input"
placeholder="https://api.example.com/oauth2/authorize"
bind:value={flow.authorizationUrl}
/>
</label>
<label class="space-y-2">
<h4 class="h4">Token URL</h4>
<input
type="text"
name="tokenURL"
class="input"
placeholder="https://api.example.com/oauth2/token"
bind:value={flow.tokenUrl}
/>
</label>
<ScopeList bind:flow />
{:else if flow.name == 'implicit'}
<h3 class="h3">Implicit</h3>
<label class="space-y-2">
<h4 class="h4">Authorization URL</h4>
<input
type="text"
name="authorizationURL"
class="input"
placeholder="https://api.example.com/oauth2/authorize"
bind:value={flow.authorizationUrl}
/>
</label>
<ScopeList bind:flow />
{:else if flow.name == 'password'}
<h3 class="h3">Password</h3>
<label class="space-y-2">
<h4 class="h4">Token URL</h4>
<input
type="text"
name="tokenURL"
class="input"
placeholder="https://api.example.com/oauth2/token"
bind:value={flow.tokenUrl}
/>
</label>
<ScopeList bind:flow />
{:else if flow.name == 'clientCredentials'}
<h3 class="h3">Client Credentials</h3>
<label class="space-y-2">
<h4 class="h4">Token URL</h4>
<input
type="text"
name="tokenURL"
class="input"
placeholder="https://api.example.com/oauth2/token"
bind:value={flow.tokenUrl}
/>
</label>
<ScopeList bind:flow />
{/if}
</div>