"use client";

import { MinimalEmailLogin } from "./index";

export interface DemoProps {
  brandName?: string;
  accentColor?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ brandName = "Acme Inc.", accentColor = "#9BE15D" }: DemoProps) {
  return (
    <div className="flex min-h-[600px] w-full items-center justify-center p-6">
      <MinimalEmailLogin
        autoFillEmail
        brandName={brandName}
        accentColor={accentColor}
        className="w-full max-w-[360px]"
      />
    </div>
  );
}

1d:T2946, 1e:T22c1f,

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

const props = withDefaults(
  defineProps<{
    brandName?: string;
    accentColor?: string;
    autoFillEmail?: boolean;
  }>(),
  { brandName: "Acme Inc.", accentColor: "#9BE15D", autoFillEmail: false },
);

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const SAMPLE_EMAIL = "riley.hart@northbeam.co";
const SHAKE: Keyframe[] = [
  { transform: "translateX(0)" },
  { transform: "translateX(-7px)" },
  { transform: "translateX(7px)" },
  { transform: "translateX(-4px)" },
  { transform: "translateX(4px)" },
  { transform: "translateX(0)" },
];

const email = ref("");
const sentTo = ref<string | null>(null);
const error = ref<string | null>(null);
const hint = ref<string | null>(null);
const inputEl = ref<HTMLInputElement | null>(null);
const fieldEl = ref<HTMLDivElement | null>(null);
const interacted = ref(false);

let typeTimer = 0;
let hintTimer = 0;

function stopAutoFill() {
  if (typeTimer !== 0) {
    window.clearInterval(typeTimer);
    typeTimer = 0;
  }
}

onMounted(() => {
  if (!props.autoFillEmail) return;
  let count = 0;
  typeTimer = window.setInterval(() => {
    if (interacted.value) {
      stopAutoFill();
      return;
    }
    count += 1;
    email.value = SAMPLE_EMAIL.slice(0, count);
    if (count >= SAMPLE_EMAIL.length) stopAutoFill();
  }, 55);
});

onBeforeUnmount(() => {
  stopAutoFill();
  window.clearTimeout(hintTimer);
});

function handleEmailFocus() {
  interacted.value = true;
  stopAutoFill();
}

function handleEmailInput(event: Event) {
  error.value = null;
  email.value = (event.target as HTMLInputElement).value;
}

function focusField() {
  interacted.value = true;
  stopAutoFill();
  inputEl.value?.focus();
}

function handleSubmit() {
  const value = email.value.trim();
  if (!EMAIL_PATTERN.test(value)) {
    error.value = "Enter a valid email address.";
    const field = fieldEl.value;
    if (field && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      field.animate(SHAKE, { duration: 320, easing: "ease-out" });
    }
    inputEl.value?.focus();
    return;
  }
  error.value = null;
  sentTo.value = value;
}

function showHint(message: string) {
  window.clearTimeout(hintTimer);
  hint.value = message;
  hintTimer = window.setTimeout(() => {
    hint.value = null;
  }, 2600);
}

function resetForm() {
  sentTo.value = null;
  email.value = "";
  error.value = null;
  inputEl.value?.focus();
}
</script>

<template>
  <form class="mel" :style="{ '--accent': accentColor }" novalidate @submit.prevent="handleSubmit">
    <span class="mel-mark" aria-hidden="true">
      <span class="mel-mark-pulse"></span>
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 3.5 18.5 9 12 20.5 5.5 9Z" />
        <path d="M5.5 9h13" />
      </svg>
    </span>

    <h1 class="mel-heading">Welcome back</h1>
    <p class="mel-invite">
      New to {{ brandName }}?
      <button type="button" class="mel-link" @click="focusField">Create an account</button>
    </p>

    <div class="mel-main">
      <template v-if="sentTo === null">
        <label class="mel-label" for="mel-email">Email</label>
        <div ref="fieldEl" class="mel-field">
          <input
            id="mel-email"
            ref="inputEl"
            class="mel-input"
            :class="{ 'mel-input--error': error }"
            type="email"
            required
            autocomplete="email"
            placeholder="you@company.com"
            :value="email"
            :aria-invalid="error ? 'true' : undefined"
            :aria-describedby="error ? 'mel-error' : undefined"
            @focus="handleEmailFocus"
            @input="handleEmailInput"
          />
        </div>
        <p v-if="error" id="mel-error" class="mel-error">{{ error }}</p>
        <button type="submit" class="mel-submit">Continue with email</button>

        <div class="mel-divider" aria-hidden="true">
          <span class="mel-divider-line"></span>
          <span class="mel-divider-word">or</span>
          <span class="mel-divider-line"></span>
        </div>
        <div class="mel-socials">
          <button type="button" class="mel-social" @click="showHint('Choose your workspace to continue with SSO.')">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 21V5.5A1.5 1.5 0 0 1 6.5 4h7A1.5 1.5 0 0 1 15 5.5V21" />
              <path d="M15 9h3.5A1.5 1.5 0 0 1 20 10.5V21" />
              <path d="M3 21h18" />
              <path d="M8 8h1.5M8 12h1.5M8 16h1.5M11.5 8H13M11.5 12H13M11.5 16H13" />
            </svg>
            SSO
          </button>
          <button type="button" class="mel-social" @click="showHint('Set up a passkey in your browser to sign in faster.')">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="8" cy="8" r="3.5" />
              <path d="m10.6 10.6 9.4 9.4" />
              <path d="m16 16 2-2" />
              <path d="m18.5 18.5 2-2" />
            </svg>
            Passkey
          </button>
        </div>
        <p v-if="hint" class="mel-hint" role="status">{{ hint }}</p>
      </template>

      <div v-else class="mel-success" role="status">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="m3.5 7.5 8.5 5.5 8.5-5.5" />
        </svg>
        <p class="mel-success-title">Check your inbox</p>
        <p class="mel-success-text">
          We sent a one-time sign-in link to <strong>{{ sentTo }}</strong>. It expires in 15 minutes.
        </p>
        <button type="button" class="mel-link mel-success-reset" @click="resetForm">Use a different email</button>
      </div>
    </div>

    <p class="mel-legal">
      By continuing you agree to the
      <button type="button" class="mel-legal-link">Terms of Service</button>
      and
      <button type="button" class="mel-legal-link">Privacy Policy</button>.
    </p>
  </form>
</template>

<style scoped>
.mel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  font-family: system-ui, sans-serif;
  color: inherit;
}
.mel-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.mel-mark-pulse {
  position: absolute;
  inset: -5px;
  border: 1px solid var(--accent);
  border-radius: 1rem;
  animation: mel-breathe 3.2s ease-in-out infinite;
}
.mel-heading {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mel-invite {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  opacity: 0.7;
}
.mel-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.mel-link:hover {
  opacity: 0.8;
}
.mel-main {
  width: 100%;
  margin-top: 2rem;
}
.mel-label {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.mel-field {
  margin-top: 0.5rem;
}
.mel-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.05);
  color: inherit;
  font: 0.875rem system-ui, sans-serif;
  outline: none;
  transition: border-color 150ms ease;
}
.mel-input::placeholder {
  opacity: 0.5;
}
.mel-input:focus {
  border-color: var(--accent);
}
.mel-input--error,
.mel-input--error:focus {
  border-color: #ff4d6a;
}
.mel-error {
  width: 100%;
  margin: 0.5rem 0 0;
  text-align: left;
  font-size: 0.75rem;
  color: #ff4d6a;
}
.mel-submit {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #0b0d10;
  font: 600 0.875rem system-ui, sans-serif;
  cursor: pointer;
  transition: transform 120ms ease;
}
.mel-submit:active {
  transform: scale(0.98);
}
.mel-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1.75rem;
}
.mel-divider-line {
  flex: 1;
  height: 1px;
  background: rgb(255 255 255 / 0.1);
}
.mel-divider-word {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.mel-socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1.25rem;
}
.mel-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.04);
  color: inherit;
  font: 0.875rem system-ui, sans-serif;
  cursor: pointer;
  transition: background 150ms ease;
}
.mel-social:hover {
  background: rgb(255 255 255 / 0.08);
}
.mel-hint {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  opacity: 0.7;
}
.mel-success {
  width: 100%;
  padding: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.04);
}
.mel-success-title {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.mel-success-text {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  opacity: 0.7;
}
.mel-success-reset {
  margin-top: 1rem;
  font-size: 0.75rem;
}
.mel-legal {
  margin: 2rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  opacity: 0.55;
}
.mel-legal-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.mel-legal-link:hover {
  opacity: 0.8;
}
@keyframes mel-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mel-mark-pulse {
    animation: none;
  }
}
</style>

Welcome back

Nearby

Welcome back