From 0c71abe72c4ff21420c24da87f0cc93440b3badb Mon Sep 17 00:00:00 2001
From: myrmidex <myrmidex@myrmidex.net>
Date: Fri, 5 Jun 2026 19:21:55 +0000
Subject: [PATCH] 3 - Add split-screen auth layout + styled login form

---
 templates/account/auth_layout.html.twig | 18 ++++++++++
 templates/account/login.html.twig       | 48 +++++++++++++++++++------
 2 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 templates/account/auth_layout.html.twig

diff --git a/templates/account/auth_layout.html.twig b/templates/account/auth_layout.html.twig
new file mode 100644
index 0000000..59381cb
--- /dev/null
+++ b/templates/account/auth_layout.html.twig
@@ -0,0 +1,18 @@
+{% extends 'base.html.twig' %}
+
+{% block body %}
+<div class="min-h-screen flex">
+    <div class="hidden lg:flex lg:w-1/2 bg-primary flex-col items-center justify-center gap-6 p-12">
+        <span class="text-5xl font-bold text-primary-content tracking-tight">Rater</span>
+        <p class="text-primary-content/70 text-lg text-center max-w-xs">
+            Rate and discover restaurants near you.
+        </p>
+    </div>
+
+    <div class="w-full lg:w-1/2 flex items-center justify-center p-8">
+        <div class="w-full max-w-sm">
+            {% block form %}{% endblock %}
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/account/login.html.twig b/templates/account/login.html.twig
index fc9221a..4cfcc13 100644
--- a/templates/account/login.html.twig
+++ b/templates/account/login.html.twig
@@ -1,23 +1,49 @@
-{% extends 'base.html.twig' %}
+{% extends 'account/auth_layout.html.twig' %}
 
-{% block body %}
-    <h1>Log in</h1>
+{% block title %}Log in — Rater{% endblock %}
+
+{% block form %}
+    <h1 class="text-2xl font-bold mb-6">Welcome back</h1>
 
     {% if error %}
-        <div>{{ error.messageKey|trans(error.messageData, 'security') }}</div>
+        <div role="alert" class="alert alert-error mb-4">
+            <span>{{ error.messageKey|trans(error.messageData, 'security') }}</span>
+        </div>
     {% endif %}
 
-    <form method="post">
-        <label for="email">Email</label>
-        <input type="email" id="email" name="_username" value="{{ last_username }}">
+    <form method="post" class="flex flex-col gap-4">
+        <fieldset class="fieldset">
+            <legend class="fieldset-legend">Email</legend>
+            <input
+                type="email"
+                id="email"
+                name="_username"
+                value="{{ last_username }}"
+                class="input w-full"
+                placeholder="you@example.com"
+                autocomplete="email"
+            >
+        </fieldset>
 
-        <label for="password">Password</label>
-        <input type="password" id="password" name="_password">
+        <fieldset class="fieldset">
+            <legend class="fieldset-legend">Password</legend>
+            <input
+                type="password"
+                id="password"
+                name="_password"
+                class="input w-full"
+                placeholder="••••••••"
+                autocomplete="current-password"
+            >
+        </fieldset>
 
         <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
 
-        <button type="submit">Log in</button>
+        <button type="submit" class="btn btn-primary w-full mt-2">Log in</button>
     </form>
 
-    <p>No account yet? <a href="{{ path('app_register') }}">Register</a></p>
+    <p class="text-sm text-center mt-6 text-base-content/60">
+        No account yet?
+        <a href="{{ path('app_register') }}" class="link link-primary">Register</a>
+    </p>
 {% endblock %}