Refactors credential edit form.

Factors the edit modal into a separate component.

public/js/app.js

@@ -2024,10 +2024,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/credential.vue?vue&type=script&lang=js&":
-/*!*********************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/credential.vue?vue&type=script&lang=js& ***!
-  \*********************************************************************************************************************************************************************/
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/credential-form-modal.vue?vue&type=script&lang=js&":
+/*!********************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/credential-form-modal.vue?vue&type=script&lang=js& ***!
+  \********************************************************************************************************************************************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -2056,6 +2056,52 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+/* harmony default export */ __webpack_exports__["default"] = ({
+  props: ['populateWith', 'modalId'],
+  data: function data() {
+    return {
+      data: JSON.parse(JSON.stringify(this.populateWith)),
+      id: this.modalId,
+      errors: []
+    };
+  },
+  methods: {
+    rndStr: function rndStr(len) {
+      var text = "";
+      var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%";
+
+      for (var i = 0; i < len; i++) {
+        text += chars.charAt(Math.floor(Math.random() * chars.length));
+      }
+
+      return text;
+    },
+    getRandomPassword: function getRandomPassword(id) {
+      this.data.credpass = this.rndStr(16);
+    },
+    updateCredential: function updateCredential() {
+      axios.put('/api/credentials/' + this.data.credid, this.data).then(function (response) {})["catch"](function (error) {
+        console.error(error);
+      });
+      $('#credential' + this.data.credid + 'editModal').modal('hide');
+    }
+  }
+});
+
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/credential.vue?vue&type=script&lang=js&":
+/*!*********************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/credential.vue?vue&type=script&lang=js& ***!
+  \*********************************************************************************************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+//
+//
+//
 //
 //
 //
@@ -2112,28 +2158,6 @@ __webpack_require__.r(__webpack_exports__);
         _this.data = eData;
       }
     });
-  },
-  methods: {
-    rndStr: function rndStr(len) {
-      var text = "";
-      var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%";
-
-      for (var i = 0; i < len; i++) {
-        text += chars.charAt(Math.floor(Math.random() * chars.length));
-      }
-
-      return text;
-    },
-    getRandomPassword: function getRandomPassword(id) {
-      this.$refs['newpassword' + id].value = this.rndStr(16);
-    },
-    updateCredential: function updateCredential() {
-      this.data.credpass = this.$refs['newpassword' + this.data.credid].value;
-      axios.put('/api/credentials/' + this.data.credid, this.data).then(function (response) {})["catch"](function (error) {
-        console.error(error);
-      });
-      $('#credential' + this.data.credid + 'editModal').modal('hide');
-    }
   }
 });
 
@@ -48916,10 +48940,10 @@ render._withStripped = true
 
 /***/ }),
 
-/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/credential.vue?vue&type=template&id=0f5cc562&":
-/*!*************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/credential.vue?vue&type=template&id=0f5cc562& ***!
-  \*************************************************************************************************************************************************************************************************************/
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/credential-form-modal.vue?vue&type=template&id=5ba19d42&":
+/*!************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/credential-form-modal.vue?vue&type=template&id=5ba19d42& ***!
+  \************************************************************************************************************************************************************************************************************************/
 /*! exports provided: render, staticRenderFns */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -48932,135 +48956,163 @@ var render = function() {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c(
-    "div",
-    { staticClass: "bg-lightgray m-1 p-2 border rounded container-fluid" },
+    "modal",
+    {
+      attrs: {
+        id: _vm.id,
+        tabindex: "-1",
+        role: "dialog",
+        "aria-labelledby": _vm.id + "Label"
+      }
+    },
     [
       _c(
-        "modal",
+        "h5",
         {
-          attrs: {
-            id: "credential" + this.data.credid + "editModal",
-            tabindex: "-1",
-            role: "dialog",
-            "aria-labelledby": "credential" + _vm.data.credid + "editModalLabel"
-          }
+          staticClass: "modal-title",
+          attrs: { slot: "header", id: _vm.id + "Label" },
+          slot: "header"
         },
-        [
-          _c(
-            "h5",
-            {
-              staticClass: "modal-title",
-              attrs: { slot: "header", id: "credentialeditModalLabel" },
-              slot: "header"
-            },
-            [_vm._v("\r\n            Edit Credential\r\n        ")]
-          ),
+        [_vm._v("\n        Edit Credential\n    ")]
+      ),
+      _vm._v(" "),
+      _c("div", { attrs: { slot: "body" }, slot: "body" }, [
+        _c("div", { staticClass: "form-group" }, [
+          _c("label", { attrs: { for: "newusername" } }, [_vm._v("Username")]),
           _vm._v(" "),
-          _c("div", { attrs: { slot: "body" }, slot: "body" }, [
-            _c("div", { staticClass: "form-group" }, [
-              _c("label", { attrs: { for: "newusername" } }, [
-                _vm._v("Username")
-              ]),
-              _vm._v(" "),
-              _c("input", {
-                directives: [
-                  {
-                    name: "model",
-                    rawName: "v-model.lazy",
-                    value: _vm.data.creduser,
-                    expression: "data.creduser",
-                    modifiers: { lazy: true }
-                  }
-                ],
-                staticClass: "form-control credential",
-                attrs: {
-                  type: "text",
-                  name: "newusername" + _vm.data.credid,
-                  id: "newusername" + _vm.data.credid
-                },
-                domProps: { value: _vm.data.creduser },
-                on: {
-                  change: function($event) {
-                    return _vm.$set(_vm.data, "creduser", $event.target.value)
-                  }
-                }
-              })
-            ]),
-            _vm._v(" "),
-            _c("div", { staticClass: "form-group" }, [
-              _c("label", { attrs: { for: "newpassword" } }, [
-                _vm._v("Password")
-              ]),
-              _vm._v(" "),
-              _c("input", {
-                directives: [
-                  {
-                    name: "model",
-                    rawName: "v-model.lazy",
-                    value: _vm.data.credpass,
-                    expression: "data.credpass",
-                    modifiers: { lazy: true }
-                  }
-                ],
-                ref: "newpassword" + _vm.data.credid,
-                staticClass: "form-control credential",
-                attrs: {
-                  type: "text",
-                  name: "newpassword" + _vm.data.credid,
-                  id: "newpassword" + _vm.data.credid
-                },
-                domProps: { value: _vm.data.credpass },
-                on: {
-                  change: function($event) {
-                    return _vm.$set(_vm.data, "credpass", $event.target.value)
-                  }
+          _c("input", {
+            directives: [
+              {
+                name: "model",
+                rawName: "v-model",
+                value: _vm.data.creduser,
+                expression: "data.creduser"
+              }
+            ],
+            staticClass: "form-control credential",
+            attrs: {
+              type: "text",
+              name: "newusername" + _vm.data.credid,
+              id: "newusername" + _vm.data.credid
+            },
+            domProps: { value: _vm.data.creduser },
+            on: {
+              input: function($event) {
+                if ($event.target.composing) {
+                  return
                 }
-              }),
-              _vm._v(" "),
-              _c(
-                "button",
-                {
-                  staticClass: "btn btn-secondary",
-                  attrs: { type: "button" },
-                  on: {
-                    click: function($event) {
-                      return _vm.getRandomPassword(_vm.data.credid)
-                    }
-                  }
-                },
-                [_vm._v("Generate Random")]
-              )
-            ]),
-            _vm._v(" "),
-            _c("div", { staticClass: "form-group" })
-          ]),
+                _vm.$set(_vm.data, "creduser", $event.target.value)
+              }
+            }
+          })
+        ]),
+        _vm._v(" "),
+        _c("div", { staticClass: "form-group" }, [
+          _c("label", { attrs: { for: "newpassword" } }, [_vm._v("Password")]),
           _vm._v(" "),
-          _c("div", { attrs: { slot: "footer" }, slot: "footer" }, [
-            _c(
-              "button",
+          _c("input", {
+            directives: [
               {
-                staticClass: "btn btn-secondary",
-                attrs: { type: "button", "data-dismiss": "modal" }
-              },
-              [_vm._v("Close")]
-            ),
-            _vm._v(" "),
-            _c(
-              "button",
-              {
-                staticClass: "btn btn-primary",
-                attrs: { type: "button" },
-                on: {
-                  click: function($event) {
-                    return _vm.updateCredential()
-                  }
+                name: "model",
+                rawName: "v-model",
+                value: _vm.data.credpass,
+                expression: "data.credpass"
+              }
+            ],
+            staticClass: "form-control credential",
+            attrs: {
+              type: "text",
+              name: "newpassword" + _vm.data.credid,
+              id: "newpassword" + _vm.data.credid
+            },
+            domProps: { value: _vm.data.credpass },
+            on: {
+              input: function($event) {
+                if ($event.target.composing) {
+                  return
                 }
-              },
-              [_vm._v("Save")]
-            )
-          ])
-        ]
-      ),
+                _vm.$set(_vm.data, "credpass", $event.target.value)
+              }
+            }
+          }),
+          _vm._v(" "),
+          _c(
+            "button",
+            {
+              staticClass: "btn btn-secondary",
+              attrs: { type: "button" },
+              on: {
+                click: function($event) {
+                  return _vm.getRandomPassword(_vm.data.credid)
+                }
+              }
+            },
+            [_vm._v("Generate Random")]
+          )
+        ]),
+        _vm._v(" "),
+        _c("div", { staticClass: "form-group" })
+      ]),
+      _vm._v(" "),
+      _c("div", { attrs: { slot: "footer" }, slot: "footer" }, [
+        _c(
+          "button",
+          {
+            staticClass: "btn btn-secondary",
+            attrs: { type: "button", "data-dismiss": "modal" }
+          },
+          [_vm._v("Close")]
+        ),
+        _vm._v(" "),
+        _c(
+          "button",
+          {
+            staticClass: "btn btn-primary",
+            attrs: { type: "button" },
+            on: {
+              click: function($event) {
+                return _vm.updateCredential()
+              }
+            }
+          },
+          [_vm._v("Save")]
+        )
+      ])
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/credential.vue?vue&type=template&id=0f5cc562&":
+/*!*************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/credential.vue?vue&type=template&id=0f5cc562& ***!
+  \*************************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    { staticClass: "bg-lightgray m-1 p-2 border rounded container-fluid" },
+    [
+      _c("credential-form-modal", {
+        attrs: {
+          "modal-id": "credential" + this.data.credid + "editModal",
+          populateWith: this.data
+        }
+      }),
       _vm._v(" "),
       _c("div", { staticClass: "row no-gutters" }, [
         _c("div", { staticClass: "h5 col-3 text-left" }, [
@@ -61999,6 +62051,7 @@ Vue.component('notes', __webpack_require__(/*! ./components/notes.vue */ "./reso
 Vue.component('modal', __webpack_require__(/*! ./components/modal.vue */ "./resources/js/components/modal.vue")["default"]);
 Vue.component('woinfo-edit-modal', __webpack_require__(/*! ./components/woinfo-edit-modal.vue */ "./resources/js/components/woinfo-edit-modal.vue")["default"]);
 Vue.component('errorlist', __webpack_require__(/*! ./components/errorlist.vue */ "./resources/js/components/errorlist.vue")["default"]);
+Vue.component('credential-form-modal', __webpack_require__(/*! ./components/credential-form-modal.vue */ "./resources/js/components/credential-form-modal.vue")["default"]);
 /**
  * Next, we will create a fresh Vue application instance and attach it to
  * the page. Then, you may begin adding components to this application
@@ -62208,6 +62261,75 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+/***/ }),
+
+/***/ "./resources/js/components/credential-form-modal.vue":
+/*!***********************************************************!*\
+  !*** ./resources/js/components/credential-form-modal.vue ***!
+  \***********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _credential_form_modal_vue_vue_type_template_id_5ba19d42___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./credential-form-modal.vue?vue&type=template&id=5ba19d42& */ "./resources/js/components/credential-form-modal.vue?vue&type=template&id=5ba19d42&");
+/* harmony import */ var _credential_form_modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./credential-form-modal.vue?vue&type=script&lang=js& */ "./resources/js/components/credential-form-modal.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport *//* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+
+var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _credential_form_modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _credential_form_modal_vue_vue_type_template_id_5ba19d42___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _credential_form_modal_vue_vue_type_template_id_5ba19d42___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/credential-form-modal.vue"
+/* harmony default export */ __webpack_exports__["default"] = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/credential-form-modal.vue?vue&type=script&lang=js&":
+/*!************************************************************************************!*\
+  !*** ./resources/js/components/credential-form-modal.vue?vue&type=script&lang=js& ***!
+  \************************************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_credential_form_modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib??ref--4-0!../../../node_modules/vue-loader/lib??vue-loader-options!./credential-form-modal.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/credential-form-modal.vue?vue&type=script&lang=js&");
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_credential_form_modal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/credential-form-modal.vue?vue&type=template&id=5ba19d42&":
+/*!******************************************************************************************!*\
+  !*** ./resources/js/components/credential-form-modal.vue?vue&type=template&id=5ba19d42& ***!
+  \******************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_credential_form_modal_vue_vue_type_template_id_5ba19d42___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib??vue-loader-options!./credential-form-modal.vue?vue&type=template&id=5ba19d42& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/credential-form-modal.vue?vue&type=template&id=5ba19d42&");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_credential_form_modal_vue_vue_type_template_id_5ba19d42___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_credential_form_modal_vue_vue_type_template_id_5ba19d42___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+
+
+
 /***/ }),
 
 /***/ "./resources/js/components/credential.vue":

resources/js/app.js

@@ -30,6 +30,7 @@ Vue.component('notes', require('./components/notes.vue').default);
 Vue.component('modal', require('./components/modal.vue').default);
 Vue.component('woinfo-edit-modal', require('./components/woinfo-edit-modal.vue').default);
 Vue.component('errorlist', require('./components/errorlist.vue').default);
+Vue.component('credential-form-modal', require('./components/credential-form-modal.vue').default);
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to

resources/js/components/credential-form-modal.vue

@@ -0,0 +1,54 @@
+<template>
+    <modal :id="id" tabindex="-1" role="dialog" :aria-labelledby="id+'Label'">
+        <h5 slot="header" class="modal-title" :id="id+'Label'">
+            Edit Credential
+        </h5>
+        <div slot="body">
+            <div class="form-group">
+                <label for="newusername">Username</label>
+                <input type="text" :name="'newusername'+data.credid" :id="'newusername'+data.credid" class="form-control credential" v-model="data.creduser">
+            </div>
+            <div class="form-group">
+                <label for="newpassword">Password</label>
+                <input type="text" :name="'newpassword'+data.credid" :id="'newpassword'+data.credid" class="form-control credential" v-model="data.credpass">
+                <button type="button" class="btn btn-secondary" @click="getRandomPassword(data.credid)">Generate Random</button>
+            </div>
+            <div class="form-group"></div>
+        </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>
+        </div>
+    </modal>
+</template>
+<script>
+export default {
+    props: ['populateWith', 'modalId'],
+    data() {
+        return {
+            data: JSON.parse(JSON.stringify(this.populateWith)),
+            id: this.modalId,
+            errors: []
+        }
+    },
+    methods: {
+        rndStr(len) {
+            let text = ""
+            let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%"
+        
+            for( let i=0; i < len; i++ ) {
+                text += chars.charAt(Math.floor(Math.random() * chars.length))
+            }
+            return text
+        },
+        getRandomPassword(id) {
+            this.data.credpass = this.rndStr(16);
+        },
+        updateCredential() {
+            axios.put('/api/credentials/' + this.data.credid, this.data).then(response => {}).catch(error =>{console.error(error)});
+            $('#credential'+this.data.credid+'editModal').modal('hide');
+        }
+    }
+    
+}
+</script>

resources/js/components/credential.vue

@@ -1,26 +1,6 @@
 <template>
 <div class="bg-lightgray m-1 p-2 border rounded container-fluid">
-    <modal :id="'credential'+this.data.credid+'editModal'" tabindex="-1" role="dialog" :aria-labelledby="'credential'+data.credid+'editModalLabel'">
-        <h5 slot="header" class="modal-title" id="credentialeditModalLabel">
-            Edit Credential
-        </h5>
-        <div slot="body">
-            <div class="form-group">
-                <label for="newusername">Username</label>
-                <input type="text" :name="'newusername'+data.credid" :id="'newusername'+data.credid" class="form-control credential" v-model.lazy="data.creduser">
-            </div>
-            <div class="form-group">
-                <label for="newpassword">Password</label>
-                <input :ref="'newpassword'+data.credid" type="text" :name="'newpassword'+data.credid" :id="'newpassword'+data.credid" class="form-control credential" v-model.lazy="data.credpass">
-                <button type="button" class="btn btn-secondary" @click="getRandomPassword(data.credid)">Generate Random</button>
-            </div>
-            <div class="form-group"></div>
-        </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>
-        </div>
-    </modal>
+    <credential-form-modal :modal-id="'credential'+this.data.credid+'editModal'" :populateWith="this.data"></credential-form-modal>
     <div class="row no-gutters">
         <div class="h5 col-3 text-left">{{this.data.creddesc}}</div>
         <div class="col-9 text-right">{{this.data.creddate}}</div>
@@ -76,25 +56,6 @@ export default {
                     this.data = eData;
                 }
             });
-    },
-    methods: {
-        rndStr(len) {
-            let text = ""
-            let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%"
-        
-            for( let i=0; i < len; i++ ) {
-                text += chars.charAt(Math.floor(Math.random() * chars.length))
-            }
-            return text
-        },
-        getRandomPassword(id) {
-            this.$refs['newpassword'+id].value = this.rndStr(16);
-        },
-        updateCredential() {
-            this.data.credpass = this.$refs['newpassword'+this.data.credid].value;
-            axios.put('/api/credentials/' + this.data.credid, this.data).then(response => {}).catch(error =>{console.error(error)});
-            $('#credential'+this.data.credid+'editModal').modal('hide');
-        }
     }
 }
 </script>