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 uipkge-ng@latest add register-01

$npx uipkge-ng@latest add register-01

$yarn dlx uipkge-ng@latest add register-01

$bunx uipkge-ng@latest add register-01

Manifest:https://uipkge.dev/r/angular/register-01.jsonInstalls to:src/app/components/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
}

npm dependencies

lucide-angular

Includes

button card checkbox input label separator

Files installed (2)

src/app/components/blocks/register-01/register-01.component.ts8.1 kB

// 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. Port of the Vue/React block 1:1 — emits `submit` with the
// validated payload, `signIn`, `oauth` with the provider, and `viewTerms` / `viewPrivacy`.
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'
import { Github, LucideAngularModule } from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiButtonComponent } from '@/ui/button/button.component'
import {
  UiCardComponent,
  UiCardContentComponent,
  UiCardDescriptionComponent,
  UiCardFooterComponent,
  UiCardHeaderComponent,
  UiCardTitleComponent,
} from '@/ui/card/card.component'
import { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'
import { UiInputComponent } from '@/ui/input/input.component'
import { UiLabelComponent } from '@/ui/label/label.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'

export type Register01OauthProvider = 'github' | 'google'

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

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-register-01, [ui-register-01]',
  standalone: true,
  // The block renders its own full-page root <div>: keep the host out of layout.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiCardDescriptionComponent,
    UiCardFooterComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
    UiCheckboxComponent,
    UiInputComponent,
    UiLabelComponent,
    UiSeparatorComponent,
  ],
  template: `
    <div data-slot="register-01" [class]="rootClass">
      <div ui-card class="w-full max-w-sm">
        <div ui-card-header class="text-center">
          <h2 ui-card-title class="text-2xl">Create your account</h2>
          <p ui-card-description>Free for personal projects. No credit card.</p>
        </div>
        <div ui-card-content class="space-y-4">
          <form class="space-y-4" (submit)="onSubmit($event)">
            <div class="space-y-2">
              <label ui-label for="r-name">Full name</label>
              <ui-input
                id="r-name"
                [value]="name()"
                (valueChange)="name.set($event)"
                type="text"
                placeholder="Ada Lovelace"
                autoComplete="name"
                required
              />
            </div>
            <div class="space-y-2">
              <label ui-label for="r-email">Email</label>
              <ui-input
                id="r-email"
                [value]="email()"
                (valueChange)="email.set($event)"
                type="email"
                placeholder="you@example.com"
                autoComplete="email"
                required
              />
            </div>
            <div class="space-y-2">
              <label ui-label for="r-password">Password</label>
              <ui-input
                id="r-password"
                [value]="password()"
                (valueChange)="password.set($event)"
                type="password"
                autoComplete="new-password"
                required
              />
              <p class="text-muted-foreground text-xs">Minimum 8 characters.</p>
            </div>
            <div class="space-y-2">
              <label ui-label for="r-confirm">Confirm password</label>
              <ui-input
                id="r-confirm"
                [value]="confirmPassword()"
                (valueChange)="confirmPassword.set($event)"
                type="password"
                autoComplete="new-password"
                required
              />
              @if (!passwordsMatch()) {
                <p class="text-destructive text-xs" role="alert">Passwords don&apos;t match.</p>
              }
            </div>

            <div class="flex items-start gap-2.5 pt-1">
              <ui-checkbox id="r-terms" [checked]="acceptTerms()" (checkedChange)="acceptTerms.set(!!$event)" />
              <label
                ui-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)="viewTerms.emit()">
                  Terms of Service
                </button>
                and
                <button type="button" class="text-foreground mx-0.5 hover:underline" (click)="viewPrivacy.emit()">
                  Privacy Policy</button
                >.
              </label>
            </div>

            <button ui-button type="submit" class="w-full" [disabled]="!canSubmit()">Create account</button>
          </form>

          <div class="relative">
            <ui-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">
            <button ui-button type="button" variant="outline" (click)="oauth.emit('google')">
              <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
            </button>
            <button ui-button type="button" variant="outline" (click)="oauth.emit('github')">
              <lucide-icon [img]="Github" class="size-4" />
              GitHub
            </button>
          </div>
        </div>
        <div ui-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)="signIn.emit()">
              Sign in
            </button>
          </p>
        </div>
      </div>
    </div>
  `,
})
export class UiRegister01Component {
  protected readonly Github = Github

  @Input('class') className?: string

  @Output() readonly submit = new EventEmitter<Register01Payload>()
  @Output() readonly signIn = new EventEmitter<void>()
  @Output() readonly oauth = new EventEmitter<Register01OauthProvider>()
  @Output() readonly viewTerms = new EventEmitter<void>()
  @Output() readonly viewPrivacy = new EventEmitter<void>()

  readonly name = signal('')
  readonly email = signal('')
  readonly password = signal('')
  readonly confirmPassword = signal('')
  readonly acceptTerms = signal(false)

  readonly passwordsMatch = computed(() => !this.confirmPassword() || this.password() === this.confirmPassword())
  readonly canSubmit = computed(
    () =>
      this.name().length > 0 &&
      this.email().length > 0 &&
      this.password().length >= 8 &&
      this.passwordsMatch() &&
      this.acceptTerms(),
  )

  get rootClass(): string {
    return cn('bg-muted/30 flex min-h-svh items-center justify-center p-6', this.className)
  }

  onSubmit(event: Event): void {
    event.preventDefault()
    if (!this.canSubmit()) return
    this.submit.emit({ name: this.name(), email: this.email(), password: this.password() })
  }
}

src/app/components/blocks/register-01/index.ts0.1 kB

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

Change language