ico/pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: no-JS support for all core UI — registration, settings, monitor CRUD, logout

Browse Source
This commit is contained in:
nate
2026-03-19 09:55:08 +04:00
parent 632f006988
commit 61560ae521
9 changed files with 194 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/partials/monitor-form-js.ejs
+2 -2
View File
@@ -21,8 +21,8 @@
const bg = container.closest('form').querySelector('input')?.className.match(/bg-gray-\d+/)?.[0] || 'bg-gray-900';
const border = container.closest('form').querySelector('input')?.className.match(/border-gray-\d+/)?.[0] || 'border-gray-800';
row.innerHTML = `
<input type="text" placeholder="Header name" class="hk flex-1 ${bg} border ${border} rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<input type="text" placeholder="Value" class="hv flex-1 ${bg} border ${border} rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<input type="text" name="header_key" placeholder="Header name" class="hk flex-1 ${bg} border ${border} rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<input type="text" name="header_value" placeholder="Value" class="hv flex-1 ${bg} border ${border} rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<button type="button" onclick="this.parentElement.remove()" class="px-2 text-gray-600 hover:text-red-400 transition-colors text-sm">✕</button>
`;
container.appendChild(row);
apps/web/src/views/partials/monitor-form.ejs
+10 -10
View File
@@ -17,23 +17,23 @@
const bodyHidden = ['GET','HEAD','OPTIONS'].includes(curMethod);
%>
<form id="<%= formId %>" class="space-y-<%= isEdit ? '5' : '6' %>">
<form id="<%= formId %>" action="<%= isEdit ? '' : '/dashboard/monitors/new' %>" method="POST" class="space-y-<%= isEdit ? '5' : '6' %>">
<div>
<label class="block text-sm text-gray-400 mb-1.5">Name</label>
<input id="<%= prefix %>name" type="text" required value="<%= monitor.name || '' %>" placeholder="Production API"
<input id="<%= prefix %>name" name="name" type="text" required value="<%= monitor.name || '' %>" placeholder="Production API"
class="w-full <%= bg %> border <%= border %> rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500">
</div>
<div>
<label class="block text-sm text-gray-400 mb-1.5">URL</label>
<div class="flex gap-2">
<select id="<%= prefix %>method"
<select id="<%= prefix %>method" name="method"
class="<%= bg %> border <%= border %> rounded-lg px-3 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm">
<% methods.forEach(function(method) { %>
<option <%= curMethod === method ? 'selected' : '' %>><%= method %></option>
<% }) %>
</select>
<input id="<%= prefix %>url" type="url" required value="<%= monitor.url || '' %>" placeholder="https://api.example.com/health"
<input id="<%= prefix %>url" name="url" type="url" required value="<%= monitor.url || '' %>" placeholder="https://api.example.com/health"
class="flex-1 <%= bg %> border <%= border %> rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500">
</div>
</div>
@@ -48,8 +48,8 @@
<% if (monitor.request_headers && typeof monitor.request_headers === 'object') {
Object.entries(monitor.request_headers).forEach(function([k, v]) { %>
<div class="header-row flex gap-2">
<input type="text" value="<%= k %>" placeholder="Header name" class="hk flex-1 <%= bg %> border <%= border %> rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<input type="text" value="<%= v %>" placeholder="Value" class="hv flex-1 <%= bg %> border <%= border %> rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<input type="text" name="header_key" value="<%= k %>" placeholder="Header name" class="hk flex-1 <%= bg %> border <%= border %> rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<input type="text" name="header_value" value="<%= v %>" placeholder="Value" class="hv flex-1 <%= bg %> border <%= border %> rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
<button type="button" onclick="this.parentElement.remove()" class="px-2 text-gray-600 hover:text-red-400 transition-colors text-sm">✕</button>
</div>
<% }) } %>
@@ -59,14 +59,14 @@
<!-- Request Body -->
<div id="<%= prefix %>body-section" class="<%= bodyHidden ? 'hidden' : '' %>">
<label class="block text-sm text-gray-400 mb-1.5">Request Body <span class="text-gray-600">(optional)</span></label>
<textarea id="<%= prefix %>request-body" rows="4" placeholder='{"key": "value"}'
<textarea id="<%= prefix %>request-body" name="request_body" rows="4" placeholder='{"key": "value"}'
class="w-full <%= bg %> border <%= border %> rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 font-mono text-sm resize-y"><%= monitor.request_body || '' %></textarea>
</div>
<div class="flex gap-4">
<div class="flex-1">
<label class="block text-sm text-gray-400 mb-1.5"><%= isEdit ? 'Interval' : 'Ping Interval' %></label>
<select id="<%= prefix %>interval"
<select id="<%= prefix %>interval" name="interval_s"
class="w-full <%= bg %> border <%= border %> rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
<% intervals.forEach(function([val, label]) { %>
<option value="<%= val %>" <%= String(monitor.interval_s || '30') === val ? 'selected' : '' %>><%= label %></option>
@@ -75,7 +75,7 @@
</div>
<div class="flex-1">
<label class="block text-sm text-gray-400 mb-1.5">Timeout</label>
<select id="<%= prefix %>timeout"
<select id="<%= prefix %>timeout" name="timeout_ms"
class="w-full <%= bg %> border <%= border %> rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
<% timeouts.forEach(function([val, label]) { %>
<option value="<%= val %>" <%= String(monitor.timeout_ms || '10000') === val ? 'selected' : '' %>><%= label %></option>
@@ -93,7 +93,7 @@
<div class="flex flex-wrap gap-2">
<% regions.forEach(function([val, label]) { %>
<label class="flex items-center gap-2 <%= bg %> border <%= border %> hover:border-gray-600 rounded-lg px-3 py-2 cursor-pointer transition-colors">
<input type="checkbox" value="<%= val %>" class="<%= prefix %>region-check accent-blue-500" <%= selectedRegions.includes(val) ? 'checked' : '' %>> <span class="text-sm text-gray-300"><%~ label %></span>
<input type="checkbox" name="regions" value="<%= val %>" class="<%= prefix %>region-check accent-blue-500" <%= selectedRegions.includes(val) ? 'checked' : '' %>> <span class="text-sm text-gray-300"><%~ label %></span>
</label>
<% }) %>
</div>
apps/web/src/views/partials/nav.ejs
+1 -1
View File
@@ -11,6 +11,6 @@
<% } else { %>
<a href="/dashboard/settings" class="hover:text-gray-300 transition-colors">Settings</a>
<% } %>
<button onclick="logout()" class="hover:text-gray-300 transition-colors">Logout</button>
<a href="/account/logout" class="hover:text-gray-300 transition-colors">Logout</a>
</div>
</nav>