3 - Add split-screen auth layout + styled login form
This commit is contained in:
parent
b044315f0b
commit
0c71abe72c
2 changed files with 55 additions and 11 deletions
18
templates/account/auth_layout.html.twig
Normal file
18
templates/account/auth_layout.html.twig
Normal 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 %}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue