Login input type (#47)

Author: kentcdodds

app/routes/_app+/_auth+/login.tsx

@@ -1,7 +1,6 @@
 import {
 	getFormProps,
 	getInputProps,
-	getSelectProps,
 	useForm,
 } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod/v4'
@@ -22,32 +21,22 @@ import {
 	CheckboxField,
 	ErrorList,
 	Field,
-	SelectField,
 } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { login, requireAnonymous } from '#app/utils/auth.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
-import { PasswordSchema } from '#app/utils/user-validation.ts'
+import { PasswordSchema, UsernameSchema } from '#app/utils/user-validation.ts'
 import { handleNewSession } from './login.server.ts'
 
 const LoginFormSchema = z.object({
-	countryCode: z.string().min(1, 'Country code is required'),
-	phoneNumber: z.string().min(1, 'Phone number is required'),
+	username: UsernameSchema,
 	password: PasswordSchema,
 	redirectTo: z.string().optional(),
 	remember: z.boolean().optional(),
 })
 
-const countryCodes = [
-	{ label: 'United States (+1)', value: '+1' },
-	{ label: 'United Kingdom (+44)', value: '+44' },
-	{ label: 'Czech Republic (+420)', value: '+420' },
-	{ label: 'Canada (+1)', value: '+1' },
-	{ label: 'Australia (+61)', value: '+61' },
-]
-
 export async function loader({ request }: LoaderFunctionArgs) {
 	await requireAnonymous(request)
 	return json({})
@@ -63,14 +52,13 @@ export async function action({ request }: ActionFunctionArgs) {
 				if (intent !== null) return { ...data, session: null }
 
 				const session = await login({
-					identifier: data.phoneNumber,
-					countryCode: data.countryCode,
+					identifier: data.username,
 					password: data.password,
 				})
 				if (!session) {
 					ctx.addIssue({
 						code: z.ZodIssueCode.custom,
-						message: 'Invalid phone number or password',
+						message: 'Invalid username or password',
 					})
 					return z.NEVER
 				}
@@ -108,7 +96,6 @@ export default function LoginPage() {
 		constraint: getZodConstraint(LoginFormSchema),
 		defaultValue: {
 			redirectTo,
-			countryCode: countryCodes[0]?.value ?? '+1',
 		},
 		lastResult: actionData?.result,
 		onValidate({ formData }) {
@@ -132,32 +119,15 @@ export default function LoginPage() {
 			<div className="border-border bg-card mt-8 w-full max-w-lg rounded-[32px] border px-6 py-8 shadow-sm">
 				<Form method="POST" {...getFormProps(form)} className="space-y-6">
 					<HoneypotInputs />
-					<div className="grid gap-4 md:grid-cols-[200px_1fr]">
-						<SelectField
-							labelProps={{ children: 'Country Code' }}
-							selectProps={{
-								...getSelectProps(fields.countryCode),
-								children: countryCodes.map((code) => (
-									<option
-										key={`${code.value}-${code.label}`}
-										value={code.value}
-									>
-										{code.label}
-									</option>
-								)),
-							}}
-							errors={fields.countryCode.errors}
-						/>
-						<Field
-							labelProps={{ children: 'Phone Number' }}
-							inputProps={{
-								...getInputProps(fields.phoneNumber, { type: 'text' }),
-								autoFocus: true,
-								autoComplete: 'tel',
-							}}
-							errors={fields.phoneNumber.errors}
-						/>
-					</div>
+					<Field
+						labelProps={{ children: 'Username' }}
+						inputProps={{
+							...getInputProps(fields.username, { type: 'text' }),
+							autoFocus: true,
+							autoComplete: 'username',
+						}}
+						errors={fields.username.errors}
+					/>
 
 					<Field
 						labelProps={{ children: 'Password' }}

tests/e2e/2fa.test.ts

@@ -55,9 +55,9 @@ test('Users can add 2FA to their account and use it when logging in', async ({
 	await page.waitForLoadState('domcontentloaded')
 	await expect(page).toHaveURL(`/login`)
 
-	const phoneNumberInput = page.getByRole('textbox', { name: /phone number/i })
-	await phoneNumberInput.waitFor({ state: 'visible' })
-	await phoneNumberInput.fill(user.phoneNumber)
+	const usernameInput = page.getByRole('textbox', { name: /username/i })
+	await usernameInput.waitFor({ state: 'visible' })
+	await usernameInput.fill(user.username)
 	await page.getByLabel(/^password$/i).fill(password)
 	await page.getByRole('button', { name: /log in/i }).click()
 

tests/e2e/onboarding.test.ts

@@ -185,9 +185,9 @@ test('login as existing user', async ({ page, insertNewUser }) => {
 	await page.goto('/login')
 	await page.waitForLoadState('domcontentloaded')
 
-	const phoneNumberInput = page.getByRole('textbox', { name: /phone number/i })
-	await phoneNumberInput.waitFor({ state: 'visible' })
-	await phoneNumberInput.fill(user.phoneNumber)
+	const usernameInput = page.getByRole('textbox', { name: /username/i })
+	await usernameInput.waitFor({ state: 'visible' })
+	await usernameInput.fill(user.username)
 	await page.getByLabel(/^password$/i).fill(password)
 	await page.getByRole('button', { name: /log in/i }).click()
 
@@ -261,17 +261,17 @@ test('reset password with a link', async ({ page, insertNewUser }) => {
 	await expect(page).toHaveURL('/login', { timeout: 15_000 })
 	await page.waitForLoadState('domcontentloaded')
 
-	const loginPhoneInput = page.getByRole('textbox', { name: /phone number/i })
-	await loginPhoneInput.waitFor({ state: 'visible' })
-	await loginPhoneInput.fill(user.phoneNumber)
+	const loginUsernameInput = page.getByRole('textbox', { name: /username/i })
+	await loginUsernameInput.waitFor({ state: 'visible' })
+	await loginUsernameInput.fill(user.username)
 	await page.getByLabel(/^password$/i).fill(originalPassword)
 	await page.getByRole('button', { name: /log in/i }).click()
 
 	await expect(
-		page.getByText(/invalid phone number or password/i),
+		page.getByText(/invalid username or password/i),
 	).toBeVisible()
 
-	await loginPhoneInput.fill(user.phoneNumber)
+	await loginUsernameInput.fill(user.username)
 	await page.getByLabel(/^password$/i).fill(newPassword)
 	await page.getByRole('button', { name: /log in/i }).click()