Routes and views for Create and Update item

resources/js/app.js

@@ -6,7 +6,9 @@ Vue.use(VueRouter)
 import App          from './views/App'
 import Login        from './views/Login'
 import Register     from './views/Register'
-import Accounts         from './views/Accounts'
+import Accounts     from './views/Accounts'
+import Create       from './views/Create'
+import Edit         from './views/Edit'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
@@ -34,6 +36,16 @@ const router = new VueRouter({
             name: 'register',
             component: Register,
         },
+        {
+            path: '/create',
+            name: 'create',
+            component: Create,
+        },
+        {
+            path: '/edit/:twofaccountId',
+            name: 'edit',
+            component: Edit,
+        },
     ],
 });
 

resources/js/views/App.vue

@@ -2,15 +2,15 @@
     <div>
         <nav class="navbar is-black level is-mobile has-text-grey-lighter">
             <div class="level-left">
-                <router-link :to="{ name: 'home' }" class="is-size-4 has-text-weight-light" v-if="isLoggedIn">2FAccount</router-link>
+                <router-link :to="{ name: 'accounts' }" class="is-size-4 has-text-weight-light" v-if="isLoggedIn">2FAccount</router-link>
             </div>
             <div class="level-right">
                 <p class="level-item">
-                    <a class="button is-black">
+                    <router-link :to="{ name: 'create' }" class="button is-black">
                         <span class="icon has-text-grey-light">
                             <font-awesome-icon :icon="['fas', 'plus-circle']" />
                         </span>
-                    </a>
+                    </router-link>
                 </p>
                 <p class="level-item" v-if="!isLoggedIn">
                     <router-link :to="{ name: 'login' }" class="button is-black">

resources/js/views/Create.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card card-default">
+                    <div class="card-header">Register</div>
+                    <div class="card-body">
+                        <form @submit.prevent="createAccount">
+                            <div class="field">
+                                <label class="label">Name</label>
+                                <div class="control">
+                                    <input class="input" type="text" placeholder="Text input" v-model="twofaccount.name" required autofocus>
+                                </div>
+                            </div>
+                            <div class="field">
+                                <label class="label">Email</label>
+                                <div class="control">
+                                    <input class="input" type="email" placeholder="Text input" v-model="twofaccount.email" required>
+                                </div>
+                            </div>
+                            <div class="field">
+                                <label class="label">Uri</label>
+                                <div class="control">
+                                    <input class="input" type="text" placeholder="Text input" v-model="twofaccount.uri" required>
+                                </div>
+                            </div>
+
+                            <div class="field is-grouped">
+                                <div class="control">
+                                    <button class="button is-link">Submit</button>
+                                </div>
+                                <div class="control">
+                                    <router-link :to="{ name: 'accounts' }" class="button is-text">Cancel</router-link>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                twofaccount: {}
+            }
+        },
+
+        methods: {
+
+            createAccount: function() {
+                let token = localStorage.getItem('jwt')
+
+                axios.defaults.headers.common['Content-Type'] = 'application/json'
+                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+                axios.post('/api/twofaccounts', this.twofaccount).then(response => {
+                    this.$router.push({name: 'accounts'});
+                })
+            }
+        },
+
+    }
+</script>

resources/js/views/Edit.vue

@@ -0,0 +1,64 @@
+<template>
+    <form @submit.prevent="updateAccount">
+        <div class="field">
+            <label class="label">Name</label>
+            <div class="control">
+                <input class="input" type="text" placeholder="Text input" v-model="twofaccount.name" required autofocus />
+            </div>
+        </div>
+        <div class="field">
+            <label class="label">Email</label>
+            <div class="control">
+                <input class="input" type="email" placeholder="Text input" v-model="twofaccount.email" required />
+            </div>
+        </div>
+
+        <div class="field is-grouped">
+            <div class="control">
+                <button class="button is-link">Submit</button>
+            </div>
+            <div class="control">
+                <router-link :to="{ name: 'accounts' }" class="button is-text">Cancel</router-link>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                twofaccount: {}
+            }
+        },
+
+        created: function(){
+            this.getAccount();
+        },
+
+        methods: {
+            getAccount: function () {
+                let token = localStorage.getItem('jwt')
+
+                axios.defaults.headers.common['Content-Type'] = 'application/json'
+                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+                axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId).then(response => {
+                    this.twofaccount = response.data
+                })
+            },
+
+            updateAccount: function() {
+                let token = localStorage.getItem('jwt')
+
+                axios.defaults.headers.common['Content-Type'] = 'application/json'
+                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+                axios.put('/api/twofaccounts/' + this.$route.params.twofaccountId, this.twofaccount).then(response => {
+                    this.$router.push({name: 'accounts'});
+                })
+            },
+        },
+
+    }
+</script>

routes/web.php

@@ -15,5 +15,5 @@
 //     return view('welcome');
 // });
 
-Route::get('twofaccount/{TwoFAccount}', 'TwoFAccountController@show');
+// Route::get('twofaccount/{TwoFAccount}', 'TwoFAccountController@show');
 Route::get('/{any}', 'SinglePageController@index')->where('any', '.*');