Architecture & Authentication

Overview

The Customer Tracking Portal (“MaxTracks”) is a single-page application that allows Max Shipping customers to track their packages from warehouse receipt through delivery to Roatan, Honduras. It is built as a single self-contained HTML file with no build system or framework dependencies.

File: customer_tracking_page/index.html Title: “MaxTracks - Track Your Package”

Technology Stack

Firebase Project: max-inventory-scanner-b0b53 (same project as MaxTracks Web and Scanner)

SPA Architecture

The app is a DOM-based SPA with no routing library. Pages and views toggle via display: none / block / flex.

Top-Level Pages

Views Inside Main Page

Authentication System

Firebase Auth with Just-In-Time (JIT) Provisioning for 3,000+ customers.

Customer Login

• Email: Customer’s email address from the Clients Firestore collection
• Default Password: "max" + their Max Client ID number (e.g., max2245)

Login Flow (4-Step Fallback Chain)

1. Check localStorage for a stored auth email (for users who changed password)
2. Try signInWithEmailAndPassword(auth, email, password) — normal format
3. Try sign-in with email+refId@domain format — handles duplicate emails
4. JIT Provisioning: Query Firestore Clients collection, validate the "max"+refId password format, then call createUserWithEmailAndPassword() to create the Firebase Auth account on first login

Duplicate Email Handling

Multiple customers can share the same email address (e.g., a family). The system uses email alias format to differentiate:

• user+2245@example.com vs user+7218@example.com

First-Login Password Change

If a customer logs in with the default max{id} password and has never changed it, a modal blocks all navigation until they set a new password. Tracked via localStorage key passwordChanged_{email}.

Additional Auth Features

Admin Mode

Admins access via a separate “I’m an Admin” button on the login form.

• Credentials verified against User Firestore collection (plain username + password)
• Shows #admin-home-view instead of #home-view
• Admin enters a numeric customer ID to search Clients collection
• Can view any customer’s packages using the same tracking views
• Change Password button hidden in admin mode

Firestore Collections Read

The app is strictly read-only on Firestore. The only write operation is Firebase Auth account creation during JIT provisioning.

Demo Mode

A DEMO_MODE = false flag at the top of the script bypasses Firebase when set to true, using hardcoded mock data (MOCK_CLIENT, MOCK_PACKAGES, MOCK_CONTAINERS) for development and testing. Mock data covers all status types.

Color Palette