Progress for Task 29 (Plus Additional Features and Error Handling)

.github/workflows/node.js.yml

@@ -33,5 +33,7 @@ jobs:
         run: cd frontend; npm run lint
       - name: nextjs build
         run: cd frontend; npm run build
+      - name: install playwright
+        run: npx playwright install --with-deps
       - name: run tests
         run: cd frontend; npm run test:ci

backend/api/login/login.ts

@@ -23,7 +23,7 @@ async function login(ctx: Context) {
 
 	const hashedPassword = await generateHash(email, password);
 
-	if (user.email !== email || user.password !== hashedPassword) {
+	if (!user || user.password !== hashedPassword) {
 		ctx.response.status = 401;
 		ctx.response.body = JSON.stringify({
 			isError: true,

docs/SETUP.md

@@ -11,6 +11,10 @@ The frontend is in `/frontend`. It is a [next.js](https://nextjs.org/) project t
 3. ```sh
    npm install
    ```
+4. to setup end to end testing, run
+   ```sh
+   npx playwright install --with-deps
+   ```
 
 ### Formatting
 
@@ -55,6 +59,13 @@ To run the same checks that run in ci on your local, you can run
 npm run check
 ```
 
+### Run end to end tests
+
+(in `frontend`)
+```sh
+npm run test:e2e
+```
+
 ## Backend
 
 The backend is in `/backend`. It is an [oak server](https://oakserver.org/) that uses [deno](https://deno.com/).
@@ -96,7 +107,7 @@ The backend is in `/backend`. It is an [oak server](https://oakserver.org/) that
 
    **Step 4.4:** Copy the generated secret key.
 
-   **Step 4.5:** Add the secret key to your `local.env` file as an environment variable. Use the following format:
+   **Step 4.5:** Add the secret key to your `backend/local.env` file as an environment variable. Use the following format:
    ```env
    OPENAI_API_KEY=your-token-key
    ```

frontend/.gitignore

@@ -37,3 +37,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Ignore the test-results folder
+/test-results/

frontend/app/form/job_description_form.tsx

@@ -50,11 +50,7 @@ export default function JobDescriptionForm(props: { onSubmit?: () => void }) {
 		<Card>
 			<CardHeader title="Job Description" />
 			<CardContent>
-				<form
-					onSubmit={(event) => {
-						void handleSubmit(event);
-					}}
-				>
+				<form onSubmit={handleSubmit}>
 					{isLoading ? <CircularProgress /> : undefined}
 					<TextField
 						label="Job Description"
@@ -68,7 +64,13 @@ export default function JobDescriptionForm(props: { onSubmit?: () => void }) {
 						margin="normal"
 					/>
 					Character count: {description.length}/5000
-					<Button type="submit" variant="contained" fullWidth>
+					<Button
+						type="submit"
+						variant="contained"
+						fullWidth
+						disabled={isLoading}
+						data-testid="submit-button"
+					>
 						Submit Job Description
 					</Button>
 					{message ?? ""}

frontend/app/form/resume_form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 import { backendFormPost } from "util/fetching";
 import {
 	Button,
@@ -9,6 +9,7 @@ import {
 	CardHeader,
 	CircularProgress,
 	styled,
+	Typography,
 } from "@mui/material";
 
 /*https://mui.com/material-ui/react-button/#file-upload*/
@@ -27,6 +28,12 @@ const VisuallyHiddenInput = styled("input")({
 export default function ResumeForm(props: { onSubmit?: () => void }) {
 	const [message, setMessage] = useState<string | null>(null);
 	const [isLoading, setLoading] = useState(false);
+	const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+	const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const file = event.target.files?.[0] || null;
+		setSelectedFile(file);
+	};
 
 	const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
@@ -84,8 +91,17 @@ export default function ResumeForm(props: { onSubmit?: () => void }) {
 							name="file"
 							type="file"
 							accept="application/pdf"
+							onChange={handleFileChange}
 						/>
 					</Button>
+					{selectedFile && (
+						<Typography
+							variant="body2"
+							style={{ marginTop: "0.5rem" }}
+						>
+							Selected File: {selectedFile.name}
+						</Typography>
+					)}
 					<Button
 						type="submit"
 						variant="contained"

frontend/app/login/login.tsx

@@ -15,6 +15,7 @@ import { backendPost } from "util/fetching";
 export function Login() {
 	const [postData, setPostData] = useState<string | undefined>();
 	const [blankMessage, setBlankMessage] = useState("");
+	const [emailMessage, setEmailMessage] = useState("");
 	const [isLoading, setLoading] = useState(false);
 	const router = useRouter();
 	function onSubmit(event: FormEvent) {
@@ -24,13 +25,25 @@ export function Login() {
 		const email = data.get("email")?.toString() ?? "";
 		const password = data.get("password")?.toString() ?? "";
 
+		setBlankMessage("");
+		setEmailMessage("");
+
 		if (!email || !password) {
 			setBlankMessage(
 				"Please make sure you didn't leave any of the fields blank.",
 			);
 			return;
 		}
-		setBlankMessage("");
+
+		// verify email format
+		const emailRegex = /^.+@.+$/;
+		if (!emailRegex.test(email)) {
+			setEmailMessage(
+				"Please enter a valid email address for logging in.",
+			);
+			return;
+		}
+
 		setLoading(true);
 
 		//input is valid
@@ -40,8 +53,14 @@ export function Login() {
 		})
 			.then((data) => {
 				setLoading(false);
-				setPostData(data.message);
-				router.push("/form");
+				if (data.isError) {
+					setLoading(false);
+					// Show error and stay on login
+					setPostData(data.message);
+				} else {
+					setPostData(data.message);
+					router.push("/form");
+				}
 			})
 			.catch((reason) => {
 				setLoading(false);
@@ -53,7 +72,9 @@ export function Login() {
 			<CardHeader component="h2" title="Login" />
 			{isLoading ? <CircularProgress /> : undefined}
 			<CardContent>
-				<p data-testid="backend-login-post">{postData}</p>
+				<p data-testid="backend-login-post">
+					{!blankMessage && !emailMessage ? postData : ""}
+				</p>
 				<form encType="text/plain" onSubmit={onSubmit}>
 					<Input name="email" placeholder="email" />
 					<br />
@@ -66,6 +87,8 @@ export function Login() {
 					{/* will let the user know when that fields cannot be left blank*/}
 					<span data-testid="blank-message">{blankMessage}</span>
 					<br />
+					<span data-testid="email-message">{emailMessage}</span>
+					<br />
 					<Button variant="contained" type="submit">
 						login
 					</Button>

frontend/app/register/register.tsx

@@ -15,6 +15,7 @@ import { backendPost } from "util/fetching";
 export function Register() {
 	const [postData, setPostData] = useState<string | undefined>();
 	const [blankMessage, setBlankMessage] = useState("");
+	const [emailMessage, setEmailMessage] = useState("");
 	const [passMessage, setPassMessage] = useState("");
 	const [isLoading, setLoading] = useState(false);
 	const router = useRouter();
@@ -27,22 +28,33 @@ export function Register() {
 		const password = data.get("password")?.toString() ?? "";
 		const confirmPassword = data.get("confirm_password")?.toString() ?? "";
 
+		setBlankMessage("");
+		setEmailMessage("");
+		setPassMessage("");
 		// verify fields are not empty
 		if (!email || !username || !password || !confirmPassword) {
 			setBlankMessage(
 				"Please make sure you didn't leave any of the fields blank.",
 			);
 			return;
 		}
-		setBlankMessage("");
 
+		//setBlankMessage("");
+		// verify email format
+		const emailRegex = /^[a-zA-Z0-9_]+@[a-zA-Z]+\.[a-z]{2,}$/;
+		if (!emailRegex.test(email)) {
+			setEmailMessage("Please enter a valid email address.");
+			return;
+		}
+
+		//setEmailMessage("");
 		// verify passwords match
 		if (password != confirmPassword) {
 			setPassMessage("Please make sure passwords match.");
 			return;
 		}
-		setPassMessage("");
 
+		//setPassMessage("");
 		// input is valid
 		setLoading(true);
 		backendPost("api/register", {
@@ -51,22 +63,32 @@ export function Register() {
 			password,
 		})
 			.then((data) => {
-				setPostData(data.message);
 				setLoading(false);
-				router.push("/login");
+				if (data.isError) {
+					setLoading(false);
+					setPostData(data.message);
+				} else {
+					setPostData(data.message);
+					router.push("/login");
+				}
 			})
 			.catch((reason) => {
 				console.error(reason);
 				setPostData("Error: " + (reason?.message ?? reason));
 				setLoading(false);
 			});
 	}
+
 	return (
 		<Card>
 			<CardHeader component="h2" title="Register" />
 			{isLoading ? <CircularProgress /> : undefined}
 			<CardContent>
-				<p data-testid="backend-register-post">{postData}</p>
+				<p data-testid="backend-register-post">
+					{!blankMessage && !emailMessage && !passMessage
+						? postData
+						: ""}
+				</p>
 				<form encType="text/plain" onSubmit={onSubmit}>
 					<Input name="email" placeholder="email" />
 					<br />
@@ -83,12 +105,16 @@ export function Register() {
 						type="password"
 						placeholder="confirm password"
 					/>
+					<br />
 					{/* will let the user know when the passwords dont match*/}
 					<span data-testid="pass-message">{passMessage}</span>
 					<br />
 					{/* will let the user know when that fields cannot be left blank*/}
 					<span data-testid="blank-message">{blankMessage}</span>
 					<br />
+					{/* will let the user know when that fields cannot be left blank*/}
+					<span data-testid="email-message">{emailMessage}</span>
+					<br />
 					<Button variant="contained" type="submit">
 						register
 					</Button>

frontend/e2e/playwright.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+	testDir: "./tests", // Test directory
+	timeout: 20000, // Timeout for each test
+	use: {
+		baseURL: "http://localhost:3000", // Base URL for app
+		headless: true, // Run in headless mode
+	},
+	webServer: {
+		command: "npm run dev",
+		url: "http://localhost:3000",
+		reuseExistingServer: true,
+	},
+});