apiEndpoints.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Auride | API Endpoint Testing</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 font-family: sans-serif; 12 } 13 14 body { 15 color: #fff; 16 background: #000; 17 margin: 15px; 18 } 19 20 ul { 21 margin-left: 15px; 22 } 23 </style> 24 <link rel="shortcut icon" href="/assets/imgs/favicon.png" type="image/png"> 25 </head> 26 27 <body> 28 <p>Auride API endpoint testing to ensure our API is working as intended.</p> 29 <p>Built specifically for these use cases:</p> 30 <ul> 31 <li>Testing GET, POST, PUT, PATCH, or DELETE methods (any others are unsupported!)</li> 32 <li>Testing data that we receive</li> 33 </ul> 34 <br /> 35 <p><b>NOT</b> built for:</p> 36 <ul> 37 <li>Testing for non-host URLs restrictions</li> 38 <li>Testing how it works in production</li> 39 </ul> 40 41 <br /> 42 <br /> 43 44 <h2>Fetch Method</h2> 45 <p>Only GET, POST, PUT, PATCH, or DELETE methods.</p> 46 <input type="text" placeholder="Insert fetch method" id="fetchMethod" /> 47 48 <br /> 49 <br /> 50 51 <h2>URL Endpoint</h2> 52 <p>Formatted as /api/[?], <b>NOT</b> http://localhost:PORT/api/[?]. This page assumes your server is running at http://localhost:10000 locally, which it should be if it is not.</p> 53 <input type="text" placeholder="Insert URL endpoint" id="urlEndpoint" /> 54 55 <br /> 56 <br /> 57 58 <button onclick="getRequestedFetch()">Run</button> 59 60 <br /> 61 <br /> 62 <br /> 63 64 <pre id="result"> 65 66 </pre> 67 68 <!-- the script that makes this run --> 69 <script> 70 // get requested fetch to get the inputs of the fields 71 function getRequestedFetch() { 72 const method = document.getElementById("fetchMethod").value; 73 const urlEndpoint = document.getElementById("urlEndpoint").value; 74 const result = document.getElementById("result"); 75 76 // make sure the method exists 77 if (method.trim() === "") { 78 result.innerHTML = "Your requested fetch method is empty!"; 79 return; 80 } 81 82 // make sure the endpoint exists 83 if (urlEndpoint.trim() === "") { 84 result.innerHTML = "Your URL endpoint is empty!"; 85 return; 86 } 87 88 // make sure that the method is valid 89 if ( 90 method !== "GET" && method !== "POST" && 91 method !== "PUT" && method !== "PATCH" && 92 method !== "DELETE" 93 ) { 94 result.innerHTML = "Your method is unsupported. Please only use GET, POST, PUT, PATCH, or DELETE."; 95 return; 96 } 97 98 // make sure urlEndpoint starts with a slash 99 if (!urlEndpoint.startsWith("/")) { 100 result.innerHTML = "Please ensure the URL endpoint starts with a forward slash." 101 return; 102 } 103 104 // else, everything is correct! :D 105 request(urlEndpoint, method); 106 } 107 108 // finally, our request 109 async function request(urlEndpoint, method) { 110 const options = { method }; 111 const result = document.getElementById("result"); 112 113 // fetch resposne 114 const response = await fetch(`http://localhost:10000${urlEndpoint}`, options); 115 if (!response.ok) { 116 const errorText = await response.text(); 117 result.innerHTML = `HTTP error! Status: ${response.status}${errorText}`; 118 return; 119 } 120 121 const responseJSON = await response.json(); 122 const responseText = JSON.stringify(responseJSON, null, 2); 123 console.log(responseJSON); 124 result.innerHTML = responseText; 125 } 126 </script> 127 </body> 128 </html>