user delete. close #145

Former-commit-id: 128f765c8dc891970a7bb5653517ba3eb68a57af [formerly 905e633ce7e274f8b15f49d0ab8b86096d056263] [formerly ccba0fe58f91915320c67d4ef4da081617bcad80 [formerly 15247bd853]]
Former-commit-id: 86c4d9a03c559414fbd69b6df7aaf480ca35045e [formerly 36b97c29eac10d09bc6757ac0ae61f8c582dd49b]
Former-commit-id: 23e6efa923e1b67839069cde7490c7dc73e6b72f

assets/src/components/User.vue

@@ -49,11 +49,24 @@
 
     <textarea name="css"></textarea>
 
-    <p><input type="submit" value="Save"></p>
+    <div v-if="$store.state.show === 'deleteUser'" class="prompt">
+      <h3>Delete User</h3>
+      <p>Are you sure you want to delete this user?</p>
+      <div>
+        <button @click="deleteUser" autofocus>Delete</button>
+        <button @click="closeHovers" class="cancel">Cancel</button>
+      </div>
+    </div>
+
+    <p>
+      <input v-if="id !== 0" type="submit" @click.prevent="deletePrompt" class="cancel" value="Delete">
+      <input type="submit" value="Save">
+    </p>
   </form>
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 import api from '@/utils/api'
 
 export default {
@@ -96,6 +109,7 @@ export default {
     }
   },
   methods: {
+    ...mapMutations(['closeHovers']),
     fetchData () {
       let user = this.$route.params[0]
 
@@ -160,6 +174,19 @@ export default {
       this.css = ''
       this.commands = ''
     },
+    deletePrompt (event) {
+      this.$store.commit('showHover', 'deleteUser')
+    },
+    deleteUser (event) {
+      event.preventDefault()
+
+      api.deleteUser(this.id).then(location => {
+        this.$router.push({ path: '/users' })
+        this.$store.commit('showSuccess', 'User deleted!')
+      }).catch(e => {
+        this.$store.commit('showError', e)
+      })
+    },
     save (event) {
       event.preventDefault()
       let user = this.parseForm()

assets/src/css/dashboard.css

@@ -20,10 +20,6 @@
   width: 100%;
 }
 
-.dashboard table tr {
-
-}
-
 .dashboard table th {
   font-weight: 500;
   color: #757575;
@@ -35,10 +31,6 @@
   padding: .5em 0;
 }
 
-.dashboard table td {
-
-}
-
 .dashboard table td:last-child {
   width: 1em
 }
@@ -47,14 +39,12 @@
   margin-top: 0;
 }
 
-.dashboard > *:last-child {
-  margin-bottom: 0;
+form.dashboard > p:last-child {
+  text-align: right
 }
 
-form.dashboard input[type="submit"],
-.dashboard form input[type="submit"] {
-  margin-left: auto;
-  display: block;
+.dashboard > *:last-child {
+  margin-bottom: 0;
 }
 
 .dashboard textarea,
@@ -92,6 +82,14 @@ form.dashboard input[type="submit"],
   border-color: green;
 }
 
+.dashboard input[type="submit"].cancel {
+  background: #F44336;
+}
+
+.dashboard input[type="submit"].cancel:hover {
+  background: #D32F2F;
+}
+
 .dashboard textarea {
   line-height: 1.15;
   padding: .5em;

assets/src/utils/api.js

@@ -272,6 +272,27 @@ function updateUser (user) {
   })
 }
 
+function deleteUser (id) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('DELETE', `${store.state.baseURL}/api/users/${id}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve()
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
 function updatePassword (password) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
@@ -418,5 +439,6 @@ export default {
   updateCommands,
   removePrefix,
   getPlugins,
-  updatePlugins
+  updatePlugins,
+  deleteUser
 }

rice-box.go.REMOVED.git-id

@@ -1 +0,0 @@
-f88c71005fcf0934dd019fc0ae6c0484fb049c6c