Git Product home page Git Product logo

vue-impersonate's Introduction

VueJS Frontend Component for integration for Laravel Impersonate

This package adds a really simple frontend component written as a self contained Vuejs 2 component to allow you users to easily impersonate others via the API provided by https://github.com/404labfr/laravel-impersonate.

Preview

Preview

Usage

  1. Install via composer composer require owenmelbz/vue-impersonate

  2. Register the service provider (if the auto discovery does not work) - typically done inside the app.php providers array e.g OwenMelbz\VueImpersonate\VueImpersonateServiceProvider::class

  3. There are 3 publishable components - the only required component is the javascript which you can publish with php artisan vendor:publish then select vue-impersonate-javascript (required). This will copy the .vue component into resources/js/components/vue-impersonate.vue - feel free to move this.

  4. You must then include the component in your javascript bundle, typically achieved from within an entry point such as app.js e.g Vue.component('vue-impersonate', require('./components/vue-impersonate.vue'));

  5. Once published you should make sure you've set up laravel-impersonate correctly by including the correct traits, and methods and routes to allow impersonating.

  6. Once laravel-impersonate is set up you should include the blade directive within your template @vueImpersonate - this should be housed within your vuejs container e.g #app - it will only render for users who possess the canImpersonate permissions.

Configuration

Display name

You can change what is displayed in the dropdown by changing the display_name_field from within the published config - you can use accessors/mutators here or normal database columns.

Custom vue directive

If you want to rename the component from vue-impersonate you must publish the config file via php artisan vendor:publish and change it within the config under the custom_directive param.

Custom user provider

By default laravel uses providers to log in users, this is defined within the config/auth.php then within the providers array. We use the class defined within the model property of the provider you define. By default it is called users so that we'll also uses the configured class to populate the list of users on the frontend.

Custom list of users

If you want more fine-grain control over which users show in the dropdown, you can set your own route and define it within the custom_route and we'll use that to display the users. You must return a JSON array with each user object containing at least an id and display_name field. e.g

[
    {
        id: 12,
        display_name: 'User X :: [email protected]',
    },
    {
        id: 14,
        display_name: 'User Y :: [email protected]',
    },
];

vue-impersonate's People

Contributors

lloy0076 avatar owenmelbz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.