Blade Component and Directive for Demo App

As a beginner when you build demo projects you may wish to showcase your project without sharing credentials. So you need to create a way to login for demo app. It is very simple to do. But why not we make component for that. For me it looks elegant. Let's take a look how we can achieve this.

First we will create a layout for that specific section.

php artisan make:component Demo/LoginAsDemoLayout

This will generate a blade component in resources/views/components/login-as-demo-layout.blade.php

Put this code over there.

<div>
    <div class="row justify-content-center mt-3">
        <div class="col-md-12">
            {{ $slot }}
        </div>
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function () {
            $('.login_as').on('click', function () {
                var $_role = $(this).attr('id').replace('login_as_', '');
                $.ajax({
                    url: "{{ route('login_as') }}",
                    type: "POST",
                    data: { param: $_role },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (data) {
                        window.location.href = data.redirect
                    }
                });
            });
        });
    </script>
@endpush

Now create a button component without creating class for that named login-as.blade.php in resources/views/components/demo/buttons

Copy and paste this code over there.

<div>
    @foreach($roles as $role)
        <button id="login_as_{{ $role }}" class="login_as btn btn-primary btn-block">Login as {{ ucwords(preg_replace('/[-,_]/', ' ', $role)) }}</button>
    @endforeach
</div>

Now you may wonder where this $roles came from. Here is the magic of blade components.

Put this code where you want to show your buttons.

<x-demo.login-as-demo-layout>
     <x-demo.buttons.login-as :roles="['super-admin', 'admin', 'manager']"/>
</x-demo.login-as-demo-layout>

• x-demo.login-as-demo-layout - this is the main layout for what i want to display in the demo section.
• x-demo.buttons.login-as - these are the buttons

If you notice you will see in x-demo.buttons.login-as there is something like attribute which is actually called a prop :roles. This prop act like a variable. So we can pass anything in the variable.

In this scenario, we passed an array which means we can add as many item as we need. Now let's say you have a new role instead of doing manually you can push another item in the array. You can pass the role dynamically from your database as well. Which is pretty cool right ?

Now let me show you another cool part and it is called Blade If Directive.

Imagine you want to disable your demo section.

So simply you can do this.

• add a key APP_DEMO in the .env and set it to true
• add that key in config/app.php

'demo' => env('APP_DEMO', 'false'),

• perform if condition in code

@if(config('app.demo') === true)
show content
@endif

But isn't this traditional way. Why not create a permanent directive for demo only.

Just follow above steps except if condition part and copy this simple code inside boot method in AppServiceProvider.

Blade::if('_demo', function () {
    return config('app.demo') === true;
});

Usage

@_demo
{{-- Login As Component --}}
<x-demo.login-as-demo-layout>
    <x-demo.buttons.login-as :roles="['super-admin', 'admin', 'manager']"/>
</x-demo.login-as-demo-layout>
@end_demo

If in some case it does not work. Run this command.

php artisan view:clear

Now you may thinking why I did not put ajax's controller code in the beginning of this blog, well that's because this is not the scope of this blog, also it depends how you want to create your own controller. May be you want to see how I did. Here it is.

• Simply create an invokable controller

php artisan make:controller Auth/LoginAsController --invokable

• and paste this code in there

public function __invoke(Request $request)
{
    $login_as = $request->get('param');
    $find_user = function ($email) {
        $this->user =  User::where('email', '=', $email)->first();
    };

    match ($login_as) {
        'super_admin' => $find_user(SUPER_ADMIN),
        'admin' => $find_user(ADMIN),
        'manager' => $find_user(MANAGER),
        'default' => 'Could not find user'
    };

    Auth::login($this->user);

    return response()->json([
        'msg' => 'Logged in successful',
        'redirect' => redirect()->intended()->getTargetUrl() // use appropriate url where you want to redirect
    ]);
}

I personally use this in all my application. You can code once and use it in all your projects using a simple Git Pull command. I will explain this in next blog.