initial display work done

app/Http/Controllers/ProfileController.php

@@ -87,9 +87,8 @@ class ProfileController extends Controller
      *
      * @author [A. Gianotto] [<snipe@snipe.net>]
      * @since [v4.0]
-     * @return View
      */
-    public function api()
+    public function api(): \Illuminate\Contracts\View\View
     {
 
         // Make sure the self.api permission has been granted
@@ -97,7 +96,7 @@ class ProfileController extends Controller
             abort(403);
         }
 
-        return view('account/api');
+        return view('account/api')->with('tokens', Auth::user()->tokens()->get());
     }
 
     /**

resources/views/account/api.blade.php

@@ -14,12 +14,12 @@
             <div class="col-md-8">
 
                  @if (!config('app.lock_passwords'))
-                    <passport-personal-access-tokens
+{{--                    <passport-personal-access-tokens--}}
-                        token-url="{{ url('oauth/personal-access-tokens') }}"
+{{--                        token-url="{{ url('oauth/personal-access-tokens') }}"--}}
-                        scopes-url="{{ url('oauth/scopes') }}">
+{{--                        scopes-url="{{ url('oauth/scopes') }}">--}}
-                    </passport-personal-access-tokens>
+{{--                    </passport-personal-access-tokens>--}}
                     {{-- New Component --}}
-                    <x-personal-access-tokens.panel />
+                    <x-personal-access-tokens.panel :tokens="$tokens" />
                  @else
                      <p class="help-block">{{ trans('general.feature_disabled') }}</p>
                 @endif

resources/views/components/personal-access-tokens/panel.blade.php

@@ -1,6 +1,7 @@
 @props([
     'token_url' => url('oauth/personal-access-tokens'),
     'scopes_url' => url('oauth/scopes'),
+    'tokens' => [],
 ])
 
 <div>
@@ -21,6 +22,61 @@
                 </a>
             </div>
         </div>
+        <div class="panel-body">
+            <!-- No Tokens Notice -->
+            @if($tokens->count() === 0)
+                <p class="m-b-none"
+                >
+                    You have not created any personal access tokens.
+                </p>
+            @endif
+
+            <!-- Personal Access Tokens -->
+            <table class="table table-borderless m-b-none">
+                @if($tokens->count() > 0)
+                    <thead>
+                    <tr>
+                        <th class="col-md-3">Name</th>
+                        <th class="col-md-2">Created</th>
+                        <th class="col-md-2">Expires</th>
+                        <th class="col-md-2"><span class="sr-only">Delete</span></th>
+                    </tr>
+                    </thead>
+                @endif
+
+                <tbody>
+                <tr>
+                    <!-- Client Name -->
+                    @foreach($tokens as $token)
+                        <td style="vertical-align: middle;">
+                            {{ $token->name }}
+                        </td>
+
+                        <td style="vertical-align: middle;">
+                            {{ $token->created_at }}
+                        </td>
+
+                        <td style="vertical-align: middle;">
+                            {{ $token->expires_at }}
+                        </td>
+                    @endforeach
+
+                    <!-- Delete Button -->
+                    <td style="vertical-align: middle;" class="text-right">
+                        <a class="action-link btn btn-danger btn-sm" @click="revoke(token)">
+                            <i class="fas fa-trash"></i>
+                        </a>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+
+
+
     </div>
 
+    <!-- Create Token Modal -->
+    <x-personal-access-tokens.create-token-modal />
+
 </div>