Merge pull request #1688 from fdm-monster/feat/settings-set-user-role…

…s-dropdown

Feat/settings set user roles dropdown

RELEASE_NOTES.MD

@@ -1,12 +1,17 @@
 # Release notes
 
+Features:
+
+- User settings: add user roles dropdown to change verified users from GUEST role to OPERATOR or ADMIN. 
+
 ## Client 11/11/2024 1.6.8
 
 Fixes: 
 
 - Printer dialog: api key of 43 length should be allowed since OctoPrint 1.10.3
 
 ## Client 04/11/2024 1.6.7
+
 Fixes:
 
 - Printer state: Sometimes empty flags can be passed (regressions backend...) prevent errors
@@ -25,7 +30,7 @@ Fixes:
 
 ## Client 27/10/2024 1.6.5
 
-Feature:
+Features:
 
 - Support klipper in printer create/update dialog, if backend is able to provide said feature (feature flags).
 - Show klipper/octoprint on tile

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",
   "repository": {

src/backend/server.api.ts

@@ -110,4 +110,5 @@ export class ServerApi {
   static userDeleteRoute = (id: IdType) => `${ServerApi.userRoute}/${id}`;
   static userSetVerifiedRoute = (id: IdType) => `${ServerApi.userRoute}/${id}/set-verified`;
   static userSetRootUserRoute = (id: IdType) => `${ServerApi.userRoute}/${id}/set-root-user`;
+  static userSetUserRolesRoute = (id: IdType) => `${ServerApi.userRoute}/${id}/set-user-roles`;
 }

src/backend/user.service.ts

@@ -1,6 +1,7 @@
 import { ServerApi } from "@/backend/server.api";
 import { BaseService } from "@/backend/base.service";
 import { Role, User } from "@/models/user.model";
+import { IdType } from "@/utils/id.type";
 
 export class UserService extends BaseService {
   static async listUsers() {
@@ -44,4 +45,9 @@ export class UserService extends BaseService {
     const path = ServerApi.userSetRootUserRoute(id);
     return await this.post(path, { isRootUser });
   }
+
+  static async setUserRoles(id: string, roleIds: IdType[]) {
+    const path = ServerApi.userSetUserRolesRoute(id);
+    return await this.post(path, { roleIds });
+  }
 }

src/components/Settings/UserManagementSettings.vue

@@ -61,8 +61,9 @@
           >
             <v-icon class="mr-2">shield</v-icon>
             <span v-if="!user.isVerified">Verify account</span>
-            <span v-if="user.isVerified">Unverify account</span>
+            <span v-if="user.isVerified">Un-verify account</span>
           </v-btn>
+
           <v-btn
             :color="user.isRootUser ? 'error darken-4' : 'success'"
             :disabled="isCurrentAccount(user) || !profile?.isRootUser"
@@ -73,6 +74,18 @@
             <span v-if="user.isRootUser">Remove owner</span>
             <span v-if="!user.isRootUser">Set owner</span>
           </v-btn>
+
+          <v-select
+            v-if="profile?.isRootUser"
+            :items="roles.map((r) => ({ text: r.name, value: r.id }))"
+            v-model="user.roles"
+            multiple
+            label="Select roles"
+            @change="updateUserRoles(user)"
+            class="pt-6"
+            style="width: 15rem"
+          />
+
           <v-btn
             :disabled="isCurrentAccount(user) || user.isRootUser"
             class="mt-2"
@@ -212,4 +225,22 @@ async function setRootUser(user: User, isRootUser: boolean = true) {
     isRootUser ? `User ${user.username} set to owner` : `User ${user.username} is no longer owner`
   );
 }
+
+// Define the new function to update user roles
+async function updateUserRoles(user: User) {
+  try {
+    loading.value = true;
+    console.log(user.roles);
+    console.log(user.roles.map((v) => typeof v));
+    await UserService.setUserRoles(user.id, user.roles);
+    await userQuery.refetch();
+    snackbar.info(`Roles updated for ${user.username}`);
+  } catch (e) {
+    loading.value = false;
+    console.error(e);
+    snackbar.error(`Failed to update roles for ${user.username}`);
+    throw e;
+  }
+  loading.value = false;
+}
 </script>