that's all folks

app/Http/Livewire/OauthClients.php

@@ -2,9 +2,11 @@
 
 namespace App\Http\Livewire;
 
+use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Log;
 use Laravel\Passport\Client;
 use Laravel\Passport\ClientRepository;
+use Laravel\Passport\TokenRepository;
 use Livewire\Component;
 
 class OauthClients extends Component
@@ -18,10 +20,12 @@ class OauthClients extends Component
     public $authorizationError;
 
     protected $clientRepository;
+    protected $tokenRepository;
 
     public function __construct()
     {
         $this->clientRepository = app(ClientRepository::class);
+        $this->tokenRepository = app(TokenRepository::class);
         parent::__construct();
     }
 
@@ -29,6 +33,7 @@ class OauthClients extends Component
     {
         return view('livewire.oauth-clients', [
             'clients' => $this->clientRepository->activeForUser(auth()->user()->id),
+            'authorized_tokens' => $this->tokenRepository->forUser(auth()->user()->id)->where('revoked', false),
         ]);
     }
 
@@ -60,6 +65,17 @@ class OauthClients extends Component
         }
     }
 
+    public function deleteToken($tokenId): void
+    {
+        $token = $this->tokenRepository->find($tokenId);
+        if ($token->user_id == auth()->user()->id) {
+            $this->tokenRepository->revokeAccessToken($tokenId);
+        } else {
+            Log::warning('User ' . auth()->user()->id . ' attempted to delete token ' . $tokenId . ' which belongs to user ' . $token->user_id);
+            $this->authorizationError = 'You are not authorized to delete this token.';
+        }
+    }
+
     public function editClient(Client $editClientId): void
     {
         $this->editName = $editClientId->name;

resources/assets/js/components/passport/AuthorizedClients.vue

@@ -1,112 +0,0 @@
-<style scoped>
-    .action-link {
-        cursor: pointer;
-    }
-
-    .m-b-none {
-        margin-bottom: 0;
-    }
-</style>
-
-<template>
-    <div>
-        <div v-if="tokens.length > 0">
-            <div class="panel panel-default">
-                <h2 class="panel-heading">Authorized Applications</h2>
-
-                <div class="panel-body">
-                    <!-- Authorized Tokens -->
-                    <table class="table table-borderless m-b-none">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Scopes</th>
-                                <th><span class="sr-only">Delete</span></th>
-                            </tr>
-                        </thead>
-
-                        <tbody>
-                            <tr v-for="token in tokens">
-                                <!-- Client Name -->
-                                <td style="vertical-align: middle;">
-                                    {{ token.client.name }}
-                                </td>
-
-                                <!-- Scopes -->
-                                <td style="vertical-align: middle;">
-                                    <span v-if="token.scopes.length > 0">
-                                        {{ token.scopes.join(', ') }}
-                                    </span>
-                                </td>
-
-                                <!-- Revoke Button -->
-                                <td style="vertical-align: middle;">
-                                    <a class="action-link text-danger" @click="revoke(token)">
-                                        Revoke
-                                    </a>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        props: ['clientsUrl', 'tokensUrl'],
-        /*
-         * The component's data.
-         */
-        data() {
-            return {
-                tokens: []
-            };
-        },
-
-        /**
-         * Prepare the component (Vue 1.x).
-         */
-        ready() {
-            this.prepareComponent();
-        },
-
-        /**
-         * Prepare the component (Vue 2.x).
-         */
-        mounted() {
-            this.prepareComponent();
-        },
-
-        methods: {
-            /**
-             * Prepare the component (Vue 2.x).
-             */
-            prepareComponent() {
-                this.getTokens();
-            },
-
-            /**
-             * Get all of the authorized tokens for the user.
-             */
-            getTokens() {
-                this.$http.get(this.tokensUrl)
-                        .then(response => {
-                            this.tokens = response.data;
-                        });
-            },
-
-            /**
-             * Revoke the given token.
-             */
-            revoke(token) {
-                this.$http.delete(this.tokensUrl +'/'+ token.id)
-                        .then(response => {
-                            this.getTokens();
-                        });
-            }
-        }
-    }
-</script>

resources/assets/js/components/select2.vue

@@ -1,47 +0,0 @@
-
-<style scoped>
-    .select2-dropdown {
-        z-index:9999;
-    }
-</style>
-
-<template>
-        <select style="width:100%">
-            <slot></slot>
-        </select>
-</template>
-
-<script>
-    //require('select2');
-    export default {
-        /*
-         * The component's data.
-         */
-        props: ['options', 'value'],
-
-        mounted() {
-            var vm = this;
-            $(this.$el)
-                .select2({
-                    data: this.options
-                })
-                .on('change', function() { vm.$emit('input', this.value) } )
-                .val(this.value).trigger('change');
-        },
-        watch: {
-            value: function (value) {
-                $(this.$el).val(value)
-            },
-            options: function (options) {
-                var vm = this;
-                $(this.$el).select2('destroy').empty().select2({data: options})
-                .on('change', function() { vm.$emit('input', this.value) } )
-                .val(this.value).trigger('change');
-            },
-            destroyed: function() {
-                $(this.$el).off().select2('destroy')
-            }
-        }
-    }
-
-</script>

resources/assets/js/vue.js

@@ -16,10 +16,10 @@ require('./bootstrap');
 //     require('./components/passport/Clients.vue').default
 // );
 
-Vue.component(
+// Vue.component(
-    'passport-authorized-clients',
+//     'passport-authorized-clients',
-    require('./components/passport/AuthorizedClients.vue').default
+//     require('./components/passport/AuthorizedClients.vue').default
-);
+// );
 
 // This component has been removed and replaced with a Livewire implementation
 // Vue.component(

resources/views/livewire/oauth-clients.blade.php

@@ -80,6 +80,55 @@
                 </table>
             @endif
         </div>
+        <div>
+            @if ($authorized_tokens->count() > 0)
+                <div>
+                    <div class="panel panel-default">
+                        <h2 class="panel-heading">(Livewire) Authorized Applications</h2>
+
+                        <div class="panel-body">
+                            <!-- Authorized Tokens -->
+                            <table class="table table-borderless m-b-none">
+                                <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Scopes</th>
+                                    <th><span class="sr-only">Delete</span></th>
+                                </tr>
+                                </thead>
+
+                                <tbody>
+                                @foreach($authorized_tokens as $token)
+                                    <tr>
+                                        <!-- Client Name -->
+                                        <td style="vertical-align: middle;">
+                                            {{ $token->client->name }}
+                                        </td>
+
+                                        <!-- Scopes -->
+                                        <td style="vertical-align: middle;">
+                                            @if(!$token->scopes)
+                                                <span class="label label-default">No Scopes</span>
+                                            @endif
+                                        </td>
+
+                                        <!-- Revoke Button -->
+                                        <td style="vertical-align: middle;">
+                                            <a class="btn btn-sm btn-danger"
+                                                wire:click="deleteToken('{{ $token->id }}')"
+                                            >
+                                                <i class="fas fa-trash"></i>
+                                            </a>
+                                        </td>
+                                    </tr>
+                                @endforeach
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            @endif
+        </div>
     </div>
 
     <!-- Create Client Modal -->

resources/views/settings/api.blade.php

@@ -15,7 +15,6 @@
     @if (!config('app.lock_passwords'))
         <div id="app">
             <livewire:oauth-clients />
-            <passport-authorized-clients clients-url="{{ url('oauth/clients') }}" tokens-url="{{ url('oauth/tokens') }}"></passport-authorized-clients>
         </div>
     @else
         <p class="text-warning"><i class="fas fa-lock"></i> {{ trans('general.feature_disabled') }}</p>

resources/views/vendor/passport/authorize.blade.php

@@ -9,7 +9,7 @@
     <title>{{ config('app.name') }} - Authorization</title>
 
     {{-- stylesheets --}}
-    <link rel="stylesheet" href="{{ url(mix('css/all.css')) }}">
+    <link rel="stylesheet" href="{{ url(mix('css/dist/all.css')) }}">
     <style>
         .passport-authorize .container {
             margin-top: 30px;