iiitl · piyushkumar079 · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "date-fns": "^2.28.0",
+    "dateformat": "^5.0.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="A simple yet productive task manager"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -25,7 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
-    <title>React App</title>
+    <title>TaskWizard</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/public/logo.png b/frontend/public/logo.png
diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png
diff --git a/frontend/public/logo512.png b/frontend/public/logo512.png
diff --git a/frontend/src/components/TaskDetails.js b/frontend/src/components/TaskDetails.js
@@ -1,6 +1,6 @@
 import { useTasksContext } from "../hooks/usetasksContext";
 import { useAuthContext } from "../hooks/useAuthContext";
-
+import dateFormat from "dateformat";
 const TaskDetails = ({ task }) => {
   const { dispatch } = useTasksContext();
   const { user } = useAuthContext();
@@ -35,6 +35,9 @@ const TaskDetails = ({ task }) => {
         <strong>Progress: </strong>
         {task.progress}
       </p>
+      <p>
+        {dateFormat(task.createdAt,"longDate")}
+      </p>
       <span className="material-symbols-outlined" onClick={handleClick}>
         delete
       </span>

diff --git a/frontend/src/hooks/useLogin.js b/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) {
@@ -24,10 +26,12 @@ export const useLogin = () => {
       // update the auth context
       dispatch({ type: "LOGIN", payload: json });
 
+      // saving it to localStorage of browser to save user session
+      localStorage.setItem("user", JSON.stringify(json));
       // update loading state
       setIsLoading(false);
     }
   };
 
-  return { login, isLoading };
+  return { login, isLoading, error };
 };
diff --git a/frontend/src/hooks/useSignup.js b/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 };
 };
diff --git a/frontend/src/index.css b/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;
 }
diff --git a/frontend/src/pages/Login.js b/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>
   );
 };

diff --git a/frontend/src/pages/Signup.js b/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>
   );
 };