Login Form

1'use client'
2 
3import type * as React from 'react'
4 
5import { Button } from '@/components/button'
6import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/card'
7import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/field'
8import { Input } from '@/components/input'
9import { LabeledSeparator } from '@/components/labeled-separator'
10import { Link } from '@/components/link'
11import { Separator } from '@/components/separator'
12import { IconKey } from '@/icons/key'
13import { IconLogin } from '@/icons/login'
14import { IconMail } from '@/icons/mail'
15import { cn } from '@/lib/utils'
16 
17export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
18  return (
19    <div className={cn('flex flex-col gap-6', className)} {...props}>
20      <Card className='w-full'>
21        <CardHeader>
22          <CardTitle>Login to your account</CardTitle>
23          <CardDescription>Choose how you&apos;d like to sign in</CardDescription>
24        </CardHeader>
25        <CardContent>
26          <form>
27            <FieldGroup>
28              {/*
29               * Best-practice sign-in order, most-recommended first:
30               *   1. Single sign-on (SSO) — the preferred path
31               *   2. Email + password     — the traditional fallback
32               *   3. Magic link           — passwordless, reuses the email
33               * Each method is divided by a LabeledSeparator so it reads as a
34               * distinct alternative. Only SSO carries primary (solid)
35               * emphasis — one primary action per view — with password Login
36               * and the magic link stepped down to outline treatments.
37               */}
38              {/* 1 — Single sign-on: the recommended first option */}
39              <Field>
40                <Button type='button'>
41                  <IconLogin />
42                  Continue with single sign-on
43                </Button>
44              </Field>
45              <LabeledSeparator>or sign in with email</LabeledSeparator>
46              {/* 2 — Email + password.
47               * No htmlFor/id wiring: each control sits in a Field, which
48               * associates the label (and any description/error) with the input
49               * automatically via Base UI, generating ids per instance — so two
50               * LoginForms on one page don't collide.
51               *
52               * autoComplete is not decoration: it is the technique that
53// … truncated