whatsapp_web_groups/theme_m22tc/views/login_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>

        <!-- 1. Configuración de Tailwind (Inyectar en el Head) - Solo para tema M22 -->
        <template id="m22_tailwind_config" inherit_id="web.layout" name="M22 Tailwind Config">
            <xpath expr="//head" position="inside">
                <t t-if="request.website and request.website.sudo().theme_id and request.website.sudo().theme_id.name == 'theme_m22tc'">
                    <!-- Google Fonts (Inter) -->
                    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
                    
                    <!-- Tailwind CSS CDN -->
                    <script src="https://cdn.tailwindcss.com"></script>
                    
                    <!-- Tailwind Config Script -->
                    <script>
                        tailwind.config = {
                          darkMode: "class",
                          theme: {
                            extend: {
                              colors: {
                                primary: {
                                  DEFAULT: '#FF6B00',
                                  '400': '#FFA756'
                                },
                                secondary: '#E1467C',
                                "background-dark": "#0A051D",
                              },
                              fontFamily: {
                                sans: ["Inter", "sans-serif"],
                              },
                              borderRadius: {
                                DEFAULT: "1rem",
                                lg: "1.25rem",
                              },
                            },
                          },
                        };
                    </script>
                    
                    <!-- Custom Styles -->
                    <style>
                        .focus-gradient-border:focus {
                            outline: none;
                            box-shadow: 0 0 0 2px #0A051D, 0 0 0 4px #FF6B00;
                        }
                        .focus-gradient-border-alt:focus {
                            outline: none;
                            border-color: transparent;
                            background-image: linear-gradient(#0A051D, #0A051D), linear-gradient(to right, #FFA756, #E1467C);
                            background-origin: border-box;
                            background-clip: padding-box, border-box;
                        }
                        body.m22-login-page {
                            background-color: #0A051D !important;
                            background-image:
                                radial-gradient(ellipse 80% 50% at 10% 10%, rgba(255, 107, 0, 0.15), transparent),
                                radial-gradient(ellipse 80% 50% at 90% 90%, rgba(225, 70, 124, 0.15), transparent);
                            min-height: 100vh;
                        }
                    </style>
                </t>
            </xpath>
        </template>

        <!-- 2. Personalizar el Layout del Login (Estructura General) - Solo para tema M22 -->
        <template id="m22_login_layout_override" inherit_id="website.login_layout" name="M22 Login Layout Override" priority="50">
            <!-- Configurar clase del body pasando la variable al layout - Solo para M22 -->
            <xpath expr="//div[hasclass('oe_website_login_container')]" position="before">
                <t t-if="request.website and request.website.sudo().theme_id and request.website.sudo().theme_id.name == 'theme_m22tc'">
                    <t t-set="body_classname" t-value="'m22-login-page font-sans text-gray-300 antialiased'"/>
                </t>
            </xpath>

            <!-- Reemplazar el contenedor de Website - Solo para M22 -->
            <xpath expr="//div[hasclass('oe_website_login_container')]" position="replace">
                <t t-if="request.website and request.website.sudo().theme_id and request.website.sudo().theme_id.name == 'theme_m22tc'">
                    <div class="min-h-screen w-full flex items-center justify-center p-6">
                        <main class="w-full max-w-md">
                            <!-- Aquí se inyectará el contenido del formulario (template 'web.login') -->
                            <t t-out="0"/>
                        </main>
                    </div>
                </t>
                <t t-else="">
                    <!-- Contenedor original para otros temas -->
                    <div class="container oe_website_login_container">
                        <t t-out="0"/>
                    </div>
                </t>
            </xpath>
        </template>

        <!-- 3. Personalizar el Formulario de Login (Card y Inputs) - Solo para tema M22 -->
        <template id="m22_login_form_override" inherit_id="web.login" name="M22 Login Form Override" priority="100">
            <xpath expr="//t[@t-call='web.login_layout']" position="replace">
                <t t-if="request.website and request.website.sudo().theme_id and request.website.sudo().theme_id.name == 'theme_m22tc'">
                    <t t-call="web.login_layout">
                        <!-- Glassmorphism Card -->
                        <div class="bg-gray-900/40 backdrop-blur-lg p-8 md:p-12 rounded-xl shadow-2xl border border-white/10">
                            
                            <!-- Header &amp; Logo -->
                            <div class="text-center mb-10">
                                <!-- Logo del Sitio Web -->
                                <div class="flex items-center justify-center mb-6">
                                    <img t-att-src="request.website.image_url(request.website, 'logo')" 
                                         alt="Logo" 
                                         style="max-height: 80px; max-width: 100%; width: auto;"
                                         class="object-contain"/>
                                </div>

                                <h1 class="text-3xl font-bold text-white">Iniciar Sesión</h1>
                                <p class="text-gray-400 mt-2">Accede a tu cuenta de cliente</p>
                            </div>

                            <!-- Login Form -->
                            <form class="space-y-6" role="form" t-attf-action="/web/login" method="post" onsubmit="this.action = '/web/login' + location.hash">
                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                <input type="hidden" name="redirect" t-att-value="redirect"/>

                                <!-- Email Input -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-300 mb-2" for="login">Correo Electrónico</label>
                                    <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                           id="login" name="login" t-att-value="login" 
                                           placeholder="tu@email.com" required="required" type="text" autofocus="autofocus" autocapitalize="off"/>
                                </div>

                                <!-- Password Input -->
                                <div>
                                    <div class="flex items-center justify-between mb-2">
                                        <label class="block text-sm font-medium text-gray-300" for="password">Contraseña</label>
                                        <a t-if="reset_password_enabled" class="text-sm font-medium text-orange-500 hover:text-orange-400 transition-colors" t-attf-href="/web/reset_password?{{ keep_query() }}">¿Olvidaste tu contraseña?</a>
                                    </div>
                                    <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                           id="password" name="password" 
                                           placeholder="••••••••" required="required" type="password" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None"/>
                                </div>

                                <!-- Error Messages -->
                                <p class="text-sm text-red-500 mt-2 text-center" t-if="error" role="alert">
                                    <t t-esc="error"/>
                                </p>
                                <p class="text-sm text-green-500 mt-2 text-center" t-if="message" role="status">
                                    <t t-esc="message"/>
                                </p>

                                <!-- Submit Button -->
                                <div>
                                    <button style="background: linear-gradient(90deg, #FF6B00, #E1467C) !important; border: 0 !important; outline: 0 !important; box-shadow: none !important;" class="w-full text-white font-bold py-3 px-4 rounded-md hover:opacity-90 transition-all transform hover:scale-105 focus:outline-none border-0" type="submit">
                                        Iniciar Sesión
                                    </button>
                                </div>
                            </form>

                            <!-- Footer (Signup) - Condicional como Odoo nativo -->
                            <div class="text-center mt-8" t-if="signup_enabled">
                                <p class="text-sm text-gray-400">
                                    ¿No tienes una cuenta? <a class="font-medium text-orange-500 hover:text-orange-400 transition-colors" t-attf-href="/web/signup?{{ keep_query() }}">Crear una cuenta</a>
                                </p>
                            </div>
                        </div>
                    </t>
                </t>
                <t t-else="">
                    <!-- Formulario original para otros temas -->
                    <t t-call="web.login_layout">
                        <form class="oe_login_form" role="form" t-attf-action="/web/login" method="post" onsubmit="this.action = '/web/login' + location.hash">
                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>

                            <div class="mb-3 field-login">
                                <label for="login">Email</label>
                                <input type="text" placeholder="Email" name="login" t-att-value="login" id="login" required="required" autofocus="autofocus" autocapitalize="off" class="form-control"/>
                            </div>

                            <div class="mb-3 field-password">
                                <label for="password">Password</label>
                                <input type="password" placeholder="Password" name="password" id="password" required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" class="form-control"/>
                            </div>

                            <p class="alert alert-danger" t-if="error" role="alert">
                                <t t-esc="error"/>
                            </p>
                            <p class="alert alert-success" t-if="message" role="status">
                                <t t-esc="message"/>
                            </p>

                            <input type="hidden" name="redirect" t-att-value="redirect"/>
                            <div class="clearfix oe_login_buttons text-center mb-1 pt-3 d-grid">
                                <button type="submit" class="btn btn-primary">Log in</button>
                                <div class="o_login_auth"/>
                            </div>
                        </form>
                    </t>
                </t>
            </xpath>
        </template>

        <!-- 4. Personalizar el Formulario de Registro - Solo para tema M22 -->
        <template id="m22_signup_form_override" inherit_id="auth_signup.signup" name="M22 Signup Form Override" priority="100">
            <xpath expr="//t[@t-call='web.login_layout']" position="replace">
                <t t-if="request.website and request.website.sudo().theme_id and request.website.sudo().theme_id.name == 'theme_m22tc'">
                    <t t-call="web.login_layout">
                        <!-- Glassmorphism Card -->
                        <div class="bg-gray-900/40 backdrop-blur-lg p-8 md:p-12 rounded-xl shadow-2xl border border-white/10">
                            
                            <!-- Header &amp; Logo -->
                            <div class="text-center mb-10">
                                <div class="flex items-center justify-center mb-6">
                                    <img t-att-src="request.website.image_url(request.website, 'logo')" 
                                         alt="Logo" 
                                         style="max-height: 80px; max-width: 100%; width: auto;"
                                         class="object-contain"/>
                                </div>
                                <h1 class="text-3xl font-bold text-white">Crear Cuenta</h1>
                                <p class="text-gray-400 mt-2">Regístrate para acceder</p>
                            </div>

                            <!-- Signup Form -->
                            <form class="oe_signup_form space-y-5" role="form" method="post" t-if="not message">
                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                <input type="hidden" name="redirect" t-att-value="redirect"/>
                                <input type="hidden" name="token" t-att-value="token"/>

                                <!-- Name Input (solo si no hay token) -->
                                <div t-if="not (token and not invalid_token)">
                                    <label class="block text-sm font-medium text-gray-300 mb-2" for="name">Tu Nombre</label>
                                    <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                           id="name" name="name" t-att-value="name" 
                                           placeholder="Ej. Juan Pérez" required="required" type="text"
                                           t-att-readonly="'readonly' if (token and not invalid_token) else None"
                                           t-att-autofocus="'autofocus' if login and not (token and not invalid_token) else None"/>
                                </div>

                                <!-- Email Input (solo si no hay token) -->
                                <div t-if="not (token and not invalid_token)">
                                    <label class="block text-sm font-medium text-gray-300 mb-2" for="login">Correo Electrónico</label>
                                    <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                           id="login" name="login" t-att-value="login" 
                                           placeholder="tu@email.com" required="required" type="text" 
                                           autofocus="autofocus" autocapitalize="off"
                                           t-att-readonly="'readonly' if (token and not invalid_token) else None"/>
                                </div>

                                <!-- Password Input -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-300 mb-2" for="password">Contraseña</label>
                                    <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                           id="password" name="password" 
                                           placeholder="••••••••" required="required" type="password"
                                           t-att-autofocus="'autofocus' if (token and not invalid_token) else None"/>
                                </div>

                                <!-- Confirm Password Input -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-300 mb-2" for="confirm_password">Confirmar Contraseña</label>
                                    <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                           id="confirm_password" name="confirm_password" 
                                           placeholder="••••••••" required="required" type="password"/>
                                </div>

                                <!-- Error Messages -->
                                <p class="text-sm text-red-500 mt-2 text-center" t-if="error" role="alert">
                                    <t t-esc="error"/>
                                </p>

                                <!-- Submit Button -->
                                <div class="pt-2">
                                    <button style="background: linear-gradient(90deg, #FF6B00, #E1467C) !important; border: 0 !important; outline: 0 !important; box-shadow: none !important;" class="w-full text-white font-bold py-3 px-4 rounded-md hover:opacity-90 transition-all transform hover:scale-105 focus:outline-none border-0" type="submit">
                                        Registrarse
                                    </button>
                                </div>
                            </form>

                            <!-- Footer -->
                            <div class="text-center mt-8">
                                <p class="text-sm text-gray-400">
                                    ¿Ya tienes una cuenta? <a class="font-medium text-orange-500 hover:text-orange-400 transition-colors" t-attf-href="/web/login?{{ keep_query() }}">Iniciar Sesión</a>
                                </p>
                            </div>
                        </div>
                    </t>
                </t>
                <t t-else="">
                    <!-- Formulario original para otros temas -->
                    <t t-call="web.login_layout">
                        <form class="oe_signup_form" role="form" method="post" t-if="not message">
                          <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>

                            <t t-call="auth_signup.fields">
                                <t t-set="only_passwords" t-value="bool(token and not invalid_token)"/>
                            </t>

                            <p class="alert alert-danger" t-if="error" role="alert">
                                <t t-esc="error"/>
                            </p>
                            <input type="hidden" name="redirect" t-att-value="redirect"/>
                            <input type="hidden" name="token" t-att-value="token"/>
                            <div class="text-center oe_login_buttons d-grid pt-3">
                                <button type="submit" class="btn btn-primary"> Sign up</button>
                                <a t-attf-href="/web/login?{{ keep_query() }}" class="btn btn-link btn-sm" role="button">Already have an account?</a>
                                <div class="o_login_auth"/>
                            </div>
                        </form>
                    </t>
                </t>
            </xpath>
        </template>

        <!-- 5. Personalizar el Formulario de Reset Password - Solo para tema M22 -->
        <template id="m22_reset_password_override" inherit_id="auth_signup.reset_password" name="M22 Reset Password Override" priority="100">
            <xpath expr="//t[@t-call='web.login_layout']" position="replace">
                <t t-if="request.website and request.website.sudo().theme_id and request.website.sudo().theme_id.name == 'theme_m22tc'">
                    <t t-call="web.login_layout">
                        <!-- Glassmorphism Card -->
                        <div class="bg-gray-900/40 backdrop-blur-lg p-8 md:p-12 rounded-xl shadow-2xl border border-white/10">
                            
                            <!-- Header &amp; Logo -->
                            <div class="text-center mb-10">
                                <div class="flex items-center justify-center mb-6">
                                    <img t-att-src="request.website.image_url(request.website, 'logo')" 
                                         alt="Logo" 
                                         style="max-height: 80px; max-width: 100%; width: auto;"
                                         class="object-contain"/>
                                </div>
                                <h1 class="text-3xl font-bold text-white">Restablecer Contraseña</h1>
                                <p class="text-gray-400 mt-2" t-if="not token">Ingresa tu email para recibir instrucciones</p>
                                <p class="text-gray-400 mt-2" t-if="token and not invalid_token">Ingresa tu nueva contraseña</p>
                            </div>

                            <!-- Success Message -->
                            <div t-if="message" class="text-center">
                                <p class="text-sm text-green-500 bg-green-500/10 border border-green-500/20 rounded-md p-4 mb-6" role="status">
                                    <t t-esc="message"/>
                                </p>
                                <a href="/web/login" class="font-medium text-orange-500 hover:text-orange-400 transition-colors">Volver al Login</a>
                            </div>

                            <!-- Reset Password Form -->
                            <form class="oe_reset_password_form space-y-5" role="form" method="post" t-if="not message">
                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                                <input type="hidden" name="redirect" t-att-value="redirect"/>
                                <input type="hidden" name="token" t-att-value="token"/>

                                <!-- Mode: Request Reset (no token) -->
                                <t t-if="not token">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-300 mb-2" for="login">Correo Electrónico</label>
                                        <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                               id="login" name="login" t-att-value="login" 
                                               placeholder="tu@email.com" required="required" type="text" 
                                               autofocus="autofocus" autocapitalize="off"/>
                                    </div>
                                </t>

                                <!-- Mode: Set New Password (with token) -->
                                <t t-if="token and not invalid_token">
                                    <!-- Email (readonly) -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-300 mb-2" for="login">Correo Electrónico</label>
                                        <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300 opacity-60" 
                                               id="login" name="login" t-att-value="login" 
                                               type="text" readonly="readonly" autocapitalize="off"/>
                                    </div>

                                    <!-- Name (readonly) -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-300 mb-2" for="name">Tu Nombre</label>
                                        <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300 opacity-60" 
                                               id="name" name="name" t-att-value="name" 
                                               type="text" readonly="readonly"/>
                                    </div>

                                    <!-- New Password -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-300 mb-2" for="password">Nueva Contraseña</label>
                                        <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                               id="password" name="password" 
                                               placeholder="••••••••" required="required" type="password" autofocus="autofocus"/>
                                    </div>

                                    <!-- Confirm Password -->
                                    <div>
                                        <label class="block text-sm font-medium text-gray-300 mb-2" for="confirm_password">Confirmar Contraseña</label>
                                        <input class="w-full bg-gray-800/50 border border-gray-700 text-white placeholder-gray-500 px-4 py-3 rounded-md focus:outline-none focus:border-orange-500 transition-all duration-300" 
                                               id="confirm_password" name="confirm_password" 
                                               placeholder="••••••••" required="required" type="password"/>
                                    </div>
                                </t>

                                <!-- Invalid Token Message -->
                                <div t-if="invalid_token" class="text-center">
                                    <p class="text-sm text-red-500 bg-red-500/10 border border-red-500/20 rounded-md p-4">
                                        El enlace ha expirado o es inválido. Por favor solicita uno nuevo.
                                    </p>
                                </div>

                                <!-- Error Messages -->
                                <p class="text-sm text-red-500 mt-2 text-center" t-if="error" role="alert">
                                    <t t-esc="error"/>
                                </p>

                                <!-- Submit Button -->
                                <div class="pt-2" t-if="not invalid_token">
                                    <button style="background: linear-gradient(90deg, #FF6B00, #E1467C) !important; border: 0 !important; outline: 0 !important; box-shadow: none !important;" class="w-full text-white font-bold py-3 px-4 rounded-md hover:opacity-90 transition-all transform hover:scale-105 focus:outline-none border-0" type="submit">
                                        <t t-if="not token">Enviar Instrucciones</t>
                                        <t t-if="token and not invalid_token">Cambiar Contraseña</t>
                                    </button>
                                </div>
                            </form>

                            <!-- Footer -->
                            <div class="text-center mt-8">
                                <p class="text-sm text-gray-400">
                                    <a class="font-medium text-orange-500 hover:text-orange-400 transition-colors" t-attf-href="/web/login?{{ keep_query() }}">Volver al Login</a>
                                </p>
                            </div>
                        </div>
                    </t>
                </t>
                <t t-else="">
                    <!-- Formulario original para otros temas -->
                    <t t-call="web.login_layout">
                        <div t-if="message" class="oe_login_form clearfix">
                            <p class="alert alert-success" t-if="message" role="status">
                                <t t-esc="message"/>
                            </p>
                            <a href="/web/login" class="btn btn-link btn-sm float-start" role="button">Back to Login</a>
                        </div>

                        <form class="oe_reset_password_form" role="form" method="post" t-if="not message">
                          <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>

                            <t t-if="token and not invalid_token">
                                <t t-call="auth_signup.fields">
                                    <t t-set="only_passwords" t-value="1"/>
                                </t>
                            </t>

                            <t t-if="not token">
                                <div class="mb-3 field-login">
                                    <label for="login" class="col-form-label">Your Email</label>
                                    <input type="text" name="login" t-att-value="login" id="login" class="form-control"
                                        autofocus="autofocus" required="required" autocapitalize="off"/>
                                </div>
                            </t>

                            <p class="alert alert-danger" t-if="error" role="alert">
                                <t t-esc="error"/>
                            </p>
                            <input type="hidden" name="redirect" t-att-value="redirect"/>
                            <input type="hidden" name="token" t-att-value="token"/>
                            <div class="clearfix oe_login_buttons d-grid mt-3">
                                <button type="submit" class="btn btn-primary">Reset Password</button>
                                <div class="d-flex justify-content-between align-items-center small mt-2">
                                    <a t-if="not token" t-attf-href="/web/login?{{ keep_query() }}">Back to Login</a>
                                    <a t-if="invalid_token" href="/web/login">Back to Login</a>
                                </div>
                                <div class="o_login_auth"/>
                            </div>

                        </form>

                    </t>
                </t>
            </xpath>
        </template>
    </data>
</odoo>