Cleans up credentials Vue Component and WO page.

package-lock.json

@@ -2171,6 +2171,16 @@
             "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
             "dev": true
         },
+        "clipboard": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+            "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+            "requires": {
+                "good-listener": "^1.2.2",
+                "select": "^1.1.2",
+                "tiny-emitter": "^2.0.0"
+            }
+        },
         "cliui": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -2995,6 +3005,11 @@
                 }
             }
         },
+        "delegate": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+            "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+        },
         "depd": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -4613,6 +4628,14 @@
                 "glob": "^7.1.1"
             }
         },
+        "good-listener": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+            "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+            "requires": {
+                "delegate": "^3.1.2"
+            }
+        },
         "graceful-fs": {
             "version": "4.2.3",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
@@ -8024,6 +8047,11 @@
                 "ajv-keywords": "^3.1.0"
             }
         },
+        "select": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+            "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+        },
         "select-hose": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -9008,6 +9036,11 @@
             "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
             "dev": true
         },
+        "tiny-emitter": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+            "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+        },
         "to-arraybuffer": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",

package.json

@@ -25,6 +25,7 @@
     },
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.12.1",
+        "clipboard": "^2.0.4",
         "laravel-echo": "^1.6.1",
         "pusher-js": "^5.0.3"
     }

public/css/app.css

@@ -16829,6 +16829,16 @@ a.text-dark:focus {
   padding: 0.5rem 0.5rem;
 }
 
+.credential {
+  font-family: monospace;
+  font-weight: bolder;
+  background-color: inherit;
+}
+
+.bg-lightgray {
+  background-color: #f1f1f1;
+}
+
 .xs-collapse {
   display: block;
 }

resources/js/app.js

@@ -6,6 +6,9 @@
 
 require('./bootstrap');
 
+window.Clipboard = require('clipboard');
+require('./notify.min.js');
+
 window.Vue = require('vue');
 
 /**
@@ -36,4 +39,12 @@ const app = new Vue({
 
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()
-  })
+});
+
+var clipboard = new Clipboard('.btn-clip');
+
+clipboard.on('success', function(e) {
+    $('#' + e.trigger.getAttribute('id')).notify('Copied to Clipboard',  {position:"right", className:'success'});
+
+    e.clearSelection();
+});

resources/js/components/credential.vue

@@ -1,10 +1,31 @@
 <template>
-<div>
-    <p class="h6">{{this.data.creddesc}}</p>
-    <label for="username"><i class="fas fa-user"></i></label>
-    <input type="text" id="username" v-bind:value=this.data.creduser readonly/>
-    <label for="password"><i class="fas fa-key"></i></label>
-    <input type="text" id="password" v-bind:value=this.data.credpass readonly/>
+<div class="bg-lightgray m-1 p-2 border rounded container">
+    <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>
+    </div>
+    <div class="row">
+        <div class="col-lg-8">
+            <div>
+                <label for="username"><i class="fas fa-fw fa-user"></i></label>
+                <input type="text" v-bind:id="'username' + this.data.credid" class="border-0 credential" v-bind:value=this.data.creduser readonly/>
+                <button v-bind:id="'btn-username' + this.data.credid" class="btn-clip btn btn-primary rounded-pill py-1" v-bind:data-clipboard-target="'#username' + this.data.credid">
+                    <i class="far fa-clone"></i>
+                </button>
+            </div>
+            <div>
+                <label for="password"><i class="fas fa-fw fa-key"></i></label>
+                <input type="text" v-bind:id="'password' + this.data.credid" class="border-0 credential" v-bind:value=this.data.credpass readonly/>
+                <button v-bind:id="'btn-password' + this.data.credid" class="btn-clip btn btn-primary rounded-pill py-1" v-bind:data-clipboard-target="'#password' + this.data.credid">
+                    <i class="far fa-clone"></i>
+                </button>
+            </div>
+        </div>
+        <div class="btn-group col-lg-3 m-2 my-lg-3 w-25" role="group" aria-label="Edit and Delete">
+            <button type="button" class="btn btn-secondary p-lg-1"><i class="fas fa-fw fa-edit"></i></button>
+            <button type="button" class="btn btn-danger p-lg-1"><i class="fas fa-fw fa-trash-alt"></i></button>
+        </div>
+    </div>
 </div>
 </template>
 <script>

resources/sass/app.scss

@@ -19,6 +19,16 @@
     padding: 0.5rem 0.5rem;
 }
 
+.credential {
+    font-family: monospace;
+    font-weight: bolder;
+    background-color: inherit;
+}
+
+.bg-lightgray {
+    background-color: #f1f1f1;
+}
+
 .xs-collapse {
     display: block;
 }

resources/views/layouts/app.blade.php

@@ -22,7 +22,7 @@
 <body>
     <div id="app">
         <nav class="navbar navbar-expand navbar-dark bg-primary text-light shadow-sm">
-            <div class="container">
+            <div class="container-fluid">
                 <a class="navbar-brand" href="{{ url('/') }}">
                     {{ config('app.name', 'Laravel') }}
                 </a>
@@ -32,18 +32,18 @@
 
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <!-- Left Side Of Navbar -->
-                    <ul class="navbar-nav mr-auto">
+                    <ul class="navbar-nav mr-auto text-center">
                         <li class="nav-item">
-                            <a href="#" class="nav-link"><i class="fas fa-sign-in-alt"></i> <span class="d-none d-md-inline">Check-In</span></a>
+                            <a href="#" class="nav-link"><i class="fas fa-sign-in-alt"></i> <span class="d-none d-sm-block d-md-inline">Check-In</span></a>
                         </li>
                         <li class="nav-item">
-                            <a href="#" class="nav-link"><i class="fas fa-sign-out-alt"></i> <span class="d-none d-md-inline">Check-Out</span></a>
+                            <a href="#" class="nav-link"><i class="fas fa-sign-out-alt"></i> <span class="d-none d-sm-block d-md-inline">Check-Out</span></a>
                         </li>
                         <li class="nav-item">
-                            <a href="#" class="nav-link"><i class="fas fa-tachometer-alt"></i> <span class="d-none d-md-inline">Dashboard</span></a>
+                            <a href="#" class="nav-link"><i class="fas fa-tachometer-alt"></i> <span class="d-none d-sm-block d-md-inline">Dashboard</span></a>
                         </li>
                         <li class="nav-item">
-                            <a href="#" class="nav-link"><i class="fas fa-chart-bar"></i> <span class="d-none d-md-inline">Reports</span></a>
+                            <a href="#" class="nav-link"><i class="fas fa-chart-bar"></i> <span class="d-none d-sm-block d-md-inline">Reports</span></a>
                         </li>
                     </ul>
 

resources/views/workorders/show.blade.php

@@ -3,78 +3,82 @@
 @section('content')
 
 <div id="app">
-    <div class="d-sm-flex flex-wrap">
-        <div class="card m-3 flex-fill">
-            <div class="card-header text-right">
-                <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#assetTab">
-                    <span class="sr-only">Toggle Navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <ul class="nav nav-pills card-header-pills nav-justified xs-collapse collapse" id="assetTab" role="tablist">
-                    <li class="nav-item">
-                        <a class="nav-link active" id="assetinfo-tab" data-toggle="pill" href="#assetinfo" role="tab" aria-controls="assetinfo" aria-selected="true">Hardware</a>
-                    </li>
-                    @if($workOrder->asset->group !== null)
-                    <li class="nav-item">
-                        <a class="nav-link" id="group-tab" data-toggle="pill" href="#group" role="tab" aria-controls="group" aria-selected="false">Group</a>
-                    </li>
-                    @endif
-                    <li class="nav-item">
-                        <a class="nav-link" id="credentials-tab" data-toggle="pill" href="#credentials" role="tab" aria-controls="credentials" aria-selected="false">Credentials</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="card-body">
-                <div class="tab-content">
-                    <div class="tab-pane active" id="assetinfo" role="tabpanel" aria-labelledby="assetinfo-tab">
-                        <assetinfo asset="{{$workOrder->asset}}"></assetinfo>
-                        <a href="{{ route('editasset', ['asset' => $workOrder->asset]) }}" class="btn btn-primary">Edit</a>
-                    </div>
-                    @if($workOrder->asset->group !== null)
-                    <div class="tab-pane" id="group" role="tabpanel" aria-labelledby="group-tab">
-                        Name: {{$workOrder->asset->group->pcgroupname}}
+        <div class="row no-gutters">
+            <div class="col-lg-6">
+                <div class="card m-3 flex-fill">
+                    <div class="card-header text-right">
+                        <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#assetTab">
+                            <span class="sr-only">Toggle Navigation</span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                        </button>
+                        <ul class="nav nav-pills card-header-pills nav-justified xs-collapse collapse" id="assetTab" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" id="assetinfo-tab" data-toggle="pill" href="#assetinfo" role="tab" aria-controls="assetinfo" aria-selected="true">Hardware</a>
+                            </li>
+                            @if($workOrder->asset->group !== null)
+                            <li class="nav-item">
+                                <a class="nav-link" id="group-tab" data-toggle="pill" href="#group" role="tab" aria-controls="group" aria-selected="false">Group</a>
+                            </li>
+                            @endif
+                            <li class="nav-item">
+                                <a class="nav-link" id="credentials-tab" data-toggle="pill" href="#credentials" role="tab" aria-controls="credentials" aria-selected="false">Credentials</a>
+                            </li>
+                        </ul>
                     </div>
-                    @endif
-                    <div class="tab-pane" id="credentials" role="tabpanel" aria-labelledby="credentials-tab">
-                        @foreach ($workOrder->asset->credentials as $cred)
-                            <credential credential="{{$cred}}"></credential>
-                        @endforeach
+                    <div class="card-body">
+                        <div class="tab-content">
+                            <div class="tab-pane active" id="assetinfo" role="tabpanel" aria-labelledby="assetinfo-tab">
+                                <assetinfo asset="{{$workOrder->asset}}"></assetinfo>
+                                <a href="{{ route('editasset', ['asset' => $workOrder->asset]) }}" class="btn btn-primary">Edit</a>
+                            </div>
+                            @if($workOrder->asset->group !== null)
+                            <div class="tab-pane" id="group" role="tabpanel" aria-labelledby="group-tab">
+                                Name: {{$workOrder->asset->group->pcgroupname}}
+                            </div>
+                            @endif
+                            <div class="tab-pane" id="credentials" role="tabpanel" aria-labelledby="credentials-tab">
+                                @foreach ($workOrder->asset->credentials as $cred)
+                                    <credential credential="{{$cred}}"></credential>
+                                @endforeach
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="card m-3 flex-fill">
-            <div class="card-header text-right">
-                <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#workorderTab">
-                    <span class="sr-only">Toggle Navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </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>
-                    </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>
-                    </li>
-                </ul>
-            </div>
-            <div class='card-body'>
-                <div class='tab-content'>
-                    <div class="tab-pane active" id="workorderinfo" role="tabpanel" aria-labelledby="workorderinfo-tab">
-                        <woinfo work-order="{{$workOrder}}"></woinfo>
-                        <a href="{{ route('editwo', ['workOrder' => $workOrder]) }}" class="btn btn-primary">Edit</a>
+            <div class="col-lg-6">
+                <div class="card m-3 flex-fill">
+                    <div class="card-header text-right">
+                        <button type="button" class="btn btn-default xs-toggle" data-toggle="collapse" data-target="#workorderTab">
+                            <span class="sr-only">Toggle Navigation</span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                        </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>
+                            </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>
+                            </li>
+                        </ul>
                     </div>
-                    <div class="tab-pane" id="attachments" role="tabpanel" aria-labelledby="attachments-tab">
-                        TODO 2
+                    <div class='card-body'>
+                        <div class='tab-content'>
+                            <div class="tab-pane active" id="workorderinfo" role="tabpanel" aria-labelledby="workorderinfo-tab">
+                                <woinfo work-order="{{$workOrder}}"></woinfo>
+                                <a href="{{ route('editwo', ['workOrder' => $workOrder]) }}" class="btn btn-primary">Edit</a>
+                            </div>
+                            <div class="tab-pane" id="attachments" role="tabpanel" aria-labelledby="attachments-tab">
+                                TODO 2
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
 </div>
 
 @endsection