Split Brand Login

Installation

Variants

Schema

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

interface Login02Payload {
  email: string
  password: string
}

Theming

CSS custom properties referenced in this item. Override any of them in your :root or per-element to retheme.

Files installed (2)

• src/app/components/blocks/login-02/login-02.component.ts8.1 kB

  Copy

  // Split-layout login: brand/marketing panel on the left (logo, headline,
  // value-prop bullets, copyright) and the form on the right (email + password,
  // SSO row, sign-up link). Collapses to single-column form-only on small screens.
  // Port of the Vue/React block 1:1 — emits `submit` with the credentials,
  // `oauth` with the chosen provider, `forgotPassword` and `signUp`; the consumer
  // wires the actual auth calls.
  import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } from '@angular/core'
  import { Github, LucideAngularModule, Palette, ShieldCheck, Zap } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiInputComponent } from '@/ui/input/input.component'
  import { UiLabelComponent } from '@/ui/label/label.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  export type Login02OauthProvider = 'github' | 'google'
  
  export interface Login02Payload {
    email: string
    password: string
  }
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-login-02, [ui-login-02]',
    standalone: true,
    // The block renders its own full-page root <div>: keep the host out of layout.
    host: { '[attr.class]': '"contents"' },
    imports: [LucideAngularModule, UiButtonComponent, UiInputComponent, UiLabelComponent, UiSeparatorComponent],
    template: `
      <div data-slot="login-02" [class]="rootClass">
        <!-- Brand / marketing panel -->
        <aside
          class="border-border relative hidden flex-col justify-between overflow-hidden border-r p-12 lg:flex"
          style="background: color-mix(in oklch, var(--primary) 6%, var(--card))"
        >
          <div class="text-foreground relative z-[1] flex items-center gap-2.5">
            <div
              class="text-background font-display grid size-8 place-items-center rounded-md font-bold"
              style="background: var(--primary)"
            >
              U
            </div>
            <span class="font-display text-base font-semibold">Your Product</span>
          </div>
  
          <div class="relative z-[1] max-w-md">
            <p class="text-muted-foreground/80 mb-3 text-xs font-medium tracking-[0.14em] uppercase">Why teams switch</p>
            <h2 class="font-display text-3xl leading-tight font-semibold tracking-tight text-balance">
              Ship features in
              <em class="font-display font-semibold not-italic" style="color: var(--primary)">hours</em>, not sprints.
            </h2>
            <p class="text-muted-foreground mt-4 text-sm leading-relaxed">
              Reusable components, opinionated defaults, and a registry that keeps your team writing product code instead
              of reinventing the same UI.
            </p>
  
            <ul class="mt-8 space-y-3 text-sm">
              <li class="flex items-start gap-3">
                <lucide-icon [img]="Zap" class="mt-0.5 size-4 shrink-0" style="color: var(--primary)" />
                <span class="text-foreground">One-command install, full source ownership</span>
              </li>
              <li class="flex items-start gap-3">
                <lucide-icon [img]="ShieldCheck" class="mt-0.5 size-4 shrink-0" style="color: var(--primary)" />
                <span class="text-foreground">SOC 2 compliant, SSO out of the box</span>
              </li>
              <li class="flex items-start gap-3">
                <lucide-icon [img]="Palette" class="mt-0.5 size-4 shrink-0" style="color: var(--primary)" />
                <span class="text-foreground">Themeable tokens, dark mode, RTL ready</span>
              </li>
            </ul>
          </div>
  
          <p class="text-muted-foreground/70 relative z-[1] text-xs">© {{ year }} Your Product, Inc.</p>
        </aside>
  
        <!-- Form panel -->
        <div class="flex items-center justify-center p-6 sm:p-12">
          <div class="w-full max-w-sm space-y-6">
            <div class="space-y-1.5 text-center lg:text-left">
              <h1 class="font-display text-3xl font-semibold tracking-tight">Welcome back</h1>
              <p class="text-muted-foreground text-sm">Sign in to continue to your workspace.</p>
            </div>
  
            <form class="space-y-4" (submit)="onSubmit($event)">
              <div class="space-y-2">
                <label ui-label for="login02-email">Email</label>
                <ui-input
                  id="login02-email"
                  [value]="email()"
                  (valueChange)="email.set($event)"
                  type="email"
                  placeholder="[email protected]"
                  autoComplete="email"
                  required
                />
              </div>
              <div class="space-y-2">
                <div class="flex items-center justify-between">
                  <label ui-label for="login02-password">Password</label>
                  <button
                    type="button"
                    class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                    (click)="forgotPassword.emit()"
                  >
                    Forgot?
                  </button>
                </div>
                <ui-input
                  id="login02-password"
                  [value]="password()"
                  (valueChange)="password.set($event)"
                  type="password"
                  autoComplete="current-password"
                  required
                />
              </div>
              <button ui-button type="submit" class="w-full">Sign in</button>
            </form>
  
            <div class="relative">
              <ui-separator />
              <span
                class="bg-background text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-xs tracking-wider uppercase"
              >
                Or
              </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>
  
            <p class="text-muted-foreground text-center text-xs">
              Don't have an account?
              <button type="button" class="text-foreground ml-1 font-medium hover:underline" (click)="signUp.emit()">
                Sign up
              </button>
            </p>
          </div>
        </div>
      </div>
    `,
  })
  export class UiLogin02Component {
    protected readonly Github = Github
    protected readonly Palette = Palette
    protected readonly ShieldCheck = ShieldCheck
    protected readonly Zap = Zap
  
    protected readonly year = new Date().getFullYear()
  
    @Input('class') className?: string
  
    @Output() readonly submit = new EventEmitter<Login02Payload>()
    @Output() readonly forgotPassword = new EventEmitter<void>()
    @Output() readonly signUp = new EventEmitter<void>()
    @Output() readonly oauth = new EventEmitter<Login02OauthProvider>()
  
    readonly email = signal('')
    readonly password = signal('')
  
    get rootClass(): string {
      return cn('grid min-h-svh lg:grid-cols-2', this.className)
    }
  
    onSubmit(event: Event): void {
      event.preventDefault()
      this.submit.emit({ email: this.email(), password: this.password() })
    }
  }
  

• src/app/components/blocks/login-02/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/login-02.json