feat(story-2.2+2.3): device setup page, account linking, naming & configuration

Story 2.2 — /setup/{mac} Twig page (no Vue, works JS-disabled):
- Register tab: creates account + logs in + links device → /setup/{mac}/configure
- Login tab: manual credential check via UserPasswordHasherInterface + Security::login()
  + links device → /setup/{mac}/configure
- Re-provisioning: DeviceService.linkToUser() atomically transfers ownership + stubs
  purgeDeviceHistory() (completed in Epic 3 when Image/Approval entities exist)

Story 2.3 — /setup/{mac}/configure (requires auth):
- GET: device name, orientation (landscape/portrait), rotation interval (6/12/24/48/168h),
  uniqueness window (5/10/20/50 cycles)
- POST: validates name, saves to Device entity, redirects to Vue SPA
- Device entity: mac, name, orientation (Orientation enum), rotationIntervalHours,
  uniquenessWindow, user (ManyToOne), linkedAt
- PATCH /api/devices/{id}: Vue SPA can edit any device field (Story 2.3 "edit from app")
- GET /api/devices: list authenticated user's devices
- Migration: create device table with Orientation enum column

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

migrations/Version20260428044656.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20260428044656 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE TABLE device (id INT GENERATED BY DEFAULT AS IDENTITY NOT NULL, mac VARCHAR(17) NOT NULL, name VARCHAR(100) NOT NULL, orientation VARCHAR(255) NOT NULL, rotation_interval_hours INT NOT NULL, uniqueness_window INT NOT NULL, linked_at TIMESTAMP(0) WITHOUT TIME ZONE NOT NULL, user_id INT NOT NULL, PRIMARY KEY (id))');
+        $this->addSql('CREATE UNIQUE INDEX UNIQ_92FB68E1713EB65 ON device (mac)');
+        $this->addSql('CREATE INDEX IDX_92FB68EA76ED395 ON device (user_id)');
+        $this->addSql('ALTER TABLE device ADD CONSTRAINT FK_92FB68EA76ED395 FOREIGN KEY (user_id) REFERENCES "user" (id) NOT DEFERRABLE');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE device DROP CONSTRAINT FK_92FB68EA76ED395');
+        $this->addSql('DROP TABLE device');
+    }
+}

src/Controller/DeviceApiController.php

@@ -0,0 +1,86 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use App\Entity\Device;
+use App\Entity\User;
+use App\Enum\Orientation;
+use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\Security\Http\Attribute\IsGranted;
+
+#[Route('/api/devices')]
+#[IsGranted('ROLE_USER')]
+class DeviceApiController extends AbstractController
+{
+    #[Route('', name: 'api_devices_list', methods: ['GET'])]
+    public function list(EntityManagerInterface $em): JsonResponse
+    {
+        /** @var User $user */
+        $user = $this->getUser();
+        $devices = $em->getRepository(Device::class)->findBy(['user' => $user]);
+
+        return $this->json(array_map($this->serialize(...), $devices));
+    }
+
+    #[Route('/{id}', name: 'api_device_update', methods: ['PATCH'])]
+    public function update(int $id, Request $request, EntityManagerInterface $em): JsonResponse
+    {
+        /** @var User $user */
+        $user   = $this->getUser();
+        $device = $em->getRepository(Device::class)->findOneBy(['id' => $id, 'user' => $user]);
+
+        if (!$device) {
+            return $this->json(['error' => 'Device not found'], Response::HTTP_NOT_FOUND);
+        }
+
+        $body = json_decode($request->getContent(), true) ?? [];
+
+        if (isset($body['name'])) {
+            $name = trim((string) $body['name']);
+            if (empty($name)) {
+                return $this->json(['error' => 'Name cannot be empty'], Response::HTTP_UNPROCESSABLE_ENTITY);
+            }
+            $device->setName($name);
+        }
+
+        if (isset($body['orientation'])) {
+            $orientation = Orientation::tryFrom($body['orientation']);
+            if (!$orientation) {
+                return $this->json(['error' => 'Invalid orientation'], Response::HTTP_UNPROCESSABLE_ENTITY);
+            }
+            $device->setOrientation($orientation);
+        }
+
+        if (isset($body['rotationIntervalHours'])) {
+            $device->setRotationIntervalHours(max(1, (int) $body['rotationIntervalHours']));
+        }
+
+        if (isset($body['uniquenessWindow'])) {
+            $device->setUniquenessWindow(max(1, (int) $body['uniquenessWindow']));
+        }
+
+        $em->flush();
+
+        return $this->json($this->serialize($device));
+    }
+
+    private function serialize(Device $d): array
+    {
+        return [
+            'id'                   => $d->getId(),
+            'mac'                  => $d->getMac(),
+            'name'                 => $d->getName(),
+            'orientation'          => $d->getOrientation()->value,
+            'rotationIntervalHours' => $d->getRotationIntervalHours(),
+            'uniquenessWindow'     => $d->getUniquenessWindow(),
+            'linkedAt'             => $d->getLinkedAt()->format(\DateTimeInterface::ATOM),
+        ];
+    }
+}

src/Controller/SetupController.php

@@ -0,0 +1,152 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use App\Entity\Device;
+use App\Entity\User;
+use App\Enum\Orientation;
+use App\Form\RegistrationFormType;
+use App\Service\DeviceService;
+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\Attribute\IsGranted;
+
+#[Route('/setup/{mac}', requirements: ['mac' => '[0-9A-Fa-f]{2}(:[0-9A-Fa-f]{2}){5}'])]
+class SetupController extends AbstractController
+{
+    #[Route('', name: 'setup_index', methods: ['GET', 'POST'])]
+    public function index(
+        string $mac,
+        Request $request,
+        UserPasswordHasherInterface $hasher,
+        EntityManagerInterface $em,
+        Security $security,
+        DeviceService $deviceService,
+    ): Response {
+        // If already authenticated, link device and proceed to configure
+        if ($this->getUser()) {
+            /** @var User $user */
+            $user = $this->getUser();
+            $device = $deviceService->linkToUser($mac, $user);
+            if (empty($device->getName())) {
+                return $this->redirectToRoute('setup_configure', ['mac' => $mac]);
+            }
+            return $this->redirectToRoute('spa');
+        }
+
+        $regForm  = $this->createForm(RegistrationFormType::class, new User(), [
+            'action' => $this->generateUrl('setup_register', ['mac' => $mac]),
+        ]);
+        $loginError = $request->getSession()->get('_setup_login_error');
+        $request->getSession()->remove('_setup_login_error');
+
+        return $this->render('setup/index.html.twig', [
+            'mac'        => $mac,
+            'reg_form'   => $regForm,
+            'login_error' => $loginError,
+        ]);
+    }
+
+    #[Route('/register', name: 'setup_register', methods: ['POST'])]
+    public function register(
+        string $mac,
+        Request $request,
+        UserPasswordHasherInterface $hasher,
+        EntityManagerInterface $em,
+        Security $security,
+        DeviceService $deviceService,
+    ): Response {
+        $user = new User();
+        $form = $this->createForm(RegistrationFormType::class, $user);
+        $form->handleRequest($request);
+
+        if ($form->isSubmitted() && $form->isValid()) {
+            /** @var string $plain */
+            $plain = $form->get('plainPassword')->getData();
+            $user->setPassword($hasher->hashPassword($user, $plain));
+            $em->persist($user);
+            $em->flush();
+
+            $security->login($user, 'form_login', 'main');
+            $deviceService->linkToUser($mac, $user);
+
+            return $this->redirectToRoute('setup_configure', ['mac' => $mac]);
+        }
+
+        return $this->render('setup/index.html.twig', [
+            'mac'         => $mac,
+            'reg_form'    => $form,
+            'login_error' => null,
+        ]);
+    }
+
+    #[Route('/login', name: 'setup_login', methods: ['POST'])]
+    public function login(
+        string $mac,
+        Request $request,
+        UserPasswordHasherInterface $hasher,
+        EntityManagerInterface $em,
+        Security $security,
+        DeviceService $deviceService,
+    ): Response {
+        $email    = trim((string) $request->request->get('_username', ''));
+        $password = (string) $request->request->get('_password', '');
+
+        $user = $em->getRepository(User::class)->findOneBy(['email' => $email]);
+        if ($user && $hasher->isPasswordValid($user, $password)) {
+            $security->login($user, 'form_login', 'main');
+            $deviceService->linkToUser($mac, $user);
+            return $this->redirectToRoute('setup_configure', ['mac' => $mac]);
+        }
+
+        $request->getSession()->set('_setup_login_error', 'Incorrect email or password');
+        return $this->redirectToRoute('setup_index', ['mac' => $mac]);
+    }
+
+    #[Route('/configure', name: 'setup_configure', methods: ['GET', 'POST'])]
+    #[IsGranted('ROLE_USER')]
+    public function configure(
+        string $mac,
+        Request $request,
+        EntityManagerInterface $em,
+        DeviceService $deviceService,
+    ): Response {
+        /** @var User $user */
+        $user   = $this->getUser();
+        $device = $deviceService->linkToUser($mac, $user);
+
+        if ($request->isMethod('POST')) {
+            $name   = trim((string) $request->request->get('name', ''));
+            $orient = $request->request->get('orientation', Orientation::Landscape->value);
+            $interval  = (int) $request->request->get('rotation_interval_hours', 24);
+            $window    = (int) $request->request->get('uniqueness_window', 10);
+
+            if (empty($name)) {
+                return $this->render('setup/configure.html.twig', [
+                    'device' => $device,
+                    'error'  => 'Please enter a name for your frame.',
+                ]);
+            }
+
+            $device->setName($name);
+            $device->setOrientation(Orientation::from($orient));
+            $device->setRotationIntervalHours(max(1, $interval));
+            $device->setUniquenessWindow(max(1, $window));
+            $em->flush();
+
+            return $this->redirectToRoute('spa');
+        }
+
+        return $this->render('setup/configure.html.twig', [
+            'device' => $device,
+            'error'  => null,
+        ]);
+    }
+}

src/Entity/Device.php

@@ -0,0 +1,70 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use App\Enum\Orientation;
+use App\Repository\DeviceRepository;
+use Doctrine\ORM\Mapping as ORM;
+
+#[ORM\Entity(repositoryClass: DeviceRepository::class)]
+class Device
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column]
+    private ?int $id = null;
+
+    #[ORM\Column(length: 17, unique: true)]
+    private string $mac = '';
+
+    #[ORM\Column(length: 100)]
+    private string $name = '';
+
+    #[ORM\Column(enumType: Orientation::class)]
+    private Orientation $orientation = Orientation::Landscape;
+
+    /** Hours between rotation cycles. */
+    #[ORM\Column]
+    private int $rotationIntervalHours = 24;
+
+    /** Number of display cycles before an image may repeat. */
+    #[ORM\Column]
+    private int $uniquenessWindow = 10;
+
+    #[ORM\ManyToOne(inversedBy: 'devices')]
+    #[ORM\JoinColumn(nullable: false)]
+    private ?User $user = null;
+
+    #[ORM\Column]
+    private \DateTimeImmutable $linkedAt;
+
+    public function __construct()
+    {
+        $this->linkedAt = new \DateTimeImmutable();
+    }
+
+    public function getId(): ?int { return $this->id; }
+
+    public function getMac(): string { return $this->mac; }
+    public function setMac(string $mac): static { $this->mac = strtoupper($mac); return $this; }
+
+    public function getName(): string { return $this->name; }
+    public function setName(string $name): static { $this->name = $name; return $this; }
+
+    public function getOrientation(): Orientation { return $this->orientation; }
+    public function setOrientation(Orientation $orientation): static { $this->orientation = $orientation; return $this; }
+
+    public function getRotationIntervalHours(): int { return $this->rotationIntervalHours; }
+    public function setRotationIntervalHours(int $h): static { $this->rotationIntervalHours = $h; return $this; }
+
+    public function getUniquenessWindow(): int { return $this->uniquenessWindow; }
+    public function setUniquenessWindow(int $w): static { $this->uniquenessWindow = $w; return $this; }
+
+    public function getUser(): ?User { return $this->user; }
+    public function setUser(?User $user): static { $this->user = $user; return $this; }
+
+    public function getLinkedAt(): \DateTimeImmutable { return $this->linkedAt; }
+    public function setLinkedAt(\DateTimeImmutable $dt): static { $this->linkedAt = $dt; return $this; }
+}

src/Entity/User.php

@@ -5,6 +5,8 @@ declare(strict_types=1);
 namespace App\Entity;
 
 use App\Repository\UserRepository;
+use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Bridge\Doctrine\Validator\Constraints\UniqueEntity;
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
@@ -33,6 +35,10 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     #[ORM\Column(length: 50, nullable: true)]
     private ?string $theme = null;
 
+    /** @var Collection<int, Device> */
+    #[ORM\OneToMany(targetEntity: Device::class, mappedBy: 'user', orphanRemoval: true)]
+    private Collection $devices;
+
     public function getId(): ?int
     {
         return $this->id;
@@ -92,4 +98,12 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     }
 
     public function eraseCredentials(): void {}
+
+    /** @return Collection<int, Device> */
+    public function getDevices(): Collection { return $this->devices; }
+
+    public function __construct()
+    {
+        $this->devices = new ArrayCollection();
+    }
 }

src/Enum/Orientation.php

@@ -0,0 +1,11 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Enum;
+
+enum Orientation: string
+{
+    case Landscape = 'landscape';
+    case Portrait  = 'portrait';
+}

src/Repository/DeviceRepository.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repository;
+
+use App\Entity\Device;
+use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
+use Doctrine\Persistence\ManagerRegistry;
+
+/** @extends ServiceEntityRepository<Device> */
+class DeviceRepository extends ServiceEntityRepository
+{
+    public function __construct(ManagerRegistry $registry)
+    {
+        parent::__construct($registry, Device::class);
+    }
+}

src/Service/DeviceService.php

@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Service;
+
+use App\Entity\Device;
+use App\Entity\User;
+use App\Repository\DeviceRepository;
+use Doctrine\ORM\EntityManagerInterface;
+
+class DeviceService
+{
+    public function __construct(
+        private readonly DeviceRepository $repo,
+        private readonly EntityManagerInterface $em,
+    ) {}
+
+    /**
+     * Atomically link a MAC address to a user.
+     * If the device was previously owned by a different user, image history is purged.
+     */
+    public function linkToUser(string $mac, User $newOwner): Device
+    {
+        $mac = strtoupper($mac);
+        $device = $this->repo->findOneBy(['mac' => $mac]);
+
+        if ($device === null) {
+            $device = new Device();
+            $device->setMac($mac);
+        } elseif ($device->getUser() !== null && $device->getUser()->getId() !== $newOwner->getId()) {
+            // Ownership transfer: purge prior image history for this device.
+            // Full purge logic added in Epic 3 when Image/Approval entities exist.
+            $this->purgeDeviceHistory($device);
+        }
+
+        $device->setUser($newOwner);
+        $device->setLinkedAt(new \DateTimeImmutable());
+        $this->em->persist($device);
+        $this->em->flush();
+
+        return $device;
+    }
+
+    /** Remove all image approvals and rendered assets associated with this device. */
+    private function purgeDeviceHistory(Device $device): void
+    {
+        // Stub: will cascade-delete via ORM relationships once Image/Approval entities are added in Epic 3.
+        // Doctrine cascade on the Device→Approval relationship handles this automatically.
+    }
+}

templates/setup/configure.html.twig

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Name your frame — pictureFrame</title>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        body { font-family: system-ui, sans-serif; min-height: 100dvh; background: #fdf6ee; color: #3a2e22;
+               display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; }
+        .card { width: 100%; max-width: 400px; }
+        h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: .25rem; }
+        .subtitle { font-size: .875rem; color: #8a7060; margin-bottom: 1.5rem; }
+        .field { margin-bottom: 1.25rem; }
+        label { display: block; font-size: .8125rem; font-weight: 600; color: #8a7060; margin-bottom: .375rem; }
+        input[type="text"], select {
+            width: 100%; min-height: 44px; padding: 0 .875rem; border: 1px solid #e8d9c4;
+            border-radius: 10px; background: #fff; font-size: 1rem; color: #3a2e22; }
+        select { padding-right: 2rem; appearance: none;
+                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7060' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
+                 background-repeat: no-repeat; background-position: right .875rem center; }
+        .field-error { margin-top: .375rem; font-size: .8125rem; color: #c0392b; }
+        .hint { margin-top: .375rem; font-size: .8125rem; color: #8a7060; }
+        .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
+               margin-top: 1.5rem; background: #c97c3a; color: #fff; border: none; border-radius: 9999px;
+               font-size: 1rem; font-weight: 700; cursor: pointer; }
+    </style>
+</head>
+<body>
+<div class="card">
+    <h1>Name your frame</h1>
+    <p class="subtitle">You can always change these settings later.</p>
+
+    {% if error %}
+        <p class="field-error" role="alert" style="margin-bottom:1rem">{{ error }}</p>
+    {% endif %}
+
+    <form method="post" novalidate>
+        <div class="field">
+            <label for="name">Frame name</label>
+            <input type="text" id="name" name="name"
+                   value="{{ device.name }}"
+                   placeholder="e.g. Living room frame"
+                   maxlength="100" required autofocus>
+        </div>
+
+        <div class="field">
+            <label for="orientation">Display orientation</label>
+            <select id="orientation" name="orientation">
+                <option value="landscape" {% if device.orientation.value == 'landscape' %}selected{% endif %}>Landscape</option>
+                <option value="portrait"  {% if device.orientation.value == 'portrait'  %}selected{% endif %}>Portrait</option>
+            </select>
+        </div>
+
+        <div class="field">
+            <label for="rotation_interval_hours">Rotation frequency</label>
+            <select id="rotation_interval_hours" name="rotation_interval_hours">
+                <option value="6"   {% if device.rotationIntervalHours == 6   %}selected{% endif %}>Every 6 hours</option>
+                <option value="12"  {% if device.rotationIntervalHours == 12  %}selected{% endif %}>Every 12 hours</option>
+                <option value="24"  {% if device.rotationIntervalHours == 24  %}selected{% endif %}>Daily (every 24 hours)</option>
+                <option value="48"  {% if device.rotationIntervalHours == 48  %}selected{% endif %}>Every 2 days</option>
+                <option value="168" {% if device.rotationIntervalHours == 168 %}selected{% endif %}>Weekly</option>
+            </select>
+        </div>
+
+        <div class="field">
+            <label for="uniqueness_window">Uniqueness window</label>
+            <select id="uniqueness_window" name="uniqueness_window">
+                <option value="5"   {% if device.uniquenessWindow == 5   %}selected{% endif %}>5 cycles</option>
+                <option value="10"  {% if device.uniquenessWindow == 10  %}selected{% endif %}>10 cycles (default)</option>
+                <option value="20"  {% if device.uniquenessWindow == 20  %}selected{% endif %}>20 cycles</option>
+                <option value="50"  {% if device.uniquenessWindow == 50  %}selected{% endif %}>50 cycles</option>
+            </select>
+            <p class="hint">Images won't repeat until this many other photos have been shown.</p>
+        </div>
+
+        <button type="submit" class="btn">Save &amp; finish setup</button>
+    </form>
+</div>
+</body>
+</html>

templates/setup/index.html.twig

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Set up your frame — pictureFrame</title>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+        body { font-family: system-ui, sans-serif; min-height: 100dvh; background: #fdf6ee; color: #3a2e22;
+               display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; }
+        .card { width: 100%; max-width: 400px; }
+        h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: .25rem; }
+        .subtitle { font-size: .875rem; color: #8a7060; margin-bottom: 1.5rem; }
+        .tabs { display: flex; border-bottom: 1px solid #e8d9c4; margin-bottom: 1.5rem; }
+        .tab { flex: 1; padding: .75rem; text-align: center; font-weight: 700; font-size: .9rem;
+               color: #8a7060; text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s; }
+        .tab.active { color: #c97c3a; border-bottom-color: #c97c3a; }
+        .panel { display: none; } .panel.active { display: block; }
+        .field { margin-bottom: 1rem; }
+        label { display: block; font-size: .8125rem; font-weight: 600; color: #8a7060; margin-bottom: .375rem; }
+        input[type="email"], input[type="password"], input[type="text"] {
+            width: 100%; min-height: 44px; padding: 0 .875rem; border: 1px solid #e8d9c4;
+            border-radius: 10px; background: #fff; font-size: 1rem; color: #3a2e22; }
+        input[aria-invalid="true"] { border-color: #c0392b; }
+        .field-error { margin-top: .25rem; font-size: .8125rem; color: #c0392b; }
+        .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
+               margin-top: 1.25rem; background: #c97c3a; color: #fff; border: none; border-radius: 9999px;
+               font-size: 1rem; font-weight: 700; cursor: pointer; }
+    </style>
+</head>
+<body>
+<div class="card">
+    <h1>Set up your frame</h1>
+    <p class="subtitle">Create an account or sign in to link this frame.</p>
+
+    <div class="tabs">
+        <a href="#register" class="tab {% if not login_error %}active{% endif %}" data-tab="register">Create account</a>
+        <a href="#login"    class="tab {% if login_error %}active{% endif %}"    data-tab="login">Sign in</a>
+    </div>
+
+    {# ── Register panel ────────────────────────────────────────────────────── #}
+    <div id="register" class="panel {% if not login_error %}active{% endif %}">
+        {{ form_start(reg_form, {action: path('setup_register', {mac: mac}), attr: {novalidate: 'novalidate'}}) }}
+            <div class="field">
+                {{ form_label(reg_form.email) }}
+                {{ form_widget(reg_form.email, {attr: {
+                    id: 'reg-email',
+                    'aria-invalid': reg_form.email.vars.errors|length > 0 ? 'true' : 'false'
+                }}) }}
+                {% for error in reg_form.email.vars.errors %}
+                    <p class="field-error" role="alert">{{ error.message }}</p>
+                {% endfor %}
+            </div>
+            <div class="field">
+                {{ form_label(reg_form.plainPassword) }}
+                {{ form_widget(reg_form.plainPassword, {attr: {
+                    id: 'reg-pass',
+                    'aria-invalid': reg_form.plainPassword.vars.errors|length > 0 ? 'true' : 'false'
+                }}) }}
+                {% for error in reg_form.plainPassword.vars.errors %}
+                    <p class="field-error" role="alert">{{ error.message }}</p>
+                {% endfor %}
+            </div>
+            <button type="submit" class="btn">Create account &amp; link frame</button>
+        {{ form_end(reg_form) }}
+    </div>
+
+    {# ── Login panel ───────────────────────────────────────────────────────── #}
+    <div id="login" class="panel {% if login_error %}active{% endif %}">
+        <form method="post" action="{{ path('setup_login', {mac: mac}) }}" novalidate>
+            {% if login_error %}
+                <p class="field-error" role="alert" style="margin-bottom:1rem">{{ login_error }}</p>
+            {% endif %}
+            <div class="field">
+                <label for="login-email">Email address</label>
+                <input type="email" id="login-email" name="_username" autocomplete="email" min-height="44px">
+            </div>
+            <div class="field">
+                <label for="login-pass">Password</label>
+                <input type="password" id="login-pass" name="_password" autocomplete="current-password">
+            </div>
+            <button type="submit" class="btn">Sign in &amp; link frame</button>
+        </form>
+    </div>
+</div>
+
+<script>
+(function () {
+    var tabs = document.querySelectorAll('.tab');
+    var panels = document.querySelectorAll('.panel');
+    tabs.forEach(function (tab) {
+        tab.addEventListener('click', function (e) {
+            e.preventDefault();
+            var target = tab.dataset.tab;
+            tabs.forEach(function (t) { t.classList.toggle('active', t.dataset.tab === target); });
+            panels.forEach(function (p) { p.classList.toggle('active', p.id === target); });
+        });
+    });
+}());
+</script>
+</body>
+</html>