📋 Overview

AuthCraft is a clean, production-ready authentication UI template built with Bootstrap 5. It includes core auth pages, a settings panel (theme colors, dark/high-contrast, RTL, fonts), plus utility pages, steppers, error pages, and inbox-safe email templates.

Entry point: open template/auth/signin.html to start.

What’s included

  • 18 HTML pages in template/auth/ and template/errors/
  • Local assets in assets/ (CSS/JS/icons/fonts/images)
  • Email templates in template/email/ (HTML + text)
  • Documentation in documentation.html + docs/

✨ Features

🎨 Theme presets + dynamic colors

Multiple theme presets via body classes (theme-*) plus dynamic primary/secondary color pickers using CSS variables.

🌓 Light / Dark / High-contrast

Display modes are applied via data-theme on <html> and saved in localStorage.

↔️ RTL mode

RTL is toggled via a checkbox and applied by adding rtl_mode on <body>.

🔤 Local font switcher

4 font options (WOFF2) hosted in assets/fonts/. No Google Fonts CDN.

🔢 OTP / 2FA UX

OTP inputs support auto-advance, backspace navigation, and full paste distribution (data-otp / data-otp-input).

📦 Error pack + utility pages

HTTP errors (400–503), maintenance countdown, security center, activity log, plus steppers.

✅ Form Validation

Real-time client-side validation with Bootstrap styling. Validates email, password, text fields, and OTP codes on blur and submit.

🎬 Animation Control

Toggle background animations on/off via settings modal. Preference saved to localStorage for consistent experience.

📧 Modern Email Templates

Black & white minimalist email designs with interactive features: copy-to-clipboard, countdown timers, and dark mode toggle.

🎨 Themes

The template supports both preset themes and dynamic brand colors.

Preset themes

Preset themes are applied as theme-* classes on <body> (for example: theme-indigo, theme-blue, theme-cyan, theme-green, theme-orange, theme-blush, theme-red).

Dynamic colors

Dynamic colors are applied via CSS variables:

:root {
  --primary-color: #4f46e5;
  --secondary-color: #06b6d4;
}

📁 File Structure

Folder layout:

template/
auth/
signin.html
signup.html
password-reset.html
two-step.html
… plus steppers + utility pages
errors/
400.html
401.html
403.html
404.html
429.html
500.html
502.html
503.html
email/
verification-code.*
two-factor-code.*
password-reset-link.*
password-changed.*
assets/
css/app.min.css
css/shell.min.css
js/template.js
js/validation.js
docs/

🚀 Installation

No build step required. Use any static server.

  1. Extract the ZIP.
  2. Serve the folder.
  3. Open HTML/signin.html.

⚙️ Customization

Edit content in HTML/*.html. Keep IDs/classes used by the settings modal if you want to preserve functionality (example: #optionsModal, .palette-picker, .mode-dark, .opt-animation).

Form Validation

The template includes a validation system (assets/js/validation.js) that automatically validates forms. Add required attributes and proper input types to enable validation.

🎯 Setting a Single Theme

  • Set preset theme on <body> (example: theme-indigo)
  • Set <html data-theme="dark"> (or light / high-contrast)

🎨 Logo & Icons

  • Favicon: assets/images/favicon.svg
  • Logo: assets/images/logo.svg (used in email templates and pages)
  • Icons: assets/bundles/bootstrap-icons-1.13.1/

Icon Usage

Pages use Bootstrap Icons for semantic meaning:

  • Two-step verification: bi-shield-check (verification icon)
  • Password reset: bi-key (key icon)
  • Error pages: Various contextual icons (e.g., bi-compass for 404)

📧 Email Templates

Email templates are located in Email/ as HTML + plain text pairs:

  • verification-code.html / .txt – Account verification code
  • two-factor-code.html / .txt – Two-factor authentication code
  • password-reset-link.html / .txt – Password reset link
  • password-changed.html / .txt – Security notification

Design Features

  • Modern black & white design: Minimalist aesthetic with high contrast
  • Interactive elements: Click-to-copy codes/links, countdown timers, dark mode toggle
  • Logo integration: Uses project SVG logo (assets/images/logo.svg)
  • Responsive: Optimized for email clients and mobile devices
  • Email-client safe: Uses table-based layouts and inline styles

Placeholders

Replace these placeholders in your backend mailer:

  • {{app_name}} – Application name
  • {{user_name}} – User's name
  • {{code}} – Verification/2FA code
  • {{reset_url}} – Password reset link
  • {{security_url}} – Security settings URL
  • {{expires_in_minutes}} – Expiration time
  • {{sent_date}} – Email sent date/time
  • {{year}} – Current year
  • {{support_email}} – Support contact email
  • {{device}} – Device information
  • {{ip_address}} – IP address
  • {{event_time}} – Event timestamp

🔐 Authentication Flows

Flow Page
Sign in HTML/signin.html
Sign up HTML/signup.html
Password reset HTML/password-reset.html
Two-step verification (OTP) HTML/two-step.html

🔌 API Reference

Static UI kit hooks:

LocalStorage keys

  • localStorage['theme']: light / dark / high-contrast
  • localStorage['animation']: enabled / disabled (controls background animation)

OTP inputs

OTP behavior activates when inputs follow this pattern:

<div data-otp>
  <input data-otp-input />
  ...
</div>

Form Validation

The validation system (assets/js/validation.js) provides:

  • Email validation: Regex pattern matching
  • Password validation: Minimum 8 characters
  • Password confirmation: Matches original password
  • Text validation: Minimum 2 characters
  • OTP validation: Single digit validation for 2FA codes

Validation runs automatically on blur, input (for previously invalid fields), and form submit.

🔒 Security

UI only. Implement server-side validation, rate limiting, and secure sessions in your backend.

🌐 Browser Support

  • Chrome, Firefox, Safari, Edge (modern versions)
  • Best served over HTTP (local server)

🔍 Troubleshooting

  • If assets fail: use a local server instead of file://
  • If theme/font fails: clear site data and refresh

💬 Support

See docs/ for additional guides.

Contact us via Envato comments or email support.