More vue/api work

app/Providers/AuthServiceProvider.php

@@ -43,6 +43,8 @@ class AuthServiceProvider extends ServiceProvider
     {
         $this->registerPolicies();
         Passport::routes();
+
+
         // --------------------------------
         // BEFORE ANYTHING ELSE
         // --------------------------------

gulpfile.js

@@ -2,6 +2,7 @@ var elixir = require('laravel-elixir');
 require('laravel-elixir-codeception-standalone');
 require('laravel-elixir-phpcs');
 require('laravel-elixir-vue-2');
+var bowerPath = './vendor/bower_components';
 
 /*
  |--------------------------------------------------------------------------
@@ -14,35 +15,47 @@ require('laravel-elixir-vue-2');
  |
  */
 
+
 elixir(function(mix) {
 
-    mix.less(['AdminLTE.less',
+    mix.less(
+        [
+            'AdminLTE.less',
             'skins/skin-blue.less',
             'ekko-lightbox.less',
             'overrides.less',
-            'fontawesome-animated.css'],
-            'public/assets/css')
-       .webpack('app.js');
+            'fontawesome-animated.css',
+             bowerPath + '/bootstrap-less/assets/stylesheets/**'
+         ], 'public/assets/css/')
+            .copy(bowerPath + '/bootstrap-less/assets/fonts/bootstrap/**', 'public/assets/fonts');
+
+
+
+    mix.webpack(
+            './resources/assets/js/vue.js',
+            './resources/assets/js/vue-dist.js'
+        );
+
+
+
+
     mix.scripts([
-        'plugins/jQuery/jQuery-2.1.4.min.js',
-        'plugins/jQueryUI/jquery-ui.js',
-        'plugins/jQueryUI/jquery.ui.widget.js',
-        'plugins/iframe-transport/jquery.iframe-transport.js',
-        'plugins/fileupload/jquery.fileupload.js',
-        'bootstrap-js.js',
-        'plugins/fastclick/fastclick.js',
-        'plugins/slimScroll/jquery.slimscroll.js',
-        'plugins/select2/select2.full.min.js',
-        'plugins/colorpicker/bootstrap-colorpicker.js',
-        'bootstrap-table.js',
-        'plugins/datepicker/bootstrap-datepicker.js',
-        'plugins/select2/select2.js',
-        'plugins/iCheck/icheck.js',
-        'ekko-lightbox.js',
+        'vue-dist.js',
+        bowerPath + '/bootstrap/dist/js/**',
+        bowerPath + '/jquery-slimscroll/**',
+        bowerPath + '/jquery-ui/**',
+        bowerPath + '/jquery.iframe-transport/**',
+        bowerPath + '/fileupload/**',
+        bowerPath + '/fastclick/**',
+        bowerPath + '/select2/**',
+        bowerPath + '/bootstrap-colorpicker/**',
+        bowerPath + '/bootstrap-table/**',
+        bowerPath + '/bootstrap-datepicker/**',
+        bowerPath +  '/iCheck/**',
+        bowerPath + '/ekko-lightbox/**',
         'snipeit.js'
 
-    ],'public/assets/js')
-        ;
+    ],'public/assets/js');
     mix.version(['assets/css/app.css','assets/js/all.js']);
 
 

package.json

@@ -9,6 +9,7 @@
     "gulp": "^3.9.1",
     "jquery": "^3.1.0",
     "laravel-elixir": "^6.0.0-11",
+    "laravel-elixir-browserify": "^0.8.1",
     "laravel-elixir-codeception-standalone": "^0.1.0",
     "laravel-elixir-phpcs": "^1.0.0-4",
     "laravel-elixir-vue-2": "^0.2.0",
@@ -18,6 +19,7 @@
     "vue-resource": "^1.0.3"
   },
   "dependencies": {
+    "jquery": "^3.1.1",
     "laravel-elixir-codeception": "^0.2.0"
   }
 }

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
   "assets/css/app.css": "assets/css/app-0979ad0cf2.css",
-  "assets/js/all.js": "assets/js/all-badb120e11.js"
+  "assets/js/all.js": "assets/js/all-7709b3bc36.js"
 }

resources/assets/js/app.js

@@ -1,3 +1,6 @@
+window.$ = window.jQuery = require('jquery')
+
+
 /*! AdminLTE app.js
  * ================
  * Main JS application file for AdminLTE v2. This file
@@ -747,38 +750,9 @@ function _init() {
 }(jQuery));
 
 
-/**
- * First we will load all of this project's JavaScript dependencies which
- * include Vue and Vue Resource. This gives a great starting point for
- * building robust, powerful web applications using Vue and Laravel.
- */
-
-require('./bootstrap');
-
-/**
- * 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.
- */
-
-Vue.component(
-    'passport-clients',
-    require('./components/passport/Clients.vue')
-);
-
-Vue.component(
-    'passport-authorized-clients',
-    require('./components/passport/AuthorizedClients.vue')
-);
-
-Vue.component(
-    'passport-personal-access-tokens',
-    require('./components/passport/PersonalAccessTokens.vue')
-);
-
-
 
 const app = new Vue({
     el: '#app'
 });
 
+

resources/assets/js/snipeit.js

@@ -1,3 +1,4 @@
+
 /**
  * Module containing core application logic.
  * @param  {jQuery} $        Insulated jQuery object
@@ -35,10 +36,7 @@ var pieOptions = {
     //String - A tooltip template
     tooltipTemplate: "<%=value %> <%=label%> "
 };
-//console.dir(pieOptions);
-//Create pie or douhnut chart
-// You can switch between pie and douhnut using the method below.
-//pieChart.Doughnut(PieData, pieOptions);
+
 //-----------------
 //- END PIE CHART -
 //-----------------
@@ -91,17 +89,46 @@ var pieOptions = {
 }(jQuery, window.snipeit.settings));
 
 
-// Vue.component(
-//     'passport-clients',
-//     require('./components/passport/Clients.vue')
-// );
-//
-// Vue.component(
-//     'passport-authorized-clients',
-//     require('./components/passport/AuthorizedClients.vue')
-// );
-//
-// Vue.component(
-//     'passport-personal-access-tokens',
-//     require('./components/passport/PersonalAccessTokens.vue')
-// );
+$(function () {
+ //Initialize Select2 Elements
+ var iOS = /iPhone|iPad|iPod/.test(navigator.userAgent)  && !window.MSStream;
+ if(!iOS)
+ {
+  $(".select2").select2();
+ }
+ $('.datepicker').datepicker();
+});
+
+//Flat blue color scheme for iCheck
+$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
+  checkboxClass: 'icheckbox_minimal-blue',
+  radioClass: 'iradio_minimal-blue'
+});
+
+
+$(document).ready(function () {
+
+         $('.slideout-menu-toggle').on('click', function(event){
+           console.log('clicked');
+         	event.preventDefault();
+         	// create menu variables
+         	var slideoutMenu = $('.slideout-menu');
+         	var slideoutMenuWidth = $('.slideout-menu').width();
+
+         	// toggle open class
+         	slideoutMenu.toggleClass("open");
+
+         	// slide menu
+         	if (slideoutMenu.hasClass("open")) {
+             slideoutMenu.show();
+     	    	slideoutMenu.animate({
+     		    	right: "0px"
+     	    	});
+         	} else {
+     	    	slideoutMenu.animate({
+     		    	right: -slideoutMenuWidth
+     	    	}, "-350px");
+             slideoutMenu.fadeOut();
+         	}
+         });
+     });

resources/assets/js/vue.js

@@ -0,0 +1,34 @@
+
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * include Vue and Vue Resource. This gives a great starting point for
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./bootstrap');
+
+/**
+ * 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.
+ */
+
+Vue.component(
+    'passport-clients',
+    require('./components/passport/Clients.vue')
+);
+
+Vue.component(
+    'passport-authorized-clients',
+    require('./components/passport/AuthorizedClients.vue')
+);
+
+Vue.component(
+    'passport-personal-access-tokens',
+    require('./components/passport/PersonalAccessTokens.vue')
+);
+
+
+const app = new Vue({
+    el: '#app'
+});

resources/views/account/api.blade.php

@@ -0,0 +1,19 @@
+@extends('layouts/default')
+
+{{-- Page title --}}
+@section('title')
+    API Settings (test)
+    @parent
+@stop
+
+{{-- Page content --}}
+@section('content')
+    <div id="app">
+        <passport-personal-access-tokens></passport-personal-access-tokens>
+    </div>
+
+
+
+
+
+@stop

resources/views/layouts/default.blade.php

@@ -69,6 +69,8 @@
     }
     </style>
 
+
+
     <script>
           window.snipeit = {
               settings: {
@@ -293,11 +295,19 @@
                      <li {!! (Request::is('account/profile') ? ' class="active"' : '') !!}>
                        <a href="{{ route('view-assets') }}">
                              <i class="fa fa-check fa-fw"></i> @lang('general.viewassets')
-                       </a>
+                       </a></li>
+                     <li>
                           <a href="{{ route('profile') }}">
                              <i class="fa fa-user fa-fw"></i> @lang('general.editprofile')
                          </a>
                      </li>
+                     @can('self.api')
+                     <li>
+                         <a href="{{ route('user.api') }}">
+                             <i class="fa fa-user fa-fw"></i> Manage API Keys
+                         </a>
+                     </li>
+                     @endcan
                      <li class="divider"></li>
                      <li>
                          <a href="{{ url('/logout') }}">
@@ -371,6 +381,13 @@
                                <i class="fa fa-wrench fa-fw"></i> @lang('admin/custom_fields/general.custom_fields')
                            </a>
                        </li>
+                       @can('settings.api')
+                           <li>
+                               <a href="{{ route('settings.api') }}">
+                                   <i class="fa fa-user fa-fw"></i> OAuth API Keys
+                               </a>
+                           </li>
+                       @endcan
                        <li class="divider"></li>
                        <li>
                            <a href="{{ route('app') }}">
@@ -621,56 +638,9 @@
     </div>
 
 
-    <script src="/js/app.js"></script>
+
     <script src="{{ asset(elixir('assets/js/all.js')) }}"></script>
 
-    <script>
-       $(function () {
-         //Initialize Select2 Elements
-         var iOS = /iPhone|iPad|iPod/.test(navigator.userAgent)  && !window.MSStream;
-         if(!iOS)
-         {
-          $(".select2").select2();
-         }
-         $('.datepicker').datepicker();
-       });
-
-       //Flat blue color scheme for iCheck
-        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
-          checkboxClass: 'icheckbox_minimal-blue',
-          radioClass: 'iradio_minimal-blue'
-        });
-     </script>
-
-     <script type="text/javascript">
-     $(document).ready(function () {
-
-         $('.slideout-menu-toggle').on('click', function(event){
-           console.log('clicked');
-         	event.preventDefault();
-         	// create menu variables
-         	var slideoutMenu = $('.slideout-menu');
-         	var slideoutMenuWidth = $('.slideout-menu').width();
-
-         	// toggle open class
-         	slideoutMenu.toggleClass("open");
-
-         	// slide menu
-         	if (slideoutMenu.hasClass("open")) {
-             slideoutMenu.show();
-     	    	slideoutMenu.animate({
-     		    	right: "0px"
-     	    	});
-         	} else {
-     	    	slideoutMenu.animate({
-     		    	right: -slideoutMenuWidth
-     	    	}, "-350px");
-             slideoutMenu.fadeOut();
-         	}
-         });
-     });
-     </script>
-
 
     @section('moar_scripts')
     @show

routes/web.php

@@ -106,7 +106,7 @@ Route::group([ 'prefix' => 'admin','middleware' => ['web','auth']], function ()
 
             Route::get(
                 'api',
-                array('as' => 'api',
+                array('as' => 'settings.api',
                     function () {
                         return view('settings/api');
                     }
@@ -183,6 +183,15 @@ Route::group([ 'prefix' => 'account', 'middleware' => ['web', 'auth']], function
     Route::get('profile', [ 'as' => 'profile', 'uses' => 'ProfileController@getIndex' ]);
     Route::post('profile', 'ProfileController@postIndex');
 
+    Route::get(
+        'api',
+        array('as' => 'user.api',
+            function () {
+                return view('account/api');
+            }
+        )
+    );
+
     # View Assets
     Route::get('view-assets', [ 'as' => 'view-assets', 'uses' => 'ViewAssetsController@getIndex' ]);