Change UX/security for modifying user permissions

src/views/ModifyUserView.vue

@@ -2,19 +2,19 @@
   <section class="section">
     <table>
       <tr>
-        <th>
+        <th class="p-2">
           Username
         </th>
-        <th>
+        <th class="p-2">
           Password
         </th>
-        <th>
+        <th class="p-2">
           Privileges
         </th>
       </tr>
       <tr v-for="user in users" :key="user.username">
-        <td>{{ user.username }}</td>
-        <td>
+        <td class="p-2">{{ user.username }}</td>
+        <td class="p-2">
           <template v-if="userData.username === user.username || userData.privileges < 2">
             <input type="password"
                    class="input is-small" :aria-label="`${user.username}'s Password`">
@@ -23,7 +23,7 @@
             ********
           </template>
         </td>
-        <td>
+        <td class="p-2">
           <select class="select is-small" name="" id="" aria-label="User Privilege">
             <option :value="privilege"
                     :selected="getPrivilege(user.admin) === privilege"
@@ -63,7 +63,7 @@ const getPrivilege = (privilege: number) => Privileges[privilege];
 
 const getPrivileges = () => Object.fromEntries(
   Object.entries(Privileges)
-    .filter((p) => /^[0-9]+$/.test(p[1].toString()))
+    .filter((p) => /^[0-9]+$/.test(p[1].toString()) && p[1] >= userData.value.privileges)
     .map((p) => p.reverse()),
 );
 
@@ -80,4 +80,7 @@ table th
 
 table td
   font-family monospace
+
+table th, td
+  border 1px solid #aeaeae
 </style>