app/Http/Controllers/Api/WorkOrdersController.php

@@ -48,18 +48,11 @@ class WorkOrdersController extends Controller
      */
     public function show(WorkOrder $workOrder)
     {
-        return $workOrder;
+        return response()->json($workOrder);
     }
 
-    /**
-     * Show the form for editing the specified resource.
-     *
-     * @param  \App\WorkOrder  $workOrder
-     * @return \Illuminate\Http\Response
-     */
-    public function edit(WorkOrder $workOrder)
-    {
-        //
+    public function asset(WorkOrder $workOrder) {
+        return response()->json($workOrder->asset);
     }
 
     /**

app/Http/Controllers/SinglePageController.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class SinglePageController extends Controller
+{
+    public function index() {
+        return view("landing");
+    }
+}

app/Http/Controllers/UserController.php

@@ -19,6 +19,7 @@ class UserController extends Controller
 
         if (Auth::attempt($credentials)) {
             $success['token'] = Auth::user()->createToken('MyApp')->accessToken;
+            $success['username'] = Auth::user()->username;
 
             return response()->json(['success' => $success]);
         }

package-lock.json

@@ -9446,6 +9446,11 @@
                 "vue-style-loader": "^4.1.0"
             }
         },
+        "vue-router": {
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
+            "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
+        },
         "vue-style-loader": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -27,6 +27,7 @@
         "@fortawesome/fontawesome-free": "^5.12.1",
         "clipboard": "^2.0.4",
         "laravel-echo": "^1.6.1",
-        "pusher-js": "^5.0.3"
+        "pusher-js": "^5.0.3",
+        "vue-router": "^3.1.6"
     }
 }

resources/js/app.js

@@ -9,41 +9,42 @@ require('./bootstrap');
 window.Clipboard = require('clipboard');
 require('./notify.min.js');
 
-window.Vue = require('vue');
-
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
-
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-
-Vue.component('example-component', require('./components/ExampleComponent.vue').default);
-Vue.component('woinfo', require('./components/woinfo.vue').default);
-Vue.component('assetinfo', require('./components/assetinfo.vue').default);
-Vue.component('credential', require('./components/credential.vue').default);
-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);
-Vue.component('autocomplete-custom-dropdown', require('./components/autocomplete-custom-dropdown.vue').default);
-Vue.component('credential-list', require('./components/credential-list.vue').default);
-Vue.component('note-form-modal', require('./components/note-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
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+import App from './views/App'
+// import WorkOrder from './views/WorkOrder'
+import Login from './views/Login'
+import Home from './views/Welcome'
+
+const router = new VueRouter({
+    mode: 'history',
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: Home
+        },
+        {
+            path: '/login',
+            name: 'login',
+            component: Login,
+        },
+        /* {
+            path: '/workorders',
+            name: 'workorders',
+            component: WorkOrder,
+        } */
+    ],
+})
 
 const app = new Vue({
     el: '#app',
-});
+    components: { App },
+    router,
+})
 
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()

resources/js/views/App.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <nav class="navbar navbar-expand navbar-dark bg-primary text-light shadow-sm">
+            <div class="container-fluid">
+                <router-link :to="{name: 'home'}" class="navbar-brand">
+                    UPCCRT
+                </router-link>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <!-- Left Side Of Navbar -->
+                    <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-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-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-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-sm-block d-md-inline">Reports</span></a>
+                        </li>
+                    </ul>
+
+                    <!-- Right Side Of Navbar -->
+                    <ul class="navbar-nav ml-auto">
+                        <!-- Authentication Links -->
+                        <router-link :to="{ name: 'login' }" class="nav-link" v-if="!isLoggedIn">Login</router-link>
+                        <li class="nav-link" v-if="isLoggedIn">{{username}}</li>
+                        <router-link :to="{ name: 'home'}" class="nav-link" v-if="isLoggedIn">Home</router-link>
+                        <!-- @guest
+                            <li class="nav-item">
+                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
+                            </li>
+                            @if (Route::has('register'))
+                                <li class="nav-item">
+                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
+                                </li>
+                            @endif
+                        @else
+                            <li class="nav-item dropdown">
+                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
+                                    {{ Auth::user()->username }} <span class="caret"></span>
+                                </a>
+
+                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+                                    <a class="dropdown-item" href="{{ route('logout') }}"
+                                       onclick="event.preventDefault();
+                                                     document.getElementById('logout-form').submit();">
+                                        {{ __('Logout') }}
+                                    </a>
+
+                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                                        @csrf
+                                    </form>
+                                </div>
+                            </li>
+                        @endguest -->
+                    </ul>
+                </div>
+            </div>
+        </nav>
+        <main class="py-4">
+            <router-view></router-view>
+        </main>
+    </div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            isLoggedIn : null,
+            username : null
+        }
+    },
+    mounted () {
+        this.isLoggedIn = localStorage.getItem('jwt')
+        this.username = localStorage.getItem('user')
+    }
+}
+</script>

resources/js/views/Login.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card card-default">
+                    <div class="card-header">Login</div>
+
+                    <div class="card-body">
+                        <form method="POST" action="/login">
+                            <div class="form-group row">
+                                <label for="username" class="col-sm-4 col-form-label text-md-right">Username</label>
+
+                                <div class="col-md-6">
+                                    <input id="username" type="username" class="form-control" v-model="username" required autofocus>
+                                </div>
+                            </div>
+
+                            <div class="form-group row">
+                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
+
+                                <div class="col-md-6">
+                                    <input id="password" type="password" class="form-control" v-model="password" required>
+                                </div>
+                            </div>
+
+                            <div class="form-group row mb-0">
+                                <div class="col-md-8 offset-md-4">
+                                    <button type="submit" class="btn btn-primary" @click="handleSubmit">
+                                        Login
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data(){
+            return {
+                username : "",
+                password : ""
+            }
+        },
+        methods : {
+            handleSubmit(e){
+                e.preventDefault()
+
+                if (this.password.length > 0) {
+                    axios.post('api/login', {
+                        username: this.username,
+                        password: this.password
+                        })
+                        .then(response => {
+                        localStorage.setItem('user',response.data.success.username)
+                        localStorage.setItem('jwt',response.data.success.token)
+
+                        if (localStorage.getItem('jwt') != null){
+                            this.$router.go('/')
+                        }
+                        })
+                        .catch(function (error) {
+                        console.error(error);
+                        });
+                }
+            }
+        },
+        beforeRouteEnter (to, from, next) { 
+            if (localStorage.getItem('jwt')) {
+                return next('board');
+            }
+
+            next();
+        }
+    }
+</script>

resources/js/views/Welcome.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="flex-center position-ref full-height">
+        <div class="content">
+            <div  class="m-b-md">
+                <h2 class="title m-b-md">
+                    UPCCRT
+                </h2>
+                <h3>
+                    University PC Care Repair Tracker
+                </h3>
+            </div>
+        </div>
+    </div>
+</template>
+<style scoped>
+    .full-height {
+        height: 100vh;
+    }
+    .flex-center {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    }
+    .position-ref {
+        position: relative;
+    }
+    .top-right {
+        position: absolute;
+        right: 10px;
+        top: 18px;
+    }
+    .content {
+        text-align: center;
+    }
+    .title {
+        font-size: 60px;
+    }
+    .links > a {
+        color: #636b6f;
+        padding: 0 25px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: .1rem;
+        text-decoration: none;
+        text-transform: uppercase;
+    }
+    .m-b-md {
+        margin-bottom: 30px;
+        color: #000000;
+    }
+</style>
+<script>
+export default {}
+</script>

resources/views/landing.blade.php

@@ -0,0 +1,5 @@
+@extends('layouts.app')
+
+@section('content')
+    <app></app>
+@endsection

resources/views/layouts/app.blade.php

@@ -21,71 +21,7 @@
 </head>
 <body>
     <div id="app">
-        <nav class="navbar navbar-expand navbar-dark bg-primary text-light shadow-sm">
-            <div class="container-fluid">
-                <a class="navbar-brand" href="{{ url('/') }}">
-                    {{ config('app.name', 'Laravel') }}
-                </a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                    <!-- Left Side Of Navbar -->
-                    <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-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-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-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-sm-block d-md-inline">Reports</span></a>
-                        </li>
-                    </ul>
-
-                    <!-- Right Side Of Navbar -->
-                    <ul class="navbar-nav ml-auto">
-                        <!-- Authentication Links -->
-                        @guest
-                            <li class="nav-item">
-                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
-                            </li>
-                            @if (Route::has('register'))
-                                <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
-                                </li>
-                            @endif
-                        @else
-                            <li class="nav-item dropdown">
-                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
-                                    {{ Auth::user()->username }} <span class="caret"></span>
-                                </a>
-
-                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
-                                    <a class="dropdown-item" href="{{ route('logout') }}"
-                                       onclick="event.preventDefault();
-                                                     document.getElementById('logout-form').submit();">
-                                        {{ __('Logout') }}
-                                    </a>
-
-                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                                        @csrf
-                                    </form>
-                                </div>
-                            </li>
-                        @endguest
-                    </ul>
-                </div>
-            </div>
-        </nav>
-
-        <main class="py-4">
-            @yield('content')
-        </main>
+        @yield('content')
     </div>
 </body>
 </html>

routes/api.php

@@ -21,6 +21,7 @@ Route::middleware('auth:api')->get('/user', function (Request $request) {
 });
 
 Route::middleware('auth:api')->group( function() {
+    Route::get('/workorders/{workOrder}/assets');
     Route::get('/workorders/{workOrder}', 'Api\WorkOrdersController@show');
     Route::put('/workorders/{workOrder}', 'Api\WorkOrdersController@update');
 

routes/web.php

@@ -11,19 +11,4 @@
 |
 */
 
-Route::get('/', function () {
-    return view('welcome');
-});
-
-Auth::routes();
-
-Route::get('/home', 'HomeController@index')->name('home');
-
-Route::get('/workorders/{workOrder}', 'WorkOrdersController@show');
-
-Route::get('/workorders/{workOrder}/edit', 'WorkOrdersController@edit')->name('editwo');
-
-Route::put('/workorders/{workOrder}', 'WorkOrdersController@update')->name('updatewo');
-
-Route::get('/assets/{asset}/edit', 'AssetsController@edit')->name('editasset');
-Route::put('assets/{asset}', 'AssetsController@update')->name('updateasset');
+Route::get('/{any}', 'SinglePageController@index')->where('any', '.*');