src/components/admin/user/user/UserListItem.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-col h-fit w-full border border-primary rounded-md">
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
-      <p>{{ user.firstname }} {{ user.lastname }} <small v-if="user.permissions_total.admin">(Admin)</small></p>
+      <p>
+        {{ user.firstname }} {{ user.lastname }} <small v-if="user.permissions_total.admin">(Admin)</small
+        ><small v-if="isOwner"> (Owner)</small>
+      </p>
       <div class="flex flex-row">
         <RouterLink
           v-if="can('update', 'user', 'user')"
@@ -62,8 +65,7 @@ export default defineComponent({
     user: { type: Object as PropType<UserViewModel>, default: {} },
   },
   computed: {
-    ...mapState(useAbilityStore, ["can"]),
-    ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useAbilityStore, ["can", "isOwner"]),
   },
   methods: {
     ...mapActions(useModalStore, ["openModal"]),

src/router/authGuards.ts

@@ -12,6 +12,7 @@ export type Payload = JwtPayload & {
   firstname: string;
   lastname: string;
   mail: string;
+  isOwner: boolean;
   permissions: PermissionObject;
 };
 
@@ -66,16 +67,16 @@ export async function isAuthenticatedPromise(): Promise<Payload> {
           });
       }
 
-      var { firstname, lastname, mail, username, permissions } = decoded;
+      var { firstname, lastname, mail, username, permissions, isOwner } = decoded;
 
-      if (Object.keys(permissions).length === 0) {
+      if (Object.keys(permissions).length === 0 && !isOwner) {
         auth.setFailed();
         reject("nopermissions");
       }
 
       auth.setSuccess();
       account.setAccountData(firstname, lastname, mail, username);
-      ability.setAbility(permissions);
+      ability.setAbility(permissions, isOwner);
       resolve(decoded);
     }
   });

src/stores/ability.ts

@@ -5,6 +5,7 @@ export const useAbilityStore = defineStore("ability", {
   state: () => {
     return {
       permissions: {} as PermissionObject,
+      isOwner: false as boolean,
     };
   },
   getters: {
@@ -12,6 +13,7 @@ export const useAbilityStore = defineStore("ability", {
       (state) =>
       (type: PermissionType | "admin", section: PermissionSection, module?: PermissionModule): boolean => {
         const permissions = state.permissions;
+        if (state.isOwner) return true;
         if (type == "admin") return permissions?.admin ?? false;
         if (permissions?.admin) return true;
         if (
@@ -30,6 +32,7 @@ export const useAbilityStore = defineStore("ability", {
       (state) =>
       (type: PermissionType | "admin", section: PermissionSection): boolean => {
         const permissions = state.permissions;
+        if (state.isOwner) return true;
         if (type == "admin") return permissions?.admin ?? false;
         if (permissions?.admin) return true;
         if (
@@ -48,6 +51,7 @@ export const useAbilityStore = defineStore("ability", {
         section: PermissionSection,
         module?: PermissionModule
       ): boolean => {
+        // ignores ownership
         if (type == "admin") return permissions?.admin ?? false;
         if (permissions?.admin) return true;
         if (
@@ -64,8 +68,9 @@ export const useAbilityStore = defineStore("ability", {
       },
   },
   actions: {
-    setAbility(permissions: PermissionObject) {
+    setAbility(permissions: PermissionObject, isOwner: boolean) {
       this.permissions = permissions;
+      this.isOwner = isOwner;
     },
   },
 });

src/viewmodels/admin/user.models.ts

@@ -7,6 +7,7 @@ export interface UserViewModel {
   mail: string;
   firstname: string;
   lastname: string;
+  isOwner: boolean;
   permissions: PermissionObject;
   roles: Array<RoleViewModel>;
   permissions_total: PermissionObject;

src/views/admin/user/UserEditRoles.vue

@@ -74,11 +74,6 @@ export default defineComponent({
   props: {
     id: String,
   },
-  watch: {
-    origin() {
-      this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
-    },
-  },
   data() {
     return {
       loading: "loading" as "loading" | "fetched" | "failed",
@@ -97,7 +92,7 @@ export default defineComponent({
       return this.roles.filter((r) => !this.assigned.includes(r.id));
     },
     canSaveOrReset(): boolean {
-      return isEqual(this.origin?.roles, this.assigned);
+      return isEqual(this.origin?.roles.map((r) => r.id) ?? [], this.assigned);
     },
   },
   mounted() {
@@ -118,8 +113,8 @@ export default defineComponent({
     fetchItem() {
       this.fetchUserById(parseInt(this.id ?? ""))
         .then((result) => {
-          this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
           this.origin = cloneDeep(result.data);
+          this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
           this.loading = "fetched";
         })
         .catch((err) => {