Restructured Todos page and split todo lists

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.vscode/*
+config/.env
+.vscode

controllers/todos.js

@@ -5,39 +5,65 @@ module.exports = {
         console.log(req.user)
         try{
             const todoItems = await Todo.find({userId:req.user.id})
-            const itemsLeft = await Todo.countDocuments({userId:req.user.id,completed: false})
-            res.render('todos.ejs', {todos: todoItems, left: itemsLeft, user: req.user})
+            const countBacklog = await Todo.countDocuments({userId:req.user.id,backlog: true})
+            const countTodo = await Todo.countDocuments({userId:req.user.id,toDo: true})
+            const countDoing = await Todo.countDocuments({userId:req.user.id,doing: true})
+            const countCompleted = await Todo.countDocuments({userId:req.user.id,completed: true})
+            res.render('todos.ejs', {todos: todoItems, leftBacklog: countBacklog, leftTodo: countTodo, leftDoing: countDoing, leftCompleted: countCompleted, user: req.user})
         }catch(err){
             console.log(err)
         }
     },
     createTodo: async (req, res)=>{
         try{
-            await Todo.create({todo: req.body.todoItem, completed: false, userId: req.user.id})
+            await Todo.create({todoName: req.body.todoItem, backlog: true, toDo: false, doing: false, completed: false, userId: req.user.id})
             console.log('Todo has been added!')
             res.redirect('/todos')
         }catch(err){
             console.log(err)
         }
     },
-    markComplete: async (req, res)=>{
+    changeStatus: async (req, res)=>{
         try{
-            await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
-                completed: true
-            })
-            console.log('Marked Complete')
-            res.json('Marked Complete')
+            const taskStatus = await Todo.find({_id:req.body.todoIdFromJSFile})
+            if (taskStatus[0].backlog) {
+                await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
+                    backlog: false,
+                    toDo: true
+            })}
+            else if (taskStatus[0].toDo) {
+                await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
+                    toDo: false,
+                    doing: true
+            })}
+            else if (taskStatus[0].doing) {
+                await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
+                    doing: false,
+                    completed: true
+            })}
+            else if (taskStatus[0].completed) {
+                await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
+                    completed: false,
+                    toDo: true
+            })}
+            console.log(taskStatus)
+            console.log('Changed Status')
+            res.json('Changed Status')
         }catch(err){
             console.log(err)
         }
     },
-    markIncomplete: async (req, res)=>{
+    markComplete: async (req, res)=>{
         try{
             await Todo.findOneAndUpdate({_id:req.body.todoIdFromJSFile},{
-                completed: false
+                backlog: false,
+                toDo: false,
+                doing: false,
+                completed: true
             })
-            console.log('Marked Incomplete')
-            res.json('Marked Incomplete')
+            console.log('Marked Complete')
+            console.log({_id:req.body.todoIdFromJSFile})
+            res.json('Marked Complete')
         }catch(err){
             console.log(err)
         }

models/Todo.js

@@ -1,10 +1,22 @@
 const mongoose = require('mongoose')
 
 const TodoSchema = new mongoose.Schema({
-  todo: {
+  todoName: {
     type: String,
     required: true,
   },
+  backlog: {
+    type: Boolean,
+    required: true,
+  },
+  toDo: {
+    type: Boolean,
+    required: true,
+  },
+  doing: {
+    type: Boolean,
+    required: true,
+  },
   completed: {
     type: Boolean,
     required: true,

public/css/auth.css

@@ -0,0 +1,158 @@
+*,
+*:before,
+*:after{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+body{
+    background-color: #ffffff;
+}
+.background{
+    width: 430px;
+    height: 520px;
+    position: absolute;
+    transform: translate(-50%,-50%);
+    left: 50%;
+    top: 50%;
+}
+.background .shape{
+    height: 200px;
+    width: 200px;
+    position: absolute;
+    border-radius: 50%;
+}
+.shape:first-child{
+    background: linear-gradient(
+        #1641a6,
+        #1845ad,
+        #23a2f6
+    );
+    left: -80px;
+    top: -80px;
+}
+.shape:last-child{
+    background: linear-gradient(
+        to right,
+        #ff512f,
+        #f09819
+    );
+    right: -30px;
+    bottom: -75px;
+}
+
+.alert {
+    margin-top: 5px;
+    font-size: 12px;
+    letter-spacing: 0;
+    line-height:1.3;
+}
+
+.fa-check-double {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 380px;
+    width: 350px;
+    background-color: rgba(21, 102, 25, 0.75);
+    position: absolute;
+    transform: translate(-50%,-50%);
+    top: 50%;
+    left: 50%;
+    border-radius: 10px;
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255,255,255,0.1);
+    box-shadow: 0 0 40px rgba(8,7,16,0.6);
+    padding: 20px 35px;
+}
+form *{
+    font-family: 'Poppins',sans-serif;
+    color: #ffffff;
+    letter-spacing: 0.5px;
+    outline: none;
+    border: none;
+}
+form h3{
+    margin-top: 0;
+    font-size: 24px;
+    font-weight: 500;
+    text-align: center;
+}
+
+label{
+    display: block;
+    margin-top: 30px;
+    font-size: 16px;
+    font-weight: 500;
+}
+input{
+    display: block;
+    height: 50px;
+    width: 100%;
+    background-color: rgba(255,255,255,0.07);
+    border-radius: 3px;
+    padding: 0 10px;
+    margin-top: 8px;
+    font-size: 14px;
+    font-weight: 300;
+}
+::placeholder{
+    color: #e5e5e5;
+}
+.primary {
+    display: block;
+    text-decoration: none;
+    text-align: center;
+    margin-top: 15px;
+    width: 100%;
+    background-color: #ffffff;
+    color: #080710;
+    padding: 10px 0;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 5px;
+    cursor: pointer;
+}
+.secondary {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    margin-top: 15px;
+    width: 100%;
+    background-color: #ffffff30;
+    border: solid 3px rgba(255, 255, 255, 0.624);
+    color: #ffffff;
+    padding: 8px 0;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.social{
+    margin-top: 30px;
+    display: flex;
+}
+.social div{
+    background: red;
+    width: 150px;
+    border-radius: 3px;
+    padding: 5px 10px 10px 5px;
+    background-color: rgba(255,255,255,0.27);
+    color: #eaf0fb;
+    text-align: center;
+}
+.social div:hover{
+    background-color: rgba(255,255,255,0.47);
+}
+.social .fb{
+    margin-left: 25px;
+}
+.social i{
+    margin-right: 4px;
+}