Blade Component and Directive for Demo App
Tags: laravel, blade, php, javascript
Published: 2022-09-10 21:44:56


![demo-app-image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzjopzsmcswlih6vtbqd.png)



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](https://dev.to/saaberdev/blade-component-and-directive-for-demo-app-2-pull-like-package-using-git-and-github-3bb3).