#2: Fixing sign up error messages display

frontend/src/hooks/useLogin.js

@@ -3,6 +3,7 @@ import { useAuthContext } from "./useAuthContext";
 
 export const useLogin = () => {
   const [isLoading, setIsLoading] = useState(null);
+  const [error,setError] = useState(null)
   const { dispatch } = useAuthContext();
 
   const login = async (email, password) => {
@@ -16,6 +17,7 @@ export const useLogin = () => {
     const json = await response.json();
 
     if (!response.ok) {
+      setError(json.error)
       setIsLoading(false);
     }
     if (response.ok) {
@@ -29,5 +31,5 @@ export const useLogin = () => {
     }
   };
 
-  return { login, isLoading };
+  return { login, isLoading ,error};
 };

frontend/src/hooks/useSignup.js

@@ -4,7 +4,7 @@ import { useAuthContext } from "./useAuthContext";
 export const useSignup = () => {
   const [isLoading, setIsLoading] = useState(null);
   const { dispatch } = useAuthContext();
-
+  const [error, setError] = useState(null);
   const signup = async (email, password) => {
     setIsLoading(true);
 
@@ -16,6 +16,7 @@ export const useSignup = () => {
     const json = await response.json();
 
     if (!response.ok) {
+      setError(json.error);
       setIsLoading(false);
     }
     if (response.ok) {
@@ -29,5 +30,5 @@ export const useSignup = () => {
     }
   };
 
-  return { signup, isLoading };
+  return { signup, isLoading, error };
 };

frontend/src/index.css

@@ -119,4 +119,9 @@ form.signup, form.login {
   padding: 20px;
   background: #fff;
   border-radius: 4px;
+}
+
+.error-element{
+color: red;
+font-weight: 500;
 }

frontend/src/pages/Login.js

@@ -4,7 +4,7 @@ import { useLogin } from "../hooks/useLogin";
 const Login = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const { login, isLoading } = useLogin();
+  const { login, isLoading, error } = useLogin();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -28,7 +28,7 @@ const Login = () => {
       />
 
       <button disabled={isLoading}>Log in</button>
-      {/* Display error message if there was an issue with the login */}
+        {error && <div className="error-element">{error}</div>}
     </form>
   );
 };

frontend/src/pages/Signup.js

@@ -4,7 +4,7 @@ import { useSignup } from "../hooks/useSignup";
 const Signup = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const { signup, isLoading } = useSignup();
+  const { signup, isLoading, error } = useSignup();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -30,7 +30,7 @@ const Signup = () => {
       />
 
       <button disabled={isLoading}>Sign up</button>
-      {/* Display error message if there was an issue with the Sign up */}
+      {error && <div className="error-element">{error}</div>}
     </form>
   );
 };