Customizing login form (using FOSUserBundle as an example)

The simplest way to customize the login form in FOSUserBundle is to use the mechanism of bundle inheritance. (Assuming that in the future it will be necessary to modify not only the login form). Let's show an example of such customization using bootstrap.

To do this, let's create (for example) BeeprogUserBundle, with FOSUserBundle specified as the parent:

<?php

namespace HarentiusBundle\BeeprogUserBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

class HarentiusBeeprogUserBundle extends Bundle {/** * {@inheritDoc} */public function getParent() { return 'FOSUserBundle'; } }

I decided to customize the login form using a template from this link

To override it, create a file Harentius/Bundle/BeeprogUserBundle/Resources/views/Security/login.html.twig (It will override the corresponding file in FOSUserBundle).

You can specify and include styles in any convenient file/place, let's not dwell on this. An example of a twig template (the code is taken from the mentioned link, bootstrap 3 is used, so it should already be included, later dropdown will be used, so bootstrap js also needs to be included):

<h3>Please Log In, or <a href="#">Sign Up</a></h3>
<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6">
        <a href="#" class="btn btn-lg btn-primary btn-block">Facebook</a>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6">
        <a href="#" class="btn btn-lg btn-info btn-block">Google</a>
    </div>
</div>
<div class="login-or">
    <hr class="hr-or">
    <span class="span-or">or</span>
</div>
<form action="{{ path('fos_user_security_check') }}" method="POST" class="fos_user_login">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
    <div class="form-group">
        <label for="inputUsernameEmail">Username or email</label>
        <input type="text" id="inputUsernameEmail" name="_username" value="{{ last_username }}" required="required" class="form-control" />
    </div>
    <div class="form-group">
        <a class="pull-right" href="#">Forgot password?</a>
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" name="_password" required="required" />
    </div>
    <div class="checkbox pull-right">
        <label>
            <input type="checkbox">
            Remember me </label>
    </div>
    <button type="submit" class="btn btn btn-primary">
        Log In
    </button>
</form>

For variety, I decided to make the login not a separate page (if it were, then in the template you would simply need to add the corresponding elements (html, body, etc.) or inherit from a base template), but a popup that appears when you click the button:

In the main bundle, I create Harentius/Bundle/BeeprogBundle/Resources/views/_login.html.twig with a dropdown:

<div class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggler">Login</a>
    <div class="dropdown-menu pull-right login-menu">
        <div class="row">
            <div class="main">
                {{ render(controller('FOSUserBundle:Security:login')) }}
            </div>
        </div>
    </div>
</div>

Note the controller rendering from FOSUserBundle. This may not be the best option, but it requires a minimum of effort (if you try to solve the problem without rendering the controller, you will need to replicate the functionality (from FOSUserBundle) in your application).

Next, just include _login.html.twig wherever you like (for example, I rendered it in KnpMenu, but that's already a topic for another note =) )