improve ui for login and register

public/css/components/login.css

@@ -0,0 +1,54 @@
+.form-container {
+  background-color: #f2f2f2;
+  padding: 2rem;
+  border-radius: 8px;
+  width: 30%;
+  text-align: center;
+  margin: 0 auto;
+  margin-top: 15vh;
+
+  form {
+    div {
+      .form-group {
+        display: flex;
+        flex-direction: column;
+        align-items: start !important;
+      }
+
+      button[type="submit"] {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.form-container h1 {
+  margin-bottom: 1.5rem;
+}
+
+.form-container .btn {
+  margin-top: 1rem;
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  background-color: #007bff;
+  color: #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+
+}
+
+.form-container .btn:hover {
+  background-color: #0056b3;
+}
+
+.form-container a {
+  display: block;
+  margin-top: 1rem;
+  color: #007bff;
+  text-decoration: none;
+}
+
+.form-container a:hover {
+  text-decoration: underline;
+}

src/Form/RegistrationFormType.php

@@ -6,28 +6,32 @@ use App\Entity\Profil;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 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\OptionsResolver\OptionsResolver;
-use Symfony\Component\Validator\Constraints\IsTrue;
-use Symfony\Component\Validator\Constraints\Length;
-use Symfony\Component\Validator\Constraints\NotBlank;
 
 class RegistrationFormType extends AbstractType
 {
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
         $builder
-            ->add('name')
-            ->add('agreeTerms', CheckboxType::class, [
-                'mapped' => false,
-                'invalid_message' => 'You should agree to our terms.',
+            ->add('name', TextType::class, [
+                'label' => 'Username'
             ])
             ->add('plainPassword', PasswordType::class, [
+                'label' => 'Password',
                 'mapped' => false,
                 'attr' => ['autocomplete' => 'new-password'],
                 'invalid_message' => 'Please enter a password',
             ])
-        ;
+            ->add('agreeTerms', CheckboxType::class, [
+                'mapped' => false,
+                'invalid_message' => 'You should agree to our terms.',
+            ])
+            ->add('submit', SubmitType::class, [
+                    'label' => 'Register'
+            ]);
     }
 
     public function configureOptions(OptionsResolver $resolver): void

templates/registration/register.html.twig

@@ -3,68 +3,16 @@
 {% block title %}Register{% endblock %}
 
 {% block stylesheets %}
-    <style>
-
-
-        .form-container {
-            background-color: #ffffff;
-            padding: 2rem;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 400px;
-            text-align: center;
-        }
-
-        .form-container h1 {
-            margin-bottom: 1.5rem;
-        }
-
-        .form-container .btn {
-            margin-top: 1rem;
-            width: 100%;
-            padding: 0.5rem;
-            border: none;
-            background-color: #007bff;
-            color: #ffffff;
-            border-radius: 4px;
-            cursor: pointer;
-            
-        }
-
-        .form-container .btn:hover {
-            background-color: #0056b3;
-        }
-
-        .form-container a {
-            display: block;
-            margin-top: 1rem;
-            color: #007bff;
-            text-decoration: none;
-        }
-
-        .form-container a:hover {
-            text-decoration: underline;
-        }
-    </style>
+<link rel="stylesheet" href="{{ asset('css/components/form.css') }}">
+<link rel="stylesheet" href="{{ asset('css/components/login.css') }}">
 {% endblock %}
 
+{% form_theme registrationForm 'form/theme.html.twig' %}
+
 {% block body %}
     <div class="form-container" >
         <h1>Register</h1>
-
-        {{ form_errors(registrationForm) }}
-
-        {{ form_start(registrationForm) }}
-            {{ form_row(registrationForm.name) }}
-            {{ form_row(registrationForm.plainPassword, {
-                label: 'Password'
-            }) }}
-            {{ form_row(registrationForm.agreeTerms) }}
-
-            <button type="submit" class="btn">Register</button>
-        {{ form_end(registrationForm) }}
-
-        <a href="/login"> or Login </a>
+        {{ form(registrationForm) }}
+        <a href="/login">or Log in</a>
     </div>
 {% endblock %}

templates/security/login.html.twig

@@ -3,53 +3,13 @@
 {% block title %}Log in!{% endblock %}
 
 {% block stylesheets %}
-    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
-    <style>
-        
-        .form-container {
-            background-color: #ffffff;
-            padding: 2rem;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 400px;
-            text-align: center;
-        }
-
-        .form-container h1 {
-            margin-bottom: 1.5rem;
-        }
-
-        .form-container .btn {
-            margin-top: 1rem;
-            width: 100%;
-            padding: 0.5rem;
-            border: none;
-            background-color: #007bff;
-            color: #ffffff;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-
-        .form-container .btn:hover {
-            background-color: #0056b3;
-        }
-
-        .form-container a {
-            display: block;
-            margin-top: 1rem;
-            color: #007bff;
-            text-decoration: none;
-        }
-
-        .form-container a:hover {
-            text-decoration: underline;
-        }
-    </style>
+<link rel="stylesheet" href="{{ asset('css/components/form.css') }}">
+<link rel="stylesheet" href="{{ asset('css/components/login.css') }}">
 {% endblock %}
 
 {% block body %}
     <div class="form-container">
+        <h1 class="h3 mb-3 font-weight-normal">Please Sign In</h1>
         <form method="post">
             {% if error %}
                 <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
@@ -60,27 +20,21 @@
                     You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
                 </div>
             {% endif %}
-
-            <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
-            <label for="username">Name</label>
-            <input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus>
-            <label for="password">Password</label>
-            <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
-
-            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
-
-            {#
-                Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
-                See https://symfony.com/doc/current/security/remember_me.html
-
-                <div class="checkbox mb-3">
-                    <label>
-                        <input type="checkbox" name="_remember_me"> Remember me
-                    </label>
+            <div id="loginForm">
+                <div class="form-group">
+                    <label for="username">Name</label>
+                    <input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus>
                 </div>
-            #}
 
-            <button class="btn btn-lg btn-primary" type="submit">Sign in</button>
+                <div class="form-group">
+                    <label for="password">Password</label>
+                    <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
+                </div>
+                <div>
+                    <button class="btn btn-lg btn-primary" type="submit">Sign in</button>
+                </div>
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+            </div>
         </form>
 
         <a href="/register">Or Register</a>