<template>
    <div>
<!--        <router-link to="/dash">Back</router-link>-->
        <form>
            <label for="todo">Todo:</label>
            <br>
            <input id="todo" type="text" v-model="form.text">
            <br>
            <button @click="onClick">Submit</button>
        </form>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import axios from 'axios';

    export default Vue.extend({
        name: "Add",
        data() {
            return {
                form: {
                    text: '',
                }
            }
        },
        methods: {
            onClick: async function (event: Event) {
                event.preventDefault();
                const response = await axios.post('http://localhost:8000/api/v1/todos/', {
                    text: this.form.text,
                    done: false
                }, {
                    headers: {
                        "Authorization": "Bearer " + this.$store.state.token
                    }
                });
                if (response.status !== 201) {
                    console.log(response);
                } else {
                    await this.$router.push("/dash");
                }
            }
        }
    })
</script>

<style scoped>

</style>