app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap')

axios.defaults.baseURL = '/api/';

window.Vue = require('vue')
import App from './components/App'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

window.cookie = require('vue-cookie');
Vue.use(cookie);

import { routes } from './router'
import { store } from './store'

window.notie = require('notie')

import Datetime from 'vue-datetime'
Vue.use(Datetime)


export class Errors {
    /**
     * Create a new Errors instance.
     */
    constructor() {
        this.errors = {};
    }


    /**
     * Determine if an errors exists for the given field.
     *
     * @param {string} field
     */
    has(field) {
        return this.errors.hasOwnProperty(field);
    }


    /**
     * Determine if we have any errors.
     */
    any() {
        return Object.keys(this.errors).length > 0;
    }


    /**
     * Retrieve the error message for a field.
     *
     * @param {string} field
     */
    get(field) {
        if (this.errors[field]) {
            return this.errors[field][0];
        }
    }


    /**
     * Record the new errors.
     *
     * @param {object} errors
     */
    record(errors) {
        this.errors = errors;
    }


    /**
     * Clear one or all error fields.
     *
     * @param {string|null} field
     */
    clear(field) {
        if (field) {
            delete this.errors[field];

            return;
        }

        this.errors = {};
    }
}


export class Form {
    /**
     * Create a new Form instance.
     *
     * @param {object} data
     */
    constructor(data) {
        this.originalData = data;

        for (let field in data) {
            this[field] = data[field];
        }

        this.errors = new Errors();
    }


    /**
     * Fetch all relevant data for the form.
     */
    data() {
        let data = {};

        for (let property in this.originalData) {
            data[property] = this[property];
        }

        return data;
    }


    /**
     * Reset the form fields.
     */
    reset() {
        for (let field in this.originalData) {
            this[field] = '';
        }

        this.errors.clear();
    }


    /**
     * Send a POST request to the given URL.
     * .
     * @param {string} url
     */
    post(url) {
        return this.submit('post', url);
    }


    /**
     * Send a PUT request to the given URL.
     * .
     * @param {string} url
     */
    put(url) {
        return this.submit('put', url);
    }


    /**
     * Send a PATCH request to the given URL.
     * .
     * @param {string} url
     */
    patch(url) {
        return this.submit('patch', url);
    }


    /**
     * Send a DELETE request to the given URL.
     * .
     * @param {string} url
     */
    delete(url) {
        return this.submit('delete', url);
    }


    /**
     * Submit the form.
     *
     * @param {string} requestType
     * @param {string} url
     */
    submit(requestType, url) {
        return new Promise((resolve, reject) => {
            axios[requestType](url, this.data())
                .then(response => {
                    this.onSuccess(response.data);

                    resolve(response.data);
                })
                .catch(error => {
                    this.onFail(error.response.data);

                    reject(error.response.data);
                });
        });
    }


    /**
     * Handle a successful form submission.
     *
     * @param {object} data
     */
    onSuccess(data) {
        alert(data.message); // temporary

        this.reset();
    }


    /**
     * Handle a failed form submission.
     *
     * @param {object} errors
     */
    onFail(errors) {
        this.errors.record(errors);
    }
}



const router = new VueRouter({
    mode: 'history',
    routes: routes
})

router.beforeEach((to, from, next) => {
    if((to.path === '/login') || (to.path === '/signup')) {
        if(cookie.get('auth')) {
            window.axios.defaults.headers.common['Authorization'] = `Bearer ${cookie.get('auth')}`
            axios.post('/auth/me')
                .then(res => {
                    store.commit('login', {
                        access_token: cookie.get('auth'),
                        expires_in: 7200
                    })
                    next('/parent/profile')
                })
                .catch(err => {
                    store.commit('logout')
                    delete window.axios.defaults.headers.common['Authorization']
                    next()
                })
        } else {
            next()
        }
    }
    if(to.meta.requiresAuth) {
        if(!store.state.isLoggedIn) {
            if(cookie.get('auth')) {
                window.axios.defaults.headers.common['Authorization'] = `Bearer ${cookie.get('auth')}`
                axios.post('/auth/me')
                    .then(res => {
                        store.commit('login', {
                            access_token: cookie.get('auth'),
                            expires_in: 7200
                        })
                        next()
                    })
                    .catch(err => {
                        store.commit('logout')
                        delete window.axios.defaults.headers.common['Authorization']
                        next('/login')
                    })
            } else {
                next('/login')
            }
        } else {
            next()
        }
    }
    // Always remember to call next()
    next()
})

// axios.interceptors.response.use(function (response) {
//     // Do something with response data
//     return response;
// }, function (error) {
//     if(error.response.status === 401) {
//         cookie.delete('auth')
//     }
//     return Promise.reject(error);
// });

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    router,
    store,
    render: h => h (App)
}).$mount('#app');