feat(story-1.3): user registration with auto-login and inline validation

- RegistrationFormType: email + plainPassword, NotBlank/Email/Length(min=8) constraints - SecurityController: register action hashes password, persists user, auto-logs in via Security::login() - User entity: UniqueEntity constraint — "An account with this email already exists" - Register Twig template: inline errors per field (role=alert), blur-validation JS (client fires on blur not keystroke; server-error flag prevents blur clobbering server messages) - csrf.yaml: switched from stateless UX-dependent tokens to standard session CSRF (stateless token IDs require Stimulus JS to inject the real value — we removed Stimulus) Verified: happy path → 302 + auto-login; duplicate email → 422 + inline error; short password → 422 + inline error Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 23:25:42 -04:00
parent a55b3bd187
commit 694843bdf0
5 changed files with 248 additions and 14 deletions
@@ -1,11 +1,3 @@
-# Enable stateless CSRF protection for forms and logins/logouts
 framework:
    form:
-        csrf_protection:
-            token_id: submit
-
-    csrf_protection:
-        stateless_token_ids:
-            - submit
-            - authenticate
-            - logout
+        csrf_protection: true
@@ -4,8 +4,14 @@ declare(strict_types=1);

 namespace App\Controller;

+use App\Entity\User;
+use App\Form\RegistrationFormType;
+use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;

@@ -31,9 +37,35 @@ class SecurityController extends AbstractController
    }

    #[Route('/register', name: 'app_register', methods: ['GET', 'POST'])]
-    public function register(): Response
-    {
-        // Implemented in Story 1.3
-        return $this->render('security/register.html.twig');
+    public function register(
+        Request $request,
+        UserPasswordHasherInterface $hasher,
+        EntityManagerInterface $em,
+        Security $security,
+    ): Response {
+        if ($this->getUser()) {
+            return $this->redirectToRoute('spa');
+        }
+
+        $user = new User();
+        $form = $this->createForm(RegistrationFormType::class, $user);
+        $form->handleRequest($request);
+
+        if ($form->isSubmitted() && $form->isValid()) {
+            /** @var string $plainPassword */
+            $plainPassword = $form->get('plainPassword')->getData();
+            $user->setPassword($hasher->hashPassword($user, $plainPassword));
+
+            $em->persist($user);
+            $em->flush();
+
+            $response = $security->login($user, 'form_login', 'main');
+
+            return $response ?? $this->redirectToRoute('spa');
+        }
+
+        return $this->render('security/register.html.twig', [
+            'form' => $form,
+        ]);
    }
 }
@@ -6,11 +6,13 @@ namespace App\Entity;

 use App\Repository\UserRepository;
 use Doctrine\ORM\Mapping as ORM;
+use Symfony\Bridge\Doctrine\Validator\Constraints\UniqueEntity;
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
 use Symfony\Component\Security\Core\User\UserInterface;

 #[ORM\Entity(repositoryClass: UserRepository::class)]
 #[ORM\Table(name: '`user`')]
+#[UniqueEntity(fields: ['email'], message: 'An account with this email already exists')]
 class User implements UserInterface, PasswordAuthenticatedUserInterface
 {
    #[ORM\Id]
@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Form;
+
+use App\Entity\User;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\EmailType;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Validator\Constraints\Email;
+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('email', EmailType::class, [
+                'label' => 'Email address',
+                'constraints' => [
+                    new NotBlank(message: 'Please enter your email address'),
+                    new Email(message: 'Please enter a valid email address'),
+                ],
+            ])
+            ->add('plainPassword', PasswordType::class, [
+                'label' => 'Password',
+                'mapped' => false,
+                'constraints' => [
+                    new NotBlank(message: 'Please enter a password'),
+                    new Length(
+                        min: 8,
+                        minMessage: 'Your password must be at least {{ limit }} characters',
+                    ),
+                ],
+            ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults(['data_class' => User::class]);
+    }
+}
@@ -4,8 +4,170 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create account — pictureFrame</title>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        body {
+            font-family: system-ui, sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100dvh;
+            background: #fdf6ee;
+            color: #3a2e22;
+        }
+        .card {
+            width: 100%;
+            max-width: 380px;
+            margin: 1rem;
+            padding: 2rem;
+            background: #fff9f2;
+            border-radius: 16px;
+            border: 1px solid #e8d9c4;
+        }
+        h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; }
+        .field { margin-bottom: 1rem; }
+        label { display: block; font-size: 0.8125rem; font-weight: 600; color: #8a7060; margin-bottom: 0.375rem; }
+        input[type="email"],
+        input[type="password"] {
+            width: 100%;
+            min-height: 44px;
+            padding: 0 0.875rem;
+            border: 1px solid #e8d9c4;
+            border-radius: 10px;
+            background: #fff;
+            font-size: 1rem;
+            color: #3a2e22;
+            transition: border-color 0.15s;
+        }
+        input:focus { outline: none; border-color: #c97c3a; }
+        input[aria-invalid="true"] { border-color: #c0392b; }
+        .field-error {
+            margin-top: 0.25rem;
+            font-size: 0.8125rem;
+            color: #c0392b;
+            min-height: 1.2em;
+        }
+        .field-error:empty { display: none; }
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 44px;
+            margin-top: 1.25rem;
+            padding: 0 1.25rem;
+            background: #c97c3a;
+            color: #fff;
+            border: none;
+            border-radius: 9999px;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: opacity 0.15s;
+        }
+        .btn:hover { opacity: 0.9; }
+        .login-link { display: block; text-align: center; margin-top: 1rem; font-size: 0.875rem; color: #8a7060; }
+        .login-link a { color: #c97c3a; text-decoration: none; font-weight: 600; }
+    </style>
 </head>
 <body>
-<p>Registration — Story 1.3</p>
+<div class="card">
+    <h1>Create account</h1>
+
+    {{ form_start(form, {attr: {novalidate: 'novalidate', id: 'reg-form'}}) }}
+
+        <div class="field">
+            {{ form_label(form.email) }}
+            {{ form_widget(form.email, {attr: {
+                id: 'reg-email',
+                autocomplete: 'email',
+                'aria-describedby': 'reg-email-error',
+                'aria-invalid': form.email.vars.errors|length > 0 ? 'true' : 'false'
+            }}) }}
+            <p id="reg-email-error" class="field-error" role="alert">
+                {% for error in form.email.vars.errors %}{{ error.message }}{% endfor %}
+            </p>
+        </div>
+
+        <div class="field">
+            {{ form_label(form.plainPassword) }}
+            {{ form_widget(form.plainPassword, {attr: {
+                id: 'reg-password',
+                autocomplete: 'new-password',
+                'aria-describedby': 'reg-password-error',
+                'aria-invalid': form.plainPassword.vars.errors|length > 0 ? 'true' : 'false'
+            }}) }}
+            <p id="reg-password-error" class="field-error" role="alert">
+                {% for error in form.plainPassword.vars.errors %}{{ error.message }}{% endfor %}
+            </p>
+        </div>
+
+        <button type="submit" class="btn">Create account</button>
+
+    {{ form_end(form) }}
+
+    <p class="login-link">Already have an account? <a href="/login">Sign in</a></p>
+</div>
+
+<script>
+(function () {
+    var form = document.getElementById('reg-form');
+    var emailInput = document.getElementById('reg-email');
+    var emailError = document.getElementById('reg-email-error');
+    var pwInput = document.getElementById('reg-password');
+    var pwError = document.getElementById('reg-password-error');
+
+    function validateEmail() {
+        // Only run client-side validation when there is no server-side error already shown
+        if (emailError.dataset.serverError) return;
+        var val = emailInput.value.trim();
+        if (!val) {
+            setError(emailInput, emailError, 'Please enter your email address');
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)) {
+            setError(emailInput, emailError, 'Please enter a valid email address');
+        } else {
+            clearError(emailInput, emailError);
+        }
+    }
+
+    function validatePassword() {
+        if (pwError.dataset.serverError) return;
+        var val = pwInput.value;
+        if (!val) {
+            setError(pwInput, pwError, 'Please enter a password');
+        } else if (val.length < 8) {
+            setError(pwInput, pwError, 'Your password must be at least 8 characters');
+        } else {
+            clearError(pwInput, pwError);
+        }
+    }
+
+    function setError(input, errorEl, message) {
+        input.setAttribute('aria-invalid', 'true');
+        errorEl.textContent = message;
+    }
+
+    function clearError(input, errorEl) {
+        input.setAttribute('aria-invalid', 'false');
+        errorEl.textContent = '';
+    }
+
+    // Mark existing server errors so client-side blur doesn't clobber them
+    if (emailError.textContent.trim()) emailError.dataset.serverError = '1';
+    if (pwError.textContent.trim()) pwError.dataset.serverError = '1';
+
+    // Clear server-error flag once user starts typing
+    emailInput.addEventListener('input', function () { delete emailError.dataset.serverError; });
+    pwInput.addEventListener('input', function () { delete pwError.dataset.serverError; });
+
+    emailInput.addEventListener('blur', validateEmail);
+    pwInput.addEventListener('blur', validatePassword);
+
+    form.addEventListener('submit', function () {
+        validateEmail();
+        validatePassword();
+    });
+}());
+</script>
 </body>
 </html>