<script setup lang="ts">
const passcode = ref("");
const error = ref("");
const auth = useAuth();

async function submit() {
  error.value = "";

  try {
    await auth.login(passcode.value);
    await navigateTo("/");
  } catch (cause) {
    error.value = cause instanceof Error ? cause.message : "Sign in failed.";
  }
}
</script>

<template>
  <div class="download-page">
    <section class="panel download-card">
      <h1>Sign in to Quickdrop.</h1>
      <p class="download-intro">
        Enter the passcode to upload files to Quickdrop.
      </p>

      <form @submit.prevent="submit">
        <input
          v-model="passcode"
          type="password"
          autocomplete="current-password"
          placeholder="••••••••"
          class="share-value w-full border border-[var(--border)] rounded p-3"
        />
        <button class="button button-large mt-4" type="submit">Continue</button>
        <p v-if="error" class="error-message" role="alert">
          {{ error }}
        </p>
      </form>
    </section>
  </div>
</template>
