e-ticket/templates/security/register.html.twig

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

{% block title %}Inscription - E-Ticket{% endblock %}
{% block description %}Creez votre compte E-Ticket en tant qu'acheteur ou organisateur d'evenements{% endblock %}

{% block body %}
<div style="max-width:36rem;margin:0 auto;padding:3rem 1rem;">
    <h1 class="text-3xl font-black uppercase tracking-tighter italic" style="border-bottom:4px solid #111827;display:inline-block;margin-bottom:0.5rem;">Inscription</h1>
    <p class="font-bold text-gray-600 italic" style="margin-bottom:2rem;">Creez votre compte.</p>

    {% for message in app.flashes('success') %}
        <div style="border:4px solid #111827;padding:1rem 1.5rem;margin-bottom:2rem;background:#d1fae5;box-shadow:4px 4px 0 rgba(0,0,0,1);">
            <p class="font-black text-sm">{{ message }}</p>
        </div>
    {% endfor %}

    {% for message in app.flashes('error') %}
        <div style="border:4px solid #111827;padding:1rem 1.5rem;margin-bottom:2rem;background:#fee2e2;box-shadow:4px 4px 0 rgba(0,0,0,1);">
            <p class="font-black text-sm">{{ message }}</p>
        </div>
    {% endfor %}

    <div style="display:flex;gap:0;margin-bottom:2rem;">
        <button data-tab="tab-buyer" type="button"
            style="flex:1;padding:0.75rem;border:3px solid #111827;border-right:none;cursor:pointer;background:#111827;color:white;"
            class="font-black uppercase text-sm tracking-widest transition-all">
            Acheteur
        </button>
        <button data-tab="tab-organizer" type="button"
            style="flex:1;padding:0.75rem;border:3px solid #111827;cursor:pointer;background:white;color:#111827;"
            class="font-black uppercase text-sm tracking-widest transition-all">
            Organisateur
        </button>
    </div>

    <div id="tab-buyer" style="display:block;">
        <form method="post" action="{{ path('app_register') }}" style="display:flex;flex-direction:column;gap:1.5rem;">
            <input type="hidden" name="type" value="buyer">
            <div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
                <div style="flex:1;min-width:150px;">
                    <label for="buyer_last_name" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Nom</label>
                    <input type="text" id="buyer_last_name" name="last_name" required
                        style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                        class="focus:border-indigo-600"
                        placeholder="Dupont">
                </div>
                <div style="flex:1;min-width:150px;">
                    <label for="buyer_first_name" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Prenom</label>
                    <input type="text" id="buyer_first_name" name="first_name" required
                        style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                        class="focus:border-indigo-600"
                        placeholder="Jean">
                </div>
            </div>

            <div>
                <label for="buyer_email" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Email</label>
                <input type="email" id="buyer_email" name="email" required
                    style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                    class="focus:border-indigo-600"
                    placeholder="jean.dupont@exemple.fr">
            </div>

            <div>
                <label for="buyer_password" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Mot de passe</label>
                <input type="password" id="buyer_password" name="password" required minlength="8"
                    style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                    class="focus:border-indigo-600"
                    placeholder="••••••••">
            </div>

            <div>
                <button type="submit"
                    style="width:100%;padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);cursor:pointer;"
                    class="bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                    Creer mon compte
                </button>
            </div>
        </form>
    </div>

    <div id="tab-organizer" style="display:none;">
        <form method="post" action="{{ path('app_register') }}" style="display:flex;flex-direction:column;gap:1.5rem;">
            <input type="hidden" name="type" value="organizer">
            <div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
                <div style="flex:1;min-width:150px;">
                    <label for="orga_last_name" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Nom</label>
                    <input type="text" id="orga_last_name" name="last_name" required
                        style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                        class="focus:border-indigo-600"
                        placeholder="Dupont">
                </div>
                <div style="flex:1;min-width:150px;">
                    <label for="orga_first_name" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Prenom</label>
                    <input type="text" id="orga_first_name" name="first_name" required
                        style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                        class="focus:border-indigo-600"
                        placeholder="Jean">
                </div>
            </div>

            <div>
                <label for="orga_company" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Raison sociale / Nom de l'association</label>
                <input type="text" id="orga_company" name="company_name" required
                    style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                    class="focus:border-indigo-600"
                    placeholder="Mon association">
            </div>

            <div>
                <label for="orga_siret" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">SIRET</label>
                <input type="text" id="orga_siret" name="siret" required pattern="[0-9]{14}" maxlength="14"
                    style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                    class="focus:border-indigo-600"
                    placeholder="12345678901234">
            </div>

            <div>
                <label for="orga_email" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Email</label>
                <input type="email" id="orga_email" name="email" required
                    style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                    class="focus:border-indigo-600"
                    placeholder="contact@association.fr">
            </div>

            <div>
                <label for="orga_address" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Adresse</label>
                <input type="text" id="orga_address" name="address" required
                    style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                    class="focus:border-indigo-600"
                    placeholder="12 rue de la Paix">
            </div>

            <div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
                <div style="flex:1;min-width:120px;">
                    <label for="orga_postal" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Code postal</label>
                    <input type="text" id="orga_postal" name="postal_code" required pattern="[0-9]{5}" maxlength="5"
                        style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                        class="focus:border-indigo-600"
                        placeholder="75001">
                </div>
                <div style="flex:2;min-width:150px;">
                    <label for="orga_city" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Ville</label>
                    <input type="text" id="orga_city" name="city" required
                        style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                        class="focus:border-indigo-600"
                        placeholder="Paris">
                </div>
            </div>

            <div>
                <label for="orga_phone" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Telephone</label>
                <input type="tel" id="orga_phone" name="phone" required
                    style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                    class="focus:border-indigo-600"
                    placeholder="06 12 34 56 78">
            </div>

            <div>
                <label for="orga_password" class="text-xs font-black uppercase tracking-widest" style="display:block;margin-bottom:0.5rem;">Mot de passe</label>
                <input type="password" id="orga_password" name="password" required minlength="8"
                    style="width:100%;padding:0.75rem 1rem;border:3px solid #111827;font-weight:700;outline:none;"
                    class="focus:border-indigo-600"
                    placeholder="••••••••">
            </div>

            <div>
                <button type="submit"
                    style="width:100%;padding:0.75rem 2rem;border:3px solid #111827;box-shadow:4px 4px 0 rgba(0,0,0,1);cursor:pointer;"
                    class="bg-yellow-400 font-black uppercase text-sm tracking-widest hover:bg-indigo-600 hover:text-white transition-all">
                    Creer mon compte organisateur
                </button>
            </div>
        </form>
    </div>

    <div style="margin-top:2rem;text-align:center;">
        <p class="text-sm font-bold text-gray-600">Deja un compte ? <a href="{{ path('app_login') }}" class="text-indigo-600 hover:underline font-black">Connexion</a></p>
    </div>
</div>
{% endblock %}