"use client";

import { FocusGuardForm } from "./index";

export interface DemoProps {
  submitLabel?: string;
  accentColor?: string;
  requireAll?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ submitLabel = "Create account", accentColor = "#7C5CFF", requireAll = true }: DemoProps) {
  return (
    <div className="flex w-full justify-center p-6">
      <FocusGuardForm submitLabel={submitLabel} accentColor={accentColor} requireAll={requireAll} />
    </div>
  );
}

1d:T2ab0, 1e:T2310d,

<script setup lang="ts">
import { reactive, ref, nextTick } from "vue";

type FieldName = "name" | "email" | "password";

interface FieldDef {
  name: FieldName;
  label: string;
  type: string;
  autocomplete: string;
  placeholder: string;
}

const props = withDefaults(
  defineProps<{
    submitLabel?: string;
    accentColor?: string;
    requireAll?: boolean;
  }>(),
  { submitLabel: "Create account", accentColor: "#7C5CFF", requireAll: true },
);

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i;

const FIELDS: FieldDef[] = [
  { name: "name", label: "Full name", type: "text", autocomplete: "name", placeholder: "Priya Anand" },
  { name: "email", label: "Email", type: "email", autocomplete: "email", placeholder: "priya@fieldnote.app" },
  { name: "password", label: "Password", type: "password", autocomplete: "new-password", placeholder: "At least 8 characters" },
];

function validateField(name: FieldName, value: string, requireAll: boolean): string | null {
  if (name === "name") {
    if (requireAll && value.trim().length === 0) return "Enter your name.";
    return null;
  }
  if (name === "email") {
    const trimmed = value.trim();
    if (trimmed.length === 0) return "Enter your email.";
    if (!EMAIL_RE.test(trimmed)) return "Enter a valid email address.";
    return null;
  }
  if (value.length === 0) return "Create a password.";
  if (value.length < 8) return "Use at least 8 characters.";
  return null;
}

const uid = `fg-${Math.random().toString(36).slice(2, 9)}`;

const values = reactive<Record<FieldName, string>>({ name: "", email: "", password: "" });
const errors = reactive<Partial<Record<FieldName, string>>>({});
const focusedField = ref<FieldName | null>(null);
const shakeField = ref<FieldName | null>(null);
const status = ref<"form" | "success">("form");
const announcement = ref("");
const inputEls = reactive<Record<FieldName, HTMLInputElement | null>>({ name: null, email: null, password: null });

function setInputEl(name: FieldName, el: Element | null) {
  inputEls[name] = (el as HTMLInputElement) ?? null;
}

function handleChange(name: FieldName, value: string) {
  values[name] = value;
  if (errors[name]) errors[name] = undefined;
}

async function handleSubmit() {
  const nextErrors: Partial<Record<FieldName, string>> = {};
  let firstInvalid: FieldName | null = null;
  for (const field of FIELDS) {
    const message = validateField(field.name, values[field.name], props.requireAll);
    if (message) {
      nextErrors[field.name] = message;
      if (!firstInvalid) firstInvalid = field.name;
    }
  }
  errors.name = nextErrors.name;
  errors.email = nextErrors.email;
  errors.password = nextErrors.password;

  if (firstInvalid) {
    const count = Object.keys(nextErrors).length;
    const label = FIELDS.find((f) => f.name === firstInvalid)!.label;
    announcement.value = `${count} field${count === 1 ? "" : "s"} need${count === 1 ? "s" : ""} attention. ${label}: ${nextErrors[firstInvalid]}`;
    inputEls[firstInvalid]?.focus();
    shakeField.value = null;
    await nextTick();
    shakeField.value = firstInvalid;
    return;
  }

  announcement.value = "Account created. Welcome aboard.";
  status.value = "success";
}

function clearShake(name: FieldName) {
  if (shakeField.value === name) shakeField.value = null;
}

function handleReset() {
  values.name = "";
  values.email = "";
  values.password = "";
  errors.name = undefined;
  errors.email = undefined;
  errors.password = undefined;
  status.value = "form";
  announcement.value = "";
}
</script>

<template>
  <div class="fg-card" :style="{ '--fg-accent': accentColor }">
    <div aria-live="polite" role="status" class="fg-sr-only">{{ announcement }}</div>

    <form class="fg-form" novalidate @submit.prevent="handleSubmit">
      <span class="fg-bar" aria-hidden="true"></span>
      <h3 class="fg-title">Create your account</h3>
      <p class="fg-subtitle">Get set up in under a minute.</p>

      <div class="fg-fields">
        <div v-for="field in FIELDS" :key="field.name" class="fg-field">
          <label :for="`${uid}-${field.name}`" class="fg-label">
            {{ field.label }}
            <span v-if="field.name !== 'name' || requireAll" aria-hidden="true" class="fg-required">*</span>
          </label>
          <input
            :id="`${uid}-${field.name}`"
            :ref="(el) => setInputEl(field.name, el as Element | null)"
            :type="field.type"
            :autocomplete="field.autocomplete"
            :placeholder="field.placeholder"
            :value="values[field.name]"
            :disabled="status === 'success'"
            :aria-invalid="!!errors[field.name] || undefined"
            :aria-describedby="errors[field.name] ? `${uid}-${field.name}-error` : undefined"
            class="fg-input"
            :class="{ 'fg-input--invalid': errors[field.name], 'fg-input--focused': focusedField === field.name, 'fg-shake': shakeField === field.name }"
            @input="handleChange(field.name, ($event.target as HTMLInputElement).value)"
            @focus="focusedField = field.name"
            @blur="focusedField = focusedField === field.name ? null : focusedField"
            @animationend="clearShake(field.name)"
          />
          <Transition name="fg-note">
            <p v-if="errors[field.name]" :id="`${uid}-${field.name}-error`" class="fg-error">{{ errors[field.name] }}</p>
          </Transition>
        </div>
      </div>

      <div class="fg-action">
        <Transition name="fg-fade" mode="out-in">
          <div v-if="status === 'success'" key="success" class="fg-success">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" aria-hidden="true" class="fg-check">
              <circle cx="12" cy="12" r="10.5" stroke="var(--fg-accent)" stroke-width="1.75" />
              <path d="M7.2 12.4 10.4 15.6 16.8 8.6" stroke="var(--fg-accent)" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <div class="fg-success-copy">
              <p class="fg-success-title">Account created</p>
              <p class="fg-success-note">Check your inbox to confirm your email.</p>
            </div>
            <button type="button" class="fg-reset" @click="handleReset">Reset</button>
          </div>
          <button v-else key="submit" type="submit" class="fg-submit">{{ submitLabel }}</button>
        </Transition>
      </div>
    </form>
  </div>
</template>

<style scoped>
.fg-card {
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
}
.fg-form {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 16px;
}
.fg-bar {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--fg-accent);
}
.fg-title {
  margin: 16px 0 0;
  font: 600 15px/1.3 system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.fg-subtitle {
  margin: 4px 0 0;
  font: 400 12.5px/1.4 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.fg-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.fg-field {
  display: flex;
  flex-direction: column;
}
.fg-label {
  margin-bottom: 6px;
  font: 500 12.5px/1.2 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 68%, transparent);
}
.fg-required {
  margin-left: 2px;
  color: color-mix(in srgb, currentColor 38%, transparent);
}
.fg-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
  padding: 10px 14px;
  font: 400 14px/1.4 system-ui, sans-serif;
  color: inherit;
  outline: none;
  box-shadow: 0 0 0 0 transparent;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.fg-input::placeholder {
  color: color-mix(in srgb, currentColor 32%, transparent);
}
.fg-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.fg-input--focused {
  border-color: color-mix(in srgb, var(--fg-accent) 65%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg-accent) 16%, transparent);
}
.fg-input--invalid {
  border-color: color-mix(in srgb, #ff5470 85%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff5470 14%, transparent);
}
.fg-shake {
  animation: fg-shake 0.38s ease-in-out;
}
@keyframes fg-shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-9px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}
.fg-error {
  margin: 0;
  padding-top: 4px;
  font: 400 12px/1.35 system-ui, sans-serif;
  color: #ff5470;
}
.fg-note-enter-active,
.fg-note-leave-active {
  transition: opacity 0.18s ease;
}
.fg-note-enter-from,
.fg-note-leave-to {
  opacity: 0;
}
.fg-action {
  margin-top: 16px;
}
.fg-submit {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 10px 0;
  font: 600 14px/1.4 system-ui, sans-serif;
  color: #fff;
  background: var(--fg-accent);
  cursor: pointer;
  outline: none;
}
.fg-submit:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg-accent) 70%, transparent);
}
.fg-success {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--fg-accent) 35%, transparent);
  background: color-mix(in srgb, var(--fg-accent) 12%, transparent);
  padding: 12px 14px;
}
.fg-check {
  flex-shrink: 0;
}
.fg-success-copy {
  flex: 1;
}
.fg-success-title {
  margin: 0;
  font: 600 13px/1.3 system-ui, sans-serif;
}
.fg-success-note {
  margin: 0;
  font: 400 12px/1.35 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.fg-reset {
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 6px 10px;
  font: 500 12px/1.3 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 70%, transparent);
  cursor: pointer;
  outline: none;
}
.fg-reset:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.fg-reset:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg-accent) 70%, transparent);
}
.fg-fade-enter-active,
.fg-fade-leave-active {
  transition: opacity 0.2s ease;
}
.fg-fade-enter-from,
.fg-fade-leave-to {
  opacity: 0;
}
.fg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .fg-shake {
    animation-duration: 0.001ms;
  }
  .fg-input,
  .fg-fade-enter-active,
  .fg-fade-leave-active,
  .fg-note-enter-active,
  .fg-note-leave-active {
    transition-duration: 0.001ms;
  }
}
</style>

Create your account

Nearby

Create your account