Design Config & Security Setup

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

With about six lines of code, we got a fully functional admin area. It must be our birthday. But now... we need to learn how to take control and really customize!

And for most things... it's... um... easy... because EasyAdminBundle let's us control almost anything via configuration. Back on its README, scroll up and click to view the full docs.

The bundle has great docs, so we'll mostly cover the basics and then dive into the really tough stuff. Let's start with design.

Right now, in the upper left corner, it says, "EasyAdmin"... which is probably not what I want. Like most stuff, this can be changed in the config. Add a site_name key set to AquaNote:

... lines 1 - 80
easy_admin:
site_name: 'AquaNote'
... lines 83 - 88

Actually, to be fancy, add a bit of HTML in this:

... lines 1 - 80
easy_admin:
site_name: 'Aqua<i>Note</i>'
... lines 83 - 88

Refresh! Sweet! What else can we do?

The design Config Key

Well, eventually, we'll learn how to override the EasyAdminBundle templates... which pretty much means you can customize anything. But a lot of things can be controlled here, under a design key.

For example, brand_color. This controls the blue used in the layout. Set it to #819b9a to match our front-end a bit better:

... lines 1 - 80
easy_admin:
... line 82
design:
brand_color: '#81b9ba'
... lines 85 - 90

Try that! Got it!

But what if we need to change something more specific... like if we want the branding name to be a darker gray color? Let's see... that means we want to set the color of the .main-header .logo anchor tag. So... how can we do that? The way you normally would: in CSS. Create a new file in web/css: custom_backend.css. Add the .main-header .logo and make its color a bit darker:

.main-header .logo {
color: #3a3a3a;
}

Simple... but how do we include this on the page... because we don't have control over any of these templates yet. Well, like most things... it's configurable: add assets, css then pass an array with the path: css/custom_backend.css:

... lines 1 - 80
easy_admin:
... line 82
design:
... line 84
assets:
css: ['css/custom_backend.css']
... lines 87 - 92

And yes! There is a js key and it works the same. We'll use it a bit later. Refresh to see our sweet styling skills. Woohoo!

There are a few other keys under design and we'll use some of them. But they're all pretty simple and this stuff is documented under "Basic configuration" and "Design Configuration".

Adding Security

Before we keep going... we need to talk security! Because right now, I can log out and go back to /easyadmin with no problem. This is totally open to the public. Fun!

How can we configure security in EasyAdminBundle? We don't! This is just a normal page... so we can use Symfony's normal security to protect it.

The easiest way is in security.yml via access_control:

... lines 1 - 2
security:
... lines 4 - 38
access_control:
# - { path: ^/admin, roles: ROLE_ADMIN }

Uncomment the example, use ^/easyadmin and check for ROLE_ADMIN:

... lines 1 - 2
security:
... lines 4 - 38
access_control:
- { path: ^/easyadmin, roles: ROLE_ADMIN }

That is it!

When we refresh... yep! We're bounced back to the login page. Log back in with weaverryan+1@gmail.com password iliketurtles. And we're back! We can also secure things in a more granular way... and I'll show you how later.

Now, let's start customizing the list page.

Leave a comment!

  • 2020-03-12 Diego Aguiar

    Just bare in mind that only admin users are allowed to login to your application. If you also have "normal" users, then, you will have to create another login form with its own Authenticator

  • 2020-03-12 Sung Lee

    Cool. That answers my question. I had to update checkCrecentials function in AppAuthenticator.php like the following:

    public function checkCredentials($credentials, UserInterface $user) {
    if (!$this->security->isGranted(['ROLE_ADMIN'])) {
    throw new CustomUserMessageAuthenticationException('You do not have a permission to use this tool.');
    }

    return $this->passwordEncoder->isPasswordValid($user, $credentials['password']);
    }

    Thanks!

  • 2020-03-12 Diego Aguiar

    Hey Sung Lee

    I think you can achieve that if you are using a Guard Login Authenticator. In the checkCredentials() method, you can check if the user has such role, and if not, you can set up a flag to remember that this was the reason of login failure. Then, you just have to override onAuthenticationFailure() method, and set the correct error message to the session. Does it makes sense?

    Cheers!

  • 2020-03-12 Sung Lee

    Is it possible to show "Access Denied" in the login form as a form error message like "Invalid credentials." with the security setup?
    With the current setup, if a non-admin user tries to login, it goes to Symfony error page.