Laravel 5.4 OAuth2 token and client components ported to Vue.js 2 and Bulma with Axios

ClientsRevised.vue

<style scoped>
    .action-link {
        cursor: pointer;
    }

    .m-b-none {
        margin-bottom: 0;
    }
</style>

<template>
    <div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span>
                        OAuth Clients
                    </span>

                    <a class="action-link" @click="showCreateClientForm">
                        Create New Client
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <!-- Current Clients -->
                <p class="m-b-none" v-if="clients.length === 0">
                    You have not created any OAuth clients.
                </p>

                <table class="table table-borderless m-b-none" v-if="clients.length > 0">
                    <thead>
                        <tr>
                            <th>Client ID</th>
                            <th>Name</th>
                            <th>Secret</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="client in clients">
                            <!-- ID -->
                            <td style="vertical-align: middle;">
                                {{ client.id }}
                            </td>

                            <!-- Name -->
                            <td style="vertical-align: middle;">
                                {{ client.name }}
                            </td>

                            <!-- Secret -->
                            <td style="vertical-align: middle;">
                                <code>{{ client.secret }}</code>
                            </td>

                            <!-- Edit Button -->
                            <td style="vertical-align: middle;">
                                <a class="action-link" @click="edit(client)">
                                    Edit
                                </a>
                            </td>

                            <!-- Delete Button -->
                            <td style="vertical-align: middle;">
                                <a class="action-link text-danger" @click="destroy(client)">
                                    Delete
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Create Client Modal -->
         <div class="modal" id="modal-create-client" tabindex="-1" role="dialog" :class="[clientModal ? 'is-active' : '']">
            <div class="modal-background"></div>
            <div class="modal-card">

                <div class="modal-card-head">
                    <h4 class="modal-card-title">
                        Create Client
                    </h4>
                    <a class="delete" @click.prevent="closeClientModal"></a>
                </div>

                <div class="modal-card-body">
                    <!-- Form Errors -->
                    <div class="notification is-danger" v-if="createForm.errors.length > 0">
                        <strong>Whoops! Something went wrong!</strong>
                        <br>
                        <ul>
                            <li v-for="error in createForm.errors">
                                {{ error }}
                            </li>
                        </ul>
                    </div>

                    <!-- Create Client Form -->
                    <p class="control">
                      <div class="field">
                        <label class="label">Name</label>
                        <p class="control">
                          <input class="input" type="text" @keyup.enter="store" v-model="createForm.name">
                        </p>
                        <p class="help">
                          Something your users will recognize and trust.
                        </p>
                      </div>
                    </p>
                    <p class="control">
                      <div class="field">
                        <label class="label">Redirect URL</label>
                        <p class="control">
                          <input class="input" type="text" @keyup.enter="store" v-model="createForm.redirect">
                        </p>
                        <p class="help">
                          Your application's authorization callback URL.
                        </p>
                      </div>
                    </p>

                </div>

                <!-- Modal Actions -->
                <div class="modal-card-foot">
                    <a class="button" @click.prevent="closeClientModal">Close</a>
                    <a class="button is-primary" @click="store">Create</a>
                </div>
            </div>
        </div>
            <!-- Edit Client Modal -->        
        <div  class ="modal" id="modal-edit-client" tabindex="1" role="dialog" :class="[editClientModal ? 'is-active' : 'modal']">
            <div class="modal-background"></div>
                <div class="modal-card">
                    <div class="modal-card-head">
                        <h4 class="modal-card-title">
                            Edit Client
                        </h4>
                        <button class="delete" aria-label="close" @click.prevent="closeEditClientModal"></button>
                    </div>
                    <div class="modal-card-body">
                        <!-- Form Errors -->
                        <div class="notification is-danger" v-if="editForm.errors.length > 0">
                            <strong>Whoops! Something went wrong!</strong>
                                <br>
                            <ul>
                                <li v-for="error in editForm.errors">
                                    {{ error }}
                                </li>
                            </ul>
                        </div>
                          <!-- Edit Client Form -->
                        <p class="control">
                            <div class="field">
                                 <label class="label">Name</label>
                                    <p class="control">
                                        <input class="input" type="text" @keyup.enter="update" v-model="editForm.name">
                                    </p>
                                <p class="help">
                                    Something your users will recognize and trust.
                                </p>
                            </div>
                        </p>
                        <p class="control">
                            <div class="field">
                                <label class="label">Redirect URL</label>
                                <p class="control">
                                    <input class="input" type="text" @keyup.enter="update" v-model="editForm.redirect">
                                </p>
                                <p class="help">
                                    Your application's authorization callback URL.
                                </p>
                            </div>
                        </p>

                    <footer class="modal-card-foot">
                        <button class="button" @click.prevent="closeEditClientModal">Close</button>
                        <button type="button" class="button is-success" @click="update">Save Changes</button>
                    </footer>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    let $ = window.$
    export default {
        /*
         * The component's data.
         */
        data() {
            return {
            editClientModal: false,
                clients: [],

                createForm: {
                    errors: [],
                    name: '',
                    redirect: ''
                },

                editForm: {
                    errors: [],
                    name: '',
                    redirect: ''
                },
                clientModal: false,
            };
        },

        /**
         * Prepare the component (Vue 1.x).
         */
        ready() {
            this.prepareComponent();
        },

        /**
         * Prepare the component (Vue 2.x).
         */
        mounted() {
            this.prepareComponent();
        },

        methods: {
            /**
             * Prepare the component.
             */
            prepareComponent() {
                this.getClients();
            },

            /**
             * Get all of the OAuth clients for the user.
             */
            getClients() {
                axios.get('/oauth/clients')
                        .then(response => {
                            this.clients = response.data;
                        });
            },

            /**
             * Show the form for creating new clients.
             */
            showCreateClientForm() {
                this.clientModal = true
            },
            showEditClientForm(){
                
                this.editClientModal = true
            },

            /**
             * Create a new OAuth client for the user.
             */
            store() {
                this.persistClient(
                    'post', '/oauth/clients',
                    this.createForm, '#modal-create-client'
                );
            },

            /**
             * Edit the given client.
             */
            edit(client) {
                this.showEditClientForm()
                this.editForm.id = client.id;
                this.editForm.name = client.name;
                this.editForm.redirect = client.redirect;

                //this.closeEditClientModal()
            },

            /**
             * Update the client being edited.
             */
            update() {
                this.persistClient(
                    'put', '/oauth/clients/' + this.editForm.id,
                    this.editForm, '#modal-edit-client'
                );
            },

            /**
             * Persist the client to storage using the given form.
             */
            persistClient(method, uri, form, modal) {
                form.errors = [];

                axios[method](uri, form)
                    .then(response => {
                        this.getClients();

                        form.name = '';
                        form.redirect = '';
                        form.errors = [];

                        this.closeClientModal()
                        this.closeEditClientModal()
                    })
                    .catch(response => {
                        if (typeof response.data === 'object') {
                            form.errors = _.flatten(_.toArray(response.data));
                        } else {
                            form.errors = ['Something went wrong. Please try again.'];
                        }
                    });
            },

            /**
             * Destroy the given client.
             */
            destroy(client) {
                axios.delete('/oauth/clients/' + client.id)
                        .then(response => {
                            this.getClients();
                        });
            },

            closeClientModal () {
              this.clientModal = false
            },

            closeEditClientModal () {
              this.editClientModal = false
            }
        }
    }
</script>