From 36aac328e4cd4cbe847e73009eab5c46b8cfd54f Mon Sep 17 00:00:00 2001
From: spencerrlongg <spencer@spencerlong.com>
Date: Wed, 15 Nov 2023 20:32:22 -0600
Subject: [PATCH] delete vue component

---
 .../passport/PersonalAccessTokens.vue         | 311 ------------------
 resources/assets/js/vue.js                    |   9 +-
 .../livewire/personal-access-tokens.blade.php |   1 -
 3 files changed, 5 insertions(+), 316 deletions(-)
 delete mode 100644 resources/assets/js/components/passport/PersonalAccessTokens.vue

diff --git a/resources/assets/js/components/passport/PersonalAccessTokens.vue b/resources/assets/js/components/passport/PersonalAccessTokens.vue
deleted file mode 100644
index b2b41e3b6..000000000
--- a/resources/assets/js/components/passport/PersonalAccessTokens.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<style scoped>
-    .action-link {
-        cursor: pointer;
-    }
-
-    .m-b-none {
-        margin-bottom: 0;
-    }
-</style>
-
-<template>
-    <div>
-        <div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <div class="text-right" style="display: flex; justify-content: space-between; align-items: center;">
-
-                        <a class="btn btn-info btn-sm action-link pull-right" @click="showCreateTokenForm">
-                            Create New Token
-                        </a>
-                    </div>
-                </div>
-
-                <div class="panel-body">
-                    <!-- No Tokens Notice -->
-                    <p class="m-b-none" v-if="tokens.length === 0">
-                        You have not created any personal access tokens.
-                    </p>
-
-                    <!-- Personal Access Tokens -->
-                    <table class="table table-borderless m-b-none" v-if="tokens.length > 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>
-
-                        <tbody>
-                            <tr v-for="token in tokens">
-                                <!-- Client Name -->
-                                <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>
-
-                                <!-- 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>
-        </div>
-
-        <!-- Create Token Modal -->
-        <div class="modal fade" id="modal-create-token" tabindex="-1" role="dialog">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-
-                        <h4 class="modal-title">
-                            Create Token
-                        </h4>
-                    </div>
-
-                    <div class="modal-body">
-                        <!-- Form Errors -->
-                        <div class="alert alert-danger" v-if="form.errors.length > 0">
-                            <p><strong>Whoops!</strong> Something went wrong!</p>
-                            <br>
-                            <ul>
-                                <li v-for="error in form.errors">
-                                    {{ error }}
-                                </li>
-                            </ul>
-                        </div>
-
-                        <!-- Create Token Form -->
-                        <form class="form-horizontal" role="form" @submit.prevent="store">
-                            <!-- Name -->
-                            <div class="form-group">
-                                <label class="col-md-4 control-label" for="name">Name</label>
-
-                                <div class="col-md-6">
-                                    <input id="create-token-name" type="text" aria-label="name" class="form-control" name="name" v-model="form.name">
-                                </div>
-                            </div>
-
-                            <!-- Scopes -->
-                            <div class="form-group" v-if="scopes.length > 0">
-                                <label class="col-md-4 control-label">Scopes</label>
-
-                                <div class="col-md-6">
-                                    <div v-for="scope in scopes">
-                                        <div class="checkbox">
-                                            <label>
-                                                <input type="checkbox"
-                                                    @click="toggleScope(scope.id)"
-                                                    :checked="scopeIsAssigned(scope.id)">
-
-                                                    {{ scope.id }}
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-
-                    <!-- Modal Actions -->
-                    <div class="modal-footer">
-                        <button type="button" class="btn primary" data-dismiss="modal">Close</button>
-
-                        <button type="button" class="btn btn-primary" @click="store">
-                            Create
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Access Token Modal -->
-        <div class="modal fade" id="modal-access-token" tabindex="-1" role="dialog">
-            <div class="modal-dialog">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <button type="button " class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-
-                        <h4 class="modal-title">
-                            Personal Access Token
-                        </h4>
-                    </div>
-
-                    <div class="modal-body">
-                        <p>
-                            Here is your new personal access token. This is the only time it will be shown so don't lose it!
-                            You may now use this token to make API requests.
-                        </p>
-
-                        <pre><code>{{ accessToken }}</code></pre>
-                    </div>
-
-                    <!-- Modal Actions -->
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        props: ['tokenUrl', 'scopesUrl'],
-        /*
-         * The component's data.
-         */
-        data() {
-            return {
-                accessToken: null,
-
-                tokens: [],
-                scopes: [],
-
-                form: {
-                    name: '',
-                    scopes: [],
-                    errors: []
-                }
-            };
-        },
-
-        /**
-         * Prepare the component (Vue 1.x).
-         */
-        ready() {
-            this.prepareComponent();
-        },
-
-        /**
-         * Prepare the component (Vue 2.x).
-         */
-        mounted() {
-            this.prepareComponent();
-        },
-
-        methods: {
-            /**
-             * Prepare the component.
-             */
-            prepareComponent() {
-                this.getTokens();
-                this.getScopes();
-
-                $('#modal-create-token').on('shown.bs.modal', () => {
-                    $('#create-token-name').focus();
-                });
-            },
-
-            /**
-             * Get all of the personal access tokens for the user.
-             */
-            getTokens() {
-                this.$http.get(this.tokenUrl)
-                        .then(response => {
-                            this.tokens = response.data;
-                        });
-            },
-
-            /**
-             * Get all of the available scopes.
-             */
-            getScopes() {
-                this.$http.get(this.scopesUrl)
-                        .then(response => {
-                            this.scopes = response.data;
-                        });
-            },
-
-            /**
-             * Show the form for creating new tokens.
-             */
-            showCreateTokenForm() {
-                $('#modal-create-token').modal('show');
-            },
-
-            /**
-             * Create a new personal access token.
-             */
-            store() {
-                this.accessToken = null;
-
-                this.form.errors = [];
-
-                this.$http.post(this.tokenUrl, this.form)
-                        .then(response => {
-                            this.form.name = '';
-                            this.form.scopes = [];
-                            this.form.errors = [];
-
-                            this.tokens.push(response.data.token);
-
-                            this.showAccessToken(response.data.accessToken);
-                        })
-                        .catch(response => {
-                            if (typeof response.data === 'object') {
-                                this.form.errors = _.flatten(_.toArray(response.data));
-                            } else {
-                            console.dir(this.form);
-                                this.form.errors = ['Something went wrong. Please try again.'];
-                            }
-                        });
-            },
-
-            /**
-             * Toggle the given scope in the list of assigned scopes.
-             */
-            toggleScope(scope) {
-                if (this.scopeIsAssigned(scope)) {
-                    this.form.scopes = _.reject(this.form.scopes, s => s == scope);
-                } else {
-                    this.form.scopes.push(scope);
-                }
-            },
-
-            /**
-             * Determine if the given scope has been assigned to the token.
-             */
-            scopeIsAssigned(scope) {
-                return _.indexOf(this.form.scopes, scope) >= 0;
-            },
-
-            /**
-             * Show the given access token to the user.
-             */
-            showAccessToken(accessToken) {
-                $('#modal-create-token').modal('hide');
-
-                this.accessToken = accessToken;
-
-                $('#modal-access-token').modal('show');
-            },
-
-            /**
-             * Revoke the given token.
-             */
-            revoke(token) {
-                this.$http.delete(this.tokenUrl +'/'+ token.id)
-                        .then(response => {
-                            this.getTokens();
-                        });
-            }
-        }
-    }
-</script>
diff --git a/resources/assets/js/vue.js b/resources/assets/js/vue.js
index a5b903e51..916e8759a 100644
--- a/resources/assets/js/vue.js
+++ b/resources/assets/js/vue.js
@@ -21,10 +21,11 @@ Vue.component(
     require('./components/passport/AuthorizedClients.vue').default
 );
 
-Vue.component(
-    'passport-personal-access-tokens',
-    require('./components/passport/PersonalAccessTokens.vue').default
-);
+// This component has been removed and replaced with a Livewire implementation
+// Vue.component(
+//     'passport-personal-access-tokens',
+//     require('./components/passport/PersonalAccessTokens.vue').default
+// );
 
 // This component has been removed and replaced with a Livewire implementation
 // Vue.component(
diff --git a/resources/views/livewire/personal-access-tokens.blade.php b/resources/views/livewire/personal-access-tokens.blade.php
index 4781d1825..5792be802 100644
--- a/resources/views/livewire/personal-access-tokens.blade.php
+++ b/resources/views/livewire/personal-access-tokens.blade.php
@@ -1,5 +1,4 @@
 <div>
-    <p>New Livewire Personal Access Token Component</p>
     <div class="panel panel-default">
         <div class="panel-heading">
             <div class="text-right" style="display: flex; justify-content: space-between; align-items: center;">