new package dbHandler accesscontrol memeberdb and login with rights

src/vueLib/checkboxes/CheckBoxGroupPermissions.vue

@@ -0,0 +1,67 @@
+<template>
+  <q-card>
+    <q-card bordered v-for="(permission, index) in localPermission" v-bind:key="index">
+      <q-card-section class="text-center">
+        <div class="text-h7 text-bold text-primary">{{ $t(permission.name) }}</div>
+      </q-card-section>
+      <q-separator></q-separator>
+      <div class="flex justify-center">
+        <q-checkbox
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 0)"
+          @update:model-value="(val) => toggleBit(index, 0, val)"
+          >{{ i18n.global.t('read') }}</q-checkbox
+        >
+        <q-checkbox
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 1)"
+          @update:model-value="(val) => toggleBit(index, 1, val)"
+          >{{ i18n.global.t('write') }}</q-checkbox
+        >
+        <q-checkbox
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 2)"
+          @update:model-value="(val) => toggleBit(index, 2, val)"
+          >{{ i18n.global.t('delete') }}</q-checkbox
+        >
+      </div>
+    </q-card>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType } from 'vue';
+import type { Permissions } from './permissions';
+import { i18n } from 'src/boot/lang';
+
+const props = defineProps({
+  permissions: {
+    type: Object as PropType<Permissions>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const localPermission = ref(
+  props.permissions.map((e) => ({
+    name: e.name,
+    permission: e.permission ?? 0,
+  })),
+);
+
+function isFlagSet(mask: number, flag: number) {
+  return (mask & flag) !== 0;
+}
+
+function toggleBit(index: number, bit: number, value: boolean) {
+  const item = localPermission.value[index];
+  if (!item) return; // guard against undefined index
+
+  const mask = 1 << bit;
+  const current = item.permission ?? 0;
+
+  item.permission = value ? current | mask : current & ~mask;
+  emit('update', localPermission.value);
+}
+</script>

src/vueLib/checkboxes/permissions.ts

@@ -0,0 +1,40 @@
+import { i18n } from 'src/boot/lang';
+import { ref } from 'vue';
+
+export interface Permission {
+  name: string;
+  label: string;
+  permission: number;
+}
+
+export type Permissions = Permission[];
+
+export const defaultPermissions = [
+  {
+    name: 'settings',
+    label: i18n.global.t('settings'),
+    permission: 0,
+  },
+  {
+    name: 'userSettings',
+    label: i18n.global.t('userSettings'),
+    permission: 0,
+  },
+  {
+    name: 'members',
+    label: i18n.global.t('members'),
+    permission: 0,
+  },
+  {
+    name: 'attendanceTable',
+    label: i18n.global.t('attendanceTable'),
+    permission: 0,
+  },
+  {
+    name: 'excursionTable',
+    label: i18n.global.t('excursionTable'),
+    permission: 0,
+  },
+];
+
+export const permissions = ref<Permissions>(defaultPermissions);

src/vueLib/db/db.ts

@@ -1,49 +0,0 @@
-import { CapacitorSQLite, SQLiteConnection } from '@capacitor-community/sqlite';
-import type { Settings } from '../models/settings';
-
-const sqlite = new SQLiteConnection(CapacitorSQLite);
-
-export async function initDB() {
-  const db = await sqlite.createConnection('membersDB', true, 'secreto_passwordo', 1, false);
-  await db.open();
-  await db.execute(`CREATE TABLE IF NOT EXISTS users (
-						id INTEGER PRIMARY KEY AUTOINCREMENT,
-						username TEXT NOT NULL,
-						role TEXT NOT NULL,
-						password TEXT NOT NULL,
-						settings TEXT NOT NULL
-						);`);
-
-  const result = await db.query(`SELECT * FROM users WHERE username = ?`, ['admin']);
-  if (result.values?.length === 0) {
-    await db.run(`INSERT INTO users (username, role, password, settings) VALUES (?, ?, ?, ?)`, [
-      'admin',
-      'admin',
-      'tecamino@2023',
-      {},
-    ]);
-  }
-  return db;
-}
-
-export async function addUser(user: string, role: string, password: string, settings: Settings) {
-  const db = await initDB();
-  await db.run(`INSERT INTO users (username, role, password, settings) VALUES (?, ?, ?, ?)`, [
-    user,
-    role,
-    password,
-    settings,
-  ]);
-}
-
-export async function getUsers() {
-  const db = await initDB();
-  const resp = await db.query(`SELECT * FROM users`);
-  return resp.values;
-}
-
-export async function getUser(user: string) {
-  const db = await initDB();
-  const resp = await db.query(`SELECT EXISTS(SELECT 1 FROM users WHERE username = ?)`, [user]);
-  return resp.values;
-}

src/vueLib/login/LoginForm.vue

@@ -8,6 +8,7 @@
           ref="refUserInput"
           dense
           filled
+          autocomplete="username"
           type="text"
           :label="$t('user')"
           v-model="user"
@@ -16,6 +17,7 @@
         <q-input
           dense
           filled
+          autocomplete="current-password"
           :type="showPassword ? 'text' : 'password'"
           :label="$t('password')"
           v-model="password"
@@ -27,14 +29,17 @@
               flat
               dense
               :icon="showPassword ? 'visibility_off' : 'visibility'"
-              @mousedown.left="showPassword = true"
-              @mouseup.left="showPassword = false"
-              @mouseleave="showPassword = false"
+              @mousedown.prevent="showPassword = true"
+              @mouseup.prevent="showPassword = false"
+              @mouseleave.prevent="showPassword = false"
+              @touchstart.prevent="showPassword = true"
+              @touchend.prevent="showPassword = false"
+              @touchcancel.prevent="showPassword = false"
             ></q-btn>
           </template>
         </q-input>
         <div class="q-pt-sm q-mr-md row justify-end">
-          <q-btn color="primary" :label="$t('login')" @click="onSubmit"></q-btn>
+          <q-btn no-caps color="primary" :label="$t('login')" @click="onSubmit"></q-btn>
         </div>
       </q-card>
     </q-item-section>
@@ -59,25 +64,24 @@ const { login } = useLogin();
 
 const emit = defineEmits(['update-close']);
 
-const onSubmit = () => {
-  refForm.value?.validate().then((success: boolean) => {
-    if (success) {
-      login(user.value, password.value)
-        .then(() => {
-          NotifyResponse("logged in as '" + user.value + "'");
-          emit('update-close');
-        })
-        .catch((err) => {
-          NotifyResponse(err, 'error');
-          shake.value = true;
-          setTimeout(() => {
-            shake.value = false;
-          }, 500);
-        });
-    } else {
-      NotifyResponse('error submitting login form', 'error');
-    }
-  });
+const onSubmit = async () => {
+  const valid = refForm.value?.validate();
+  if (!valid) {
+    NotifyResponse('error submitting login form', 'error');
+    return;
+  }
+  await login(user.value, password.value)
+    .then(() => {
+      NotifyResponse("logged in as '" + user.value + "'");
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+      shake.value = true;
+      setTimeout(() => {
+        shake.value = false;
+      }, 500);
+    });
+  emit('update-close');
 };
 </script>
 

src/vueLib/login/LoginMenu.vue

@@ -9,6 +9,9 @@
           <q-item v-if="showLogin" clickable v-close-popup @click="openLogin">
             <q-item-section class="text-primary">{{ loginText }}</q-item-section>
           </q-item>
+          <q-item>
+            <q-btn flat :icon="Dark.mode ? 'light_mode' : 'dark_mode'" @click="Dark.toggle"></q-btn>
+          </q-item>
           <q-item>
             <q-select
               :label="$t('language')"
@@ -19,11 +22,20 @@
               :options="langSelection"
             ></q-select>
           </q-item>
-          <q-item v-if="autorized">
+          <q-item
+            v-if="
+              (autorized || user.isPermittedTo('settings', 'read')) && route.path !== '/settings'
+            "
+          >
             <q-btn flat color="secondary" icon="settings" to="/settings"></q-btn>
           </q-item>
-          <q-item v-if="autorized">
-            <q-btn flat color="secondary" icon="group" to="/usersSettings"></q-btn>
+          <q-item
+            v-if="
+              (autorized || user.isPermittedTo('userSettings', 'read')) &&
+              route.path !== '/userSettings'
+            "
+          >
+            <q-btn flat color="secondary" icon="group" to="/userSettings"></q-btn>
           </q-item>
         </q-list>
       </q-menu>
@@ -40,6 +52,7 @@ import { useNotify } from '../general/useNotify';
 import { lang, i18n } from 'src/boot/lang';
 import { useUserStore } from './userStore';
 import { useRoute } from 'vue-router';
+import { Dark } from 'quasar';
 
 const route = useRoute();
 const showLogin = computed(

src/vueLib/login/useLogin.ts

@@ -18,15 +18,21 @@ export function useLogin() {
 
         Logo.value = sets.icon;
         document.documentElement.style.setProperty('--q-primary', sets.primaryColor);
+        document.documentElement.style.setProperty('--q-primary-text', sets.primaryColorText);
         document.documentElement.style.setProperty('--q-secondary', sets.secondaryColor);
+        document.documentElement.style.setProperty('--q-secondary-text', sets.secondaryColorText);
         localStorage.setItem('icon', sets.icon);
         localStorage.setItem('databaseName', sets.databaseName);
         localStorage.setItem('primaryColor', sets.primaryColor);
+        localStorage.setItem('primaryColorText', sets.primaryColorText);
         localStorage.setItem('secondaryColor', sets.secondaryColor);
+        localStorage.setItem('secondaryColorText', sets.secondaryColorText);
       });
 
       const resp = await appApi.get('/login/me');
-      userStore.setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role });
+      await userStore
+        .setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role })
+        .catch((err) => console.log(err));
 
       startRefreshInterval();
       return true;
@@ -47,12 +53,14 @@ export function useLogin() {
 
   async function refresh() {
     await appApi
-      .post('secure/login/refresh', {}, { withCredentials: true })
+      .post('login/refresh', {}, { withCredentials: true })
       .then(() => {
         appApi
           .get('/login/me')
           .then((resp) => {
-            userStore.setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role });
+            userStore
+              .setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role })
+              .catch((err) => console.error(err));
             if (!intervalId) {
               startRefreshInterval();
             }
@@ -67,7 +75,7 @@ export function useLogin() {
     return false;
   }
   function getUser() {
-    return userStore.getUser();
+    return userStore.user;
   }
 
   function startRefreshInterval() {

src/vueLib/login/userStore.ts

@@ -1,30 +1,52 @@
 import { defineStore } from 'pinia';
-import { useGlobalRouter } from 'src/utils/globalRouter';
-import { useGlobalQ } from 'src/utils/globalQ';
+import { useGlobalRouter } from 'src/vueLib/utils/globalRouter';
+import { useGlobalQ } from 'src/vueLib/utils/globalQ';
+import { appApi } from 'src/boot/axios';
+import { useNotify } from '../general/useNotify';
+import type { Role } from '../models/roles';
+import type { UserState, User } from '../models/user';
+import type { Permission } from '../checkboxes/permissions';
 
-interface User {
-  id: number;
-  username: string;
-  role: string;
-}
-
-interface UserState {
-  user: User | null;
-}
+const { NotifyResponse } = useNotify();
 
 export const useUserStore = defineStore('user', {
   state: (): UserState => ({
     user: null,
   }),
   getters: {
-    isAuthenticated: (state): boolean => !!state.user,
+    isAuthenticated: (state: UserState): boolean => {
+      return !!state.user;
+    },
+
+    isAuthorizedAs: (state: UserState) => {
+      return (roles: string[]) => {
+        return state.user !== null && roles.includes(state.user.role);
+      };
+    },
+    isPermittedTo: (state: UserState) => {
+      return (name: string, type: 'read' | 'write' | 'delete'): boolean => {
+        const permission = state.user?.permissions?.find((r: Permission) => r.name === name);
+        switch (type) {
+          case 'read':
+            return permission?.permission ? (permission.permission & (1 << 0)) === 1 : false;
+          case 'write':
+            return permission?.permission ? (permission.permission & (1 << 1)) === 2 : false;
+          case 'delete':
+            return permission?.permission ? (permission.permission & (1 << 2)) === 4 : false;
+        }
+      };
+    },
   },
   actions: {
-    setUser(user: User) {
-      this.user = user;
-    },
-    getUser() {
-      return this.user;
+    async setUser(user: User) {
+      await appApi
+        .get('roles?role=' + user.role)
+        .then((resp) => {
+          const roleData = resp.data.find((role: Role) => role.role === user.role);
+          user.permissions = roleData?.permissions || [];
+          this.user = user;
+        })
+        .catch((err) => NotifyResponse(err, 'error'));
     },
     clearUser() {
       const $q = useGlobalQ();
@@ -60,9 +82,5 @@ export const useUserStore = defineStore('user', {
         }
       });
     },
-
-    isAuthorizedAs(roles: string[]) {
-      return this.user !== null && roles.includes(this.user.role);
-    },
   },
 });

src/vueLib/models/rights.ts

@@ -1,8 +0,0 @@
-export interface Right {
-  name: string;
-  read: boolean;
-  write: boolean;
-  delete: boolean;
-}
-
-export type Rights = Right[];

src/vueLib/models/roles.ts

@@ -1,9 +1,9 @@
-import type { Rights } from './rights';
+import type { Permissions } from '../checkboxes/permissions';
 
 export interface Role {
   id?: number;
   role: string;
-  rights: Rights | null;
+  permissions: Permissions;
 }
 
 export type Roles = Role[];

src/vueLib/models/settings.ts

@@ -2,5 +2,18 @@ export type Settings = {
   icon: string;
   databaseName: string;
   primaryColor: string;
+  primaryColorText: string;
   secondaryColor: string;
+  secondaryColorText: string;
 };
+
+export function DefaultSettings(): Settings {
+  return {
+    icon: '',
+    databaseName: 'members.dba',
+    primaryColor: document.documentElement.style.getPropertyValue('--q-primary-text'),
+    primaryColorText: document.documentElement.style.getPropertyValue('--q-primary'),
+    secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),
+    secondaryColorText: document.documentElement.style.getPropertyValue('--q-secondary-text'),
+  };
+}

src/vueLib/models/user.ts

@@ -0,0 +1,12 @@
+import type { Permissions } from '../checkboxes/permissions';
+
+export interface User {
+  id: number;
+  username: string;
+  role: string;
+  permissions?: Permissions;
+}
+
+export interface UserState {
+  user: User | null;
+}

src/vueLib/models/users.ts

@@ -1,9 +1,13 @@
+import type { Settings } from './settings';
+
 export interface User {
   id?: number;
   user: string;
   email: string;
   role: string;
   expires: string;
+  password?: string;
+  settings?: Settings;
 }
 
 export type Users = User[];

src/vueLib/tables/members/MembersTable.ts

@@ -13,7 +13,7 @@ export function useMemberTable() {
     sortBy: 'firstName',
     descending: false,
     page: 1,
-    rowsPerPage: 10,
+    rowsPerPage: 20,
   });
 
   const columns = computed(() => [
@@ -171,7 +171,7 @@ export function useMemberTable() {
     loading.value = true;
 
     appApi
-      .get('secure/members')
+      .get('members')
       .then((resp) => {
         if (resp.data === null) {
           members.value = [];

src/vueLib/tables/members/MembersTable.vue

@@ -23,10 +23,17 @@
     >
       <template v-slot:top-left>
         <q-btn-group push flat style="color: grey">
-          <q-btn dense flat icon="add" @click="openAllValueDialog(null)">
+          <q-btn
+            v-if="user.isPermittedTo('userSettings', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openAllValueDialog(null)"
+          >
             <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
           </q-btn>
           <q-btn
+            v-if="user.isPermittedTo('userSettings', 'write')"
             dense
             flat
             style="color: grey"
@@ -35,7 +42,13 @@
           >
             <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
           </q-btn>
-          <q-btn dense flat icon="upload" @click="openUploadDialog">
+          <q-btn
+            v-if="user.isPermittedTo('userSettings', 'write')"
+            dense
+            flat
+            icon="upload"
+            @click="openUploadDialog"
+          >
             <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
           </q-btn>
         </q-btn-group>
@@ -66,7 +79,11 @@
         <q-td
           :props="props"
           :class="getRowClass(props.row)"
-          @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+          :style="user.isPermittedTo('userSettings', 'write') ? 'cursor: pointer' : ''"
+          @click="
+            user.isPermittedTo('userSettings', 'write') &&
+            openSingleValueDialog(props.col.label, props.col.name, props.row)
+          "
         >
           {{ props.value }}
         </q-td>
@@ -82,9 +99,19 @@
       </template>
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
-          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-btn
+            v-if="
+              user.isPermittedTo('userSettings', 'write') ||
+              user.isPermittedTo('userSettings', 'delete')
+            "
+            flat
+            dense
+            icon="more_vert"
+            @click="openSubmenu = true"
+          />
           <q-menu v-if="openSubmenu" anchor="top right" self="top left">
             <q-item
+              v-if="user.isPermittedTo('userSettings', 'write')"
               clickable
               v-close-popup
               @click="openAllValueDialog(props.row)"
@@ -92,6 +119,7 @@
               >{{ $t('edit') }}</q-item
             >
             <q-item
+              v-if="user.isPermittedTo('userSettings', 'delete')"
               clickable
               v-close-popup
               @click="openRemoveDialog(props.row)"
@@ -104,7 +132,12 @@
       </template>
     </q-table>
   </div>
-  <EditOneDialog ref="editOneDialog" v-on:update="updateMembers"></EditOneDialog>
+  <EditOneDialog
+    ref="editOneDialog"
+    endpoint="members/edit"
+    query-id
+    v-on:update="updateMembers"
+  ></EditOneDialog>
   <EditAllDialog ref="editAllDialog" v-on:update="updateMembers"></EditAllDialog>
   <OkDialog
     ref="okDialog"
@@ -131,6 +164,7 @@ import { useNotify } from 'src/vueLib/general/useNotify';
 import { useMemberTable } from './MembersTable';
 import UploadDialog from 'src/components/UploadDialog.vue';
 import { databaseName } from './MembersTable';
+import { useUserStore } from 'src/vueLib/login/userStore';
 
 export interface MemberDialog {
   getSelected: () => Members;
@@ -146,6 +180,7 @@ const selectOption = ref(false);
 const selected = ref<Members>([]);
 const openSubmenu = ref(false);
 const filter = ref('');
+const user = useUserStore();
 
 const {
   members,
@@ -162,7 +197,7 @@ onMounted(() => {
   loading.value = true;
 
   appApi
-    .post('secure/database/open', { dbPath: databaseName.value, create: true })
+    .post('database/open', { dbPath: databaseName.value, create: true })
     .then(() => {
       updateMembers();
     })
@@ -214,7 +249,7 @@ function removeMember(...removeMembers: Members) {
   });
 
   appApi
-    .post('secure/members/delete', { ids: memberIds })
+    .post('members/delete', { ids: memberIds })
     .then(() => {
       updateMembers();
       selected.value = [];

src/vueLib/tables/roles/RoleTable.ts

@@ -3,6 +3,8 @@ import { ref, computed } from 'vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
 import type { Roles } from 'src/vueLib/models/roles';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { useLogin } from 'src/vueLib/login/useLogin';
 
 export const roles = ref<Roles>([]);
 
@@ -31,11 +33,10 @@ export function useRoleTable() {
       sortable: true,
     },
     {
-      name: 'rights',
+      name: 'permissions',
       align: 'left' as const,
-      label: i18n.global.t('rights'),
-      field: 'rights',
-      sortable: true,
+      label: i18n.global.t('permissions'),
+      field: '',
       style: 'width: 120px; max-width: 120px;',
     },
     { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
@@ -44,18 +45,21 @@ export function useRoleTable() {
   const { NotifyResponse } = useNotify();
 
   const loading = ref(false);
+  const userStore = useUserStore();
+  const login = useLogin();
 
   //updates user list from database
-  function updateRoles() {
+  async function updateRoles() {
     loading.value = true;
-    appApi
-      .get('secure/roles')
+    await appApi
+      .get('roles?id=0')
       .then((resp) => {
         if (resp.data === null) {
           roles.value = [];
           return;
         }
         roles.value = resp.data as Roles;
+
         if (roles.value === null) {
           roles.value = [];
           return;
@@ -68,6 +72,17 @@ export function useRoleTable() {
       .finally(() => {
         loading.value = false;
       });
+    await appApi
+      .get('/login/me')
+      .then((resp) => {
+        userStore
+          .setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role })
+          .catch((err) => console.log(err));
+        login.refresh().catch((err) => console.error(err));
+      })
+      .catch(() => {
+        login.logout().catch((err) => console.error(err));
+      });
   }
   return {
     roles,

src/vueLib/tables/roles/RoleTable.vue

@@ -23,10 +23,17 @@
     >
       <template v-slot:top-left>
         <q-btn-group push flat style="color: grey">
-          <q-btn dense flat icon="add" @click="openAllValueDialog(null)">
+          <q-btn
+            v-if="user.isPermittedTo('userSettings', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openAllValueDialog(null)"
+          >
             <q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
           </q-btn>
           <q-btn
+            v-if="user.isPermittedTo('userSettings', 'write')"
             dense
             flat
             style="color: grey"
@@ -62,21 +69,65 @@
       <template v-slot:body-cell="props">
         <q-td
           :props="props"
-          @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+          :disable="!autorized(props.row)"
+          :style="
+            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+              ? 'cursor: pointer'
+              : ''
+          "
+          @click="
+            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+              ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+              : ''
+          "
         >
           {{ props.value }}
         </q-td>
       </template>
+      <template v-slot:body-cell-permissions="props">
+        <q-td :props="props">
+          <q-btn
+            :disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')"
+            flat
+            dense
+            icon="rule"
+            :color="
+              autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+                ? 'secondary'
+                : 'grey'
+            "
+            @click="
+              user.isPermittedTo('userSettings', 'write') &&
+              openAllValueDialog(props.row, 'permissions')
+            "
+          >
+            <q-tooltip> {{ $t('permissions') }} </q-tooltip>
+          </q-btn>
+        </q-td>
+      </template>
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
-          <q-btn flat dense icon="delete" color="negative" @click="openRemoveDialog(props.row)">
+          <q-btn
+            v-if="user.isPermittedTo('userSettings', 'delete')"
+            :disable="!autorized(props.row)"
+            flat
+            dense
+            icon="delete"
+            color="negative"
+            @click="openRemoveDialog(props.row)"
+          >
             <q-tooltip> {{ $t('delete') }} </q-tooltip>
           </q-btn>
         </q-td>
       </template>
     </q-table>
   </div>
-  <EditOneDialog ref="editOneDialog" v-on:update="updateRoles"></EditOneDialog>
+  <EditOneDialog
+    ref="editOneDialog"
+    endpoint="roles/update"
+    query-id
+    v-on:update="updateRoles"
+  ></EditOneDialog>
   <EditAllDialog ref="editAllDialog" v-on:update="updateRoles"></EditAllDialog>
   <OkDialog
     ref="okDialog"
@@ -101,6 +152,9 @@ import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useRoleTable } from './RoleTable';
 import { useLogin } from 'src/vueLib/login/useLogin';
+import { i18n } from 'src/boot/lang';
+import { QTable } from 'quasar';
+import { useUserStore } from 'src/vueLib/login/userStore';
 
 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();
@@ -110,24 +164,33 @@ const deleteText = ref('');
 const selectOption = ref(false);
 const selected = ref<Roles>([]);
 const openSubmenu = ref(false);
+const currentUser = ref();
 const filter = ref('');
+const user = useUserStore();
 
 const { roles, pagination, loading, columns, updateRoles } = useRoleTable();
 
 //load on mounting page
 onMounted(() => {
   loading.value = true;
-  updateRoles();
+  const login = useLogin();
+  currentUser.value = login.getUser();
+  updateRoles().catch((err) => console.error(err));
 });
 
+function autorized(role: Role): boolean {
+  if (role.id !== 1) return true;
+  return false;
+}
+
 // opens dialog for all role values
 function openSingleValueDialog(label: string, field: string, role: Role) {
   editOneDialog.value?.open(label, field, role);
 }
 
 //opens dialog for one value
-function openAllValueDialog(role: Role | null) {
-  editAllDialog.value?.open(role);
+function openAllValueDialog(role: Role | null, typ?: 'permissions') {
+  editAllDialog.value?.open(role, typ);
 }
 
 //opens remove dialog
@@ -145,18 +208,22 @@ function removeRole(...removeRoles: Roles) {
   const roles: string[] = [];
 
   removeRoles.forEach((role: Role) => {
-    if (role.role) {
+    if (role.role === currentUser.value.role) {
+      NotifyResponse(i18n.global.t('notPossibleToDeleteLoggedInRole'), 'error');
+    } else if (role.role) {
       roles.push(role.role);
     }
   });
 
-  const login = useLogin();
-  const user = login.getUser();
-
   appApi
-    .post('secure/roles/delete?role=' + user?.role, { roles: roles })
-    .then(() => {
-      updateRoles();
+    .post('roles/delete?role=' + currentUser.value.role, { roles: roles })
+    .then((resp) => {
+      updateRoles().catch((err) => console.error(err));
+      if (roles.length === 1) {
+        NotifyResponse("'" + roles[0] + "' " + i18n.global.t('deleted'), 'warning');
+      } else {
+        NotifyResponse(resp.data, 'warning');
+      }
       selected.value = [];
     })
     .catch((err) => NotifyResponse(err, 'error'))
@@ -169,6 +236,7 @@ function getSelected(): Roles {
   if (selected.value.length === 0) return [];
   return selected.value;
 }
+
 defineExpose({
   getSelected,
 });

src/vueLib/tables/users/UserTable.ts

@@ -55,9 +55,8 @@ export function useUserTable() {
   //updates user list from database
   function updateUsers() {
     loading.value = true;
-
     appApi
-      .get('secure/users')
+      .get('users')
       .then((resp) => {
         if (resp.data === null) {
           users.value = [];

src/vueLib/tables/users/UserTable.vue

@@ -23,10 +23,17 @@
     >
       <template v-slot:top-left>
         <q-btn-group push flat style="color: grey">
-          <q-btn dense flat icon="add" @click="openAllValueDialog(null)">
+          <q-btn
+            v-if="user.isPermittedTo('userSettings', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openAllValueDialog(null)"
+          >
             <q-tooltip>{{ $t('addNewUser') }}</q-tooltip>
           </q-btn>
           <q-btn
+            v-if="user.isPermittedTo('userSettings', 'write')"
             dense
             flat
             style="color: grey"
@@ -61,27 +68,55 @@
       </template>
       <template v-slot:body-cell="props">
         <q-td v-if="props.col.name === 'role'" :props="props">
-          <q-select dense v-model="props.row.role" :options="localRoles"></q-select>
+          <q-select
+            :readonly="!user.isPermittedTo('userSettings', 'write') || !autorized(props.row)"
+            dense
+            v-model="props.row.role"
+            :options="localRoles"
+            @update:model-value="updateUser(props.row)"
+          ></q-select>
         </q-td>
         <q-td
           v-else
           :props="props"
-          @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+          :style="
+            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+              ? 'cursor: pointer'
+              : ''
+          "
+          @click="
+            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+              ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+              : ''
+          "
         >
           {{ props.value }}
         </q-td>
       </template>
       <template v-slot:body-cell-option="props">
         <q-td :props="props">
-          <q-btn flat dense icon="delete" color="negative" @click="openRemoveDialog(props.row)">
+          <q-btn
+            v-if="user.isPermittedTo('userSettings', 'delete')"
+            :disable="!autorized(props.row)"
+            flat
+            dense
+            icon="delete"
+            color="negative"
+            @click="openRemoveDialog(props.row)"
+          >
             <q-tooltip> {{ $t('delete') }} </q-tooltip>
           </q-btn>
         </q-td>
       </template>
     </q-table>
   </div>
-  <EditOneDialog ref="editOneDialog" v-on:update="updateUsers"></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" v-on:update="updateUsers"></EditAllDialog>
+  <EditOneDialog
+    ref="editOneDialog"
+    endpoint="users/edit"
+    query-id
+    v-on:update="updateUsers"
+  ></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" :roles="localRoles" v-on:update="updateUsers"></EditAllDialog>
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -105,27 +140,42 @@ import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useUserTable } from './UserTable';
 import { useLogin } from 'src/vueLib/login/useLogin';
-import { roles } from '../roles/RoleTable';
+import { roles, useRoleTable } from '../roles/RoleTable';
+import { i18n } from 'src/boot/lang';
+import { useUserStore } from 'src/vueLib/login/userStore';
 
 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();
 const editAllDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
-const localRoles = computed(() => roles.value.map((role) => role.role));
+const localRoles = computed(() => {
+  return roles.value.map((role) => role.role);
+});
 const selectOption = ref(false);
 const selected = ref<Users>([]);
 const openSubmenu = ref(false);
 const filter = ref('');
-
+const currentUser = ref();
 const { users, pagination, loading, columns, updateUsers } = useUserTable();
+const { updateRoles } = useRoleTable();
+const user = useUserStore();
 
 //load on mounting page
 onMounted(() => {
   loading.value = true;
+  const login = useLogin();
+  currentUser.value = login.getUser();
   updateUsers();
+  updateRoles().catch((err) => console.error(err));
 });
 
+//check authorization
+function autorized(user: User): boolean {
+  if (user.id !== 1) return true;
+  return false;
+}
+
 // opens dialog for all user values
 function openSingleValueDialog(label: string, field: string, user: User) {
   editOneDialog.value?.open(label, field, user);
@@ -151,16 +201,15 @@ function removeUser(...removeUsers: Users) {
   const userIds: number[] = [];
 
   removeUsers.forEach((user: User) => {
-    if (user.id) {
+    if (user.id === currentUser.value.id) {
+      NotifyResponse(i18n.global.t('notPossibleToDeleteLoggedInUser'), 'error');
+    } else if (user.id) {
       userIds.push(user.id);
     }
   });
 
-  const login = useLogin();
-  const user = login.getUser();
-
   appApi
-    .post('secure/users/delete?id=' + user?.id, { ids: userIds })
+    .post('users/delete?id=' + currentUser.value.id, { ids: userIds })
     .then(() => {
       updateUsers();
       selected.value = [];
@@ -171,10 +220,19 @@ function removeUser(...removeUsers: Users) {
     });
 }
 
+// update role select
+function updateUser(user: User) {
+  appApi
+    .post('/users/update', user)
+    .then((resp) => console.log(100, resp))
+    .catch((err) => console.log(101, err));
+}
+
 function getSelected(): Users {
   if (selected.value.length === 0) return [];
   return selected.value;
 }
+
 defineExpose({
   getSelected,
 });

src/vueLib/utils/globalQ.ts

@@ -0,0 +1,11 @@
+import type { QVueGlobals } from 'quasar';
+
+let qInstance: QVueGlobals | null = null;
+
+export function setQuasarInstance($q: QVueGlobals) {
+  qInstance = $q;
+}
+
+export function useGlobalQ(): QVueGlobals | null {
+  return qInstance;
+}

src/vueLib/utils/globalRouter.ts

@@ -0,0 +1,12 @@
+import type { Router } from 'vue-router';
+
+let globalRouter: Router | null = null;
+
+export function setRouterInstance(router: Router) {
+  globalRouter = router;
+}
+
+export function useGlobalRouter(): Router {
+  if (!globalRouter) throw new Error('Router not initialized yet!');
+  return globalRouter;
+}

src/vueLib/utils/number-helpers.ts

@@ -0,0 +1,50 @@
+import type { Ref } from 'vue';
+
+export function separate16BitUint(value: number): { highByte: number; lowByte: number } {
+  // Ensure the value is treated as a 16-bit unsigned integer
+  // (optional, but good for clarity and safety if 'value' might be outside 0-65535)
+  const normalizedValue = value & 0xffff; // Mask to ensure it's within 16 bits
+
+  // Extract the low byte (least significant 8 bits)
+  // This is simply the value modulo 256, or bitwise AND with 0xFF
+  const lowByte = normalizedValue & 0xff;
+
+  // Extract the high byte (most significant 8 bits)
+  // Right shift by 8 bits to move the high byte into the low byte's position,
+  // then mask with 0xFF to get just those 8 bits.
+  const highByte = (normalizedValue >> 8) & 0xff;
+
+  return { highByte, lowByte };
+}
+
+export function combineBytesTo16BitUint(highByte: number, lowByte: number): number {
+  // Ensure both bytes are within the 0-255 range for safety
+  const safeHighByte = highByte & 0xff;
+  const safeLowByte = lowByte & 0xff;
+
+  // Shift the high byte 8 bits to the left to place it in the higher position.
+  // Example: if highByte is 0xA4 (10100100), after shifting it becomes 0xA400 (1010010000000000).
+  const shiftedHighByte = safeHighByte << 8;
+
+  // Combine the shifted high byte with the low byte using a bitwise OR.
+  // Example: if shiftedHighByte is 0xA400 and lowByte is 0x78 (01111000),
+  // the result is 0xA478 (1010010001111000).
+  const combinedValue = shiftedHighByte | safeLowByte;
+
+  // Optional: Mask the result to ensure it's strictly within the 16-bit unsigned range (0 to 65535).
+  // This is good practice as JavaScript numbers are 64-bit floats, and this ensures
+  // the value wraps correctly if intermediate operations somehow exceeded 16 bits.
+  return combinedValue & 0xffff;
+}
+
+export function addOne(val: Ref<number>, limit: number) {
+  if (val.value < limit) {
+    val.value++;
+  }
+}
+
+export function substractOne(val: Ref<number>, limit: number) {
+  if (val.value > limit) {
+    val.value--;
+  }
+}

src/vueLib/utils/validation.ts

@@ -0,0 +1,21 @@
+import type { QForm } from 'quasar';
+import { nextTick } from 'vue';
+
+export async function validateQForm(formRef: QForm | null | undefined): Promise<boolean> {
+  await nextTick(); // wait until all inputs are rendered
+  const components = formRef?.getValidationComponents?.();
+
+  if (!components) {
+    console.warn('No validation components found in form');
+    return true;
+  }
+
+  let allValid = true;
+
+  for (const comp of components) {
+    const valid = await comp.validate();
+    if (!valid) allValid = false;
+  }
+
+  return allValid;
+}