Tailwind security forms for symfony projects

login.html.twig

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

{% block title %}{{ 'Log in!'|trans }}{% endblock %}

{% set inputClasses = 'appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' %}
{% set labelClasses = 'block text-sm font-medium text-gray-700' %}

{% block body %}

    <section class="container mx-auto min-h-screen flex flex-col justify-center items-center py-12">

        <h1 class="mt-6 text-center text-3xl font-extrabold text-gray-900">{{ 'Please sign in'|trans }}</h1>

        <form method="post" class="sm:max-w-md rounded shadow-lg p-6 space-y-6 mb-56" style="min-width: 24rem;">

            {% if error %}
                <div class="text-red-500 text-center">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}

            {% if app.user %}
                <div class="leading-loose">
                    You are logged in as {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}" class="px-3 py-1 rounded bg-gray-200">Logout</a>
                </div>
            {% endif %}

            <div>
                <label for="inputEmail" class="{{ labelClasses }}">Email</label>
                <input type="email" value="{{ last_username }}" name="email" id="inputEmail" class="{{ inputClasses }}"
                       autocomplete="email" required autofocus>
            </div>

            <div>
                <label for="inputPassword" class="{{ labelClasses }}">Password</label>
                <input type="password" name="password" id="inputPassword" class="{{ inputClasses }}"
                       autocomplete="current-password"
                       required>
            </div>

            <input type="hidden" name="_csrf_token"
                   value="{{ csrf_token('authenticate') }}"
            >

            <label class="flex items-center">
                <input type="checkbox" name="_remember_me"
                       class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                <span class="ml-2 block text-sm text-gray-900">{{ 'Remember me'|trans }}</span>
            </label>

            <button class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    type="submit">
                {{ 'Sign in'|trans }}
            </button>
        </form>
    </section>
{% endblock %}

register.html.twig

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

{% block title %}{{ 'Register'|trans }}{% endblock %}

{% set inputClasses = 'appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm' %}
{% set labelClasses = 'block text-sm font-medium text-gray-700' %}

{% block body %}
    <section class="container mx-auto min-h-screen flex flex-col justify-center items-center py-12">

        {% for flashError in app.flashes('verify_email_error') %}
            <div class="text-red-500 text-center" role="alert">{{ flashError }}</div>
        {% endfor %}

        <h1 class="mt-6 text-center text-3xl font-extrabold text-gray-900">{{ 'Register'|trans }}</h1>

        {{ form_start(registrationForm, {
            attr: {
                class: "sm:max-w-md rounded shadow-lg p-6 space-y-6 mb-56",
                style: "min-width: 24rem;"
            },
            label_attr: {class: labelClasses},
        }) }}

        {{ form_row(registrationForm.email, {
            attr: {
                class: inputClasses,
            },
            label_attr: {class: labelClasses}
        }) }}

        {{ form_row(registrationForm.plainPassword, {
            label: 'Password',
            attr: {class: inputClasses},
            label_attr: {class: labelClasses}
        }) }}

        {{ form_row(registrationForm.agreeTerms, {
            label_attr: {class: labelClasses},
            row_attr: {class: 'flex items-center space-x-2'},
            attr: {class: 'h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded'}
        }) }}

        <button type="submit"
                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            {{ 'Register'|trans }}
        </button>

        {{ form_end(registrationForm, {
            attr: {class: inputClasses},
            label_attr: {class: labelClasses}
        }) }}

    </section>
{% endblock %}