component
Token reveal
The shown-once moment for a new secret, with copy, a warning and an optional acknowledgment.
When a product creates an API token it can show it once. ZTokenReveal puts the token on Zoo UI's code surface under a [ token · name · shown once ] kicker, with a warning banner saying it won't be shown again. The default slot replaces the banner's text.
With require-ack, a button acknowledges the token has been saved. The secret then blurs and goes inert, out of reach of focus and screen readers, and @ack fires once.
token · ci-main · shown once
zoo_tok_7Qm2vX9kLr4TzW8nB3cYh6JdYou won't see this token again
It can publish to every feed in this workspace. If you lose it, revoke it and create another.
<script setup lang="ts">
const saved = ref(false)
</script>
<template>
<div class="flex flex-col gap-2 w-full max-w-xl">
<ZTokenReveal token="zoo_tok_7Qm2vX9kLr4TzW8nB3cYh6Jd" name="ci-main" require-ack @ack="saved = true">
It can publish to every feed in this workspace. If you lose it, revoke it and create another.
</ZTokenReveal>
<p v-if="saved" class="text-sm text-muted">Saved. The token is hidden for good.</p>
</div>
</template>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tokenrequired | string | — | the secret, shown in full |
| ackLabel | string | "I have saved it" | — |
| name | string | "default" | the token's name, in the kicker |
| requireAck | boolean | false | show the acknowledgment button; the parent usually moves on when it emits `ack` |
| title | string | "You won't see this token again" | the banner's title; the default slot replaces its description |
Emits
| Event | Payload | Description |
|---|---|---|
| copy | [token: string] | — |
| ack | [] | — |
Slots
| Slot | Description |
|---|---|
| default | the warning's description: what the token grants and what to do if it is lost |
| actions | more actions beside the acknowledgment, e.g. a "Done" link |