3 - Add split-screen auth layout + styled login form

This commit is contained in:
myrmidex 2026-06-05 19:21:55 +00:00
parent b044315f0b
commit 0c71abe72c
2 changed files with 55 additions and 11 deletions

View file

@ -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 %}

View file

@ -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 %}