FOSUserBundle. Include login form in my template - symfony

Hi I'm trying to include the login form of the FOSUser Bundle in my custom template. Like that:
{% include 'FOSUserBundle:Security:login.html.twig' %}
But I have this error:
Variable "error" does not exist in FOSUserBundle:Security:login.html.twig at line 7
Is there a way to include the template without adding something in my controller?

To overriding FosUserBundle's template you have to do this :
Create a folder FOSUserBundle/view in app/Resources
Copy the view folder of FOSUserBundle in your folder you have create just before
And you can include your template and custom FOSUser view.
Example :
layout.html.twig of FOSUser in app/Resources/FOSUserBundle/view:
{% extends ":layout:Public/layout.html.twig" %} #My layout
{% block body %}
<div>
{% block fos_user_content %}
{% endblock fos_user_content %}
</div>
{% endblock %}
And app/Resources/FOSUserBundle/view/Security/login.html.twg :
{% extends "FOSUserBundle::layout.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}
{% block fos_user_content %}
<div class="col-md-4">
<form action="{{ path("fos_user_security_check") }}" method="post">
<h2 class="form-signin-heading">Se connecter </h2>
<hr>
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<label class="sr-only" for="username">{{ 'security.login.username'|trans }}</label>
<input class="form-control" type="text" id="username" name="_username" value="{{ last_username }}" required="required" />
<label class="sr-only" for="password">{{ 'security.login.password'|trans }}</label>
<input class="form-control" type="password" id="password" name="_password" required="required" placeholder="Mot de passe" />
<div class="checkbox">
<label>
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
</label>
</div>
<input class="btn btn-primary" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />
</form>
<br>
Mot de passe perdu ?
</div>
<div class="col-md-2"></div>
<div class="col-md-3">
<h2>Pas encore inscrit ?</h2>
<hr>
<em>
nous vous invitons à vous inscrire<br />
</em>
<br /><br />
S'inscrire
</div>
{% endblock fos_user_content %}
I think there is many solutions, but according to me it's the better way to overrinding fosuser's views

This template is expected to be rendered as a full page. To include it, it might be more convenient to render the controller action.
{{ render(controller('FOSUserBundle:Security:login')) }}

Related

login display for the fos user

I had some problems using php bin/console fos:user: create in my project so I had copied the vendor of another project that is working well and then I created a file User.php but at the display of the login . I receive this while in the other project it replaces the other attributes security.login.username by username and security.login.password by password ,etc
{% trans_default_domain 'FOSUserBundle' %}
{% if error %}
<div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
<form action="{{ path("fos_user_security_check") }}" method="post">
{% if csrf_token %}
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
{% endif %}
<label for="username">{{ 'security.login.username'|trans }}</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" required="required" autocomplete="username" />
<label for="password">{{ 'security.login.password'|trans }}</label>
<input type="password" id="password" name="_password" required="required" autocomplete="current-password" />
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
<input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />
</form>
You need to set your translator to ~ in your app/config/config.yml file.
# app/config/config.yml
framework:
translator: ~

Sonata Admin : Forgotten Password

I am using Sonata Admin with SonataUser/FosUser bundles.
I want to integrate the "reset password" functionality from FosUser into Sonata. Is there a quick way to :
integrate the "forgot your password" link into the sonata login page ?
integrate the functionality with the "admin/" url prefix and the sonata html/twig layout ?
I have modified the admin login template to add the reset password link, you must extend the SonataUserBundle in order to use your custom template, follow the documentation.
The custom template must have the same name and the same directory as in SonataUserBundle. Here is the template I used :
Application\Sonata\UserBundle\Resources\views\Admin\Security\login.html.twig
{% extends base_template %}
{% block content %}
<div class="connection">
<form action="{{ path("sonata_user_admin_security_check") }}" method="post">
{% if error %}
<div class="alert alert-error">{{ error|trans({}, 'SonataUserBundle') }}</div>
{% endif %}
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<div class="control-group">
<label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
<div class="controls">
<input type="text" id="username" name="_username" value="{{ last_username }}" class="big sonata-medium"/>
</div>
</div>
<div class="control-group">
<label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
<div class="controls">
<input type="password" id="password" name="_password" class="big sonata-medium" />
</div>
</div>
<div class="control-group">
<label for="remember_me">
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}
</label>
</div>
<div class="control-group">
<a href="{{ path('fos_user_resetting_request') }}">
{{ 'forgotten_password'|trans({}, 'SonataUserBundle') }}
</a>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-primary" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
</div>
</form>
</div>
{% endblock content %}

Django styling login forms and adding additional spans

I have two questions in form-styling.
For my login, I am using Django's default auth features and haven't written any views or forms manually.
urls.py
urlpatterns += patterns(
'django.contrib.auth.views',
url(r'^login/$','login',
{'template_name':'login.html'},
name='qna_login'),
url(r'^logout/$','logout',
{'next_page':'qna_home'},
name='qna_logout'),
)
login.html
{% extends "base.html" %}
{% block content%}
{% if form.errors %}
<p class="text-warning"> Your username and/or password didn't match </p>
{% endif%}
<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">
<div class="form-group">
{% csrf_token %}
{{ form }}
<input type="submit" class="btn btn-primary" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
{% endblock %}
How do I add bootstrap styling to it?
For new user registration, I have added some bootstrap specific styles, but need to add additional spans and replace the labels with Glyphicons.
forms.py
class UserForm(forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput())
class Meta:
model = User
fields = ('username', 'email', 'password')
def __init__(self, *args, **kwargs):
super(UserForm,self).__init__(*args,**kwargs)
self.fields['username'].widget.attrs.update({'class':'form-control','placeholder':'Username'})
self.fields['email'].widget.attrs.update({'class':'form-control','placeholder':'Email'})
self.fields['password'].widget.attrs.update({'class':'form-control','placeholder':'Password'})
What I need to do is replace what is generated in the template, such as
<p><label for="id_username">Username:</label> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, numbers and #/./+/-/_ characters</span></p>
by a custom bootstrap addon and glyphicon, like
<div class="input-group">
<span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Username">
</div>
You can render each field individually instead of letting Django render the whole form with {{ form }}. You can write the template like this -
<form role="form" class="form-horizontal" method="post" action="{% url 'django.contrib.auth.views.login' %}">{% csrf_token %}
<div class="form-group">
{% for field in form %}
<div class="input-group">
<span class="input-group-addon" style="background-color:#b77b48; color:white"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control" id="{{ field.id_for_label }}" maxlength="30" name="{{ field.html_name }}" value="{{ field.value }}" type="text" />
{{ field.errors }}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
As always, like everything else, Django documentation has everything.

How to style a django form - bootstrap

I am styling my django app but Iam having trouble styling the forms. I have a contact form, in my forms.py and then I have use it in a template.
<form class="form-contact" action="" method="POST">
{% csrf_token %}
<input type="text" name="Name" id="id_name" value="{{form.name}}" />
<input type="submit" value="Submit" class="btn btn-primary">
</form>
That isn't working. I have also tried this, but still no luck, it shows styled fields but doesn't retrieve the information ( I get a message under my {{form.errors}} .
<form class="form-contact" action="" method="POST">
{% csrf_token %}
{% for field in form %}
<fieldset class="form-group">
<label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="form-control">
<input type="text" class="form-control"
name="{{ field.label }}"
id="{{ field.name }}"
value="{{ field.name }}" >
{{ field }}
<p class="help-text">{{ field.help_text }} </p>
</div>
</fieldset>
{% endfor %}
<input type="submit" value="Submit" class="btn btn-primary">
</form>
Any hint would be apreciated.
Regards.
EDIT:
This second code, is actually showing 2 input fields for each form field. If I fill the second one, the form works but, this second input has no styling...
"EDIT: This second code, is actually showing 2 input fields for each
form field."
The first input is being generated by the <input> tag that you've explicitly written:
<input type="text" class="form-control"
name="{{ field.label }}"
id="{{ field.name }}"
value="{{ field.name }}" >
The second input is being generated by the {{ field }} variable:
<div class="form-control">
<input type="text" class="form-control"
name="{{ field.label }}"
id="{{ field.name }}"
value="{{ field.name }}" >
{{ field }} <-- this one
<p class="help-text">{{ field.help_text }} </p>
</div>
"If I fill the second one, the form works but, this second
input has no styling..."
The styling isn't working because when the {{ field }} input is rendered, there's no css classes on it.
Additionally, you've switched some of the attributes of each field object (see "What changed" section below for more).
Try this code:
<form class="form-contact" action="" method="POST">
{% csrf_token %}
{% for field in form %}
<fieldset class="form-group">
<label class="control-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="form-control">
<input type="text" class="form-control"
name="{{ field.name }}"
id="id_{{ field.name }}"
value="{{ field.value }}" >
<p class="help-text">{{ field.help_text }} </p>
</div>
</fieldset>
{% endfor %}
<input type="submit" value="Submit" class="btn btn-primary">
</form>
For more on how this works, check out the "Looping over a form's fields" section of the docs. You might also be interested in "Django Bootstrap Form", a third-party-package that allows for quick and easy form styling.
What changed:
1. Removed the {{ field }} variable within the loop
2. {{ field.label }} replaced with {{ field.name }} within the name attribute
3. {{ field.name }} replaced with {{ field.value }} within the value attribute
Wrap the form in div's with container, row, and col. Also, add the input type.
<style>
.help-text {
font-style: italic;
font-variant: all-small-caps;
}
</style>
<div class="container">
<form class="my-form" action="." method="POST">
{% csrf_token %}
{% for field in form %}
<div class="form-group row">
<label class="col-12 col-form-label" for="id_{{ field.name }}">{{ field.label }}</label>
<div class="col-12">
<input
type="{{ field.field.widget.input_type }}"
class="form-control"
name="{{ field.name }}"
id="id_{{ field.name }}"
value="{{ field.value|default:'' }}"
>
</div>
<div class="col-12 help-text">{{ field.help_text }} </div>
</div>
{% endfor %}
<div class="row">
<div class="col-12">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</form>
</div>
Alternatively you can use, forms.py file for creating forms.
And install django-bootstrap and work.. It will be very interesting.

symfony2/twig: How to simulate the old slots of symfony1 in symfony2?

I just don't want to show the login form of the layout in the main login page..
I tried to set a variable in the login child template ({% set layout_login = false %}) and checking its value in the layout, but i needed to set also the variable in the layout ({% set layout_login = true %}), and it always catches the value of the variable set in the layout (true)....
And tried also setting a variable in the controller, but there isn't anything like isset() in twig...
Any idea?
Why don't you just define a block in your main layout?
{% block loginForm %}
<form />
{% endblock %}
And overload it in your login template:
{% block loginForm %}{% endblock %}
The equivalent to isset() is defined.
I wrote st like this:
{% if layout_login is not defined %}
{% if error %}
<div>{{ error|trans({}, 'FOSUserBundle') }}</div>
{% endif %}
<form action="{{ path("fos_user_security_check") }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" />
<label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
<input type="password" id="password" name="_password" />
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>
<input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
</form>
{% endif %}

Resources