Add WiFi QR code mode to the QR code generator

[simonw]

Add a feature to the QR code generator that helps users create QR codes for connecting to WiFi networks

Introduces a mode toggle ("URL / text" vs "WiFi") in the input card. The
WiFi panel collects SSID, password, security type, and a hidden-network
flag, formats them into the standard WIFI:T:...;S:...;P:...;H:...;; payload
with the required backslash-escaping of \ ; , " : characters, and feeds it
into the existing QR rendering pipeline.

Security defaults to "WPA / WPA2 / WPA3" with a hint that this covers
almost every home network, so users who don't know which encryption their
network uses can leave it alone.

https://claude.ai/code/session_016QfJJcUjgtZX82yYA4qgiG

[claude]

Claude finished @simonw's task —— View job

---

PR Review: WiFi QR Code Mode

Todo List:

• Read and analyze the modified qr-code-generator.html file
• Review code quality and implementation patterns
• Check for potential bugs and edge cases
• Evaluate security considerations (input validation, escaping)
• Assess performance implications
• Review UI/UX implementation
• Provide comprehensive feedback and recommendations

---

Review Feedback

✅ Strengths

1. Excellent Standards Compliance: The WiFi QR format correctly follows the WiFi QR specification with proper WIFI:T:...;S:...;P:...;H:...;; structure.

2. Robust Input Escaping: The escapeWifiField() function (line 412-415) properly escapes the required special characters (\ ; , " :) per the WiFi QR spec. This prevents malformed QR codes.

3. Good UX Design:

   • Clear mode toggle with proper ARIA attributes
   • Helpful password show/hide toggle
   • Security type defaults to WPA with informative hint
   • Live updates after initial generation

4. Accessibility: Proper use of role="tab", aria-selected, and aria-controls attributes for the mode tabs.

⚠️ Areas for Improvement

1. Input Validation Gap:

   • Issue: No validation for WiFi password requirements
   • Impact: Users may create QR codes with weak/invalid passwords
   • Suggestion: Add validation for minimum password length (WPA requires 8+ chars)

   // In buildWifiPayload(), add:
   if (encryption === 'WPA' && password && password.length < 8) {
     // Show error about minimum password length
   }

2. Missing Edge Case Handling:

   • Issue: Empty password with WPA encryption is allowed (line 424-426)
   • Impact: Creates invalid WiFi QR codes that won't work
   • Suggestion: Validate that WPA/WEP require passwords:

   if ((encryption === 'WPA' || encryption === 'WEP') && !password) {
     // Show error about required password
   }

3. Potential XSS Vector (line 614):

   • Issue: qrUrlEl.textContent = label; with user input could be risky
   • Current Status: Actually safe since textContent escapes HTML
   • Recommendation: Consider adding comment explaining this is intentionally safe

4. UI Inconsistency:

   • Issue: WiFi panel doesn't clear when switching modes
   • Impact: Previous WiFi data persists, potentially confusing users
   • Location: setMode() function line 399-410

🔒 Security Assessment

• Input Escaping: ✅ Properly implemented
• XSS Prevention: ✅ Uses textContent instead of innerHTML
• Data Validation: ⚠️ Could be improved (see validation gaps above)

🚀 Performance Considerations

• Live Updates: Good implementation with conditional regeneration
• Canvas Rendering: Efficient with proper DPI scaling
• Memory Usage: Clean, no obvious memory leaks

🧪 Test Coverage Considerations

This is a standalone HTML file, but key areas that would benefit from testing:

• WiFi payload formatting with special characters
• Password validation edge cases
• Mode switching behavior
• QR generation with various WiFi configurations

💡 Minor Suggestions

1. Code Organization: Consider extracting WiFi validation into a separate function
2. Error Messages: More specific error messages for different validation failures
3. User Feedback: Brief success indication when QR is generated

Overall Assessment

This is a well-implemented feature that correctly follows WiFi QR standards with good UX. The main areas for improvement are around input validation edge cases. The code is secure and performant.

Recommendation: ✅ Approve with minor suggestions - The implementation is solid and the suggested improvements are non-blocking.

---

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	6d07529
Status:	✅  Deploy successful!
Preview URL:	https://847b623b.tools-b1q.pages.dev
Branch Preview URL:	https://claude-add-wifi-qr-codes-e1s.tools-b1q.pages.dev

View logs

[claude]

Claude finished @simonw's task —— View job

---

PR Review: WiFi QR Code Mode

Todo List:

• Read and analyze the modified qr-code-generator.html file
• Review code quality and implementation patterns
• Check for potential bugs and edge cases
• Evaluate security considerations (input validation, escaping)
• Assess performance implications
• Review UI/UX implementation
• Provide comprehensive feedback and recommendations

---

Review Feedback

✅ Strengths

1. Excellent Standards Compliance: The WiFi QR format correctly follows the WiFi QR specification with proper WIFI:T:...;S:...;P:...;H:...;; structure.

2. Robust Input Escaping: The escapeWifiField() function (qr-code-generator.html:411-414) properly escapes the required special characters (\ ; , " :) per the WiFi QR spec. This prevents malformed QR codes.

3. Good UX Design:

   • Clear mode toggle with proper ARIA attributes
   • Helpful password show/hide toggle
   • Security type defaults to WPA with informative hint
   • Live updates after initial generation

4. Accessibility: Proper use of role="tab", aria-selected, and aria-controls attributes for the mode tabs (qr-code-generator.html:291-294).

⚠️ Areas for Improvement

1. Input Validation Gaps:

   • Issue: No validation for WiFi password requirements
   • Impact: Users may create QR codes with weak/invalid passwords that won't work
   • Location: buildWifiPayload() function (qr-code-generator.html:416-428)
   • Suggestion: Add validation for minimum password length (WPA requires 8+ chars)

2. Missing Edge Case Handling:

   • Issue: Empty password with WPA/WEP encryption is allowed
   • Impact: Creates invalid WiFi QR codes that won't connect
   • Location: Lines 423-425 allow empty passwords for secured networks
   • Suggestion: Validate that WPA/WEP require passwords

3. Mode Switching Behavior:

   • Issue: WiFi panel data persists when switching modes
   • Impact: Previous WiFi data remains, potentially confusing users
   • Location: setMode() function (qr-code-generator.html:398-409)
   • Suggestion: Clear inputs when switching modes for better UX

4. Error Message Specificity:

   • Current: Generic "Please enter a network name" error
   • Suggestion: More specific validation messages for different failure cases (weak passwords, missing passwords for secured networks, etc.)

🔒 Security Assessment

• Input Escaping: ✅ Properly implemented with escapeWifiField()
• XSS Prevention: ✅ Uses textContent instead of innerHTML (qr-code-generator.html:613)
• Data Validation: ⚠️ Could be improved (see validation gaps above)
• No sensitive data exposure: ✅ Clean implementation

🚀 Performance Considerations

• Live Updates: ✅ Efficient conditional regeneration
• Canvas Rendering: ✅ Proper DPI scaling and optimization
• Memory Usage: ✅ Clean, no obvious memory leaks
• Event Handling: ✅ Appropriate event delegation

💡 Code Quality Notes

1. Consistent Code Style: Follows existing patterns well
2. Clear Function Separation: Good separation of concerns between UI and QR generation
3. Maintainable Structure: Easy to extend with additional modes
4. Proper Error Handling: Good try/catch structure in generation function

🧪 Test Coverage Considerations

Key areas that would benefit from testing:

• WiFi payload formatting with special characters
• Password validation edge cases
• Mode switching behavior
• QR generation with various WiFi configurations

📋 Minor Suggestions

1. Code Organization: Consider extracting WiFi validation into a separate function
2. User Feedback: Brief success indication when QR is generated
3. Input Hints: Add placeholder text showing password requirements

Overall Assessment

This is a well-implemented feature that correctly follows WiFi QR standards with good UX design. The code is clean, secure, and performant. The main areas for improvement are around input validation edge cases, which are non-blocking issues.

Recommendation: ✅ Approve with minor suggestions - The implementation is solid and ready for merge. The suggested improvements can be addressed in future iterations if needed.

---

[simonw]

Looks great: