FM / passport

/home/techb158/ileadtechnology.com/resources/js/components/passport/

/home/techb158/ileadtechnology.com/resources/js/components/passport

Name	Size	Mode	Actions
AuthorizedClients.vue	3119	0644	edit dl rm
Clients.vue	15641	0644	edit dl rm
PersonalAccessTokens.vue	10545	0644	edit dl rm

Edit: /home/techb158/ileadtechnology.com/resources/js/components/passport/Clients.vue (15641B)

<template>
    <div>
        <div class="card card-default">
            <div class="card-header">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span>
                        OAuth Clients
                    </span>

<a class="action-link" tabindex="-1" @click="showCreateClientForm">
                        Create New Client
                    </a>
                </div>
            </div>

<div class="card-body">
                
                <p class="mb-0" v-if="clients.length === 0">
                    You have not created any OAuth clients.
                </p>

<table class="table table-responsive table-borderless mb-0" v-if="clients.length > 0">
                    <thead>
                        <tr>
                            <th>Client ID</th>
                            <th>Name</th>
                            <th>Secret</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>

<tbody>
                        <tr v-for="client in clients">
                            
                            <td style="vertical-align: middle;">
                                {{ client.id }}
                            </td>

<td style="vertical-align: middle;">
                                {{ client.name }}
                            </td>

<td style="vertical-align: middle;">
                                <code>{{ client.secret ? client.secret : '-' }}</code>
                            </td>

<td style="vertical-align: middle;">
                                <a class="action-link" tabindex="-1" @click="edit(client)">
                                    Edit
                                </a>
                            </td>

<td style="vertical-align: middle;">
                                <a class="action-link text-danger" @click="destroy(client)">
                                    Delete
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

<div class="modal fade" id="modal-create-client" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            Create Client
                        </h4>

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>

<div class="modal-body">
                        
                        <div class="alert alert-danger" v-if="createForm.errors.length > 0">
                            <p class="mb-0"><strong>Whoops!</strong> Something went wrong!</p>
                            <br>
                            <ul>
                                <li v-for="error in createForm.errors">
                                    {{ error }}
                                </li>
                            </ul>
                        </div>

<form role="form">
                            
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label">Name</label>

<span class="form-text text-muted">
                                        Something your users will recognize and trust.
                                    </span>
                                </div>
                            </div>

<div class="form-group row">
                                <label class="col-md-3 col-form-label">Redirect URL</label>

<span class="form-text text-muted">
                                        Your application's authorization callback URL.
                                    </span>
                                </div>
                            </div>

<div class="form-group row">
                                <label class="col-md-3 col-form-label">Confidential</label>

<span class="form-text text-muted">
                                        Require the client to authenticate with a secret. Confidential clients can hold credentials in a secure way without exposing them to unauthorized parties. Public applications, such as native desktop or JavaScript SPA applications, are unable to hold secrets securely.
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

<div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary" @click="store">
                            Create
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div class="modal fade" id="modal-edit-client" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            Edit Client
                        </h4>

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>

<div class="modal-body">
                        
                        <div class="alert alert-danger" v-if="editForm.errors.length > 0">
                            <p class="mb-0"><strong>Whoops!</strong> Something went wrong!</p>
                            <br>
                            <ul>
                                <li v-for="error in editForm.errors">
                                    {{ error }}
                                </li>
                            </ul>
                        </div>

<form role="form">
                            
                            <div class="form-group row">
                                <label class="col-md-3 col-form-label">Name</label>

<div class="form-group row">
                                <label class="col-md-3 col-form-label">Redirect URL</label>

<span class="form-text text-muted">
                                        Your application's authorization callback URL.
                                    </span>
                                </div>
                            </div>
                        </form>
                    </div>

<div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary" @click="update">
                            Save Changes
                        </button>
                    </div>
                </div>
            </div>
        </div>

<div class="modal fade" id="modal-client-secret" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            Client Secret
                        </h4>

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>

<div class="modal-body">
                        <p>
                            Here is your new client secret. This is the only time it will be shown so don't lose it!
                            You may now use this secret to make API requests.
                        </p>

<div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

clientSecret: null,

createForm: {
                    errors: [],
                    name: '',
                    redirect: '',
                    confidential: true
                },

editForm: {
                    errors: [],
                    name: '',
                    redirect: ''
                }
            };
        },

/**
         * Prepare the component (Vue 1.x).
         */
        ready() {
            this.prepareComponent();
        },

/**
         * Prepare the component (Vue 2.x).
         */
        mounted() {
            this.prepareComponent();
        },

methods: {
            /**
             * Prepare the component.
             */
            prepareComponent() {
                this.getClients();

$('#modal-create-client').on('shown.bs.modal', () => {
                    $('#create-client-name').focus();
                });

$('#modal-edit-client').on('shown.bs.modal', () => {
                    $('#edit-client-name').focus();
                });
            },

/**
             * Get all of the OAuth clients for the user.
             */
            getClients() {
                axios.get('/oauth/clients')
                        .then(response => {
                            this.clients = response.data;
                        });
            },

/**
             * Show the form for creating new clients.
             */
            showCreateClientForm() {
                $('#modal-create-client').modal('show');
            },

/**
             * Create a new OAuth client for the user.
             */
            store() {
                this.persistClient(
                    'post',
                    '/oauth/clients',
                    this.createForm,
                    '#modal-create-client'
                );
            },

/**
             * Edit the given client.
             */
            edit(client) {
                this.editForm.id = client.id;
                this.editForm.name = client.name;
                this.editForm.redirect = client.redirect;

$('#modal-edit-client').modal('show');
            },

/**
             * Update the client being edited.
             */
            update() {
                this.persistClient(
                    'put',
                    '/oauth/clients/' + this.editForm.id,
                    this.editForm,
                    '#modal-edit-client'
                );
            },

/**
             * Persist the client to storage using the given form.
             */
            persistClient(method, uri, form, modal) {
                form.errors = [];

axios[method](uri, form)
                    .then(response => {
                        this.getClients();

form.name = '';
                        form.redirect = '';
                        form.errors = [];

$(modal).modal('hide');

if (response.data.plainSecret) {
                            this.showClientSecret(response.data.plainSecret);
                        }
                    })
                    .catch(error => {
                        if (typeof error.response.data === 'object') {
                            form.errors = _.flatten(_.toArray(error.response.data.errors));
                        } else {
                            form.errors = ['Something went wrong. Please try again.'];
                        }
                    });
            },

/**
             * Show the given client secret to the user.
             */
            showClientSecret(clientSecret) {
                this.clientSecret = clientSecret;

$('#modal-client-secret').modal('show');
            },

/**
             * Destroy the given client.
             */
            destroy(client) {
                axios.delete('/oauth/clients/' + client.id)
                        .then(response => {
                            this.getClients();
                        });
            }
        }
    }
</script>