Majesty-12 | Completed All Tasks

components/AddTask.js

@@ -1,25 +1,107 @@
-export default function AddTask() {
-  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.
-     */
-  }
-  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>
-  )
+// importing... 
+
+import { useState } from "react";
+import axios from "axios";
+import { useAppContext } from "../context/AppContext";
+
+
+
+
+
+
+// exporting and defining the funciton for adding the task 
+export default function AddTask(props) {
+    const app = useAppContext();
+
+    // specifying the backend 
+    const API_BASE_URL = "https://todo-app-csoc.herokuapp.com/";
+    const [value, setValue] = useState("");
+    // here initialising the empty string to state 'value'
+
+
+    const addTask = () => {
+        const todoText = value.trim();
+        // for trimming the text 
+
+        if (!todoText) { // when the todo text is empty 
+            // izitoast for the better userinterface 
+            iziToast.destroy();
+            iziToast.error({
+                title: "Error",
+                message: "🙏Please Enter Text"
+            });
+            return;
+        }
+
+
+
+
+
+
+
+        // axios section 
+
+        axios({
+            headers: {
+                Authorization: "Token " + app.token
+            },
+            url: API_BASE_URL + "todo/create/",
+            method: "post",
+            data: { title: todoText }
+        })
+            .then(function (response) {
+                axios({
+                    headers: {
+                        Authorization: "Token " + app.token
+                    },
+                    url: API_BASE_URL + "todo/",
+                    method: "get"
+                }).then(function ({ data, status }) {
+                    const newTask = data[data.length - 1];
+                    props.addNewTask(newTask);
+                    iziToast.destroy();
+                    iziToast.success({
+                        title: "😀",
+                        message: "Successfully added new Todo"
+                    });
+                });
+            }) 
+            // promises part 
+            .catch(function (err) {
+                iziToast.destroy();
+                iziToast.error({
+                    title: "😫",
+                    message: "Error Occured"
+                });
+            });
+    };
+
+
+
+
+
+
+    // getting the output what we required 
+    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 Todo to Add"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+            />
+
+
+
+
+            {/* adding the button to add the task to your Todo list  */}
+            <button
+                type="button"
+                className="todo-add-task bg-green hover:bg-white-500 text-white-700 text-sm hover:text-green px-3 py-2 border border-green-500 hover:border-green rounded"
+                onClick={addTask}>
+                Add Task
+            </button>
+        </div>
+    );
 }

components/LoginForm.js

@@ -1,43 +1,133 @@
-export default function RegisterForm() {
-  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)
-     */
-  }
-
-  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>
+// importing the necessary components
+
+
+// version 1.0.6
+
+import React, { useState } from "react";
+import axios from "axios";
+import { useRouter } from "next/router";
+import { useAppContext } from "../context/AppContext";
+import Link from 'next/link'
+
+
+
+
+
+// section for Login 
+export default function LoginForm() {
+    const app = useAppContext();
+    const API_BASE_URL = "https://todo-app-csoc.herokuapp.com/";
+    const [password, setPassword] = useState("");
+    const [username, setUsername] = useState("");
+    const router = useRouter();
+
+
+    // login funtion 
+    const login = (e) => {
+        e.preventDefault();
+
+        if (username == "" || password == "") {
+            iziToast.destroy();
+            iziToast.error({
+                title: "Error",
+                message: "Please fill all the fields correctly."
+            });
+        } else {
+            iziToast.destroy();
+            iziToast.info({
+                title: "Info",
+                message: "Processing..."
+            });
+            const dataForApiRequest = {
+                username: username,
+                password: password
+            };
+
+
+
+            // axios definition 
+
+            axios({
+                url: API_BASE_URL + "auth/login/",
+                method: "post",
+                data: dataForApiRequest
+            })
+                .then(function ({ data, status }) {
+                    app.login(data.token);
+                    router.replace("/");
+                })
+                .catch(function (err) {
+                    iziToast.destroy();
+                    iziToast.error({
+                        title: "Error",
+                        message: "Either username or password is incorrect"
+                    });
+                });
+        }
+    };
+
+
+
+
+    // gettting the output what we required 
+
+    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="mt-0 mb-8 text-3xl text-center">
+                        <h1 className="mb-0 text-7xl text-center">👤</h1>
+                        <br />
+                        Member Login</h1>
+
+
+                {/* above divs for the decoration of the login form  */}
+                    {/* input field to get the username and password from the user  */}
+                    <input
+                        type="text"
+                        className="block border border-grey-light w-full p-3 rounded mb-4"
+                        name="inputUsername"
+                        id="inputUsername"
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                        placeholder="Enter your Username"
+                    />
+
+                    <input
+                        type="password"
+                        className="block border border-grey-light w-full p-3 rounded mb-4"
+                        name="inputPassword"
+                        id="inputPassword"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        placeholder="Enter your Password"
+                    />
+
+
+
+                    {/* button to submit the fields entered by the user  */}
+
+                    <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}>
+                        Click Here to Login
+                    </button>
+
+
+                    <button className='w-full text-center py-3 rounded bg-transparent text-yellow-500 hover:text-white hover:bg-yellow-500 border border-yellow-500 hover:border-transparent focus:outline-none my-1'><u><Link href='/register' >New? Sign Up First</Link></u></button>
+
+
+                    {/* forgot username and password button  */}
+                    <a href= 'https://naveen-kumar-portfolio.herokuapp.com' ><button
+                        type="submit"
+                        className="w-full text-center py-3 rounded bg-transparent text-blue-500 hover:text-white hover:bg-blue-500 border border-blue-500 hover:border-transparent focus:outline-none my-1"
+                         >
+                        Forgot Something Contact Us !
+                    </button></a>
+
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  )
+    );
 }