agentsqripts/lib/ui-problems/formUXDetector.js

Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems

/**
 * @file Form UX detector
 * @description Detects poor form user experience patterns
 */

const { UI_PROBLEM_PATTERNS } = require('./uiProblemPatterns');

/**
 * Detects poor form UX patterns
 * @param {string} content - File content
 * @param {string} filePath - Path to the file
 * @returns {Array} Array of form UX issues
 */
function detectPoorFormUX(content, filePath) {
  const issues = [];
  
  const formElements = content.match(/<form/gi) || [];
  if (formElements.length === 0) return issues;
  
  const formUXProblems = [];
  
  // Check for missing labels
  const inputs = content.match(/<input[^>]*>/gi) || [];
  const labels = content.match(/<label[^>]*>/gi) || [];
  if (inputs.length > labels.length) {
    formUXProblems.push({
      type: 'missing_labels',
      severity: 'HIGH',
      description: `${inputs.length - labels.length} inputs without proper labels`
    });
  }
  
  // Check for missing validation feedback
  const hasValidation = /required|pattern|minlength|maxlength|min=|max=/gi.test(content);
  const hasValidationFeedback = /invalid|error|valid|success/gi.test(content);
  if (hasValidation && !hasValidationFeedback) {
    formUXProblems.push({
      type: 'missing_validation_feedback',
      severity: 'MEDIUM',
      description: 'Form validation without user feedback'
    });
  }
  
  // Check for generic submit buttons
  const submitButtons = content.match(/type\s*=\s*["']submit["'][^>]*>([^<]*)</gi) || [];
  const genericSubmits = submitButtons.filter(btn => 
    />\s*(submit|send|ok)\s*</gi.test(btn)
  );
  if (genericSubmits.length > 0) {
    formUXProblems.push({
      type: 'generic_submit_buttons',
      severity: 'MEDIUM',
      description: `${genericSubmits.length} generic submit button(s)`
    });
  }
  
  // Check for missing autocomplete
  const hasAutocomplete = /autocomplete\s*=/gi.test(content);
  const commonFields = /type\s*=\s*["'](email|password|tel)["']/gi.test(content);
  if (commonFields && !hasAutocomplete) {
    formUXProblems.push({
      type: 'missing_autocomplete',
      severity: 'LOW',
      description: 'Common input types without autocomplete attributes'
    });
  }
  
  if (formUXProblems.length > 0) {
    const patternInfo = UI_PROBLEM_PATTERNS['poor_form_ux'] || {
      effort: 2,
      impact: 'Improves form completion rates and user satisfaction',
      severity: 'MEDIUM',
      category: 'Forms'
    };
    
    issues.push({
      type: 'poor_form_ux',
      severity: patternInfo.severity,
      category: patternInfo.category,
      location: filePath,
      formCount: formElements.length,
      problems: formUXProblems,
      summary: `${formUXProblems.length} form UX issue(s) detected`,
      recommendation: `Improve form usability with proper labels, validation feedback, and clear actions`,
      effort: patternInfo.effort,
      impact: patternInfo.impact,
      improvements: [
        'Add descriptive labels for all inputs',
        'Provide clear validation messages',
        'Use specific action-oriented button text',
        'Add autocomplete attributes for common fields',
        'Group related fields logically'
      ]
    });
  }
  
  return issues;
}

module.exports = {
  detectPoorFormUX
};