SSO Registration Card

blockauth

Centered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Emits submit, sign-in, oauth, view-terms, view-privacy.

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/lit/register-01.json

$npx shadcn@latest add https://uipkge.dev/r/lit/register-01.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/lit/register-01.json

$bunx shadcn@latest add https://uipkge.dev/r/lit/register-01.json

Manifest:https://uipkge.dev/r/lit/register-01.jsonInstalls to:src/uip/blocks/register-01/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

Register01Payload

interface Register01Payload {
  name: string
  email: string
  password: string
}

HTMLElementTagNameMap

interface HTMLElementTagNameMap {
    'uip-register-01': UipRegister01
  }
}

npm dependencies

lit

Includes

button card checkbox input label lit-core separator

Files installed (1)

src/uip/blocks/register-01/register-01.ts10.1 kB

import { LitElement, css, html } from 'lit'
import { cn } from '../../lib/utils'
import { tailwind } from '../../lib/styles'
import { ThemeController } from '../../lib/theme'
// Side-effect imports: register the composed elements for standalone use
// (consumers who install only this block still get working primitives).
import '../../components/button/button'
import '../../components/card/card'
import '../../components/checkbox/checkbox'
import '../../components/input/input'
import '../../components/label/label'
import '../../components/separator/separator'
import type { UipInput } from '../../components/input/input'

export interface Register01Payload {
  name: string
  email: string
  password: string
}

/**
 * <uip-register-01> — the registry Register01 block as a web component.
 *
 * Class strings are React's Register01 verbatim. React state becomes @state
 * fields; the `canSubmit` gate is a getter. `onSubmit` (payload) / `onSignIn`
 * / `onOauth` (provider) / `onViewTerms` / `onViewPrivacy` become `submit` /
 * `sign-in` / `oauth` / `view-terms` / `view-privacy` CustomEvents (bubbles,
 * composed). The commented zod sketch is not ported (code comment only).
 */
export class UipRegister01 extends LitElement {
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
  // :host display can't be a utility class (the host has no template of its own).
  static styles = [tailwind, css`:host { display: block; }`]

  static properties = {
    name: { state: true },
    email: { state: true },
    password: { state: true },
    confirmPassword: { state: true },
    acceptTerms: { state: true },
  }

  private name = ''
  private email = ''
  private password = ''
  private confirmPassword = ''
  private acceptTerms = false

  constructor() {
    super()
    new ThemeController(this)
  }

  connectedCallback() {
    super.connectedCallback()
    this.setAttribute('data-uipkge', '')
    this.setAttribute('data-slot', 'register-01')
  }

  private get passwordsMatch(): boolean {
    return !this.confirmPassword || this.password === this.confirmPassword
  }

  private get canSubmit(): boolean {
    return (
      this.name.length > 0 &&
      this.email.length > 0 &&
      this.password.length >= 8 &&
      this.passwordsMatch &&
      this.acceptTerms
    )
  }

  private handleSubmit(e: Event) {
    e.preventDefault()
    if (!this.canSubmit) return
    this.dispatchEvent(
      new CustomEvent<Register01Payload>('submit', {
        detail: { name: this.name, email: this.email, password: this.password },
        bubbles: true,
        composed: true,
      }),
    )
  }

  render() {
    return html`
      <div data-slot="register-01" class=${cn('bg-muted/30 flex min-h-svh items-center justify-center p-6')}>
        <uip-card class="w-full max-w-sm">
          <uip-card-header class="text-center">
            <uip-card-title class="text-2xl">Create your account</uip-card-title>
            <uip-card-description>Free for personal projects. No credit card.</uip-card-description>
          </uip-card-header>
          <uip-card-content class="space-y-4">
            <form class="space-y-4" @submit=${this.handleSubmit}>
              <div class="space-y-2">
                <uip-label for="r-name">Full name</uip-label>
                <uip-input
                  id="r-name"
                  .value=${this.name}
                  type="text"
                  placeholder="Ada Lovelace"
                  autocomplete="name"
                  required
                  @input=${(e: Event) => {
                    this.name = (e.target as UipInput).value
                  }}
                ></uip-input>
              </div>
              <div class="space-y-2">
                <uip-label for="r-email">Email</uip-label>
                <uip-input
                  id="r-email"
                  .value=${this.email}
                  type="email"
                  placeholder="you@example.com"
                  autocomplete="email"
                  required
                  @input=${(e: Event) => {
                    this.email = (e.target as UipInput).value
                  }}
                ></uip-input>
              </div>
              <div class="space-y-2">
                <uip-label for="r-password">Password</uip-label>
                <uip-input
                  id="r-password"
                  .value=${this.password}
                  type="password"
                  autocomplete="new-password"
                  minlength="8"
                  required
                  @input=${(e: Event) => {
                    this.password = (e.target as UipInput).value
                  }}
                ></uip-input>
                <p class="text-muted-foreground text-xs">Minimum 8 characters.</p>
              </div>
              <div class="space-y-2">
                <uip-label for="r-confirm">Confirm password</uip-label>
                <uip-input
                  id="r-confirm"
                  .value=${this.confirmPassword}
                  type="password"
                  autocomplete="new-password"
                  required
                  @input=${(e: Event) => {
                    this.confirmPassword = (e.target as UipInput).value
                  }}
                ></uip-input>
                ${!this.passwordsMatch
                  ? html`<p class="text-destructive text-xs" role="alert">Passwords don't match.</p>`
                  : ''}
              </div>

              <div class="flex items-start gap-2.5 pt-1">
                <uip-checkbox
                  id="r-terms"
                  .checked=${this.acceptTerms}
                  @checked-change=${(e: CustomEvent<{ checked: boolean }>) => {
                    this.acceptTerms = e.detail.checked
                  }}
                ></uip-checkbox>
                <uip-label for="r-terms" class="text-muted-foreground cursor-pointer text-xs leading-relaxed font-normal">
                  I agree to the
                  <button
                    type="button"
                    class="text-foreground mx-0.5 hover:underline"
                    @click=${() => this.dispatchEvent(new CustomEvent('view-terms', { bubbles: true, composed: true }))}
                  >
                    Terms of Service
                  </button>
                  and
                  <button
                    type="button"
                    class="text-foreground mx-0.5 hover:underline"
                    @click=${() =>
                      this.dispatchEvent(new CustomEvent('view-privacy', { bubbles: true, composed: true }))}
                  >
                    Privacy Policy
                  </button>
                  .
                </uip-label>
              </div>

              <uip-button type="submit" class="w-full" ?disabled=${!this.canSubmit}>Create account</uip-button>
            </form>

            <div class="relative">
              <uip-separator></uip-separator>
              <span
                class="bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-xs tracking-wider uppercase"
                >Or continue with</span
              >
            </div>

            <div class="grid grid-cols-2 gap-2">
              <uip-button
                type="button"
                variant="outline"
                @click=${() =>
                  this.dispatchEvent(new CustomEvent('oauth', { detail: 'google', bubbles: true, composed: true }))}
              >
                <svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
                  <path
                    fill="#4285F4"
                    d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"
                  />
                  <path
                    fill="#34A853"
                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                  />
                  <path
                    fill="#FBBC05"
                    d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
                  />
                  <path
                    fill="#EA4335"
                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"
                  />
                </svg>
                Google
              </uip-button>
              <uip-button
                type="button"
                variant="outline"
                @click=${() =>
                  this.dispatchEvent(new CustomEvent('oauth', { detail: 'github', bubbles: true, composed: true }))}
              >
                <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path
                    d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"
                  />
                </svg>
                GitHub
              </uip-button>
            </div>
          </uip-card-content>
          <uip-card-footer class="justify-center">
            <p class="text-muted-foreground text-xs">
              Already have an account?
              <button
                type="button"
                class="text-foreground ml-1 font-medium hover:underline"
                @click=${() => this.dispatchEvent(new CustomEvent('sign-in', { bubbles: true, composed: true }))}
              >
                Sign in
              </button>
            </p>
          </uip-card-footer>
        </uip-card>
      </div>
    `
  }
}

customElements.get('uip-register-01') || customElements.define('uip-register-01', UipRegister01)

declare global {
  interface HTMLElementTagNameMap {
    'uip-register-01': UipRegister01
  }
}

Raw manifest:https://uipkge.dev/r/lit/register-01.json

Change language