Skip to content

Commit cf30dd5

Browse files
wajehtwajeht
committed
style: Update styling for user and app edit modals
1 parent 7354663 commit cf30dd5

File tree

1 file changed

+29
-28
lines changed

1 file changed

+29
-28
lines changed

‎src/views/pages/admin-users.html‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -58,34 +58,35 @@ <h2 style="margin: 0;">👤 Users</h2>
5858
<td style="padding: 8px; display: flex; align-items: center; gap: 10px;">
5959
<button class="no-style-btn" onclick="toggleDetails(<%= user.id %>)">view</button>
6060
<button class="no-style-btn" onclick="document.getElementById(`edit-user-<%= user.id %>-modal`).showModal()">️edit</button>
61+
6162
<dialog id="edit-user-<%= user.id %>-modal" style="width: 600px; display: flex; flex-direction: column; gap: 20px;">
6263
<h2>📱 Edit User <%= user.name %></h2>
6364

6465
<form method="POST" action="/admin/users/<%= user.id %>" style="display: flex; flex-direction: column; gap: 10px;">
65-
<input type="hidden" id="csrfToken" name="csrfToken" value="<%= csrfToken %>" />
66+
<input type="hidden" id="csrfToken-user-<%= user.id %>" name="csrfToken" value="<%= csrfToken %>" />
6667

6768
<div style="display: flex; flex-direction: column; gap: 5px;">
68-
<label for="username">👤 Username<span style="color: red;">*</span></label>
69-
<input type="text" id="username" name="username" value="<%= state.input.username ?? user.username %>" required>
69+
<label for="username-<%= user.id %>">👤 Username<span style="color: red;">*</span></label>
70+
<input type="text" id="username-<%= user.id %>" name="username" value="<%= state.input.username ?? user.username %>" required>
7071

7172
<% if (state.errors.username) { %>
7273
<small style="color: red;"><%= state.errors.username %></small>
7374
<% } %>
7475
</div>
7576

7677
<div style="display: flex; flex-direction: column; gap: 5px;">
77-
<label for="email">📧 Email<span style="color: red;">*</span></label>
78-
<input type="email" id="email" name="email" value="<%= state.input.email ?? user.email %>" required>
78+
<label for="email-<%= user.id %>">📧 Email<span style="color: red;">*</span></label>
79+
<input type="email" id="email-<%= user.id %>" name="email" value="<%= state.input.email ?? user.email %>" required>
7980

8081
<% if (state.errors.email) { %>
8182
<small style="color: red;"><%= state.errors.email %></small>
8283
<% } %>
8384
</div>
8485

8586
<div style="display: flex; flex-direction: column; gap: 5px;">
86-
<label for="timezone">🌐 Timezone<span style="color: red;">*</span></label>
87+
<label for="timezone-<%= user.id %>">🌐 Timezone<span style="color: red;">*</span></label>
8788

88-
<select id="timezone" name="timezone" required>
89+
<select id="timezone-<%= user.id %>" name="timezone" required>
8990
<option value="UTC" <%= (state.input.timezone ?? user.timezone) === 'UTC' ? 'selected' : '' %>>UTC</option>
9091
<option value="America/New_York" <%= (state.input.timezone ?? user.timezone) === 'America/New_York' ? 'selected' : '' %>>Eastern Time</option>
9192
<option value="America/Chicago" <%= (state.input.timezone ?? user.timezone) === 'America/Chicago' ? 'selected' : '' %>>Central Time</option>
@@ -99,26 +100,26 @@ <h2>📱 Edit User <%= user.name %></h2>
99100
</div>
100101

101102
<div style="display: flex; flex-direction: column; gap: 5px;">
102-
<label for="max_apps_allowed">📱 Max Apps Allowed<span style="color: red;">*</span></label>
103-
<input type="number" id="max_apps_allowed" name="max_apps_allowed" value="<%= state.input.max_apps_allowed ?? user.max_apps_allowed %>" required>
103+
<label for="max-apps-allowed-<%= user.id %>">📱 Max Apps Allowed<span style="color: red;">*</span></label>
104+
<input type="number" id="max-apps-allowed-<%= user.id %>" name="max_apps_allowed" value="<%= state.input.max_apps_allowed ?? user.max_apps_allowed %>" required>
104105

105106
<% if (state.errors.max_apps_allowed) { %>
106107
<small style="color: red;"><%= state.errors.max_apps_allowed %></small>
107108
<% } %>
108109
</div>
109110

110111
<div style="display: flex; flex-direction: column; gap: 5px;">
111-
<label for="export_count">⬇️ Exported Count<span style="color: red;">*</span></label>
112-
<input type="number" id="export_count" name="export_count" value="<%= state.input.export_count ?? user.export_count %>" required>
112+
<label for="export-count-<%= user.id %>">⬇️ Exported Count<span style="color: red;">*</span></label>
113+
<input type="number" id="export-count-<%= user.id %>" name="export_count" value="<%= state.input.export_count ?? user.export_count %>" required>
113114

114115
<% if (state.errors.export_count) { %>
115116
<small style="color: red;"><%= state.errors.export_count %></small>
116117
<% } %>
117118
</div>
118119

119120
<div style="display: flex; flex-direction: column; gap: 5px;">
120-
<label for="max_export_count_allowed">⬇️ Max Export Count Allowed<span style="color: red;">*</span></label>
121-
<input type="number" id="max_export_count_allowed" name="max_export_count_allowed" value="<%= state.input.max_export_count_allowed ?? user.max_export_count_allowed %>" required>
121+
<label for="max-export-count-allowed-<%= user.id %>">⬇️ Max Export Count Allowed<span style="color: red;">*</span></label>
122+
<input type="number" id="max-export-count-allowed-<%= user.id %>" name="max_export_count_allowed" value="<%= state.input.max_export_count_allowed ?? user.max_export_count_allowed %>" required>
122123

123124
<% if (state.errors.max_export_count_allowed) { %>
124125
<small style="color: red;"><%= state.errors.max_export_count_allowed %></small>
@@ -190,42 +191,42 @@ <h2>📱 Edit User <%= user.name %></h2>
190191
<h2>📱 Edit App <%= app.name %></h2>
191192

192193
<form method="POST" action="/admin/users/<%= user.id %>/apps/<%= app.id %>" style="display: flex; flex-direction: column; gap: 10px;">
193-
<input type="hidden" id="csrfToken" name="csrfToken" value="<%= csrfToken %>" />
194+
<input type="hidden" id="csrfToken-app-<%= user.id %>-<%= app.id %>" name="csrfToken" value="<%= csrfToken %>" />
194195

195196
<div style="display: flex; flex-direction: column; gap: 5px;">
196-
<label for="name">🔤 Name<span style="color: red;">*</span></label>
197-
<input type="text" id="name" name="name" value="<%= app.name %>" required>
197+
<label for="name-<%= user.id %>-<%= app.id %>">🔤 Name<span style="color: red;">*</span></label>
198+
<input type="text" id="name-<%= user.id %>-<%= app.id %>" name="name" value="<%= app.name %>" required>
198199
</div>
199200

200201
<div>
201-
<label for="is_active">🚦 Status</label>
202-
<input type="checkbox" id="is_active" name="is_active" <%= app.is_active ? 'checked' : '' %>>
202+
<label for="is-active-<%= user.id %>-<%= app.id %>">🚦 Status</label>
203+
<input type="checkbox" id="is-active-<%= user.id %>-<%= app.id %>" name="is_active" <%= app.is_active ? 'checked' : '' %>>
203204
</div>
204205

205206
<div style="display: flex; flex-direction: column; gap: 5px;">
206-
<label for="url">🌐 Url</label>
207-
<input type="url" id="url" name="url" value="<%= app.url %>" required>
207+
<label for="url-<%= user.id %>-<%= app.id %>">🌐 Url</label>
208+
<input type="url" id="url-<%= user.id %>-<%= app.id %>" name="url" value="<%= app.url %>">
208209
</div>
209210

210211
<div style="display: flex; flex-direction: column; gap: 5px;">
211-
<label for="description">📝 Description</label>
212-
<textarea name="description" id="description"><%= app.description %></textarea>
212+
<label for="description-<%= user.id %>-<%= app.id %>">📝 Description</label>
213+
<textarea name="description" id="description-<%= user.id %>-<%= app.id %>"><%= app.description %></textarea>
213214
</div>
214215

215216
<div style="display: flex; flex-direction: column; gap: 5px;">
216-
<label for="user_monthly_limit_threshold">🔢 Alert Threshold</label>
217-
<input type="number" id="user_monthly_limit_threshold" name="user_monthly_limit_threshold" value="<%= app.user_monthly_limit_threshold %>" min="1" max="<%= app.max_monthly_alerts_allowed %>">
217+
<label for="user-monthly-limit-threshold-<%= user.id %>-<%= app.id %>">🔢 Alert Threshold</label>
218+
<input type="number" id="user-monthly-limit-threshold-<%= user.id %>-<%= app.id %>" name="user_monthly_limit_threshold" value="<%= app.user_monthly_limit_threshold %>" min="1" max="<%= app.max_monthly_alerts_allowed %>">
218219
<small style="color: #666;">Set a threshold to receive notifications when your alert count reaches this number. Leave blank for no threshold.</small>
219220
</div>
220221

221222
<div style="display: flex; flex-direction: column; gap: 5px;">
222-
<label for="max_monthly_alerts_allowed">🔔 Max Monthly Alerts Allowed</label>
223-
<input type="number" id="max_monthly_alerts_allowed" name="max_monthly_alerts_allowed" value="<%= app.max_monthly_alerts_allowed %>" required>
223+
<label for="max-monthly-alerts-allowed-<%= user.id %>-<%= app.id %>">🔔 Max Monthly Alerts Allowed</label>
224+
<input type="number" id="max-monthly-alerts-allowed-<%= user.id %>-<%= app.id %>" name="max_monthly_alerts_allowed" value="<%= app.max_monthly_alerts_allowed %>" required>
224225
</div>
225226

226227
<div style="display: flex; flex-direction: column; gap: 5px;">
227-
<label for="alerts_sent_this_month">📣 Alerts Sent This Month</label>
228-
<input type="number" id="alerts_sent_this_month" name="alerts_sent_this_month" value="<%= app.alerts_sent_this_month %>" required>
228+
<label for="alerts-sent-this-month-<%= user.id %>-<%= app.id %>">📣 Alerts Sent This Month</label>
229+
<input type="number" id="alerts-sent-this-month-<%= user.id %>-<%= app.id %>" name="alerts_sent_this_month" value="<%= app.alerts_sent_this_month %>" required>
229230
</div>
230231

231232
<div style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;">

0 commit comments

Comments
 (0)