Validate Code Input in EditorComponent [frontend]

[salazarsebas]

🔒 Validate Code Input in EditorComponent 🛡️

📝 Description

Add input validation to EditorComponent to prevent empty or invalid code submissions to the backend. This ensures security by reducing the risk of processing malformed input and improves user experience by providing immediate feedback. Validation is a critical step to align with the project’s focus on security and usability.

🎯 Objective

Implement input validation in EditorComponent to check for empty or non-string code before triggering compilation or testing.

🗂 Structure

• Directory: apps/frontend/src/app/components/editor/
• Files:
  • apps/frontend/src/app/components/editor/editor.component.ts
  • apps/frontend/src/app/components/editor/editor.component.html
• Expected structure:

  apps/frontend/
  ├── src/
  │   ├── app/
  │   │   ├── components/
  │   │   │   └── editor/
  │   │   │       ├── editor.component.ts
  │   │   │       ├── editor.component.html
  

✅ Requirements

• Add validation in compile() and test() methods of editor.component.ts:
  • Check if code is a non-empty string using code.trim().
  • Display an error message in the output panel if validation fails (e.g., “Error: Code cannot be empty”).
• Update editor.component.html to bind the output panel to the error message.
• Ensure validation occurs before calling CompilerService.
• Test validation with empty and non-string inputs.
• Commit changes with a message like feat: add code input validation.
• Push changes to the GitHub repository.

🏆 Expected Outcomes

• EditorComponent prevents submission of empty or invalid code.
• Users see clear error messages for invalid inputs.
• Backend API calls are only made for valid code.
• Changes are committed and pushed to GitHub.

🔗 References

• Angular Component Logic
• TypeScript Type Checking
• Angular Forms Validation

📋 Notes

• Keep validation simple but effective for this milestone.
• Consider expanding validation rules (e.g., code length limits) in future iterations.

[Sandijigs]

@salazarsebas assign me this issue , Already Know how this will be implemented

[pushkarm029]

Hey, I can complete this quickly. Thanks @salazarsebas