Copy

<script setup lang="ts">
import type { HoneypotEvent } from "src/types";

const props = defineProps<{
  evt: HoneypotEvent;
}>();

const emit = defineEmits<{
  "field-click": [event: MouseEvent, key: string, value: string];
}>();
</script>

<template>
  <button
    v-if="evt.fields?.method"
    @click="emit('field-click', $event, 'method', evt.fields.method as string)"
  >
    <span>Method:</span>
    <strong
      v-if="(evt.fields.method as string).toUpperCase() === 'POST'"
      >{{ evt.fields.method }}</strong
    >
    <span v-else>{{ evt.fields.method }}</span>
  </button>
  <button
    v-if="evt.fields?.token"
    @click="emit('field-click', $event, 'token', evt.fields.token as string)"
  >
    <span>Token:</span>
    {{ evt.fields.token }}
  </button>
  <button
    v-if="evt.fields?.body"
    @click="emit('field-click', $event, 'body', evt.fields.body as string)"
  >
    <span>Body:</span>
    {{ evt.fields.body }}
  </button>
  <button
    v-if="
      evt.fields?.headers &&
      typeof evt.fields.headers === 'object' &&
      'User-Agent' in evt.fields.headers
    "
    @click="emit('field-click', $event, 'headers.User-Agent', (evt.fields.headers as Record<string,string>)['User-Agent'] as string)"
  >
    <span>User Agent:</span>
    {{ (evt.fields.headers as Record<string,string>)["User-Agent"] }}
  </button>
  <button
    v-if="evt.fields?.uri"
    @click="emit('field-click', $event, 'uri', evt.fields.uri as string)"
  >
    <span>URI:</span>
    {{ evt.fields.uri }}
  </button>
  <button
    v-if="evt.fields?.query"
    @click="emit('field-click', $event, 'query', evt.fields.query as string)"
  >
    <span>Query:</span>
    {{ evt.fields.query }}
  </button>
  <button
    v-if="evt.fields?.form_data"
    @click="emit('field-click', $event, 'form_data', evt.fields.form_data as string)"
  >
    <span>Form Data:</span>
    {{ evt.fields.form_data }}
  </button>
  <button
    v-if="evt.fields?.host"
    @click="emit('field-click', $event, 'host', evt.fields.host as string)"
  >
    <span>Host:</span>
    {{ evt.fields.host }}
  </button>
</template>