GIST telas LOGIN e REGISTRO criadas no curso de Primeiros Passos com SF 7 em https://codeexperts.com.br

1-notas.md

Alterações

Removi a div que centraliza conteúdos, que leva as classes do Tailwind: max-w-7xl mx-auto e coloquei nas views internas de cada área.

Essa alteração fiz para que pudesse ter mais liberdade para centralizar e organizar a view de login e registro e elas ainda usarem o base html twig.

O repo base do projeto está em GITHUB PROJETO BASE e organizado por branchs baseado em cada módulo, o main sempre o mais atualizado ou igual a branch do ultimo módulo.

2-login.html.twig

{% extends 'base.html.twig' %}

{% block title %}Acessar Painel{% endblock %}

{% block body %}
    <div class="w-full h-full absolute flex items-center justify-center">
        <div class="w-[430px] p-8 shadow border border-gray-400 rounded">
            <form method="post">
                {% if error %}
                    <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                {% endif %}

                {% if app.user %}
                    <div class="mb-3">
                        You are logged in as {{ app.user.userIdentifier }}, <a href="{{ logout_path() }}">Logout</a>
                    </div>
                {% endif %}

                <h1 class="text-2xl font-bold mb-3">ACESSAR PAINEL</h1>
                <div class="w-full mb-6">
                    <label for="username">Email</label>
                    <input type="email"
                        value="{{ last_username }}"
                            name="_username"
                            id="username"
                            class="w-full p-2 rounded border border-gray-600 blur:border-gray-900"
                            autocomplete="email" required autofocus>
                </div>

                <div class="w-full mb-6">
                    <label for="password" class="mb-2">Password</label>
                    <input type="password"
                        name="_password"
                        id="password"
                        class="w-full p-2 rounded border border-gray-600 blur:border-gray-900"
                        autocomplete="current-password" required>
                    <input type="hidden" name="_csrf_token" data-controller="csrf-protection" value="{{ csrf_token('authenticate') }}">

                </div>
                {#
                    Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
                    See https://symfony.com/doc/current/security/remember_me.html

                    <div class="checkbox mb-3">
                        <input type="checkbox" name="_remember_me" id="_remember_me">
                        <label for="_remember_me">Remember me</label>
                    </div>
                #}

                <button class="btn btn-green cursor-pointer" type="submit">
                    ACESSAR
                </button>
            </form>
        </div>
    </div>
{% endblock %}

3-register.html.twig

{% extends 'base.html.twig' %}

{% block title %}Register{% endblock %}

{% block body %}
    <div class="absolute w-full h-full flex items-center justify-center">
        <div class="w-[430px] p-8 shadow border border-gray-400 rounded">
            <h1 class="text-2xl font-bold mb-4">Cadastrar</h1>

            {{ form_errors(registrationForm) }}

            {{ form_start(registrationForm) }}
                {{ form_row(registrationForm.name) }}
                {{ form_row(registrationForm.email) }}
                {{ form_row(registrationForm.plainPassword, {
                    label: 'Password'
                }) }}

                <button type="submit" class="btn btn-green">Register</button>
            {{ form_end(registrationForm) }}
        </div>
    </div>
{% endblock %}

4-base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>