✨ Add user management

templates/base.html

@@ -15,6 +15,7 @@
             border: 0;
             background-color: #c4e1ff;
             font-weight: bold;
+            font-size: small;
         }
 
         input[type="submit"].delete {
@@ -64,6 +65,32 @@
             border: 1px solid gray;
         }
 
+        .dialog, .error {
+            left: 50%;
+            top: 50%;
+            position: absolute;
+            transform: translate(-50%, -50%);
+            border: solid lightgrey;
+            padding: 1em;
+            border-radius: .5em;
+        }
+
+        .dialog label {
+            display: flex;
+            margin-bottom: 1em;
+            align-items: center;
+        }
+
+        .form-content {
+            display: grid;
+            grid-gap : 20px;
+            grid-template-columns: 100px 1fr;
+        }
+        .form-controls {
+            margin-top: 1em;
+            text-align: right;
+        }
+
         body {
             font-family: sans-serif;
             margin-left: 200px

templates/create-user.html

@@ -0,0 +1,21 @@
+{{ define "page-content" }}
+    <form method="post" class="dialog">
+        <div class="form-content">
+            <label for="username">Username</label>
+            <input name="username" id="username" placeholder="Username"/>
+
+            <label for="role">Role</label>
+            <select name="role" id="role">
+                <option value="user" selected>User</option>
+                <option value="admin">Admin</option>
+            </select>
+
+            <label for="password">Password</label>
+            <input type="password" name="password" id="password" placeholder="Password"/>
+
+        </div>
+        <div class="form-controls">
+            <input type="submit" value="Create User"/>
+        </div>
+    </form>
+{{ end }}

templates/users.html

@@ -1,16 +1,34 @@
-{{ define "page-content" }}
-    <table>
-        <thead>
-            <tr>
-                <td>User</td>
-                <td>Role</td>
-            </tr>
-        </thead>
-        <tbody>
-            {{ range $user := .Users }}<tr>
-                <td>{{ $user.Username }}</td>
-                <td>{{ $user.Role }}</td>
-            </tr>{{ end }}
-        </tbody>
-    </table>
+{{ define "page-styles"}}
+    <style>
+        table {
+            border-spacing: .5em;
+        }
+    </style>
+{{ end }}
+
+{{ define "page-content" }}
+    <table>
+        <thead>
+        <tr>
+            <td>User</td>
+            <td>Role</td>
+            <td>Action</td>
+        </tr>
+        </thead>
+        <tbody>
+        {{ range $user := .Users }}
+        <tr id="user-{{ $user.Username }}">
+            <td>{{ $user.Username }}</td>
+            <td>{{ $user.Role }}</td>
+            <td>
+                <form style="display: inline-block;" action="delete-user" method="post">
+                    <input type="hidden" name="user" value="{{ $user.Username }}"/>
+                    <input type="submit" value="Delete" class="delete"/>
+                </form>
+            </td>
+        </tr>{{ end }}
+        </tbody>
+    </table>
+
+    <a href="create-user" class="create-user">Create User</a>
 {{ end }}