Implements circle spinner for Saving and Creating credentials.

public/js/app.js

@@ -2317,6 +2317,9 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/Modal.vue */ "./resources/js/components/Modal.vue");
 /* harmony import */ var _components_AutocompleteCustomDropdown_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../components/AutocompleteCustomDropdown.vue */ "./resources/js/components/AutocompleteCustomDropdown.vue");
+/* harmony import */ var _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../components/CircleSpinner.vue */ "./resources/js/components/CircleSpinner.vue");
+//
+//
 //
 //
 //
@@ -2343,12 +2346,15 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
   components: {
     AutocompleteCustomDropdown: _components_AutocompleteCustomDropdown_vue__WEBPACK_IMPORTED_MODULE_1__["default"],
-    Modal: _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
+    Modal: _components_Modal_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
+    CircleSpinner: _components_CircleSpinner_vue__WEBPACK_IMPORTED_MODULE_2__["default"]
   },
   props: {
     populateWith: {
@@ -2387,7 +2393,8 @@ __webpack_require__.r(__webpack_exports__);
       data: JSON.parse(JSON.stringify(this.populateWith)),
       creddesc: {},
       id: this.modalId,
-      errors: []
+      errors: [],
+      credentialSaving: false
     };
   },
   mounted: function mounted() {
@@ -2413,6 +2420,8 @@ __webpack_require__.r(__webpack_exports__);
     updateCredential: function updateCredential() {
       var _this = this;
 
+      this.credentialSaving = true;
+
       if (this.creddesc.id === "custom") {
         this.data.credtype = 1;
         this.data.creddesc = this.creddesc.name;
@@ -2431,12 +2440,18 @@ __webpack_require__.r(__webpack_exports__);
         }
 
         axios.post('/api/credentials/', this.data).then(function (response) {
+          _this.credentialSaving = false;
           $('#' + _this.id).modal('hide');
+        })["catch"](function (error) {
+          _this.credentialSaving = false;
+          console.error(error);
         });
       } else {
         axios.put('/api/credentials/' + this.data.credid, this.data).then(function (response) {
+          _this.credentialSaving = false;
           $('#' + _this.id).modal('hide');
         })["catch"](function (error) {
+          _this.credentialSaving = false;
           console.error(error);
         });
       }
@@ -51265,7 +51280,12 @@ var render = function() {
               }
             }
           },
-          [_vm._v("Save")]
+          [
+            !_vm.credentialSaving
+              ? _c("div", [_vm._v("Save")])
+              : _c("circle-spinner", { attrs: { size: 2 } })
+          ],
+          1
         )
       ])
     ]

resources/js/components/CredentialFormModal.vue

@@ -20,17 +20,22 @@
         </div>
         <div slot="footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-            <button type="button" class="btn btn-primary" @click="updateCredential()">Save</button>
+            <button type="button" class="btn btn-primary" @click="updateCredential()">
+                <div v-if="!credentialSaving">Save</div>
+                <circle-spinner v-else :size="2"></circle-spinner>
+            </button>
         </div>
     </modal>
 </template>
 <script>
 import Modal from '../components/Modal.vue'
 import AutocompleteCustomDropdown from '../components/AutocompleteCustomDropdown.vue'
+import CircleSpinner from '../components/CircleSpinner.vue'
 export default {
     components: {
         AutocompleteCustomDropdown,
         Modal,
+        CircleSpinner,
     },
     props: {
         populateWith: {
@@ -69,7 +74,8 @@ export default {
             data: JSON.parse(JSON.stringify(this.populateWith)),
             creddesc: {},
             id: this.modalId,
-            errors: []
+            errors: [],
+            credentialSaving: false,
         }
     },
     mounted () {
@@ -92,6 +98,7 @@ export default {
             this.data.credpass = this.rndStr(16);
         },
         updateCredential() {
+            this.credentialSaving = true
             if (this.creddesc.id === "custom") {
                 this.data.credtype = 1
                 this.data.creddesc = this.creddesc.name
@@ -110,13 +117,21 @@ export default {
                 }
                 axios.post('/api/credentials/', this.data)
                     .then(response => {
+                        this.credentialSaving = false
                         $('#'+this.id).modal('hide');
+                    }).catch(error => {
+                        this.credentialSaving = false
+                        console.error(error)
                     })
             } else {
                 axios.put('/api/credentials/' + this.data.credid, this.data)
                     .then(response => {
+                        this.credentialSaving = false
                         $('#'+this.id).modal('hide');
-                    }).catch(error =>{console.error(error)});
+                    }).catch(error => { 
+                        this.credentialSaving = false
+                        console.error(error)
+                    });
             }
         }
     }