crm_ecosplay/templates/home/index.html.twig

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

{% block title %}CRM SITECONSEIL{% endblock %}
{% block description %}Connectez-vous au CRM SITECONSEIL pour acceder a votre espace client ou revendeur.{% endblock %}

{% block header %}
    <header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
        <div class="flex justify-center items-center h-20">
            <a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
                <img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
            </a>
        </div>
    </header>
{% endblock %}

{% block body %}
    {% if app.user %}
        {# Tableau de bord dynamique selon le role #}
        <div class="page-container">
            <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page mb-8">Tableau de bord</h1>
            <p class="text-sm text-gray-600">Bienvenue, <strong>{{ app.user.fullName }}</strong>.</p>
        </div>
    {% else %}
        <div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
            <div class="w-full max-w-md">
                <div class="border-4 border-gray-900 bg-white shadow-[8px_8px_0px_rgba(0,0,0,1)]">
                    <div class="bg-yellow-400 border-b-4 border-gray-900 p-6 text-center">
                        <h1 class="text-3xl font-black uppercase tracking-tighter italic">CRM SITECONSEIL</h1>
                        <p class="text-sm font-bold mt-1">Espace de gestion</p>
                    </div>
                    <div class="p-8">
                        <form method="post" action="{{ path('app_home') }}" class="flex flex-col gap-5">
                            <div>
                                <label for="email" class="block text-xs font-black uppercase tracking-widest mb-2">Email</label>
                                <input type="email" id="email" name="_username" required
                                       class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
                                       placeholder="votre@email.fr">
                            </div>

                            <div>
                                <label for="password" class="block text-xs font-black uppercase tracking-widest mb-2">Mot de passe</label>
                                <input type="password" id="password" name="_password" required
                                       class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
                                       placeholder="••••••••">
                            </div>

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

                            <button type="submit"
                                    class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
                                Connexion a mon espace
                            </button>
                            <a href="{{ path('app_forgot_password') }}" class="block text-center mt-3 text-xs font-bold text-gray-500 hover:text-indigo-600 transition-colors">Mot de passe oublie ?</a>
                        </form>

                        <div class="mt-6 pt-6 border-t-2 border-gray-200">
                            <a href="{{ path('connect_keycloak') }}"
                               class="w-full flex items-center justify-center gap-2 px-6 py-3 border-2 border-gray-900 bg-gray-900 text-white font-black uppercase tracking-widest text-sm hover:bg-indigo-600 transition-all">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
                                Connexion SITECONSEIL
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}