feat(registration): enable basic validation on fields

frontend/src/components/RegisterView/RegisterView.test.tsx

@@ -1,4 +1,4 @@
-import { screen, render } from "@testing-library/react"
+import { screen, render, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query"
 import AxiosMockAdapter from "axios-mock-adapter"
@@ -71,4 +71,40 @@ describe("RegisterView", () => {
 
 		expect(requestBody).toEqual(testInput)
 	})
+
+	it.each`
+		scenario               | emailAddress         | password
+		${"no email value"}    | ${undefined}         | ${"password"}
+		${"no password value"} | ${"email@email.com"} | ${undefined}
+		${"empty form"}        | ${undefined}         | ${undefined}
+	`(
+		"the submission button is disabled if the form isn't validated ($scenario)",
+		async ({ emailAddress, password }) => {
+			const { user } = renderComponent()
+
+			if (emailAddress !== undefined) {
+				const emailInput = screen.getByLabelText("New account email address")
+				await user.type(emailInput, emailAddress)
+				await waitFor(() =>
+					expect(emailInput.getAttribute("value")).toEqual(emailAddress),
+				)
+			}
+			if (password !== undefined) {
+				const passwordInput = screen.getByLabelText(
+					"New account password input",
+				)
+
+				await user.type(passwordInput, password)
+				await waitFor(() =>
+					expect(passwordInput.getAttribute("value")).toEqual(password),
+				)
+			}
+
+			const submitButton = screen.getByText("Create account")
+
+			await waitFor(() =>
+				expect(submitButton.getAttribute("disabled")).not.toBeUndefined(),
+			)
+		},
+	)
 })

frontend/src/components/RegisterView/index.tsx

@@ -12,6 +12,7 @@ import Button from "@mui/material/Button"
 
 import axiosWithDefaults from "../../axios"
 import TextInput from "../TextInput"
+import { validateEmail, validatePassword } from "./validation"
 
 function RegisterView() {
 	const [emailAddress, setEmailAddress] = React.useState<string | undefined>()
@@ -38,29 +39,36 @@ function RegisterView() {
 				label="Email"
 				ariaLabel="New account email address"
 				onChange={setEmailAddress}
+				validate={validateEmail}
 				value={emailAddress}
 			/>
 		),
-		[emailAddress, setEmailAddress],
+		[emailAddress, setEmailAddress, validateEmail],
 	)
 
 	const passwordField = React.useMemo(
 		() => (
 			<TextInput
-				errorText={"A valid password should be valid."}
+				errorText={"A valid password should have between 8-64 characters."}
 				label="Password"
 				ariaLabel="New account password input"
 				onChange={setPassword}
+				validate={validatePassword}
 				value={password}
 			/>
 		),
-		[setPassword, password],
+		[setPassword, password, validatePassword],
 	)
 
+	const isFormValid = React.useMemo(() => {
+		return validateEmail(emailAddress) && validatePassword(password)
+	}, [emailAddress, password, validatePassword, validateEmail])
+
 	const onCreateClick = React.useCallback(() => {
-		if (!emailAddress || !password) return
-		mutate({ email: emailAddress, password: password })
-	}, [mutate, emailAddress, password])
+		if (!isFormValid) return
+
+		mutate({ email: String(emailAddress), password: String(password) })
+	}, [mutate, emailAddress, password, isFormValid])
 
 	return (
 		<Box sx={{ display: "flex", justifyContent: "center", width: "100%" }}>
@@ -77,6 +85,7 @@ function RegisterView() {
 					variant="contained"
 					onClick={onCreateClick}
 					aria-label="submit account registration"
+					disabled={!isFormValid}
 				>
 					Create account
 				</Button>