Merge branch 'dev' of...

Merge branch 'dev' of https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt into feature/user-login

components/Navbar.vue

 <template>
   <div>
-    <b-navbar toggleable="lg" type="dark" variant="info" style="background-color: #6f2ca6 !important">
-      <SideBar />
-
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-
-      <b-collapse id="nav-collapse" is-nav>
-        <b-navbar-nav>
-          <b-nav-item href="/users">USER</b-nav-item>
-          <b-nav-item href="/categories">CATEGORY</b-nav-item>
-          <b-nav-item href="/products">PRODUCT</b-nav-item>
-          <b-nav-item href="/posts">POST</b-nav-item>
-        </b-navbar-nav>
-
-        <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
-          <b-nav-item-dropdown right>
-            <!-- Using 'button-content' slot -->
-            <template #button-content>
-              <em>{{ $auth.$storage.getUniversal("userName") }}</em>
-            </template>
-            <b-dropdown-item href="#">Profile</b-dropdown-item>
-            <b-dropdown-item href="#" @click="logout">Sign Out</b-dropdown-item>
-          </b-nav-item-dropdown>
-        </b-navbar-nav>
-      </b-collapse>
-    </b-navbar>
+    <v-toolbar
+      dark
+      prominent
+      src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
+    >
+      <v-app-bar-nav-icon />
+
+      <v-toolbar-title>
+        <v-btn href="/users">
+          <span>USER</span>
+          <v-icon dense>mdi-account</v-icon>
+        </v-btn>
+
+        <v-btn href="/categories">
+          <span>CATEGORY</span>
+          <v-icon dense>mdi-heart</v-icon>
+        </v-btn>
+
+        <v-btn href="/products">
+          <span>PRODUCT</span>
+          <v-icon dense> mdi-briefcase</v-icon>
+        </v-btn>
+
+        <v-btn href="/posts">
+          <span>POST</span>
+          <v-icon dense>mdi-newspaper</v-icon>
+        </v-btn>
+      </v-toolbar-title>
+
+      <v-spacer />
+
+      <v-toolbar-title>{{ $auth.$storage.getUniversal("userName") }}</v-toolbar-title>
+
+      <v-btn icon @click="logout">
+        <v-icon>mdi-export</v-icon>
+      </v-btn>
+    </v-toolbar>
   </div>
 </template>
 <script>
-import SideBar from '@/components/SideBar'
 
 export default {
-  components: {
-    SideBar
-  },
   methods: {
     logout () {
       fetch('http://127.0.0.1:8000/api/logout', {

pages/categories/index.vue

@@ -246,7 +246,11 @@ export default {
     },
     getCategories() {
       this.$axios
-        .get('/categories/')
+        .get("/categories/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.categories = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -257,34 +261,37 @@ export default {
       const image = Array.from(set)
       const self = this
       this.$axios
-        .post('/categories/', {
+      .post('/categories/',
+        {
           name: this.name,
           ordering: this.ordering,
           parent_id: this.parent_id,
           images: image,
-        }, {
+        }, 
+        {
           headers: {
-            'Content-Type': 'multipart/form-data',
-            'Authorization': this.$auth.$storage.getUniversal('token')
-          }
-        })
-        .then(response => {
-          this.$bvModal.hide('modal-create')
-          self.$toast.success('Category created successfully!', {
-            duration: 3000
-          })
-          this.editedItem = response.data.data
-          console.log(this.editedItem)
-          this.categories.push(this.editedItem)
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          },
+        }
+      )
+      .then(response => {
+        this.$bvModal.hide('modal-create')
+        self.$toast.success('Category created successfully!', {
+          duration: 3000
         })
-        .catch(errors => {
-          this.$bvModal.hide('modal-create')
-          console.log(errors.response.data.message)
-          this.message = errors.response.data.message
-          self.$toast.error('something went wrong while trying create!', {
-            duration: 3000
-          })
+        this.editedItem = response.data.data
+        console.log(this.editedItem)
+        this.categories.push(this.editedItem)
+      })
+      .catch(errors => {
+        this.$bvModal.hide('modal-create')
+        console.log(errors.response.data.message)
+        this.message = errors.response.data.message
+        self.$toast.error('something went wrong while trying create!',{
+          duration: 3000
         })
+      })
     },
     fileSelected(event) {
       console.log(event)
@@ -297,20 +304,26 @@ export default {
     deleteCategory(ID, index) {
       const self = this
       this.editedIndex = this.categories.indexOf(index)
-      if (confirm('Do you really want to delete?')) {
-        try {
-          this.$axios
-            .delete(`/categories/${ID}`)
-            .then(response => {
-              this.categories.splice(this.editedIndex, 1)
-              self.$toast.success('Category deleted successfully!', {
-                duration: 3000
-              })
-            })
-        } catch (error) {
-          console.log(error)
-        }
+      if(confirm("Do you really want to delete?")){
+      try{
+      this.$axios
+        .delete(`/categories/${ID}`,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          },
+        })
+        .then(response => {
+          this.categories.splice(this.editedIndex, 1)
+          self.$toast.success('Category deleted successfully!',{
+        duration: 3000
+      })
+      })
+      } catch(error){
+        console.log(error)
       }
+    }
     },
     getID(item) {
       console.log(this.categories.indexOf(item))
@@ -333,29 +346,31 @@ export default {
       console.log(this.eName)
       console.log(this.eOrdering)
       console.log(this?.eID)
-      try {
-        this.$axios
-          .post(`categories/update/${this?.eID}`, {
+      try{
+      this.$axios
+        .post(`categories/update/${this?.eID}`,
+          {
             name: this.eName,
             ordering: this.eOrdering,
             parent_id: this.eParentId,
-            images: image
-          }, {
+            images: image }, 
+          {
             headers: {
-              'Content-Type': 'multipart/form-data',
-              'Authorization': this.$auth.$storage.getUniversal('token')
+              "Content-Type": "multipart/form-data",
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
             }
-          })
-          .then(response => {
-            self.$toast.success('User updated successfully!', {
-              duration: 3000
-            })
-            console.log(response)
-            this.editedItem = response.data.data
-            this.$bvModal.hide('modal-edit')
-            Object.assign(this.categories[this.editedIndex], this.editedItem)
-          })
-      } catch (error) {
+          } 
+        )
+        .then(response => {
+        self.$toast.success('User updated successfully!',{
+        duration: 3000
+      })
+        console.log(response)
+        this.editedItem = response.data.data
+        this.$bvModal.hide('modal-edit')
+        Object.assign(this.categories[this.editedIndex], this.editedItem)
+      })
+      } catch(error){
         console.log(error)
       }
     }

pages/posts/index.vue

@@ -268,7 +268,11 @@ export default {
     },
     getCategories() {
       this.$axios
-        .get('/categories/')
+        .get("/categories/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.categories = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -276,7 +280,11 @@ export default {
     },
     getposts() {
       this.$axios
-        .get('/posts/')
+        .get("/posts/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.posts = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -296,8 +304,8 @@ export default {
           },
           {
             headers: {
-              'Content-Type': 'multipart/form-data',
-              Authorization: this.$auth.$storage.getUniversal('token'),
+              "Content-Type": "multipart/form-data",
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
             },
           }
         )
@@ -324,7 +332,11 @@ export default {
       this.editedIndex = this.posts.indexOf(index)
       if (confirm('Do you really want to delete?')) {
         this.$axios
-          .delete(`/posts/${ID}`)
+          .delete(`/posts/${ID}`,{
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+            }})
           .then((response) => {
             this.posts.splice(this.editedIndex, 1)
             self.$toast.success('Post deleted successfully!', {
@@ -345,8 +357,8 @@ export default {
         const resp = await this.$axios.get(`/posts/${ID}`, {
           method: 'GET',
           headers: {
-            'Content-Type': 'multipart/form-data',
-            Authorization: this.$auth.$storage.getUniversal('token'),
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
           },
         })
         console.log(resp.data)
@@ -386,8 +398,8 @@ export default {
           },
           {
             headers: {
-              'Content-Type': 'multipart/form-data',
-              Authorization: this.$auth.$storage.getUniversal('token'),
+              "Content-Type": "multipart/form-data",
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
             },
           }
         )

pages/products/index.vue

@@ -481,7 +481,11 @@ export default {
     },
     getCategories() {
       this.$axios
-        .get('/categories/')
+        .get("/categories/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.categories = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -489,7 +493,11 @@ export default {
     },
     getProducts() {
       this.$axios
-        .get('/products/')
+        .get("/products/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.products = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -510,7 +518,7 @@ export default {
       }, {
         headers: {
           'Content-Type': 'multipart/form-data',
-          'Authorization': this.$auth.$storage.getUniversal('token')
+          Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
         }
       })
       .then(response => {
@@ -537,7 +545,11 @@ export default {
       if(confirm('Do you really want to delete?')){
       try{
         this.$axios
-          .delete(`/products/${ID}`)
+          .delete(`/products/${ID}`,{
+            headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
           .then(response => {
             this.products.splice(this.editedIndex, 1)
             self.$toast.success('Category deleted successfully!',{
@@ -555,8 +567,8 @@ export default {
         const resp = await this.$axios.get(`/products/${ID}`, {
           method: 'GET',
           headers: {
-            'Content-Type': 'multipart/form-data',
-            Authorization: this.$auth.$storage.getUniversal('token'),
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
           },
         })
         this.sName = resp.data.data.name
@@ -594,11 +606,12 @@ export default {
             images: this.eImages,
             variants: this.eVariants,
           }, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          'Authorization': this.$auth.$storage.getUniversal('token')
+          headers: {
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }
         }
-      } )
+      )
         .then(response => {
         self.$toast.success('User updated successfully!',{
         duration: 3000

pages/register.vue

-<template>
+<!-- <template>
   <div style="background-color: #8fc2ff">
     <div class="container" style="
         display: flex;
@@ -57,7 +57,7 @@ export default {
           confirm_password: this.confirm_password,
         }),
       })
-      this.$router.push('/')
+      this.$router.push("/login")
     },
   },
 }
@@ -81,4 +81,4 @@ export default {
   justify-content: center;
   margin-left: 50px;
 }
-</style>
+</style> -->

pages/users/index.vue

 <template>
+  <v-app>
   <div>
+    <div />
     <div>
+      <v-breadcrumbs :items="items">
+        <template #divider>
+          <v-icon>mdi-chevron-right</v-icon>
+        </template>
+      </v-breadcrumbs>
     </div>
-    <b-breadcrumb>
-      <b-breadcrumb-item href="/home">
-        <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
-        Home
-      </b-breadcrumb-item>
-      <b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
-    </b-breadcrumb>
     <div style="float: right">
-      <b-button v-b-modal.modal-login class="text-white">New User</b-button>
-      <!-- modal create user -->
-      <b-modal id="modal-login" title="Create User" class="modal fade">
-        <Notification :message="error" v-if="error" />
-        <p class="my-4">
-        <form @submit.prevent="createUser">
-          <label>Name :</label>
-          <input type="text" class="form-control mb-2" placeholder="name" v-model="name" max="255" min="1" required />
-          <label>Email :</label>
-          <input type="email" class="form-control mb-2" placeholder="Email" v-model="email" required />
-          <label>Password :</label>
-          <input type="password" class="form-control mb-2" placeholder="password" v-model="password" required />
-        </form>
-        </p>
-        <template #modal-footer>
-          <button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-login')"
-            class="btn btn-danger btn-sm m-1">Close</button>
-          <button @click="createUser" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
-        </template>
-      </b-modal>
-      <!-- modal edit user -->
-      <b-modal id="modal-edit" title="Edit User" class="modal fade">
-        <p class="my-4">
-        <form @submit.prevent="">
-          <label>Name :</label>
-          <input type="text" class="form-control mb-2" placeholder="name" v-model="eName" max="255" min="1" required />
-          <label>Email :</label>
-          <input type="email" class="form-control mb-2" placeholder="Email" v-model="eEmail" required />
-          <label>Password :</label>
-          <input type="password" class="form-control mb-2" placeholder="password" v-model="ePassword" required />
-        </form>
-        </p>
-        <template #modal-footer>
-          <button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-edit')"
-            class="btn btn-danger btn-sm m-1">Close</button>
-          <button @click="updateUser(this?.eID)" v-b-modal.modal-close_visit
-            class="btn btn-success btn-sm m-1">Submit</button>
+      <v-dialog
+        v-model="dialog1"
+        persistent
+        max-width="600px"
+        @submit.prevent="createUser"
+      >
+        <template #activator="{ on, attrs }">
+          <v-btn
+            color="primary"
+            dark
+            v-bind="attrs"
+            v-on="on"
+          >
+            New USER
+          </v-btn>
         </template>
-      </b-modal>
+        <v-card>
+          <v-card-title>
+            <span class="text-h5">User Profile</span>
+          </v-card-title>
+          <v-card-text>
+            <v-container>
+              <v-row>
+                <v-col
+                  cols="12"
+                  sm="6"
+                  md="4"
+                >
+                  <v-text-field
+                    v-model="name"
+                    label="Legal name*"
+                    required
+                  />
+                </v-col>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="email"
+                    label="Email*"
+                    required
+                  />
+                </v-col>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="password"
+                    label="Password*"
+                    type="password"
+                    required
+                  />
+                </v-col>
+              </v-row>
+            </v-container>
+            <small>*indicates required field</small>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="dialog1 = false"
+            >
+              Close
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              type="submit"
+              @click="dialog1 = false; createUser();"
+            >
+              Save
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
     </div>
+    <!-- modal-create -->
+    <v-dialog
+      v-model="dialog2"
+      persistent
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">User Edit</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col
+                cols="12"
+                sm="6"
+                md="4"
+              >
+                <v-text-field
+                  v-model="eName"
+                  label="Legal name*"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="eEmail"
+                  label="Email*"
+                  required
+                />
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="ePassword"
+                  label="Password*"
+                  type="password"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-container>
+          <small>*indicates required field</small>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="dialog2 = false"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            type="submit"
+            @click="dialog2 = false; updateUser();"
+          >
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
-      <template v-slot:top>
+      <template #top>
         <v-toolbar flat>
           <v-toolbar-title>User Manage</v-toolbar-title>
-          <v-divider class="mx-4" inset vertical></v-divider>
-          <v-spacer></v-spacer>
-          <v-dialog v-model="dialog" max-width="500px">
-            <template v-slot:activator="{ on, attrs }">
-              <!-- modal create user -->
-            </template>
-            <v-card>
-              <v-card-title>
-                <span class="text-h5">{{ formTitle }}</span>
-              </v-card-title>
-              <v-card-text>
-                <v-container>
-                  <v-row>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.name" label="name"></v-text-field>
-                    </v-col>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.id" label="id"></v-text-field>
-                    </v-col>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.email" label="email"></v-text-field>
-                    </v-col>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.created_at" label="created_at"></v-text-field>
-                    </v-col>
-                    <v-col cols="12" sm="6" md="4">
-                      <v-text-field v-model="editedItem.updated_at" label="updated_at"></v-text-field>
-                    </v-col>
-                  </v-row>
-                </v-container>
-              </v-card-text>
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" text @click="close">
-                  Cancel
-                </v-btn>
-                <v-btn color="blue darken-1" text @click="save"> Save </v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
-          <v-dialog v-model="dialogDelete" max-width="500px">
-            <v-card>
-              <v-card-title class="text-h5">Are you sure you want to delete this item?</v-card-title>
-              <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
-                <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
-                <v-spacer></v-spacer>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
+          <v-divider class="mx-4" inset vertical />
+          <v-spacer />
         </v-toolbar>
       </template>
-      <template v-slot:item.actions="{ item }">
-        <v-icon small class="mr-2" @click="editUser(item)" :id="item.id"> mdi-pencil </v-icon>
-        <v-icon small @click="deleteUser(item.id, item)" :id="item.id"> mdi-delete </v-icon>
+      <template #item.actions="{ item }">
+        <v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
+          mdi-pencil
+        </v-icon>
+        <v-icon :id="item.id" small @click="deleteUser(item.id, item)">
+          mdi-delete
+        </v-icon>
       </template>
-      <template v-slot:no-data>
-        <v-btn color="primary" @click="initialize"> Reset </v-btn>
+      <template #no-data>
+        <v-btn color="primary" @click="initialize">
+          Reset
+        </v-btn>
       </template>
     </v-data-table>
   </div>
+</v-app>
 </template>
 <script>
 export default {
@@ -127,21 +182,35 @@ export default {
       name: '',
       password: '',
       error: '',
-      dialog: false,
+      dialog1: false,
+      dialog2: false,
       dialogDelete: false,
       headers: [
         {
           text: 'Name',
           align: 'start',
           sortable: false,
-          value: 'name',
+          value: 'name'
         },
         { text: 'id', value: 'id' },
         { text: 'email', value: 'email' },
         { text: 'status', value: 'id', sortable: false },
         { text: 'created_at', value: 'created_at' },
         { text: 'updated_at', value: 'updated_at' },
-        { text: 'Actions', value: 'actions', sortable: false },
+        { text: 'Actions', value: 'actions', sortable: false }
+      ],
+      items: [
+        {
+          icon: 'mdi-home',
+          text: 'Home',
+          disabled: false,
+          href: '/home'
+        },
+        {
+          text: 'User',
+          disabled: false,
+          href: '/users'
+        }
       ],
       users: [],
       eIndex: [],
@@ -156,7 +225,7 @@ export default {
         id: '',
         email: '',
         created_at: '',
-        updated_at: '',
+        updated_at: ''
       },
       defaultItem: {
         name: '',
@@ -164,61 +233,61 @@ export default {
         email: '',
         status: '',
         created_at: '',
-        updated_at: '',
-      },
+        updated_at: ''
+      }
     }
   },
   computed: {
-    formTitle() {
+    formTitle () {
       return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
-    },
+    }
   },
   watch: {
-    dialog(val) {
+    dialog (val) {
       val || this.close()
     },
-    dialogDelete(val) {
+    dialogDelete (val) {
       val || this.closeDelete()
-    },
+    }
   },
-  created() {
+  created () {
     this.initialize()
     this.getUsers()
   },
   methods: {
-    initialize() {
-      this.users = [],
-        this.editedItem = {}
+    initialize () {
+      this.users = []
+      this.editedItem = {}
     },
-    editItem(item) {
+    editItem (item) {
       this.editedIndex = this.users.indexOf(item)
       this.editedItem = Object.assign({}, item)
       this.dialog = true
     },
-    deleteItem(item) {
+    deleteItem (item) {
       this.editedIndex = this.users.indexOf(item)
       this.editedItem = Object.assign({}, item)
       this.dialogDelete = true
     },
-    deleteItemConfirm() {
+    deleteItemConfirm () {
       this.users.splice(this.editedIndex, 1)
       this.closeDelete()
     },
-    close() {
+    close () {
       this.dialog = false
       this.$nextTick(() => {
         this.editedItem = Object.assign({}, this.defaultItem)
         this.editedIndex = -1
       })
     },
-    closeDelete() {
+    closeDelete () {
       this.dialogDelete = false
       this.$nextTick(() => {
         this.editedItem = Object.assign({}, this.defaultItem)
         this.editedIndex = -1
       })
     },
-    save() {
+    save () {
       if (this.editedIndex > -1) {
         Object.assign(this.users[this.editedIndex], this.editedItem)
       } else {
@@ -226,28 +295,34 @@ export default {
       }
       this.close()
     },
-    getUsers() {
+    getUsers () {
       this.$axios
-        .get('/users/')
-        .then((response) => (this.users = response.data.data.data))
+        .get('/users/', {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+          }
+        })
+        .then(response => (this.users = response.data.data.data))
         .catch(function (error) {
           console.log(error)
         })
     },
-    createUser() {
+    createUser () {
       const self = this
       this.$axios
         .post('/users/', {
-          headers: {
-            'Content-Type': 'application/json'
-          },
           email: this.email,
           password: this.password,
-          name: this.name,
-        })
-        .then(response => {
-          // $bvModal.hide('modal-login')
-          this.$bvModal.hide('modal-login')
+          name: this.name
+        }, {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+          }
+        }
+        )
+        .then((response) => {
           self.$toast.success('User created successfully!', {
             duration: 3000
           })
@@ -256,7 +331,7 @@ export default {
           console.log(this.editedItem)
           this.users.push(this.editedItem)
         })
-        .catch(errors => {
+        .catch((errors) => {
           this.$bvModal.hide('modal-login')
           console.log(errors.response.data.message)
           this.message = errors.response.data.message
@@ -265,14 +340,14 @@ export default {
           })
         })
     },
-    deleteUser(userID, index) {
+    deleteUser (userID, index) {
       const self = this
       this.editedIndex = this.users.indexOf(index)
       if (confirm('Do you really want to delete?')) {
         try {
           this.$axios
             .delete(`/users/${userID}`)
-            .then(response => {
+            .then((response) => {
               console.log(response.data)
               this.users.splice(this.editedIndex, 1)
               self.$toast.success('User deleted successfully!', {
@@ -284,39 +359,47 @@ export default {
         }
       }
     },
-    editUser(user) {
-      this.$bvModal.show('modal-edit')
+    editUser (user) {
       this.eID = user.id
       this.eEmail = user.email
       this.eName = user.name
       this.editedIndex = this.users.indexOf(user)
       console.log(this?.eID)
     },
-    updateUser(userID) {
+    updateUser (userID) {
       const self = this
       console.log(this.eName)
       console.log(this.eEmail)
       console.log(this?.eID)
-      try {
-        this.$axios
-          .put(`/users/${this?.eID}`, {
+      this.$axios
+        .put(`/users/${this?.eID}`,
+          {
             email: this.eEmail,
             password: this.ePassword,
-            name: this.eName,
+            name: this.eName
+          },
+          {
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+            }
+          }
+        )
+        .then((response) => {
+          self.$toast.success('User updated successfully!', {
+            duration: 3000
           })
-          .then(response => {
-            self.$toast.success('User updated successfully!', {
-              duration: 3000
-            })
-            console.log(response)
-            this.editedItem = response.data.data
-            this.$bvModal.hide('modal-edit')
-            Object.assign(this.users[this.editedIndex], this.editedItem)
+          console.log(response)
+          this.editedItem = response.data.data
+          Object.assign(this.users[this.editedIndex], this.editedItem)
+        })
+        .catch((error) => {
+          console.log(error)
+          self.$toast.error('something went wrong while trying update!', {
+            duration: 3000
           })
-      } catch (error) {
-        console.log(error)
-      }
+        })
     }
-  },
+  }
 }
 </script>