feat: Enhance authentication and article management features

- Updated AuthController to include sample login credentials in the documentation.
- Added example JSON for LoginRequest model to improve clarity.
- Integrated markdown rendering capabilities into the application by adding markdownRenderer.js.
- Updated build scripts to include markdownRenderer.js for proper functionality.
- Enhanced mainContentBuilder.js to support rendering descriptions with markdown.
- Refactored swagger.json to define a new Articles API with endpoints for managing articles.
- Created new schemas for articles, including Article, CreateArticleRequest, and UpdateArticleRequest.
- Implemented authorization and authentication mechanisms in the API.
- Added AuthorizeOperationFilter to manage authorization for API operations.

Author: jakubkozera

src/c-sharp/JakubKozera.OpenApiUi.Sample/Controllers/AuthController.cs

@@ -26,6 +26,18 @@ public AuthController(UserService userService, TokenService tokenService)
     /// </summary>
     /// <param name="request">Login credentials</param>
     /// <returns>JWT token if credentials are valid</returns>
+    /// <remarks>
+    /// Sample login credentials for testing:
+    /// 
+    /// **Administrator:**
+    /// - Login: admin
+    /// - Password: admin123
+    /// 
+    /// **Regular Users:**
+    /// - Login: john.doe, Password: password123
+    /// - Login: jane.smith, Password: secret456
+    /// 
+    /// </remarks>
     /// <response code="200">Login successful, returns JWT token</response>
     /// <response code="400">Invalid request format</response>
     /// <response code="401">Invalid credentials</response>

src/c-sharp/JakubKozera.OpenApiUi.Sample/Models/Requests.cs

@@ -5,17 +5,25 @@ namespace JakubKozera.OpenApiUi.Sample.Models;
 /// <summary>
 /// Request model for user login
 /// </summary>
+/// <example>
+/// {
+///   "login": "admin",
+///   "password": "admin123"
+/// }
+/// </example>
 public class LoginRequest
 {
     /// <summary>
     /// User login
     /// </summary>
+    /// <example>admin</example>
     [Required]
     public required string Login { get; set; }
 
     /// <summary>
     /// User password
     /// </summary>
+    /// <example>admin123</example>
     [Required]
     public required string Password { get; set; }
 }

src/core/build.js

@@ -26,6 +26,7 @@ const jsFiles = [
   "js/config.js",
   "js/themeManager.js",
   "js/utils.js",
+  "js/markdownRenderer.js",
   "js/tooltip.js",
   "js/monacoSetup.js",
   "js/codeSnippets.js",

src/core/demo-build.js

@@ -26,6 +26,7 @@ const jsFiles = [
   "js/config.js",
   "js/themeManager.js",
   "js/utils.js",
+  "js/markdownRenderer.js",
   "js/tooltip.js",
   "js/monacoSetup.js",
   "js/codeSnippets.js",

src/core/index.html

@@ -572,6 +572,7 @@ <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Code Snippet</h2
     <script src="js/config.js"></script>
     <script src="js/themeManager.js"></script>
     <script src="js/utils.js"></script>
+    <script src="js/markdownRenderer.js"></script>
     <script src="js/tooltip.js"></script>
     <script src="js/monacoSetup.js"></script>
     <script src="js/codeSnippets.js"></script>

src/core/js/config.js

@@ -2,6 +2,9 @@
 
 // API Base URL and other state variables
 let baseUrl = window.baseUrl;
+if (baseUrl === "#base_url#") {
+  baseUrl = window.location.origin;
+}
 window.swaggerData = null;
 let currentPath = null; // Store the current path
 let currentMethod = null; // Store the current method

src/core/js/mainContentBuilder.js

@@ -1,5 +1,24 @@
 // Functions to build main content area
 
+// Helper function to render description with markdown support
+function renderDescriptionWithMarkdown(description) {
+  if (!description) return "";
+
+  if (
+    window.markdownRenderer &&
+    typeof window.markdownRenderer.renderSafe === "function"
+  ) {
+    try {
+      const rendered = window.markdownRenderer.renderSafe(description);
+      return rendered;
+    } catch (error) {
+      return `<p class="text-gray-700 mb-4">${description}</p>`;
+    }
+  } else {
+    return `<p class="text-gray-700 mb-4">${description}</p>`;
+  }
+}
+
 // Helper function to format type names, especially for arrays
 function formatTypeDisplay(schema) {
   // Use the enhanced version if available, fallback to basic version
@@ -420,13 +439,9 @@ function buildMainContent() {
             operation.summary
               ? `<p class="text-gray-600 mb-2 text-sm mt-2">${operation.summary}</p>`
               : ""
-          }
-          <div class="endpoint-content hidden">
-            ${
-              operation.description
-                ? `<p class="text-gray-700 mb-4">${operation.description}</p>`
-                : ""
-            }`; // Add parameters sections
+          }          <div class="endpoint-content hidden">
+            ${renderDescriptionWithMarkdown(operation.description)}
+            `; // Add parameters sections
       if (operation.parameters && operation.parameters.length > 0) {
         const pathParams = operation.parameters.filter((p) => p.in === "path");
         const queryParams = operation.parameters.filter(
@@ -1204,6 +1219,28 @@ function buildResponsesSection(operation, sectionId) {
   return sectionHTML;
 }
 
+// Helper function to safely render markdown with fallback
+function renderDescription(description) {
+  if (!description) {
+    return "";
+  }
+
+  // Check if markdown renderer is available
+  if (
+    window.markdownRenderer &&
+    typeof window.markdownRenderer.renderSafe === "function"
+  ) {
+    try {
+      const rendered = window.markdownRenderer.renderSafe(description);
+      return rendered;
+    } catch (error) {
+      return `<p class="text-gray-700 mb-4">${description}</p>`;
+    }
+  } else {
+    return `<p class="text-gray-700 mb-4">${description}</p>`;
+  }
+}
+
 // Utility function to toggle endpoints section
 function toggleEndpointsSection(endpointsContainer, arrow) {
   const isCollapsed = endpointsContainer.style.maxHeight === "0px";

src/core/js/markdownRenderer.js

@@ -0,0 +1,174 @@
+/**
+ * Markdown Renderer Utility
+ * Converts Markdown text to HTML with proper sanitization
+ */
+
+class MarkdownRenderer {
+  constructor() {
+    // Initialize the renderer
+  }
+  /**
+   * Convert Markdown to HTML
+   * @param {string} markdownText - The markdown text to convert
+   * @returns {string} - HTML string
+   */
+  render(markdownText) {
+    if (!markdownText || typeof markdownText !== "string") {
+      return "";
+    }
+
+    let html = markdownText;
+
+    // Normalize line endings (convert \r\n to \n)
+    html = html.replace(/\r\n/g, "\n");
+
+    // Convert headers
+    html = html.replace(
+      /^### (.*$)/gm,
+      '<h3 class="text-lg font-semibold text-gray-800 mt-4 mb-2">$1</h3>'
+    );
+    html = html.replace(
+      /^## (.*$)/gm,
+      '<h2 class="text-xl font-semibold text-gray-800 mt-4 mb-3">$1</h2>'
+    );
+    html = html.replace(
+      /^# (.*$)/gm,
+      '<h1 class="text-2xl font-bold text-gray-800 mt-4 mb-3">$1</h1>'
+    );
+
+    // Convert code blocks FIRST (before any other backtick processing)
+    html = html.replace(/```(\w+)?\s*([\s\S]*?)```/g, (match, lang, code) => {
+      const language = lang ? ` data-language="${lang}"` : "";
+      return `<pre class="bg-gray-50 border border-gray-200 rounded-md p-3 my-3 overflow-x-auto"><code class="text-sm font-mono text-gray-800"${language}>${this.escapeHtml(
+        code.trim()
+      )}</code></pre>`;
+    });
+
+    // Convert inline code AFTER code blocks
+    html = html.replace(
+      /`([^`]+)`/g,
+      '<code class="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono text-gray-800">$1</code>'
+    );
+
+    // Convert bold text
+    html = html.replace(
+      /\*\*(.*?)\*\*/g,
+      '<strong class="font-semibold">$1</strong>'
+    );
+    html = html.replace(
+      /__(.*?)__/g,
+      '<strong class="font-semibold">$1</strong>'
+    );
+
+    // Convert italic text
+    html = html.replace(/\*(.*?)\*/g, '<em class="italic">$1</em>');
+    html = html.replace(/_(.*?)_/g, '<em class="italic">$1</em>');
+
+    // Convert links
+    html = html.replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" class="text-blue-600 hover:text-blue-800 underline" target="_blank" rel="noopener noreferrer">$1</a>'
+    );
+
+    // Convert unordered lists
+    html = html.replace(
+      /^[\s]*[-\*\+][\s]+(.*$)/gm,
+      '<li class="ml-4 list-disc">$1</li>'
+    );
+    html = html.replace(
+      /(<li[^>]*>.*<\/li>)/s,
+      '<ul class="my-2 space-y-1">$1</ul>'
+    );
+
+    // Convert ordered lists
+    html = html.replace(
+      /^[\s]*\d+\.[\s]+(.*$)/gm,
+      '<li class="ml-4 list-decimal">$1</li>'
+    );
+    html = html.replace(
+      /(<li[^>]*class="[^"]*list-decimal[^"]*"[^>]*>.*<\/li>)/s,
+      '<ol class="my-2 space-y-1">$1</ol>'
+    );
+
+    // Convert line breaks
+    html = html.replace(/\n\n/g, '</p><p class="text-gray-700 mb-4">');
+
+    // Convert blockquotes
+    html = html.replace(
+      /^> (.*$)/gm,
+      '<blockquote class="border-l-4 border-gray-300 pl-4 italic text-gray-600 my-2">$1</blockquote>'
+    );
+
+    // Convert horizontal rules
+    html = html.replace(/^---$/gm, '<hr class="my-4 border-gray-300">');
+
+    // Wrap in paragraph if not already wrapped
+    if (html && !html.trim().startsWith("<")) {
+      html = `<p class="text-gray-700 mb-4">${html}</p>`;
+    }
+
+    return html;
+  }
+
+  /**
+   * Escape HTML characters to prevent XSS
+   * @param {string} text - Text to escape
+   * @returns {string} - Escaped text
+   */
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /**
+   * Sanitize HTML content
+   * @param {string} html - HTML to sanitize
+   * @returns {string} - Sanitized HTML
+   */
+  sanitize(html) {
+    // Create a temporary element to parse HTML
+    const temp = document.createElement("div");
+    temp.innerHTML = html;
+
+    // Remove script tags and event handlers
+    const scripts = temp.querySelectorAll("script");
+    scripts.forEach((script) => script.remove());
+
+    // Remove potentially dangerous attributes
+    const allElements = temp.querySelectorAll("*");
+    allElements.forEach((element) => {
+      // Remove event handlers
+      Array.from(element.attributes).forEach((attr) => {
+        if (attr.name.startsWith("on")) {
+          element.removeAttribute(attr.name);
+        }
+      });
+
+      // Remove javascript: links
+      if (element.href && element.href.startsWith("javascript:")) {
+        element.removeAttribute("href");
+      }
+    });
+
+    return temp.innerHTML;
+  }
+
+  /**
+   * Render and sanitize markdown content
+   * @param {string} markdownText - The markdown text to convert
+   * @returns {string} - Safe HTML string
+   */
+  renderSafe(markdownText) {
+    const html = this.render(markdownText);
+    return this.sanitize(html);
+  }
+}
+
+// Create a global instance
+window.markdownRenderer = new MarkdownRenderer();
+
+// Export for module usage
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = MarkdownRenderer;
+}