Skip to content

QUICKSTART.md

Latest commit

 

History

History
201 lines (150 loc) · 5.47 KB

QUICKSTART.md

File metadata and controls

201 lines (150 loc) · 5.47 KB
Raw

🚀 Quick Start Guide - TarFixer Authentication System

Getting Started in 3 Steps

Step 1: Open the Application

Open the test-auth.html file in your browser to test the authentication system, or go directly to Login/Choose_login.html to use the login page.

Step 2: Choose a Test Account

Option A - Officer Dashboard

  • Email: admin@officer.com
  • Password: Test@1234 (or any password)
  • Result: You'll be redirected to the Officer Dashboard

Option B - Worker Dashboard

  • Email: worker@worker.com
  • Password: Worker@123 (or any password)
  • Result: You'll be redirected to the Worker Dashboard

Option C - User Dashboard

  • Email: yourname@gmail.com (or any Gmail/Yahoo/personal email)
  • Password: User@1234 (or any password)
  • Result: You'll be redirected to the User Dashboard

Step 3: Test the Features

Once logged in, you can:

  • ✅ See your name and email displayed
  • ✅ Access dashboard features
  • ✅ Sign out (redirects to login)
  • ✅ Try accessing other dashboards (you'll be redirected back to your correct dashboard)

📝 How Email Detection Works

The system automatically analyzes your email and routes you:

Email Domain               →  Dashboard Type
─────────────────────────────────────────────
@officer.com, @office.com  →  Officer Dashboard
@worker.com                →  Worker Dashboard
@gmail.com, @yahoo.com,    →  User Dashboard
@outlook.com, etc.

🧪 Testing Different User Types

Test File: test-auth.html

Open this file for an interactive testing interface where you can:

  1. Test email detection without logging in
  2. See which dashboard each email type leads to
  3. Quick login with pre-filled credentials
  4. View current authentication status

Test Scenarios:

  1. Test Officer Login:

    Email: jeeva@officer.com
Password: (anything)
Expected: Officer Dashboard

  2. Test Worker Login:

    Email: ramesh@worker.com
Password: (anything)
Expected: Worker Dashboard

  3. Test User Login with Gmail:

    Email: jeeva@gmail.com
Password: (anything)
Expected: User Dashboard

  4. Test User Login with any domain:

    Email: anything@anydomain.com
Password: (anything)
Expected: User Dashboard (default)

🔒 Dashboard Protection

Each dashboard is protected:

  • If not logged in: Redirected to login page
  • If wrong user type: Redirected to correct dashboard
  • If correct user type: Full access granted

Example:

Worker tries to access Officer Dashboard
→ System detects user type = "worker"
→ Automatically redirects to Worker Dashboard

💡 Tips

Password Requirements (for Sign Up):

  • At least 8 characters
  • Must include uppercase letter (A-Z)
  • Must include lowercase letter (a-z)
  • Must include number (0-9)
  • Must include special character (!@#$%^&*)

Testing Tips:

  1. Use the test file (test-auth.html) to understand the system
  2. Try different email domains to see routing behavior
  3. Test dashboard protection by manually navigating to wrong dashboards
  4. Check browser console for detailed logs

Clearing Session:

To log out and test again:

  1. Click "Sign Out" in the dashboard
  2. Or open browser DevTools → Application → Local Storage → Clear all

📁 File Structure

Road damage/
├── auth.js                      # Core authentication system
├── test-auth.html              # Testing interface
├── LOGIN_SYSTEM_GUIDE.md       # Detailed documentation
├── QUICKSTART.md               # This file
├── Login/
│   └── Choose_login.html       # Login page
└── Dashboard/
    ├── Officer.HTML            # Officer dashboard (protected)
    ├── Worker.HTML             # Worker dashboard (protected)
    └── User.HTML               # User dashboard (protected)

🐛 Troubleshooting

Problem: Login button doesn't work

Solution: Make sure you're opening the HTML files from the correct directory structure and that auth.js is in the parent folder.

Problem: Wrong dashboard loads

Solution: Check your email domain. The system routes based on email pattern (see the mapping above).

Problem: Can't log in

Solution:

  1. Open browser console (F12)
  2. Check for error messages
  3. Verify auth.js is loaded
  4. Try the test page first (test-auth.html)

Problem: Stays on login page after login

Solution: Check that all dashboard files exist in the Dashboard/ folder with correct names (Officer.HTML, Worker.HTML, User.HTML).

✨ Next Steps

After testing the authentication:

  1. Customize Email Domains:

    • Edit auth.js
    • Modify the AUTH_CONFIG.userTypes object
    • Add your organization's email domains

  2. Add Real Backend:

    • Currently, any password works (demo mode)
    • Implement actual password verification
    • Add database for user storage
    • Use JWT tokens for security

  3. Enhance Security:

    • Add password hashing
    • Implement session timeouts
    • Add two-factor authentication
    • Use HTTPS in production

📞 Need Help?

  1. Check LOGIN_SYSTEM_GUIDE.md for detailed documentation
  2. Open test-auth.html to understand email routing
  3. Check browser console for error messages
  4. Verify file paths and structure

Ready to test? Open test-auth.html or Login/Choose_login.html and start exploring! 🎉