user delete. close #145

Former-commit-id: 128f765c8dc891970a7bb5653517ba3eb68a57af [formerly 905e633ce7e274f8b15f49d0ab8b86096d056263] [formerly ccba0fe58f91915320c67d4ef4da081617bcad80 [formerly 15247bd85383f8852b24f947b078e92455b6aa5c]]
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()