Кастомизация формы входа (на примере FOSUserBundle)

Самый проcтой способ кастомизации формы входа FOSUserBundle - использовать механизм наследования бандлов. (С предположением, что в будущем придется модифицировать не только форму входа). Покажем пример такой кастомизации с использованием bootstrap.

Для этого создадим (к, примеру) BeeprogUserBundle, парентом укажем FOSUserBundle:

<?php

namespace HarentiusBundleBeeprogUserBundle;

use SymfonyComponentHttpKernelBundleBundle;

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

Кастомизировать форму входа решил, использовав шаблон

Для перебиваем этого создаем файл Harentius/Bundle/BeeprogUserBundle/Resources/views/Security/login.html.twig (Он перебьет соответствующий файл в FOSUserBundle).

Стили можно прописать и подключить в любом удобном для вас файле/ месте, не будем на этом останавливаться. Пример твиговского шаблона (код взят по вышеуказанном линку, используется bootstrap 3, поэтому он должен быть уже подключен, также позже будет использован dropdown, так что еще нужно будет подключить и js bootstrap):

<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>

Для разнообразия, решил сделать логин не отдельной страничкой (если так, то в шаблоне нужно еще просто добавить соответствующие элементы (html, body и т.д.) или наследоваться от базового шаблона), а попапом, который появляется при нажатии кнопки:

login

В основном бандле создаю Harentius/Bundle/BeeprogBundle/Resources/views/_login.html.twig с 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>

Обратите внимание на рендер котроллера из FOSUserBundle. Возможно, это не самый лучший вариант, но он требует минимум телодвижений (если попытаться решить проблему без рендеринга контроллера, нужно будет у себя в приложении повторить, по сути, тот самый функционал (из FOSUserBundle)).

Дальше достаточно подключить у себя _login.html.twig любым удобным способом (я, к примеру, рендерил в KnpMenu, но это уже тема для другой заметки =) )