Initial commit on branch: Rewrite config.tmpl as svelte component(s)

web/frontend/src/config/admin/ShowUsers.svelte

@@ -0,0 +1,67 @@
+<script>
+    import { Button, Table, Card, CardTitle, CardBody } from 'sveltestrap'
+    import { onMount,  createEventDispatcher } from "svelte";
+    import ShowUsersRow from './ShowUsersRow.svelte'
+
+    export let users = []
+
+    const dispatch = createEventDispatcher();
+    function reloadUserList() {
+        dispatch('reload')
+    }
+
+    function deleteUser(username) {
+        if (confirm('Are you sure?')) {
+            let formData = new FormData()
+            formData.append('username', username)
+            fetch('/api/users/', { method: 'DELETE', body: formData }).then(res => {
+              if (res.status == 200) {
+                  reloadUserList()
+              } else {
+                  confirm(res.statusText)
+              }
+            })
+        }
+    }
+
+    $: userList = users
+
+</script>
+
+<Card class="h-100">
+    <CardBody>
+        <CardTitle class="mb-3">Special Users</CardTitle>
+        <p>
+            Not created by an LDAP sync and/or having a role other than <code>user</code>
+            <Button color="secondary" size="sm" on:click={reloadUserList} style="float: right;">Reload</Button>
+        </p>
+        <div style="width: 100%; max-height: 500px; overflow-y: scroll;">
+            <Table hover>
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Name</th>
+                        <th>Email</th>
+                        <th>Roles</th>
+                        <th>JWT</th>
+                        <th>Delete</th>
+                    </tr>
+                </thead>
+                <tbody id="users-list">
+                    {#each userList as user}
+                        <tr id="user-{user.username}">
+                            <ShowUsersRow {user}/>
+                            <td><button class="btn btn-danger del-user" on:click={deleteUser(user.username)}>Delete</button></td>
+                        </tr>
+                    {:else}
+                        <tr>
+                            <td colspan="4">
+                                <div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>
+                            </td>
+                        </tr>
+                    {/each}
+                </tbody>
+            </Table>
+        </div>
+    </CardBody>
+</Card>