Implements circle spinner for deleting credentials.

public/js/app.js

@@ -2218,6 +2218,10 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_CredentialFormModal_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/CredentialFormModal.vue */ "./resources/js/components/CredentialFormModal.vue");
 /* harmony import */ var _components_Modal_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/Modal.vue */ "./resources/js/components/Modal.vue");
+/* harmony import */ var _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/CircleSpinner.vue */ "./resources/js/components/CircleSpinner.vue");
+//
+//
+//
 //
 //
 //
@@ -2263,10 +2267,12 @@ __webpack_require__.r(__webpack_exports__);
 //
 
 
+
 /* harmony default export */ __webpack_exports__["default"] = ({
   components: {
     CredentialFormModal: _components_CredentialFormModal_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
-    Modal: _components_Modal_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
+    Modal: _components_Modal_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
+    CircleSpinner: _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
   },
   props: {
     credential: {
@@ -2281,7 +2287,8 @@ __webpack_require__.r(__webpack_exports__);
   data: function data() {
     return {
       data: this.credential,
-      creddescList: this.descriptions
+      creddescList: this.descriptions,
+      credentialDeleting: false
     };
   },
   mounted: function mounted() {
@@ -2295,9 +2302,12 @@ __webpack_require__.r(__webpack_exports__);
     deleteCredential: function deleteCredential() {
       var _this2 = this;
 
+      this.credentialDeleting = true;
       axios["delete"]('/api/credentials/' + this.data.credid, this.data).then(function (response) {
+        _this2.credentialDeleting = false;
         $('#credential' + _this2.data.credid + 'deleteModal').modal('hide');
       })["catch"](function (error) {
+        _this2.credentialDeleting = false;
         console.error(error);
       });
     }
@@ -50988,7 +50998,12 @@ var render = function() {
                   }
                 }
               },
-              [_vm._v("Confirm")]
+              [
+                !_vm.credentialDeleting
+                  ? _c("div", [_vm._v("Confirm")])
+                  : _c("circle-spinner", { attrs: { size: 2 } })
+              ],
+              1
             )
           ])
         ]

resources/js/components/Credential.vue

@@ -10,7 +10,10 @@
         </div>
         <div slot="footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-            <button type="button" class="btn btn-danger" @click=deleteCredential()>Confirm</button>
+            <button type="button" class="btn btn-danger" @click=deleteCredential()>
+                <div v-if="!credentialDeleting">Confirm</div>
+                <circle-spinner v-else :size="2"></circle-spinner>
+            </button>
         </div>
     </modal>
     <div class="row no-gutters">
@@ -44,10 +47,12 @@
 <script>
 import CredentialFormModal from '../components/CredentialFormModal.vue'
 import Modal from '../components/Modal.vue'
+import CircleSpinner from '../components/CircleSpinner.vue'
 export default {
     components: {
         CredentialFormModal,
         Modal,
+        CircleSpinner,
     },
     props: {
         credential: {
@@ -62,7 +67,8 @@ export default {
     data() {
         return {
             data: this.credential,
-            creddescList: this.descriptions
+            creddescList: this.descriptions,
+            credentialDeleting: false,
         }
     },
     mounted() {
@@ -73,10 +79,15 @@ export default {
     },
     methods: {
         deleteCredential() {
+            this.credentialDeleting = true
             axios.delete('/api/credentials/' + this.data.credid, this.data)
                 .then(response => {
+                    this.credentialDeleting = false
                     $('#credential'+this.data.credid+'deleteModal').modal('hide');
-                }).catch(error => { console.error(error) })
+                }).catch(error => { 
+                    this.credentialDeleting = false
+                    console.error(error)
+                })
         }
     }
 }