Code à usage unique

<script setup lang="ts">
import { ref } from 'vue'
import { VInputOTP } from 'vectis-ui'

const code = ref('')
</script>

<template>
  <VInputOTP v-model="code" :length="6" label="Verification code" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VInputOTP, VTypography } from 'vectis-ui'

const code = ref('')
</script>

<template>
  <div class="column">
    <!-- `label` names the row for assistive technology and renders nothing: the
         instructions above are the page's own, written where they read best. -->
    <VTypography as="h3" variant="heading-4">Check your phone</VTypography>
    <VTypography tone="muted">We sent a six digit code to +33 6 12 34 56 78.</VTypography>

    <VInputOTP
      v-model="code"
      :length="6"
      label="Verification code"
      hint="The code lasts ten minutes. Ask for another one if it has expired."
    />
  </div>
</template>

<style scoped>
.column {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { VInputOTP, VTypography } from 'vectis-ui'

const sizes = ['sm', 'md', 'lg'] as const
</script>

<template>
  <div class="column">
    <div v-for="size in sizes" :key="size" class="row">
      <VInputOTP :length="4" :size="size" :label="`Code, ${size}`" />
      <VTypography variant="caption" tone="muted">{{ size }}</VTypography>
    </div>

    <!-- Compact takes 4px off the boxes and leaves the text where it was. -->
    <div v-for="size in sizes" :key="`${size}-compact`" class="row">
      <VInputOTP :length="4" :size="size" compact :label="`Code, ${size} compact`" />
      <VTypography variant="caption" tone="muted">{{ size }} compact</VTypography>
    </div>
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-4);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--vectis-space-4);
}
</style>

<script setup lang="ts">
import { VInputOTP, VTypography } from 'vectis-ui'
</script>

<template>
  <div class="column">
    <div class="row">
      <VInputOTP :length="4" label="Four digit code" />
      <VTypography variant="caption" tone="muted">4, a PIN</VTypography>
    </div>

    <div class="row">
      <VInputOTP :length="6" label="Six digit code" />
      <VTypography variant="caption" tone="muted">6, the default</VTypography>
    </div>

    <div class="row">
      <VInputOTP :length="8" label="Eight digit code" />
      <VTypography variant="caption" tone="muted">8, a backup code</VTypography>
    </div>
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-4);
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vectis-space-4);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VInputOTP } from 'vectis-ui'

const pin = ref('')
const word = ref('')
const key = ref('')
</script>

<template>
  <div class="column">
    <VInputOTP
      v-model="pin"
      :length="6"
      format="numeric"
      label="Numeric code"
      hint="Digits only, and a phone offers its number pad"
    />

    <!-- Outside a numeric code the value is forced to capitals, so it has one
         canonical form whatever the reader typed. -->
    <VInputOTP
      v-model="word"
      :length="5"
      format="alpha"
      label="Letter code"
      hint="Letters only, typed in either case and kept in capitals"
    />

    <VInputOTP
      v-model="key"
      :length="6"
      format="alphanumeric"
      label="Licence key"
      hint="Letters and digits, again in capitals"
    />
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-5);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VInputOTP } from 'vectis-ui'

const grouped = ref('')
const prefixed = ref('')
const reference = ref('')
</script>

<template>
  <div class="column">
    <!-- Each # is a box, everything else is drawn between them and never enters the
         value. The pattern wins over `length`, which is then ignored. -->
    <VInputOTP
      v-model="grouped"
      pattern="###-###"
      label="Grouped code"
      :hint="`Two groups of three. Value: ${grouped || 'empty'}`"
    />

    <!-- A literal can be a real prefix rather than punctuation. It is shown, never
         typed, and stays out of the value. -->
    <VInputOTP
      v-model="prefixed"
      pattern="GT-###"
      format="alphanumeric"
      label="Ticket reference"
      :hint="`Three characters after the prefix. Value: ${prefixed || 'empty'}`"
    />

    <VInputOTP
      v-model="reference"
      pattern="###.###.###"
      label="Payment reference"
      :hint="`Nine digits in three groups. Value: ${reference || 'empty'}`"
    />
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-5);
}
</style>

<script setup lang="ts">
import { VInputOTP } from 'vectis-ui'
import { chevron_right as chevronRight, close } from 'vectis-ui/icons'
</script>

<template>
  <div class="column">
    <!-- Left alone, a literal is drawn as the character the pattern names. -->
    <VInputOTP pattern="###-###" label="Grouped code" hint="The literal, as written" />

    <!-- The icon replaces EVERY literal of the pattern, so it suits one whose
         separators are punctuation and nothing more. -->
    <VInputOTP
      pattern="###-###"
      :separator-icon="chevronRight"
      label="Grouped code with a chevron"
      hint="One icon in place of the dash"
    />

    <VInputOTP
      pattern="###.###.###"
      :separator-icon="close"
      label="Payment reference with a cross"
      hint="Both literals take the same icon"
    />
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-5);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VButton, VInputOTP, VTypography } from 'vectis-ui'

const SAMPLE = 'GT-4F2'

const code = ref('')
const copied = ref(false)

/* A plain clipboard write from a click handler, so nothing touches the browser
   outside an event. */
async function copy() {
  await navigator.clipboard.writeText(SAMPLE)
  copied.value = true
}
</script>

<template>
  <div class="column">
    <div class="row">
      <VTypography as="span"
        >Copy <code>{{ SAMPLE }}</code
        >, then paste it anywhere in the row.</VTypography
      >
      <VButton variant="outline" tone="neutral" size="sm" @click="copy">
        {{ copied ? 'Copied' : 'Copy' }}
      </VButton>
    </div>

    <!-- The paste is spread across the boxes and the prefix is consumed with it: a
         code copied in its formatted form lands as three characters. -->
    <VInputOTP
      v-model="code"
      pattern="GT-###"
      format="alphanumeric"
      label="Ticket reference"
      :hint="`Value: ${code || 'empty'}`"
    />
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-4);
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VInputOTP, VTypography } from 'vectis-ui'

const EXPECTED = '481902'

const code = ref('')
const verdict = ref<'right' | 'wrong' | null>(null)

/* `complete` fires once every box is filled, which is the cue to verify rather than
   something to work out from the value's length. */
function verify(value: string) {
  verdict.value = value === EXPECTED ? 'right' : 'wrong'
}
</script>

<template>
  <div class="column">
    <VInputOTP
      v-model="code"
      :length="6"
      :invalid="verdict === 'wrong'"
      label="Verification code"
      hint="Try 481902"
      @complete="verify"
      @update:model-value="verdict = null"
    />

    <!-- The value is the characters alone and is shorter than the row while it is
         being typed. -->
    <VTypography variant="body-sm" tone="muted">
      Value: {{ code || 'empty' }} ({{ code.length }} of 6)
    </VTypography>

    <VTypography v-if="verdict === 'right'" variant="body-sm" tone="success">
      The code matches.
    </VTypography>
    <VTypography v-else-if="verdict === 'wrong'" variant="body-sm" tone="danger">
      That code is not the one we sent.
    </VTypography>
  </div>
</template>

<style scoped>
.column {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VButton, VInputOTP, VTypography } from 'vectis-ui'

const code = ref('')
const submitted = ref<string | null>(null)

/* The form reads the code through `name`, as it would from any native field. A code
   that does not fill every box is invalid, so the browser refuses to submit it. */
function onSubmit(event: Event) {
  const data = new FormData(event.target as HTMLFormElement)
  submitted.value = String(data.get('code'))
}
</script>

<template>
  <form class="column" @submit.prevent="onSubmit">
    <VInputOTP
      v-model="code"
      name="code"
      required
      :length="6"
      label="Verification code"
      hint="Submitting with empty boxes is refused"
    />
    <VButton type="submit">Verify</VButton>
    <VTypography v-if="submitted" variant="body-sm" tone="muted">
      The form sent code={{ submitted }}
    </VTypography>
  </form>
</template>

<style scoped>
.column {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { VInputOTP } from 'vectis-ui'
</script>

<template>
  <div class="column">
    <VInputOTP
      model-value="481902"
      :length="6"
      disabled
      label="Disabled code"
      hint="Out of reach entirely"
    />

    <!-- Frozen rather than out of reach: the boxes still take the focus and the code
         can be selected and copied. -->
    <VInputOTP
      model-value="481902"
      :length="6"
      readonly
      label="Read-only code"
      hint="Shown, and copyable, but not editable"
    />

    <VInputOTP
      model-value="481900"
      :length="6"
      invalid
      label="Rejected code"
      hint="That code is not the one we sent"
    />
  </div>
</template>

<style scoped>
.column {
  display: grid;
  gap: var(--vectis-space-5);
}
</style>