martes, 23 de septiembre de 2014

FOSUserBundle - Parte IX - Overriding Profile

Vamos a sustituir el formulario del perfil del usuario, para que pueda editar y agregar la información que crea pertinente.

mkdir src/Petramas/MainBundle/Form/Type/


cp vendor/friendsofsymfony/user-bundle/FOS/UserBundle/Form/Type/ProfileFormType.php src/Petramas/Petramas/MainBundle/Form/Type/
 
y luego cambiamos su contenido a esto:

<?php

namespace Petramas\MainBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;
use Symfony\Component\Security\Core\Validator\Constraint\UserPassword;

class ProfileFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        parent::buildForm($builder, $options);

        $builder
            ->add('username')
            ->add('email')
            ->add('firstname')
            ->add('lastname')
            ->add('picture')
            ->add('current_password', 'password', array(
                'label' => 'form.current_password',
                'translation_domain' => 'FOSUserBundle',
                'mapped' => false,
            ))
        ;
    }

    public function setDefaultOptions(OptionsResolverInterface $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'Nploid\MainBundle\Entity\User',
            'intention'  => 'profile',
        ));
    }

    public function getName()
    {
        return 'petramas_main_profile';
    }
}

ahora debemos declararlo como servicio para que Symfony use este FormType:

nano src/Petramas/MainBundle/Resources/config/services.yml
 
services:
    petramas_main.profile.form.type:
        class: Petramas\MainBundle\Form\Type\ProfileFormType
        arguments: [%fos_user.model.user.class%]
        tags:
            - { name: form.type, alias: petramas_main_profile }

luego habilitaremos este servicio en el config.yml

nano app/config/config.yml

agregamos debajo de imports:

- { resource: "@PetramasMainBundle/Resources/config/services.yml" }

y debajo de fos_user:

    profile:
        form:
            type: petramas_main_profile

si en este momento modificamos o visualizamos la información del perfil del usuario nos daremos con la sorpresa que los nuevos campos han aparecido, pero no tienen los estilos adecuados.

Para ello sustituiremos la plantilla de edición.

mkdir src/Petramas/MyFOSUserBundle/Resources/view/Profile/
nano src/Petramas/MyFOSUserBundle/Resources/view/Profile/edit_content.html.twig
 
{% extends 'PetramasMainBundle::layout.html.twig' %}

{% block content -%}
{{ form_start(form, {'attr': {'class': 'form-horizontal fos_user_profile_edit', 'role': 'form'}}) }}
    {{ form_errors(form) }}
    <div class="form-group{% if form.username.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.username, null, {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
        <div class="col-sm-10">
            {{ form_widget(form.username, {'attr': {'class': 'form-control'}}) }}
            {% if form.username.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.username.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
    <div class="form-group{% if form.email.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.email, null, {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
        <div class="col-sm-10">
            {{ form_widget(form.email, {'attr': {'class': 'form-control'}}) }}
            {% if form.email.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.email.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
        <div class="form-group{% if form.firstname.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.firstname, null, {'label_attr': {'class': 'col-sm-2 control-label'} }) }}
        <div class="col-sm-10">
            {{ form_widget(form.firstname, {'attr': {'class': 'form-control'} }) }}
            {% if form.firstname.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.firstname.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
    <div class="form-group{% if form.lastname.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.lastname, null, {'label_attr': {'class': 'col-sm-2 control-label'} }) }}
        <div class="col-sm-10">
            {{ form_widget(form.lastname, {'attr': {'class': 'form-control'} }) }}
            {% if form.lastname.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.lastname.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
    <div class="form-group{% if form.picture.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.picture, null, {'label_attr': {'class': 'col-sm-2 control-label'} }) }}
        <div class="col-sm-10">
            {{ form_widget(form.picture, {'attr': {'class': 'form-control'} }) }}
            {% if form.picture.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.picture.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
    <div class="form-group{% if form.current_password.vars.errors[0].message is defined %} has-error{% endif %}">
        {{ form_label(form.current_password, null, {'label_attr': {'class': 'col-sm-2 control-label'}}) }}
        <div class="col-sm-10">
            {{ form_widget(form.current_password, {'attr': {'class': 'form-control'}}) }}
            {% if form.current_password.vars.errors[0].message is defined %}
            <span class="help-block">
                {{ form.current_password.vars.errors[0].message }}
            </span>
            {% endif %}
        </div>
    </div>
    <button class="btn btn-primary" type="submit">{{ 'profile.edit.submit'|trans({}, 'FOSUserBundle') }}</button>
{{ form_end(form) }}
{% endblock %} 

y por último la plantilla de detalles:


nano src/Petramas/MyFOSUserBundle/Resources/view/Profile/show_content.html.twig

{% extends 'PetramasMainBundle::layout.html.twig' %}

{% block content -%}
{% trans_default_domain 'FOSUserBundle' %}
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label">{{ 'profile.show.username'|trans }}</label>
        <div class="col-sm-10">
            <p class="form-control-static">{{ user.username }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">{{ 'profile.show.email'|trans }}</label>
        <div class="col-sm-10">
            <p class="form-control-static">{{ user.email }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">{{ 'profile.show.firstname'|trans }}</label>
        <div class="col-sm-10">
            <p class="form-control-static">{{ user.firstname }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">{{ 'profile.show.lastname'|trans }}</label>
        <div class="col-sm-10">
            <p class="form-control-static">{{ user.lastname }}</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">{{ 'profile.show.picture'|trans }}</label>
        <div class="col-sm-10">
            <p class="form-control-static">{{ user.picture }}</p>
        </div>
    </div>
</form>
<a class="btn btn-primary" href="{{ path('fos_user_profile_edit') }}">Edit</a>
<a class="btn btn-primary" href="{{ path('fos_user_change_password') }}">Change Password</a>
{% endblock %}