Soustab10todo

README.md

@@ -98,7 +98,7 @@ Here is the breakdown of the points related to each task.
 Judging would be done on the basis of your implementation and authenticity.
 
 ## Deadline
-You'll have a week to complete this task. Hence, the deadline of this task is **26th June, 2022** i.e. till the end of this month.
+You'll have a week to complete this task. Hence, the deadline of this task is **26th June, 2022**.
 
 ## Submission
 * Follow the instructions to setup this project.

components/AddTask.js

@@ -1,25 +1,70 @@
-export default function AddTask() {
+import { useState } from "react";
+import axios from "../utils/axios";
+import { useAuth } from "../context/auth";
+import { API_URL } from "../utils/constants";
+import {
+  displayErrorToast,
+  displaySuccessToast,
+  displayWarningToast,
+} from "../pages/toast";
+import TodoListItem from "../components/TodoListItem";
+
+export default function AddTask(props) {
+  /**
+   * @todo Complete this function.
+   * @todo 1. Send the request to add the task to the backend server.
+   * @todo 2. Add the task in the dom.
+   */
+
+  const { token } = useAuth();
+  const [task, setTask] = useState("");
+
   const addTask = () => {
-    /**
-     * @todo Complete this function.
-     * @todo 1. Send the request to add the task to the backend server.
-     * @todo 2. Add the task in the dom.
-     */
-  }
+    if (task == "") {
+      displayWarningToast("Task title is required!");
+      return;
+    } else {
+      const dataForApiRequest = {
+        title: task,
+      };
+      axios({
+        headers: {
+          Authorization: "Token " + token,
+        },
+        url: API_URL + "todo/create/",
+        method: "POST",
+        data: dataForApiRequest,
+      })
+        .then((res) => {
+          setTask("");
+          props.renderTasks();
+
+          displaySuccessToast("Task added successfully");
+        })
+        .catch(function (err) {
+          displayErrorToast("Error!! Task could not be added!");
+        });
+    }
+  };
+
   return (
-    <div className='flex items-center max-w-sm mt-24'>
-      <input
-        type='text'
-        className='todo-add-task-input px-4 py-2 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full'
-        placeholder='Enter Task'
-      />
-      <button
-        type='button'
-        className='todo-add-task bg-transparent hover:bg-green-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded'
-        onClick={addTask}
-      >
-        Add Task
-      </button>
+    <div>
+      <div className="flex items-center flex-row max-w-sm mt-24 align-middle w-full">
+        <input
+          onChange={(e) => setTask(e.target.value)}
+          type="text"
+          className="todo-add-task-input px-4 py-2 placeholder-blueGray-300 dark:placeholder-gray-100 text-blueGray-600 dark:bg-gray-400 dark:text-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full "
+          placeholder="Enter Task Title"
+          value={task}
+        />
+        <button
+          type="button"
+          className="todo-add-task bg-transparent  dark:bg-green-700 dark:text-white hover:bg-green-500 text-green-700 text-sm hover:text-white px-3 py-2 border border-green-500 hover:border-transparent rounded"
+          onClick={addTask}
+        >
+          Add Task
+        </button>
+      </div>
     </div>
-  )
+  );
 }

components/LoginForm.js

@@ -1,43 +1,119 @@
+import React from "react";
+import axios from "../utils/axios";
+import { API_URL } from "../utils/constants";
+import { useAuth } from "../context/auth";
+import { useRouter } from "next/router";
+import { no_auth_required } from "../middlewares/no_auth_required";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import {
+  displayErrorToast,
+  displaySuccessToast,
+  displayWarningToast,
+} from "../pages/toast";
+
 export default function RegisterForm() {
+  no_auth_required();
+  const router = useRouter();
+  const { setToken } = useAuth();
+
+  const [loginData, setLoginData] = React.useState({
+    usernameInput: "",
+    passwordInput: "",
+  });
+
+  function handleChange(e) {
+    const { name, value } = e.target;
+    setLoginData((prev) => {
+      return {
+        ...prev,
+        [name]: value,
+      };
+    });
+  }
+
   const login = () => {
     /***
      * @todo Complete this function.
      * @todo 1. Write code for form validation.
      * @todo 2. Fetch the auth token from backend and login the user.
      * @todo 3. Set the token in the context (See context/auth.js)
      */
-  }
+
+    const inputData = {
+      username: loginData.usernameInput,
+      password: loginData.passwordInput,
+    };
+
+    if (inputData.username == "" || inputData.password == "") {
+      displayWarningToast("Please fill all required fields!");
+      return;
+    }
+
+    axios({
+      url: API_URL + "auth/login/",
+      method: "POST",
+      data: inputData,
+    })
+      .then((res) => {
+        displaySuccessToast("User logged in successfully");
+        const token = res.data.token;
+        setToken(token);
+        router.push("LOGIN", "/");
+      })
+      .catch(function (err) {
+        displayErrorToast("Invalid credentials! Please try again.");
+        setLoginData({
+          usernameInput: "",
+          passwordInput: "",
+        });
+      });
+  };
 
   return (
-    <div className='bg-grey-lighter min-h-screen flex flex-col'>
-      <div className='container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2'>
-        <div className='bg-white px-6 py-8 rounded shadow-md text-black w-full'>
-          <h1 className='mb-8 text-3xl text-center'>Login</h1>
-          <input
-            type='text'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputUsername'
-            id='inputUsername'
-            placeholder='Username'
-          />
-
-          <input
-            type='password'
-            className='block border border-grey-light w-full p-3 rounded mb-4'
-            name='inputPassword'
-            id='inputPassword'
-            placeholder='Password'
-          />
-
-          <button
-            type='submit'
-            className='w-full text-center py-3 rounded bg-transparent text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1'
-            onClick={login}
-          >
-            Login
-          </button>
+    <>
+      <div className="bg-grey-lighter min-h-screen flex flex-col">
+        <div className="container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2">
+          <div className="dark:bg-gray-500 dark:text-white bg-white px-6 py-8 rounded shadow-md text-black w-full">
+            <h1 className="mb-8 text-3xl text-center">Login</h1>
+            <input
+              onChange={handleChange}
+              type="text"
+              className="block dark:bg-gray-400 dark:placeholder-gray-50 dark:text-gray-50 bg-gray-100 w-full p-3 rounded mb-4"
+              name="usernameInput"
+              id="usernameInput"
+              placeholder="Username"
+              value={loginData.usernameInput}
+            />
+
+            <input
+              onChange={handleChange}
+              type="password"
+              className="block dark:bg-gray-400 dark:placeholder-gray-50 dark:text-gray-50 bg-gray-100 w-full p-3 rounded mb-4"
+              name="passwordInput"
+              id="passwordInput"
+              placeholder="Password"
+              value={loginData.passwordInput}
+            />
+
+            <button
+              type="submit"
+              className="w-full text-center py-3 rounded bg-transparent dark:border-transparent dark:bg-green-800 dark:text-white text-green-500 hover:text-white hover:bg-green-500 border border-green-500 hover:border-transparent focus:outline-none my-1"
+              onClick={login}
+            >
+              Login
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-  )
+      <ToastContainer
+        position="bottom-right"
+        theme="light"
+        autoClose={3000}
+        pauseOnHover={false}
+        newestOnTop={false}
+        closeOnClick
+      />
+    </>
+  );
 }