Separate view layout from RegistrationFormType concerns

assets/styles/app.scss

@@ -23,6 +23,11 @@ form input {
   //margin-top: 20px;
 }
 
+form input[type=checkbox]{
+  padding: 5px;
+  border: 1px solid;
+}
+
 button[type=submit]{
   box-shadow: 0 2px 0 #3B8C7E;
   border: none;

src/Form/RegistrationFormType.php

@@ -11,6 +11,8 @@ use Symfony\Component\Form\Extension\Core\Type\PasswordType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Validator\Constraints\IsTrue;
 use Symfony\Component\Validator\Constraints\Length;
@@ -24,10 +26,8 @@ class RegistrationFormType extends AbstractType
 
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
-        $row_attr = ['class' => 'form-group d-flex flex-column m-auto mb-4 col-6',];
         $builder
             ->add('email',EmailType::class, [
-                'row_attr' => $row_attr
             ])
             ->add('agreeTerms', CheckboxType::class, [
                 'mapped' => false,
@@ -55,24 +55,20 @@ class RegistrationFormType extends AbstractType
                         'max' => 4096,
                     ]),
                 ],
-                'row_attr' => $row_attr
             ])
             ->add('firstName', TextType::class,
             ['constraints' => [new NotBlank(['message' => 'Please enter your first name'])],
-                'row_attr' => $row_attr
             ])
             ->add('lastName', TextType::class,
                 ['constraints' => [new NotBlank(['message' => 'Please enter your last name'])],
-                    'row_attr' => $row_attr
                 ])
             ->add('captcha', CaptchaType::class,[
                 'label' => 'Captcha',
                 'required' => false,
                 'reload' => true,
                 'as_url' => true,
-                'row_attr' => $row_attr
             ])
-            ->add('submit', SubmitType::class, ['label' => 'Register', 'row_attr' => $row_attr])
+            ->add('submit', SubmitType::class, ['label' => 'Register'])
         ;
     }
 

templates/registration/register.html.twig

@@ -8,20 +8,20 @@
     {% endfor %}
 
     {{ form_start(registrationForm, {'attr': {'class': 'd-flex flex-column justify-content-center'}}) }}
-    {{ form_row(registrationForm.firstName)  }}
-    {{ form_row(registrationForm.lastName) }}
-    {{ form_row(registrationForm.email) }}
+    {{ form_row(registrationForm.firstName, {'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-4 col-6'}})  }}
+    {{ form_row(registrationForm.lastName, {'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-4 col-6'}}) }}
+    {{ form_row(registrationForm.email, {'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-4 col-6'}}) }}
     {{ form_row(registrationForm.plainPassword, {
       label: 'Password'
+      , 'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-4 col-6'}
     }) }}
 
-    {{ form_row(registrationForm.captcha) }}
-    <div class="form-group d-flex flex-row m-auto mb-4 col-6">
-      {{ form_label(registrationForm.agreeTerms) }} {{ form_widget(registrationForm.agreeTerms, {'attr': {'class': 'ms-3'}}) }}
-    </div>
+    {{ form_row(registrationForm.captcha, {'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-5 col-6'}}) }}
+    {{ form_row(registrationForm.agreeTerms, {'row_attr': {'class' : 'form-group d-flex flex-row m-auto mb-4 col-6 justify-content-center'},
+    'label_attr': { 'class' : 'ms-3'},
+    'attr':{'class':'d-flex flex-column justify-content-center'}}) }}
 
-    {{ form_row(registrationForm.submit) }}
-    {#        <button type="submit" class="btn">Register</button>#}
+    {{ form_row(registrationForm.submit, {'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-4 col-6'}}) }}
     {{ form_end(registrationForm) }}
   </div>
 {% endblock %}