Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div>
- <div class="heading">
- <h2 id="title">Todo List</h2>
- <add-item-form v-on:reloadlist="getList()" v-bind:class="[ isLogin ? 'show' : 'hide' ]" />
- </div>
- <list-view
- class="row"
- :items="items"
- v-on:reloadlist="getList()"
- />
- <div id="loginform" v-bind:class="[ isLogin ? 'hide' : 'show' ]">
- <form v-on:submit.prevent="loginUser">
- <p class="h4 text-center mb-4">Sign in</p>
- <div class="grey-text">
- <input placeholder="email" id="email" type="email" ref="email"/>
- <input placeholder="password" id="password" type="password" ref="password"/>
- </div>
- <div class="text-center">
- <button>Login</button>
- </div>
- </form>
- </div>
- </div>
- </template>
- <script>
- import addItemForm from "./addItemForm"
- import listView from "./listView"
- export default {
- components: {
- addItemForm,
- listView
- },
- data: function () {
- return {
- items: [],
- isLogin: false,
- token: ''
- }
- },
- methods: {
- getList () {
- let headers = {
- 'headers': {
- 'Content-Type': 'application/json;charset=utf-8',
- 'Accept': 'application/json',
- 'Authorization': 'Bearer ' + localStorage.token
- }
- };
- axios.get('/api/items', headers)
- .then(response => {
- this.items = response.data
- })
- .catch( error => {
- console.log( error )
- })
- },
- loginUser() {
- let headers = {
- 'headers': {
- 'Content-Type': 'application/json;charset=utf-8',
- 'Accept': 'application/json'
- }
- };
- var email = this.$refs.email.value;
- var password = this.$refs.password.value;
- axios.post('/api/login', {
- email: email,
- password: password
- }, headers)
- .then(response => {
- let user = response.data;
- let access_token = user.access_token;
- localStorage.token = access_token;
- console.log(localStorage.token);
- this.isLogin = true;
- this.getList();
- })
- .catch ((err) => {
- console.log (err)
- })
- }
- },
- created() {
- if (localStorage.token) {
- this.isLogin = true;
- this.token = localStorage.access_token;
- this.getList();
- } else {
- this.isLogin = false;
- this.token = '';
- }
- }
- }
- </script>
- <style scoped>
- .heading {
- background: #e6e6e6;
- padding: 10px;
- }
- #title {
- text-align: center;
- }
- .hide { display: none; }
- .show { display: block; }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement