DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Mahfuzur Rahman Saber
Mahfuzur Rahman Saber

Posted on • Updated on

Blade Component and Directive for Demo App

demo-app-image

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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'),
Enter fullscreen mode Exit fullscreen mode
  • perform if condition in code
@if(config('app.demo') === true)
show content
@endif
Enter fullscreen mode Exit fullscreen mode

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;
});
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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

php artisan view:clear
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
    ]);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Classic DEV Post:

caching

Web Caching Explained by Buying Milk at the Supermarket