{!-- /** * JCOGS OTP Pro - Pattern 2: Separate OTP Page (Login) * ===================================================== * * Two-step login process with separate templates for credentials and OTP. * After successful username/password validation, users are redirected to * a dedicated OTP validation page. * * Features: * - Clear separation between login and OTP steps * - Dedicated template for each step * - Remember device option (30-day cookie) * - Backup code support * - Traditional page navigation workflow * * Template Group: jcogs_otp_pro_examples * Default Success URL: /jcogs_otp_pro_examples/user_otp_settings * OTP Validation Template: /jcogs_otp_pro_examples/pattern2_validate * 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 2: Separate OTP Page

Pattern 2: Separate OTP Page (Login)

This pattern uses two separate templates: one for initial login and another for OTP validation. After successful username/password validation, users are redirected to a dedicated OTP entry page.

Features:

  • Clear separation between login and OTP steps
  • Dedicated template for each step
  • Remember device option (30-day cookie)
  • Backup code support
  • No JavaScript required (server-side rendering)
  • Traditional page navigation workflow
Standard Form Implementation: This uses ExpressionEngine's native form tag with server-side validation and page redirects. Perfect for traditional multi-step workflows!
{exp:jcogs_otp_pro:login_form return="/jcogs_otp_pro_examples/user_otp_settings" otp_return="/jcogs_otp_pro_examples/pattern2_validate" form_id="pattern2-login" form_class="otp-form" }

Sign In to Your Account

{if errors}
Login Failed:
    {errors}
  • {error}
    • {/errors}
{/if}
Forgot password? • Create account
{/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: The otp_return parameter specifies where to redirect if OTP is required. After successful credential validation, users are sent to /jcogs_otp_pro_examples/pattern2_validate for OTP entry.