asimryu

app.vue

May 12th, 2021
937
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div>
  3.         <div class="heading">
  4.             <h2 id="title">Todo List</h2>
  5.             <add-item-form v-on:reloadlist="getList()" v-bind:class="[ isLogin ? 'show' : 'hide' ]" />
  6.         </div>
  7.         <list-view  
  8.             class="row"
  9.             :items="items"
  10.             v-on:reloadlist="getList()"
  11.             />
  12.         <div id="loginform" v-bind:class="[ isLogin ? 'hide' : 'show' ]">
  13.             <form v-on:submit.prevent="loginUser">
  14.                 <p class="h4 text-center mb-4">Sign in</p>
  15.                 <div class="grey-text">
  16.                     <input placeholder="email" id="email" type="email" ref="email"/>
  17.                     <input placeholder="password" id="password" type="password" ref="password"/>
  18.                 </div>
  19.                 <div class="text-center">
  20.                     <button>Login</button>
  21.                 </div>
  22.             </form>
  23.         </div>         
  24.     </div>
  25.  
  26. </template>
  27. <script>
  28. import addItemForm from "./addItemForm"
  29. import listView from "./listView"
  30. export default {
  31.     components: {
  32.         addItemForm,
  33.         listView
  34.     },
  35.     data: function () {
  36.         return {
  37.             items: [],
  38.             isLogin: false,
  39.             token: ''
  40.         }
  41.     },
  42.     methods: {
  43.         getList () {
  44.             let headers = {
  45.                     'headers': {
  46.                         'Content-Type': 'application/json;charset=utf-8',
  47.                         'Accept': 'application/json',
  48.                         'Authorization': 'Bearer ' + localStorage.token                    
  49.                     }
  50.                 };
  51.             axios.get('/api/items', headers)
  52.             .then(response => {
  53.                 this.items = response.data
  54.             })
  55.             .catch( error => {
  56.                 console.log( error )
  57.             })
  58.         },
  59.         loginUser() {
  60.             let headers = {
  61.                 'headers': {
  62.                     'Content-Type': 'application/json;charset=utf-8',
  63.                     'Accept': 'application/json'
  64.                 }
  65.             };
  66.             var email = this.$refs.email.value;
  67.             var password = this.$refs.password.value;
  68.             axios.post('/api/login', {
  69.                 email: email,
  70.                 password: password
  71.             }, headers)
  72.             .then(response => {
  73.                 let user = response.data;
  74.                 let access_token = user.access_token;
  75.                 localStorage.token = access_token;
  76.                 console.log(localStorage.token);
  77.                 this.isLogin = true;
  78.                 this.getList();
  79.             })
  80.             .catch ((err) => {
  81.                 console.log (err)
  82.             })
  83.         }
  84.     },
  85.     created() {
  86.         if (localStorage.token) {
  87.             this.isLogin = true;
  88.             this.token = localStorage.access_token;
  89.             this.getList();
  90.         } else {
  91.             this.isLogin = false;
  92.             this.token = '';
  93.         }
  94.     }  
  95. }
  96. </script>
  97. <style scoped>
  98.     .heading {
  99.         background: #e6e6e6;
  100.         padding: 10px;
  101.     }
  102.     #title {
  103.         text-align: center;
  104.     }
  105.     .hide { display: none; }
  106.     .show { display: block; }
  107. </style>
  108.  
RAW Paste Data