Adds credential edit modal and random password generator.

Doesn't actually save any data yet, just adds the modal dialog.

public/js/app.js

@@ -2063,6 +2063,27 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   props: ['credential'],
   data: function data() {
@@ -2076,6 +2097,21 @@ __webpack_require__.r(__webpack_exports__);
     Echo.channel('credentials').listen('CredentialUpdated', function (e) {
       _this.data = JSON.parse(e.data);
     });
+  },
+  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() {
+      this.data.credpass = this.rndStr(16);
+    }
   }
 });
 
@@ -48812,6 +48848,133 @@ var render = function() {
     "div",
     { staticClass: "bg-lightgray m-1 p-2 border rounded container-fluid" },
     [
+      _c(
+        "modal",
+        {
+          attrs: {
+            id: "credential" + this.data.credid + "editModal",
+            tabindex: "-1",
+            role: "dialog",
+            "aria-labelledby":
+              "credential" + this.data.credid + "editModalLabel"
+          }
+        },
+        [
+          _c(
+            "h5",
+            {
+              staticClass: "modal-title",
+              attrs: { slot: "header", id: "credentialeditModalLabel" },
+              slot: "header"
+            },
+            [_vm._v("\r\n            Edit Credential\r\n        ")]
+          ),
+          _vm._v(" "),
+          _c("div", { attrs: { slot: "body" }, slot: "body" }, [
+            _c("div", { staticClass: "form-group" }, [
+              _c("label", { attrs: { for: "username" } }, [_vm._v("Username")]),
+              _vm._v(" "),
+              _c("input", {
+                directives: [
+                  {
+                    name: "model",
+                    rawName: "v-model",
+                    value: this.data.creduser,
+                    expression: "this.data.creduser"
+                  }
+                ],
+                staticClass: "form-control credential",
+                attrs: {
+                  type: "text",
+                  name: "username" + this.data.credid,
+                  id: "username" + this.data.credid
+                },
+                domProps: { value: this.data.creduser },
+                on: {
+                  input: function($event) {
+                    if ($event.target.composing) {
+                      return
+                    }
+                    _vm.$set(this.data, "creduser", $event.target.value)
+                  }
+                }
+              })
+            ]),
+            _vm._v(" "),
+            _c("div", { staticClass: "form-group" }, [
+              _c("label", { attrs: { for: "password" } }, [_vm._v("Password")]),
+              _vm._v(" "),
+              _c("input", {
+                directives: [
+                  {
+                    name: "model",
+                    rawName: "v-model",
+                    value: this.data.credpass,
+                    expression: "this.data.credpass"
+                  }
+                ],
+                staticClass: "form-control credential",
+                attrs: {
+                  type: "text",
+                  name: "password" + this.data.credid,
+                  id: "password" + this.data.credid
+                },
+                domProps: { value: this.data.credpass },
+                on: {
+                  input: function($event) {
+                    if ($event.target.composing) {
+                      return
+                    }
+                    _vm.$set(this.data, "credpass", $event.target.value)
+                  }
+                }
+              }),
+              _vm._v(" "),
+              _c(
+                "button",
+                {
+                  staticClass: "btn btn-secondary",
+                  attrs: { type: "button" },
+                  on: {
+                    click: function($event) {
+                      return _vm.getRandomPassword()
+                    }
+                  }
+                },
+                [_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")]
+            )
+          ])
+        ]
+      ),
+      _vm._v(" "),
       _c("div", { staticClass: "row no-gutters" }, [
         _c("div", { staticClass: "h5 col-3 text-left" }, [
           _vm._v(_vm._s(this.data.creddesc))
@@ -48877,9 +49040,32 @@ var render = function() {
           ])
         ]),
         _vm._v(" "),
-        _vm._m(2)
+        _c(
+          "div",
+          {
+            staticClass: "btn-group col-lg-2 align-self-end w-25 w-lg-auto",
+            attrs: { role: "group", "aria-label": "Edit and Delete" }
+          },
+          [
+            _c(
+              "button",
+              {
+                staticClass: "btn btn-sm btn-secondary p-lg-1",
+                attrs: {
+                  type: "button",
+                  "data-toggle": "modal",
+                  "data-target": "#credential" + this.data.credid + "editModal"
+                }
+              },
+              [_c("i", { staticClass: "fas fa-fw fa-edit" })]
+            ),
+            _vm._v(" "),
+            _vm._m(2)
+          ]
+        )
       ])
-    ]
+    ],
+    1
   )
 }
 var staticRenderFns = [
@@ -48904,30 +49090,12 @@ var staticRenderFns = [
     var _h = _vm.$createElement
     var _c = _vm._self._c || _h
     return _c(
-      "div",
+      "button",
       {
-        staticClass: "btn-group col-lg-2 align-self-end w-25 w-lg-auto",
-        attrs: { role: "group", "aria-label": "Edit and Delete" }
+        staticClass: "btn btn-sm btn-danger p-lg-1",
+        attrs: { type: "button" }
       },
-      [
-        _c(
-          "button",
-          {
-            staticClass: "btn btn-sm btn-secondary p-lg-1",
-            attrs: { type: "button" }
-          },
-          [_c("i", { staticClass: "fas fa-fw fa-edit" })]
-        ),
-        _vm._v(" "),
-        _c(
-          "button",
-          {
-            staticClass: "btn btn-sm btn-danger p-lg-1",
-            attrs: { type: "button" }
-          },
-          [_c("i", { staticClass: "fas fa-fw fa-trash-alt" })]
-        )
-      ]
+      [_c("i", { staticClass: "fas fa-fw fa-trash-alt" })]
     )
   }
 ]

resources/js/components/credential.vue

@@ -1,5 +1,26 @@
 <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'+this.data.credid+'editModalLabel'">
+        <h5 slot="header" class="modal-title" id="credentialeditModalLabel">
+            Edit Credential
+        </h5>
+        <div slot="body">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" :name="'username'+this.data.credid" :id="'username'+this.data.credid" class="form-control credential" v-model="this.data.creduser">
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="text" :name="'password'+this.data.credid" :id="'password'+this.data.credid" class="form-control credential" v-model="this.data.credpass">
+                <button type="button" class="btn btn-secondary" @click="getRandomPassword()">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>
     <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>
@@ -22,7 +43,7 @@
             </div>
         </div>
         <div class="btn-group col-lg-2 align-self-end w-25 w-lg-auto" role="group" aria-label="Edit and Delete">
-            <button type="button" class="btn btn-sm btn-secondary p-lg-1"><i class="fas fa-fw fa-edit"></i></button>
+            <button type="button" class="btn btn-sm btn-secondary p-lg-1" data-toggle="modal" :data-target="'#credential'+this.data.credid+'editModal'"><i class="fas fa-fw fa-edit"></i></button>
             <button type="button" class="btn btn-sm btn-danger p-lg-1"><i class="fas fa-fw fa-trash-alt"></i></button>
         </div>
     </div>
@@ -41,6 +62,20 @@ export default {
             .listen('CredentialUpdated', (e) => {
                 this.data = JSON.parse(e.data);
             });
+    },
+    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() {
+            this.data.credpass = this.rndStr(16);
+        }
     }
 }
 </script>

resources/views/workorders/show.blade.php

@@ -58,7 +58,7 @@
                     </button>
                     <ul class="nav nav-pills card-header-pills nav-justified xs-collapse collapse" id="workorderTab" role="tablist">
                         <li class="nav-item">
-                            <a class="nav-link active" id="workorderinfo-tab" data-toggle="pill" href="#workorderinfo" role="tab" aria-controls="workorderinfo" aria-selected="true">Work Order Info</a>
+                            <a class="nav-link active" id="workordersumm-tab" data-toggle="pill" href="#workordersumm" role="tab" aria-controls="workordersumm" aria-selected="true">Summary</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" id="attachments-tab" data-toggle="pill" href="#attachments" role="tab" aria-controls="attachments" aria-selected="false">Attachments</a>
@@ -67,7 +67,7 @@
                 </div>
                 <div class='card-body'>
                     <div class='tab-content'>
-                        <div class="tab-pane active" id="workorderinfo" role="tabpanel" aria-labelledby="workorderinfo-tab">
+                        <div class="tab-pane active" id="workordersumm" role="tabpanel" aria-labelledby="workordersumm-tab">
                             <woinfo work-order="{{$workOrder}}"></woinfo>
                         </div>
                         <div class="tab-pane" id="attachments" role="tabpanel" aria-labelledby="attachments-tab">