Improve error messaging for login/register flows

[Copilot]

Improve Error Messaging for Login/Register Process ✅

• Issue 1: Registration duplicate key errors

  • Modified /create-a-container/routers/register.js to catch Sequelize unique constraint errors
  • Display user-friendly messages for duplicate username/email
  • Added null safety checks for error handling

• Issue 2: Login 2FA waiting banner

  • Added loading/waiting message while backend waits for 2FA push notification
  • Updated /create-a-container/views/login.ejs to show temporary banner with hourglass emoji
  • Disabled submit button to prevent double submission
  • Wrapped JavaScript in DOMContentLoaded event listener
  • Moved inline styles to CSS classes

• Issue 3: Specific 2FA error messages

  • Replaced generic "Authentication request was denied" error
  • Added specific messages for "notification denied" and "notification timed out"
  • Updated error handling in /create-a-container/routers/login.js

• Code Review Feedback

  • Moved all inline styles to dedicated CSS classes in style.css
  • Created reusable alert classes (alert-success, alert-error, alert-info)
  • Updated both login.ejs and register.ejs to use CSS classes

• Testing & Validation

  • Manual testing completed successfully
  • Code review completed - all issues addressed
  • CodeQL security scan passed - 0 vulnerabilities
  • Screenshots captured showing all new features

Implementation Details

Registration Error Messages

The registration handler now catches SequelizeUniqueConstraintError and provides specific, user-friendly messages:

• Duplicate username: "This username is already registered. Please choose a different username or login with your existing account."
• Duplicate email: "This email address is already registered. Please use a different email or login with your existing account."
• Other constraint violations: "A user with these details is already registered. Please login with your existing account."

2FA Loading Banner

A blue informational banner appears during login form submission with:

• Hourglass emoji (⏳) and "Waiting for authentication..." heading
• Instructions: "Please check your device and respond to the push notification."
• Submit button disabled and changed to "Authenticating..." to prevent double submission
• JavaScript wrapped in DOMContentLoaded for safety
• Styled using CSS classes from style.css

2FA Error Messages

The 2FA error handling now distinguishes between:

• Explicit rejection (action === 'REJECT'): "Authentication request was denied. You rejected the notification."
• Timeout (result.timeout or error includes 'timeout'): "Authentication request timed out. Please try again and respond to the notification promptly."
• Other failures: "Authentication request failed. Please try again."

CSS Refactoring

Created reusable alert classes in style.css:

.alert { /* Base alert styling */ }
.alert-success { /* Green for success messages */ }
.alert-error { /* Red for error messages */ }
.alert-info { /* Blue for informational messages */ }

All inline styles have been removed from templates and replaced with these CSS classes, improving maintainability and consistency.

Security Summary

✅ CodeQL scan completed with 0 vulnerabilities detected.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Improve Error Messaging for Login/Register Process</issue_title>
<issue_description>- When a user registers, duplicate key errors on username/email should flash an error that user is already registered.

• On login, a temporary banner should be displayed while the backend waits for the 2FA push notification response.
• Instead of the generic "Authentication request was denied error" from a failed 2FA push notification, the error message flashed to the user should specify notification denied or notification timed out.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Improve Error Messaging for Login/Register Process #174

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[cmyers-mieweb]

Lets get this merged