

<script>
  let user = '';
  let password = '';
  let loading = false;
  let error = '';
</script>

<form class="login" on:submit|preventDefault={handleLogin}>
  <h2>Login</h2>

  <label>
    User
    <input type="text" bind:value={user} required />
  </label>

  <label>
    Password
    <input type="password" bind:value={password} required />
  </label>

  {#if error}
    <p class="error">{error}</p>
  {/if}

  <button disabled={loading}>
    {loading ? 'Logging in…' : 'Login'}
  </button>
</form>

<script>
  async function handleLogin() {
    error = '';
    loading = true;

    try {
      // placeholder – we’ll add real auth next
      if user !== 'test@test.com' || password !== '1234') {
        throw new Error('Invalid credentials');
      }

      alert('Logged in!');
    } catch (e) {
      error = e.message;
    } finally {
      loading = false;
    }
  }
</script>

<style>
  .login {
    max-width: 320px;
    margin: 4rem auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  label {
    display: flex;
    flex-direction: column;
  }

  .error {
    color: red;
  }
</style>