<script>
    import { logIn } from '../apiServer';
    import { currentUser } from '../store';

    let disabled = false;
    let username = '';
    let password = '';

    async function handleLogin(event) {
        disabled = true;
        const response = await logIn(username, password);
        if (200 <= response.status && response.status < 300) {
            currentUser.update(() => ({ username }));
            username = '';
            password = '';
        }
        disabled = false;
    }
</script>

<div class="card m-4 p-4">
    <form on:submit|preventDefault={handleLogin}>
        <label class="label" for="username">
            username
            <input class="input" name="username" type="text" placeholder="username" bind:value={username} disabled={disabled}>
        </label>
        <label class="label" for="password">
            password
            <input class="input" name="password" type="password" placeholder="password" bind:value={password} disabled={disabled}>
        </label>
        <button class="btn variant-filled" type="submit">
            sign in or up
        </button>
    </form>
</div>
