Fix login

frontend/src/pages/login-page.tsx

@@ -3,44 +3,56 @@ import { Link, useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import HostContext from "../HostContext";
 
+type LoginResponse = {
+  token: string,
+  message: string
+}
+
+type ErrorResponse = {
+  message: string
+}
+
 export const LoginPage = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState<string>("");
   const navigate = useNavigate();
 
   const hostURL = useContext(HostContext);
 
-  const handleLogin = (e: React.FormEvent) => {
+  const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
 
     const requestBody = {
       username: username,
       password: password,
     };
 
-    fetch(`${hostURL}/api/auth/login`, {
+    const response = await fetch(`${hostURL}/api/auth/login`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify(requestBody),
     })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        return response.json();
-      })
-      .then((response) => {
-        localStorage.setItem("token", response.token);
-        localStorage.setItem('username', username);
-        navigate("/quizzes");
-      })
-      .catch((error) => {
-        // TODO: Display error in the UI.
-        console.log("Error:");
-        console.log(error);
-      });
+
+    if (!response.ok) {
+      try {
+        const errorBody = (await response.json()) as ErrorResponse;
+        setError(errorBody.message);
+      } catch (e) {
+        console.log(e);
+        setError("Invalid username or password.");
+      }
+      return;
+    }
+
+    const loginResponse = (await response.json()) as LoginResponse;
+
+    localStorage.setItem("token", loginResponse.token);
+    localStorage.setItem('username', username);
+    setError("");
+    navigate("/quizzes");
   };
 
   return (
@@ -90,6 +102,12 @@ export const LoginPage = () => {
             Register
           </Link>
         </p>
+
+        {error && (
+          <p className="mt-4 text-sm text-red-600">
+            {error}
+          </p>
+        )}
       </motion.div>
     </div>
   );

frontend/src/pages/sign-up.tsx

@@ -4,6 +4,11 @@ import { motion } from "framer-motion";
 import HostContext from "../HostContext";
 import { ProfileResponse } from "../types/profile";
 
+type RegisterResponse = {
+  token: string,
+  message: string
+}
+
 export const SignUpPage = () => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
@@ -15,11 +20,18 @@ export const SignUpPage = () => {
     useState<ProfileResponse["englishProficiency"]>("A1");
   const navigate = useNavigate();
 
+  const [error, setError] = useState<string>("");
+
   const hostURL = useContext(HostContext);
 
-  const handleSignUp = (e: React.FormEvent) => {
+  const handleSignUp = async (e: React.FormEvent) => {
     e.preventDefault();
 
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.");
+      return;
+    }
+
     const requestBody = {
       username: username,
       name: firstName + lastName,
@@ -28,31 +40,27 @@ export const SignUpPage = () => {
       englishProficiency: englishProficiency,
     };
 
-    fetch(`${hostURL}/api/auth/register`, {
+    const response = await fetch(`${hostURL}/api/auth/register`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
 
       body: JSON.stringify(requestBody),
     })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        return response.json();
-      })
-      .then((response) => {
-        console.log("Registration successfull.");
-        localStorage.setItem("token", response.token);
-        localStorage.setItem("username", username);
-        navigate("/");
-      })
-      .catch((error) => {
-        // TODO: Display error in the UI.
-        console.log("Error:");
-        console.log(error);
-      });
+
+    if (!response.ok) {
+      const errorMessage = await response.json();
+      setError(errorMessage.message);
+      return;
+    }
+
+    const registerResponse = (await response.json()) as RegisterResponse;
+
+    localStorage.setItem("token", registerResponse.token);
+    localStorage.setItem('username', username);
+    setError("");
+    navigate("/quizzes");
   };
 
   return (
@@ -153,6 +161,12 @@ export const SignUpPage = () => {
             Sign in
           </Link>
         </p>
+
+        {error && (
+          <p className="mt-4 text-sm text-red-600">
+            {error}
+          </p>
+        )}
       </motion.div>
     </div>
   );