{!-- /** * JCOGS OTP Pro - Pattern 3b: AJAX Inline Replacement (Tag-Based) * ================================================================ * * Single tag implementation with inline form replacement. Form replaces itself * in same container when OTP is required (no modal overlay). * * Features: * - No page reload during login * - Form replaces itself inline * - Remember device option (30-day cookie) * - Backup code support * - Back button to return to login * - 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 3b: AJAX Inline Login (Tag-Based)

Pattern 3b: AJAX Inline Replacement

This pattern demonstrates inline form replacement for two-factor authentication. When users log in with valid credentials, the login form is replaced with the OTP entry form in the same container.

Features:

  • No page reload during login process
  • Form replaces itself inline (no modal overlay)
  • Remember device option (30-day cookie)
  • Backup code support
  • Auto-loaded CSS and JavaScript
  • Back button to return to login
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_inline return="/jcogs_otp_pro_examples/user_otp_settings" show_remember_device="yes" show_remember_login="yes" show_backup_codes="yes" }
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.