console/app/components/showcase/PinInput.vue at main · agentruntimecontrolprotocol/console · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const variants = ['outline', 'soft', 'subtle', 'ghost'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const colorValues = ref<string[]>([])
const variantValues = ref<string[]>([])
const sizeValues = ref<string[]>([])
const maskValue = ref<string[]>([])
const otpValue = ref<string[]>([])
const disabledValue = ref<string[]>([])
const sessionPin = ref<string[]>([])
const completedPin = ref<string[]>([])
const isComplete = ref(false)

function onComplete(val: string[]) {
  isComplete.value = true
  completedPin.value = val
}
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Colors">
      <div class="flex flex-col gap-4">
        <div v-for="c in colors" :key="c" class="flex items-center gap-3">
          <span class="w-20 text-sm text-muted capitalize">{{ c }}</span>
          <UPinInput :key="c" v-model="colorValues" :color="c" :length="5" :placeholder="'·'" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Variants">
      <div class="flex flex-col gap-4">
        <div v-for="v in variants" :key="v" class="flex items-center gap-3">
          <span class="w-20 text-sm text-muted capitalize">{{ v }}</span>
          <UPinInput v-model="variantValues" :variant="v" :length="5" :placeholder="'·'" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-col gap-4">
        <div v-for="s in sizes" :key="s" class="flex items-center gap-3">
          <span class="w-20 text-sm text-muted capitalize">{{ s }}</span>
          <UPinInput v-model="sizeValues" :size="s" :length="5" :placeholder="'·'" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Masked (lease secret)">
      <div class="flex flex-col gap-2">
        <p class="text-sm text-muted">Enter lease token — characters are hidden</p>
        <UPinInput v-model="maskValue" :mask="true" :length="6" color="warning" placeholder="·" />
      </div>
    </GallerySection>

    <GallerySection title="OTP (session auth)">
      <div class="flex flex-col gap-2">
        <p class="text-sm text-muted">One-time passcode for runtime session authentication</p>
        <UPinInput v-model="otpValue" :otp="true" type="number" :length="6" color="info" placeholder="0" />
      </div>
    </GallerySection>

    <GallerySection title="States">
      <div class="flex flex-col gap-4">
        <div class="flex items-center gap-3">
          <span class="w-24 text-sm text-muted">Disabled</span>
          <UPinInput v-model="disabledValue" :disabled="true" :length="5" placeholder="·" />
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-sm text-muted">Highlight</span>
          <UPinInput v-model="disabledValue" :highlight="true" :length="5" color="primary" placeholder="·" />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="Realistic usage — agent session PIN">
      <div class="flex flex-col gap-3 w-full max-w-sm">
        <p class="text-sm font-medium">Enter your 6-digit agent session PIN to authorize runtime access</p>
        <UPinInput
          v-model="sessionPin"
          :length="6"
          type="number"
          color="primary"
          variant="outline"
          size="lg"
          placeholder="·"
          @complete="onComplete"
        />
        <UAlert
          v-if="isComplete"
          color="success"
          variant="soft"
          title="PIN accepted"
          description="Agent session authorized. Runtime lease granted."
          icon="i-material-symbols-check-circle-outline"
        />
        <p v-else class="text-xs text-muted">
          Session will be scoped to the current trace context once verified.
        </p>
      </div>
    </GallerySection>
  </div>
</template>