Routes and views for Create and Update item

This commit is contained in:
Bubka 2019-12-21 23:23:44 +01:00
parent e58d7ac864
commit c6627bebfa
5 changed files with 148 additions and 5 deletions

14
resources/js/app.js vendored
View File

@ -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,
},
],
});

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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', '.*');