Sign-up 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 {
8  Field,
9  FieldDescription,
10  FieldGroup,
11  FieldLabel,
12  FieldLegend,
13  FieldSet,
14} from '@/components/field'
15import { Input } from '@/components/input'
16import { LabeledSeparator } from '@/components/labeled-separator'
17import { Link } from '@/components/link'
18import { IconLogin } from '@/icons/login'
19import { IconPersonAdd } from '@/icons/person-add'
20import { cn } from '@/lib/utils'
21 
22/**
23 * SignUpForm — the account-creation counterpart to LoginForm.
24 *
25 * A composed pattern (Card + Field + Input + Button), published as a worked
26 * example: copy the source and wire the fields to your own registration
27 * handler rather than configuring it through props.
28 *
29 * Best-practice notes baked in:
30 *  - Single sign-on (Microsoft Entra ID) leads as the recommended path with
31 *    solid emphasis; email + password registration is the fallback, grouped
32 *    in a FieldSet whose legend names the set for assistive tech.
33 *  - `autoComplete="new-password"` on both the password and confirm-password
34 *    fields tells password managers to offer/save a generated password (vs.
35 *    the `current-password` hint LoginForm uses).
36 *  - A visible password-requirements hint is associated with the input via
37 *    `aria-describedby` so screen readers announce the rules (WCAG 3.3.2).
38 *  - Terms acceptance is communicated inline at the point of action rather
39 *    than via a pre-checked checkbox.
40 */
41export function SignUpForm({ className, ...props }: React.ComponentProps<'div'>) {
42  return (
43    <div className={cn('flex flex-col gap-6', className)} {...props}>
44      <Card className='w-full'>
45        <CardHeader>
46          <CardTitle>Create your account</CardTitle>
47          <CardDescription>Enter your details below to create a new account.</CardDescription>
48        </CardHeader>
49        <CardContent>
50          <form>
51            <FieldGroup>
52              {/*
53               * Single sign-on first: NSW Government staff authenticate with
54               * Microsoft Entra ID, so SSO is the recommended path and carries
55               * primary (solid) emphasis. Email + password registration is the
56               * fallback below the separator.
57               */}
58              <Field>
59                <FieldDescription>
60// … truncated