Add admin function to remove roles, rename addroles to editroles

web/frontend/src/config/AdminSettings.svelte

@@ -1,7 +1,7 @@
 <script>
     import { Row, Col } from 'sveltestrap'
     import { onMount } from 'svelte'
-    import AddRole from './admin/AddRole.svelte'
+    import EditRole from './admin/EditRole.svelte'
     import AddUser from './admin/AddUser.svelte'
     import ShowUsers from './admin/ShowUsers.svelte'
     import Options from './admin/Options.svelte'
@@ -28,7 +28,7 @@
         <ShowUsers on:reload={getUserList} bind:users={users}/>
     </Col>
     <Col>
-        <AddRole on:reload={getUserList}/>
+        <EditRole on:reload={getUserList}/>
     </Col>
     <Col>
         <Options/>

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

@@ -9,8 +9,8 @@
     let displayMessage = false
 
     async function handleAddRole() {
-        const username = document.querySelector('#add-role-username').value
-        const role = document.querySelector('#add-role-select').value
+        const username = document.querySelector('#role-username').value
+        const role = document.querySelector('#role-select').value
 
         if (username == "" || role == "") {
             alert('Please fill in a username and select a role.')
@@ -37,6 +37,35 @@
         }
     }
 
+    async function handleRemoveRole() {
+        const username = document.querySelector('#role-username').value
+        const role = document.querySelector('#role-select').value
+
+        if (username == "" || role == "") {
+            alert('Please fill in a username and select a role.')
+            return
+        }
+
+        let formData = new FormData()
+        formData.append('username', username)
+        formData.append('remove-role', role)
+
+        try {
+            const res = await fetch(`/api/user/${username}`, { method: 'POST', body: formData })
+            if (res.ok) {
+                let text = await res.text()
+                popMessage(text, '#048109')
+                reloadUserList()
+            } else {
+                let text = await res.text()
+                // console.log(res.statusText)
+                throw new Error('Response Code ' + res.status + '-> ' + text)
+            }
+        } catch (err)  {
+            popMessage(err, '#d63384')
+        }
+    }
+
     function popMessage(response, rescolor) {
         message = {msg: response, color: rescolor}
         displayMessage = true
@@ -54,8 +83,8 @@
     <CardBody>
         <CardTitle class="mb-3">Add Role to User</CardTitle>
         <div class="input-group mb-3">
-            <input type="text" class="form-control" placeholder="username" id="add-role-username"/>
-            <select class="form-select" id="add-role-select">
+            <input type="text" class="form-control" placeholder="username" id="role-username"/>
+            <select class="form-select" id="role-select">
                 <option selected value="">Role...</option>
                 <option value="user">User</option>
                 <option value="admin">Admin</option>
@@ -64,6 +93,7 @@
             <!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
             <!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
             <button class="btn btn-primary" type="button" id="add-role-button" on:click|preventDefault={handleAddRole}>Add</button>
+            <button class="btn btn-danger" type="button" id="remove-role-button" on:click|preventDefault={handleRemoveRole}>Remove</button>
         </div>
         <p>
             {#if displayMessage}<b><code style="color: {message.color};" out:fade>Update: {message.msg}</code></b>{/if}