{!-- /** * JCOGS OTP Pro - Pattern 3a: AJAX Modal Login (Tag-Based) * ========================================================= * * Single ExpressionEngine tag implementation with modal overlay OTP. * Automatically includes all HTML, CSS, and JavaScript for quick deployment. * * Features: * - No page reload during login * - Modal overlay for OTP entry * - Remember device option (30-day cookie) * - Backup code support * - Auto-loaded CSS/JavaScript * - Single-tag implementation * * Template Group: jcogs_otp_pro_examples * Default Success URL: /jcogs_otp_pro_examples/user_otp_settings * CSS/JS Path: __CSS_JS_PATH__ (replaced during installation) * * @category ExpressionEngine Template * @package JCOGS OTP Pro * @author JCOGS Design * @copyright 2026 JCOGS Design * @license https://jcogs.net/add-ons/license/jcogs_otp_pro * @version 2.0.4 * @link https://JCOGS.net/ */ --} Pattern 3a: AJAX Modal Login (Tag-Based)

Pattern 3a: AJAX Modal Login

This pattern demonstrates a modal overlay approach for two-factor authentication. When users log in with valid credentials, a modal dialog appears to collect the OTP code.

Features:

  • No page reload during login process
  • Modal overlay appears for OTP entry
  • Remember device option (30-day cookie)
  • Backup code support
  • Auto-loaded CSS and JavaScript
Tag-Based Implementation: This uses a single ExpressionEngine tag that automatically includes all necessary HTML, CSS, and JavaScript. Perfect for quick implementation!
{exp:jcogs_otp_pro:ajax_login_modal return="/jcogs_otp_pro_examples/user_otp_settings" show_remember_device="yes" show_remember_login="yes" show_backup_codes="yes" modal_title="Two-Factor Authentication" }
Customization: All form elements use BEM CSS classes (e.g., otp-form__input, otp-button--primary). You can override these styles in your own CSS to match your site's design.