Overview

DOCTOR digital is a secure SaaS authentication platform built with Laravel 12, Jetstream, and Livewire 3. It provides enterprise-grade two-factor authentication using Google Authenticator (TOTP), a beautiful glass morphism UI with GSAP animations, and a complete admin panel for managing every aspect of the site.

Registration & Login

1. Register — Navigate to /register. Fill in your name, email, and password. You must agree to Terms of Service and Privacy Policy.
2. Email Verification — After registration, a verification email is sent. Click the link in the email to verify your account. You cannot access the dashboard until verified.
3. Login — Go to /login and enter your credentials. If 2FA is enabled on your account, you'll be prompted for a TOTP code from your authenticator app.
4. Forgot Password — Click "Forgot your password?" on the login page. Enter your email to receive a password reset link.

Two-Factor Authentication (2FA)

This platform uses TOTP (Time-based One-Time Password) for 2FA, compatible with Google Authenticator, Authy, Microsoft Authenticator, and similar apps.

How to Enable 2FA

1. Log in and navigate to your Profile Settings (click your avatar → Profile).
2. Find the Two Factor Authentication section and click "Enable".
3. You'll be asked to confirm your password for security.
4. A QR code will appear. Open your authenticator app, scan it, and enter the 6-digit code shown in the app.
5. Once confirmed, 2FA is active. You'll receive recovery codes — save these in a secure location!

Using 2FA at Login

After entering your email and password, you'll see a glass morphism challenge page asking for a 6-digit code. Open your authenticator app, find the code for this site, and enter it. Codes refresh every 30 seconds.

Recovery Codes

When you enable 2FA, the system generates a set of one-time recovery codes. These are your backup if you lose access to your authenticator app.

• Each recovery code can only be used once.
• Store them somewhere safe (password manager, printed copy in a secure location).
• You can regenerate new codes from your Profile settings at any time (this invalidates old ones).
• If you run out of codes and lose your authenticator, contact the super admin for account recovery.

Admin Settings

The admin panel is at /admin/settings and is only accessible to super admin users (role = super_admin in the database).

The settings panel includes these components:

• SMTP Settings — Configure email delivery (host, port, username, password, encryption, from address). Includes a "Send Test Email" button.
• Branding & Customization — App name, logo, favicon, footer text. 7 tabs covering everything from landing hero text to video backgrounds.
• Theme Designer — Create/edit color themes with live preview. Set gradient colors, accent colors, enable/disable blobs.
• Font Manager — Browse 1000+ Google Fonts with live search and preview. Cached API responses.
• Landing Page Editor — CMS for custom content sections on the landing page (title, body, images, videos, buttons).

SMTP / Email Configuration

Email is configured through the admin panel, not the .env file. The app loads SMTP settings from the database on every request via AppServiceProvider.

Setup Steps

1. Go to Admin Settings → SMTP Settings.
2. Enter your SMTP host (e.g., smtp.gmail.com), port (587 for TLS), username, password, and encryption (tls).
3. Set the From Address to match your SMTP domain. For Gmail, use your full Gmail address.
4. Click Save, then use "Send Test Email" to verify.

Branding & Themes

The Branding & Customization component has 7 tabs:

Backgrounds

Each background area (Auth pages, App/Dashboard, Landing page) supports three modes: Theme Gradient (default), Custom Image (upload a JPEG/PNG), or Custom Video (upload an MP4/WebM, max 20MB). Videos loop automatically and are overlaid with a dark tint for readability.

Landing Page CMS

The landing page has two layers of customization:

1. Global Settings (Branding → Landing Page tab) — Controls the hero section text, badge, CTA button labels/URLs, features/CTA section titles and visibility, floating cards, and particles.
2. CMS Sections (Landing Page Editor) — Add unlimited custom content sections between features and CTA. Each section can have a title, subtitle, rich text body, image, embedded video, and a CTA button. Drag to reorder, toggle visibility.

2FA Code Logic (Technical)

This app uses Laravel Fortify's built-in 2FA system with Google Authenticator compatibility:

How TOTP Works

• Secret Key — When the user enables 2FA, a random secret is generated and stored encrypted in users.two_factor_secret. The QR code encodes this secret.
• Code Generation — The authenticator app uses the shared secret + current time (in 30-second intervals) with HMAC-SHA1 to produce a 6-digit code.
• Verification — On login, the server computes the expected code using the same secret + time window and compares it. It checks the current window and ±1 to account for clock drift.
• Recovery Codes — Stored as hashed values in users.two_factor_recovery_codes. Each code is single-use and removed after use.

Key Files

app/Actions/Fortify/          # Custom Fortify actions
config/fortify.php            # Fortify config (features, guards)
resources/views/auth/         # Auth views including 2FA challenge
app/Providers/FortifyServiceProvider.php  # Customizes 2FA views

The 2FA challenge page (two-factor-challenge) is styled with glass morphism and shows a numeric keypad UI for entering the 6-digit code or switching to recovery code input.

Architecture

├── app/
│   ├── Livewire/Admin/       # Admin panel Livewire components
│   │   ├── BrandingSettings  # Branding, backgrounds, landing hero, legal
│   │   ├── SmtpSettings      # SMTP config + test email
│   │   ├── ThemeDesigner     # Theme creation/editing
│   │   ├── FontManager       # Google Fonts browser
│   │   └── LandingPageEditor # CMS sections CRUD
│   ├── Models/
│   │   ├── Setting.php       # Singleton settings (cached, all site config)
│   │   ├── Theme.php         # Color themes with CSS variables
│   │   └── LandingSection.php # CMS content sections
│   └── Providers/
│       └── AppServiceProvider # Loads SMTP from DB, forces HTTPS
├── resources/views/
│   ├── landing.blade.php     # Public landing page (GSAP animated)
│   ├── dashboard.blade.php   # Auth dashboard
│   ├── documentation.blade.php # This page
│   ├── layouts/
│   │   ├── app.blade.php     # Authenticated layout (app bg support)
│   │   └── guest.blade.php   # Auth layout (auth bg support)
│   └── livewire/admin/       # Admin component views
└── database/migrations/      # All schema definitions

Environment Setup

For developers setting up the project locally:

# Clone & install
composer install
npm install

# Configure .env
cp .env.example .env
php artisan key:generate

# Database
php artisan migrate
php artisan storage:link

# Build & serve
npm run build
php artisan serve

Key Environment Variables

• APP_URL — Must match your actual URL (important for Cloudflare tunnels).
• DB_DATABASE, DB_USERNAME, DB_PASSWORD — MySQL connection.
• MAIL_* — Default mail settings (overridden by admin DB settings at runtime).
• GOOGLE_FONTS_API_KEY — Required for the font manager to browse Google Fonts.