{!-- /** * JCOGS OTP Pro - Pattern 1: Progressive Inline Reveal Login * =========================================================== * * Single-page login form where OTP field appears inline after successful * credential validation. Uses server-side rendering for progressive disclosure. * * Features: * - Single-form experience with progressive field reveal * - OTP field appears after valid username/password * - Remember device option (30-day cookie) * - Backup code support * - No JavaScript required (server-side rendering) * * 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 1: Progressive Inline Reveal

Pattern 1: Progressive Inline Reveal

This pattern demonstrates progressive disclosure where the OTP field appears inline within the same form after successful username/password validation. The form progressively reveals additional fields rather than navigating to a new page.

Features:

  • Single-page login experience
  • OTP field progressively reveals after credentials validated
  • Remember device option (30-day cookie)
  • Backup code support
  • No JavaScript required (server-side rendering)
Standard Form Implementation: This uses ExpressionEngine's native form tag with server-side validation. Perfect for traditional page-reload workflows!
{exp:jcogs_otp_pro:login_form return="/jcogs_otp_pro_examples/user_otp_settings" form_id="pattern1-login" }

Sign In

{if errors}
Login Failed:
    {errors}
  • {error}
    • {/errors}
{/if} {if warning_message}
Warning: {warning_message}
{/if} {if is_locked_out}
Account temporarily locked: {lockout_message}
{/if}
{if show_otp}
🔐 Two-Factor Authentication Required
Enter the 6-digit code from your authenticator app
Use backup code instead
{/if}
Forgot password? • Create account
{if show_otp}
Lost your device? Contact support
{/if} {/exp:jcogs_otp_pro:login_form}
Customization: All form elements use BEM CSS classes (e.g., otp-form__group, otp-form__input, otp-button--primary). You can override these styles in your own CSS to match your site's design.
How it works: After submitting valid credentials, the form is re-rendered with the OTP field visible ({literal}{if show_otp}{/if}{/literal} conditional). This provides a smooth single-form experience without JavaScript.