fix modal, logout & start todo front

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="p-2">
+        <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+        <div v-if="modal" class="modal px-2">
+            <p class="m-1 text-center">Add a new to-do list ?</p>
+            <InputField name="name" label="Title" placeholder="Your Title" required @update:field="name = $event" :errors="errors" />
+            <div class="flex-center m-1 mt-2">
+                <button class="btn-secondary mr-2" @click="modal = ! modal">Cancel</button>
+                <button class="btn-primary" @click="create">Create</button>
+            </div>
+        </div>
+        <div class="flex-between flex-center mb-1">
+            <a href="#" class="btn" @click="$router.back()">< Back</a>
+
+            <a href="#" class="btn-primary" @click="modal = ! modal">Add New List</a>
+        </div>
+        <Loader v-if="loading" />
+    </div>
+</template>
+
+<script>
+    import Loader from "../../components/Loader";
+    import InputField from "../../components/InputField";
+
+    export default {
+        name: "ToDoListIndex",
+        components: {
+            Loader, InputField
+        },
+        data: function () {
+            return {
+                loading: true,
+                modal: false,
+                toDoLists: null,
+                name: '',
+                errors: null,
+            }
+        },
+        mounted() {
+            axios.get('/api/to-do-lists')
+                .then(response => {
+                    this.toDoLists = response.data.data
+                    this.loading = false
+                })
+                .catch(errorRes => {
+                    this.loading = false
+                    if (errorRes.response.status === 404) {
+                        this.$router.push('/')
+                    }
+                })
+        },
+        methods: {
+            create: function () {
+                axios.post('/api/to-do-lists', {name: this.name})
+                    .then(res => {
+                        console.log(res)
+                        this.modal = false
+                        this.name = ''
+                        // this.$router.push('/memos')
+                    })
+                    .catch(errorRes => {
+                        console.log('Internal Error, Unable to delete contact.' + errorRes)
+                    })
+            }
+        }
+    }
+</script>