update to version 1.1.0

user can choose, how users will be shown

.eslintrc.js

@@ -17,11 +17,11 @@ module.exports = {
     project: resolve(__dirname, './tsconfig.json'),
     tsconfigRootDir: __dirname,
     ecmaVersion: 2019, // Allows for the parsing of modern ECMAScript features
-    sourceType: 'module' // Allows for the use of imports
+    sourceType: 'module', // Allows for the use of imports
   },
 
   env: {
-    browser: true
+    browser: true,
   },
 
   // Rules order is important, please avoid shuffling them
@@ -44,7 +44,7 @@ module.exports = {
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier', //'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
 
   plugins: [
@@ -54,10 +54,6 @@ module.exports = {
     // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
     // required to lint *.vue files
     'vue',
-
-    // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
-    // Prettier has not been included as plugin to avoid performance impact
-    // add it as an extension for your IDE
   ],
 
   // add your custom rules here
@@ -66,10 +62,8 @@ module.exports = {
 
     // TypeScript
     quotes: ['warn', 'single', { avoidEscape: true }],
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
 
     // allow debugger during development only
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-}
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+  },
+};

.gitignore

@@ -3,3 +3,5 @@ yarn-error.log
 # No need for sharing this
 yarn.lock
 
+.idea
+

.npmignore

@@ -0,0 +1,3 @@
+yarn-error.log
+.woodpecker/
+

.woodpecker/deploy.yml

@@ -0,0 +1,14 @@
+pipeline:
+  deploy:
+    when:
+      event: tag
+      tag: v*
+    image: node:lts-alpine
+    commands:
+      - echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" > .npmrc
+      - yarn publish --non-interactive
+    secrets: [ node_auth_token ]
+
+depends_on:
+  - lint
+

.woodpecker/lint.yml

@@ -0,0 +1,9 @@
+pipeline:
+  lint:
+    when:
+      branch: [main, develop]
+    image: node:lts-alpine
+    commands:
+      - yarn install
+      - yarn lint
+

README.md

@@ -1,4 +1,5 @@
 # Flaschengeist `users` fontend-plugin
+![status-badge](https://ci.os-sc.org/api/badges/Flaschengeist/flaschengeist-users/status.svg)
 
 This package provides the [Flaschengeist](https://flaschengeist.dev/Flaschengeist/flaschengeist) frontend for the users plugin (user management, account settings etc).
 

package.json

@@ -1,42 +1,45 @@
 {
-    "license": "MIT",
-    "version": "1.0.0-alpha.1",
-    "name": "@flaschengeist/users",
-    "author": "Ferdinand Thiessen <rpm@fthiessen.de>",
-    "homepage": "https://flaschengeist.dev/Flaschengeist",
-    "description": "Flaschengeist users plugin",
-    "bugs": {
-      "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist/issues"
-    },
-    "repository": {
-      "type": "git",
-      "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist-users"
-    },
-    "main": "src/index.ts",
-    "scripts": {
-      "pretty": "prettier --config ./package.json  --write '{,!(node_modules)/**/}*.ts'",
-      "lint": "eslint --ext .js,.ts,.vue ./src"
-    },
-    "devDependencies": {
-      "@flaschengeist/types": "^1.0.0-alpha.1",
-      "@quasar/app": "^3.0.0-beta.25",
-      "@typescript-eslint/eslint-plugin": "^4.24.0",
-      "@typescript-eslint/parser": "^4.24.0",
-      "eslint": "^7.26.0",
-      "eslint-config-prettier": "^8.3.0",
-      "eslint-plugin-vue": "^7.9.0",
-      "prettier": "^2.3.0",
-      "quasar": "^2.0.0-beta.17",
-      "typescript": "^4.2.4"
-    },
-    "peerDependencies": {
-      "@flaschengeist/api": "^1.0.0-alpha.1"
-    },
-    "prettier": {
-      "singleQuote": true,
-      "semi": true,
-      "printWidth": 100,
-      "arrowParens": "always"
-    }
+  "license": "MIT",
+  "version": "1.1.0",
+  "name": "@flaschengeist/users",
+  "author": "Ferdinand Thiessen <rpm@fthiessen.de>",
+  "homepage": "https://flaschengeist.dev/Flaschengeist",
+  "description": "Flaschengeist users plugin",
+  "bugs": {
+    "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist-users"
+  },
+  "main": "src/index.ts",
+  "scripts": {
+    "format": "prettier --config ./package.json  --write '{,!(node_modules|.*)/**/}*.{js,ts,vue}'",
+    "lint": "eslint --ext .js,.ts,.vue ./src"
+  },
+  "devDependencies": {
+    "@flaschengeist/api": "^1.0.0",
+    "@flaschengeist/types": "^1.0.0",
+    "@quasar/app-webpack": "^3.7.2",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
+    "axios": "^0.24.0",
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.2.0",
+    "pinia": "^2.0.8",
+    "prettier": "^2.5.1",
+    "quasar": "^2.11.10",
+    "typescript": "^4.5.4"
+  },
+  "peerDependencies": {
+    "@flaschengeist/api": "^1.0.0"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": true,
+    "printWidth": 100,
+    "arrowParens": "always"
   }
-  
+}

src/components/NewUser.vue

@@ -11,6 +11,7 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import { Notify } from 'quasar';
 import MainUserSettings from './settings/MainUserSettings.vue';
 import { useUserStore } from '@flaschengeist/api';
 
@@ -19,17 +20,39 @@ export default defineComponent({
   components: { MainUserSettings },
   setup() {
     const userStore = useUserStore();
-    const user = ref<FG.User>({
+    const emptyUser = {
       userid: '',
       display_name: '',
+      deleted: false,
       firstname: '',
       lastname: '',
       mail: '',
       roles: [],
-    });
+    };
+    const user = ref<FG.User>(emptyUser);
 
     async function setUser(value: FG.User) {
-      await userStore.createUser(value);
+      try {
+        await userStore.createUser(value);
+        Notify.create({
+          color: 'positive',
+          message: 'Neuer User wurde angelegt.',
+          timeout: 5000,
+          group: false,
+          actions: [{ icon: 'mdi-close', color: 'white' }],
+          textColor: 'white',
+        });
+        user.value = emptyUser;
+      } catch {
+        Notify.create({
+          color: 'negative',
+          message: 'Neuer User konnte nicht angelegt werden.',
+          timeout: 10000,
+          group: false,
+          actions: [{ icon: 'mdi-close', color: 'white' }],
+          textColor: 'white',
+        });
+      }
     }
     return { user, setUser };
   },

src/components/SettingWidget.vue

@@ -0,0 +1,66 @@
+<template>
+  <q-card>
+    <q-card-section class="text-h6"> Einstellungen Benutzer </q-card-section>
+    <q-card-section>
+      <q-select
+        v-model="displayNameMode"
+        :options="options"
+        label="Anzeige des Namens"
+        emit-value
+        map-options
+        input-debounce="0"
+        filled
+      />
+    </q-card-section>
+  </q-card>
+</template>
+<script lang="ts">
+import { defineComponent, onBeforeMount, computed } from 'vue';
+import { useUserStore } from '@flaschengeist/api';
+import { DisplayNameMode } from '../models';
+export default defineComponent({
+  name: 'SettingWidget',
+  setup() {
+    const store = useUserStore();
+    onBeforeMount(() => {
+      void store.getDisplayNameModeSetting(true);
+    });
+
+    const displayNameMode = computed({
+      get: () => store.userSettings.display_name || DisplayNameMode.DISPLAYNAME,
+      set: (val) => {
+        console.log('set', val);
+        void store.setDisplayNameModeSetting(val);
+      },
+    });
+
+    const options = [
+      {
+        label: 'Anzeigename',
+        value: DisplayNameMode.DISPLAYNAME,
+      },
+      {
+        label: 'Vorname',
+        value: DisplayNameMode.FIRSTNAME,
+      },
+      {
+        label: 'Nachname',
+        value: DisplayNameMode.LASTNAME,
+      },
+      {
+        label: 'Vor- und Nachname',
+        value: DisplayNameMode.FIRSTNAME_LASTNAME,
+      },
+      {
+        label: 'Nachname, Vorname',
+        value: DisplayNameMode.LASTNAME_FIRSTNAME,
+      },
+    ];
+
+    return {
+      displayNameMode,
+      options,
+    };
+  },
+});
+</script>

src/components/UpdateUser.vue

@@ -6,15 +6,23 @@
         <UserSelector v-model="user" />
       </div>
     </q-card-section>
-    <MainUserSettings :user="user" @update:user="updateUser" />
+    <MainUserSettings
+      :user="user"
+      :removeable="canDelete && !isCurrentUser"
+      @update:user="updateUser"
+      @remove="remove"
+    />
   </q-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref, onMounted } from 'vue';
+import { hasPermission, useMainStore, useUserStore } from '@flaschengeist/api';
+import { Notify } from 'quasar';
+import { PERMISSIONS } from '../permissions';
+
 import MainUserSettings from './settings/MainUserSettings.vue';
 import UserSelector from './UserSelector.vue';
-import { useMainStore, useUserStore } from '@flaschengeist/api';
 
 export default defineComponent({
   name: 'UpdateUser',
@@ -22,14 +30,37 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const userStore = useUserStore();
+
     const user = ref(mainStore.currentUser);
+    const canDelete = computed(() => hasPermission(PERMISSIONS.DELETE));
+    const isCurrentUser = computed(() => user.value.userid === mainStore.currentUser.userid);
+
+    onMounted(() => {
+      void userStore.getUsers(true);
+    });
 
     async function updateUser(value: FG.User) {
       await userStore.updateUser(value);
-      user.value = value
+      user.value = value;
+      Notify.create({
+        group: false,
+        type: 'positive',
+        message: 'Änderungen gespeichert',
+        timeout: 4000,
+        progress: true,
+        actions: [{ icon: 'mdi-close', color: 'white' }],
+      });
+    }
+
+    async function remove() {
+      await userStore.deleteUser(user.value);
+      user.value = mainStore.currentUser;
     }
 
     return {
+      canDelete,
+      isCurrentUser,
+      remove,
       user,
       updateUser,
     };

src/components/UserSelector.vue

@@ -4,15 +4,19 @@
     filled
     :label="label"
     :options="users"
-    option-label="display_name"
+    :option-label="showName"
     option-value="userid"
     map-options
+    use-input
+    input-debounce="0"
+    @filter="filterFn"
   />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, onBeforeMount } from 'vue';
+import { computed, defineComponent, PropType, onBeforeMount, ref } from 'vue';
 import { useUserStore } from '@flaschengeist/api';
+import { DisplayNameMode } from '../models';
 
 export default defineComponent({
   name: 'UserSelector',
@@ -26,17 +30,64 @@ export default defineComponent({
 
     onBeforeMount(() => {
       void userStore.getUsers(false);
+      void userStore.getDisplayNameModeSetting(true);
     });
 
-    const users = computed(() => userStore.users);
+    const users = computed(() =>
+      userStore.users.filter((user) => {
+        let names = filter.value.toLowerCase().split(' ');
+        if (names.length < 1) {
+          return true;
+        }
+        if (names.length === 1) {
+          let name = names[0];
+          return (
+            user.lastname.toLowerCase().includes(name) ||
+            user.firstname.toLowerCase().includes(name)
+          );
+        }
+        if (names.length === 2) {
+          let name1 = names[0];
+          let name2 = names[1];
+          return (
+            (user.lastname.toLowerCase().includes(name1) &&
+              user.firstname.toLowerCase().includes(name2)) ||
+            (user.lastname.toLowerCase().includes(name2) &&
+              user.firstname.toLowerCase().includes(name1))
+          );
+        }
+        return true;
+      })
+    );
+    const filter = ref<string>('');
+    const filterFn = (val: string, update: () => void) => {
+      filter.value = val;
+      update();
+    };
     const selected = computed({
       get: () => props.modelValue,
       set: (value: FG.User | undefined) => (value ? emit('update:modelValue', value) : undefined),
     });
+    function showName(user: FG.User) {
+      switch (userStore.userSettings.display_name) {
+        case DisplayNameMode.DISPLAYNAME:
+          return user.display_name;
+        case DisplayNameMode.FIRSTNAME:
+          return user.firstname;
+        case DisplayNameMode.LASTNAME:
+          return user.lastname;
+        case DisplayNameMode.FIRSTNAME_LASTNAME:
+          return `${user.firstname} ${user.lastname}`;
+        case DisplayNameMode.LASTNAME_FIRSTNAME:
+          return `${user.lastname}, ${user.firstname}`;
+      }
+    }
 
     return {
       selected,
       users,
+      filterFn,
+      showName,
     };
   },
 });

src/components/Widget.vue

@@ -1,12 +1,14 @@
 <template>
   <q-card style="text-align: center">
     <q-card-section class="row justify-center content-stretch">
-      <div v-if="avatar" class="col-4">
-        <div style="width: 100%; padding-bottom: 100%; position: relative">
-          <q-avatar style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
-            <img :src="avatarLink" :onerror="error" />
-          </q-avatar>
-        </div>
+      <div class="col-4">
+        <q-avatar>
+          <q-img :src="avatar" style="min-height: 100%; min-width: 100%">
+            <template #error>
+              <img src="no-image.svg" style="height: 100%" />
+            </template>
+          </q-img>
+        </q-avatar>
       </div>
       <div class="col-8">
         <span class="text-h6">Hallo {{ name }}</span
@@ -26,11 +28,11 @@
 </template>
 
 <script lang="ts">
-import { useMainStore, useUserStore } from '@flaschengeist/api';
+import { avatarURL, useMainStore, useUserStore } from '@flaschengeist/api';
 import { computed, defineComponent, onMounted, ref } from 'vue';
 
 export default defineComponent({
-  name: 'Greeting',
+  name: 'GreetingsWidget',
   setup() {
     const mainStore = useMainStore();
     const userStore = useUserStore();
@@ -38,13 +40,8 @@ export default defineComponent({
     // Ensure users are loaded,so we can query birthdays
     onMounted(() => userStore.getUsers(false));
 
-    const avatar = ref(true);
     const name = ref(mainStore.currentUser.firstname);
-    const avatarLink = ref(mainStore.currentUser.avatar_url);
-
-    function error() {
-      avatar.value = false;
-    }
+    const avatar = computed(() => avatarURL(mainStore.currentUser));
 
     function userHasBirthday(user: FG.User) {
       const today = new Date();
@@ -65,7 +62,7 @@ export default defineComponent({
         .filter((user) => user.userid !== mainStore.currentUser.userid)
     );
 
-    return { avatar, avatarLink, error, name, hasBirthday, birthday };
+    return { avatar, name, hasBirthday, birthday };
   },
 });
 </script>

src/components/settings/MainUserSettings.vue

@@ -1,4 +1,15 @@
 <template>
+  <q-dialog v-model="preview" auto-close square>
+    <q-card class="q-dialog-plugin">
+      <q-img :src="image" fit="contain">
+        <template #error>
+          <div style="width: 100%; height: 100%" class="row justify-center">
+            <img style="height: 100%; background: white" src="no-image.svg" />
+          </div>
+        </template>
+      </q-img>
+    </q-card>
+  </q-dialog>
   <q-form @submit="save" @reset="reset">
     <q-card-section class="fit row justify-start content-center items-center">
       <q-input
@@ -62,21 +73,40 @@
       />
       <q-file
         v-model="avatar"
-        class="col-xs-12 col-sm-6 q-pa-sm"
         filled
+        clearable
         label="Avatar"
-        accept=".jpg, image/*"
-        max-file-size="204800"
-        hint="Bilddateien, max. 200 KiB"
+        accept="image/*, .jpg, .png"
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        @clear="avatar = undefined"
         @rejected="onAvatarRejected"
       >
+        <template #before>
+          <q-avatar @click="preview = true">
+            <q-img
+              style="min-width: 100%; min-height: 100%"
+              :src="image"
+              @error="hasAvatar = false"
+            >
+              <template #error><img style="width: 100%" src="no-image.svg" /></template
+            ></q-img>
+          </q-avatar>
+        </template>
         <template #append>
-          <q-icon name="mdi-file-image" @click.stop />
+          <q-icon
+            v-if="!avatar && hasAvatar"
+            :name="deleteAvatar ? 'mdi-delete-restore' : 'mdi-delete'"
+            class="cursor-pointer"
+            @click="deleteAvatar = !deleteAvatar"
+          />
         </template>
       </q-file>
     </q-card-section>
     <q-separator v-if="!newUser" />
-    <q-card-section v-if="!newUser" class="fit row justify-start content-center items-center">
+    <q-card-section
+      v-if="!newUser"
+      class="fit row justify-start content-center items-center q-gutter-y-md"
+    >
       <PasswordInput
         v-if="isCurrentUser"
         v-model="password"
@@ -95,9 +125,12 @@
         class="col-xs-12 col-sm-6 q-pa-sm"
       />
     </q-card-section>
-    <q-card-actions align="right">
-      <q-btn label="Reset" type="reset" />
-      <q-btn color="primary" type="submit" label="Speichern" />
+    <q-card-actions :align="removeable ? 'between' : 'right'">
+      <q-btn v-if="removeable" label="Löschen" color="negative" @click="remove" />
+      <div>
+        <q-btn label="Reset" type="reset" style="margin-right: 0.5em" />
+        <q-btn label="Speichern" type="submit" color="primary" />
+      </div>
     </q-card-actions>
   </q-form>
 </template>
@@ -106,12 +139,25 @@
 import { Notify } from 'quasar';
 import { IsoDateInput, PasswordInput } from '@flaschengeist/api/components';
 import { defineComponent, computed, ref, onBeforeMount, PropType, watchEffect } from 'vue';
-import { hasPermission, notEmpty, isEmail, useMainStore, useUserStore } from '@flaschengeist/api';
+import {
+  avatarURL,
+  hasPermission,
+  notEmpty,
+  isEmail,
+  useMainStore,
+  useUserStore,
+  isAxiosError,
+} from '@flaschengeist/api';
+import { PERMISSIONS } from '../../permissions';
 
 export default defineComponent({
   name: 'MainUserSettings',
   components: { IsoDateInput, PasswordInput },
   props: {
+    removeable: {
+      type: Boolean,
+      default: false,
+    },
     user: {
       required: true,
       type: Object as PropType<FG.User>,
@@ -120,6 +166,7 @@ export default defineComponent({
   },
   emits: {
     'update:user': (payload: FG.User) => !!payload,
+    remove: () => true,
   },
   setup(props, { emit }) {
     const userStore = useUserStore();
@@ -129,18 +176,41 @@ export default defineComponent({
       void userStore.getRoles(false);
     });
 
+    const preview = ref(false);
     const password = ref('');
     const newPassword = ref('');
-    const avatar = ref<File | FileList | string[]>();
+    const avatar = ref<File>();
     const userModel = ref(Object.assign({}, props.user));
+    const previewURL = ref<string>(); //< Preview of an avatar as data URL
 
-    const canSetRoles = computed(() => hasPermission('users_set_roles'));
     const allRoles = computed(() => userStore.roles.map((role) => role.name));
+
+    const canSetRoles = computed(() => hasPermission(PERMISSIONS.SET_ROLES));
     const isCurrentUser = computed(() => userModel.value.userid === mainStore.currentUser.userid);
 
-    /* Reset model if props changed */
-    watchEffect(() => {if(props.user.userid && props.user.userid !== userModel.value.userid) reset()})
+    const deleteAvatar = ref(false);
+    const hasAvatar = ref(true);
 
+    /* Reset model if props changed */
+    watchEffect(() => {
+      if (props.user.userid && props.user.userid !== userModel.value.userid) reset();
+    });
+
+    watchEffect(() => {
+      if (avatar.value && avatar.value instanceof File) {
+        let reader = new FileReader();
+
+        reader.onload = (e) => {
+          previewURL.value = <string | undefined>(e.target?.result || undefined);
+        };
+
+        reader.readAsDataURL(avatar.value);
+      } else previewURL.value = undefined;
+    });
+
+    /**
+     * Notify user is file does not fulfil the requirements
+     */
     function onAvatarRejected() {
       Notify.create({
         group: false,
@@ -150,11 +220,14 @@ export default defineComponent({
         progress: true,
         actions: [{ icon: 'mdi-close', color: 'white' }],
       });
-      avatar.value = undefined;
+      avatar.value = new File([], '', {});
     }
 
-    function save() {
-      let changed = userModel.value;
+    /**
+     * Save changes, emit user model, directly uploads / deletes avatar by using the API
+     */
+    async function save() {
+      let changed: FG.User = userModel.value;
       if (typeof changed.birthday === 'string') changed.birthday = new Date(changed.birthday);
       changed = Object.assign(changed, {
         password: password.value,
@@ -167,20 +240,25 @@ export default defineComponent({
 
       emit('update:user', changed);
 
-      if (avatar.value)
-        userStore
-          .uploadAvatar(changed, avatar.value instanceof File ? avatar.value : avatar.value[0])
-          .catch((response: Response) => {
-            if (response && response.status == 400) {
-              onAvatarRejected();
-            }
-          });
+      if (avatar.value !== undefined && avatar.value.name) {
+        await userStore
+          .uploadAvatar(changed, avatar.value)
+          .catch((response) => isAxiosError(response, 400) && onAvatarRejected());
+        hasAvatar.value = true;
+      } else if (deleteAvatar.value) {
+        await userStore.deleteAvatar(changed);
+        hasAvatar.value = false;
+      }
+      password.value = '';
     }
 
     function reset() {
       userModel.value = Object.assign({}, props.user);
       password.value = '';
       newPassword.value = '';
+      avatar.value = undefined;
+      previewURL.value = undefined;
+      deleteAvatar.value = false;
     }
 
     function isFreeUID(val: string) {
@@ -190,10 +268,23 @@ export default defineComponent({
       );
     }
 
+    const image = computed(() => {
+      if (previewURL.value) {
+        return previewURL.value;
+      }
+      if (!deleteAvatar.value) {
+        return avatarURL(props.user);
+      }
+      return 'no-image.svg';
+    });
+
     return {
       allRoles,
       avatar,
       canSetRoles,
+      deleteAvatar,
+      hasAvatar,
+      image,
       isCurrentUser,
       isEmail,
       isFreeUID,
@@ -201,6 +292,8 @@ export default defineComponent({
       notEmpty,
       onAvatarRejected,
       password,
+      preview,
+      remove: () => emit('remove'),
       reset,
       save,
       userModel,

src/components/settings/RoleSettings.vue

@@ -17,7 +17,7 @@
             map-options
             clearable
             @new-value="createRole"
-            @update:modelValue="updateRole"
+            @update:model-value="updateRole"
             @clear="removeRole"
           />
         </q-card-section>
@@ -30,7 +30,7 @@
               :options="permissions"
               color="primary"
               type="checkbox"
-              @update:modelValue="updatePermissions"
+              @update:model-value="updatePermissions"
             />
           </q-scroll-area>
         </q-card-section>
@@ -157,4 +157,4 @@ export default defineComponent({
   &:hover
     background: rgba(255, 255, 255, 0.14)
     border-bottom: 1px solid #fff
-</style>
+</style>

src/components/settings/UserSession.vue

@@ -5,21 +5,28 @@
     </q-card-section>
     <q-card-section>
       <div class="row">
-        <div class="col-xs-12 col-sm-6">
-          Browser:
-          <q-icon :name="getBrowserIcon(modelValue.browser)" size="24px" />
-          {{ modelValue.browser }}
+        <div v-if="modelValue.browser" class="row col-xs-12 col-sm-6">
+          <div class="col">Browser:</div>
+          <div class="col">
+            <q-icon :name="getBrowserIcon(modelValue.browser)" size="24px" />
+          </div>
         </div>
-        <div class="col-xs-12 col-sm-6">
-          Plattform:
-          <q-icon :name="getPlatformIcon(modelValue.platform)" size="24px" />
-          {{ modelValue.platform }}
+        <div class="row col-xs-12 col-sm-6">
+          <div class="col">Plattform:</div>
+          <div class="col">
+            <q-icon :name="getPlatformIcon(modelValue.platform)" size="24px" />
+            <q-icon
+              v-if="getOS(modelValue.platform)"
+              :name="getOS(modelValue.platform)"
+              size="24px"
+            />
+          </div>
         </div>
       </div>
       <div v-if="!isEdit" class="row">
         <div class="col-xs-12 col-sm-6">
           Lebenszeit:
-          {{ modelValue.lifetime }}
+          {{ computeShownLifeTime }}
         </div>
         <div class="col-xs-12 col-sm-6">Läuft aus: {{ dateTime(modelValue.expires) }}</div>
       </div>
@@ -47,10 +54,11 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, PropType } from 'vue';
-import { formatDateTime, useMainStore, useSessionStore } from '@flaschengeist/api';
+import { useMainStore, useSessionStore } from '@flaschengeist/api';
+import { date } from 'quasar';
 
 export default defineComponent({
-  name: 'Session',
+  name: 'UserSession',
   props: {
     modelValue: {
       required: true,
@@ -65,35 +73,57 @@ export default defineComponent({
     const sessionStore = useSessionStore();
     const mainStore = useMainStore();
 
-    const dateTime = (date: Date) => formatDateTime(date, true);
+    const dateTime = (timeStamp: Date) => {
+      const _date = date.formatDate(timeStamp, 'DD.MM.YYYY');
+      const _time = date.formatDate(timeStamp, 'HH:mm');
+      return `${_date} um ${_time}`;
+    };
 
     const options = ref(['Minuten', 'Stunden', 'Tage']);
     const option = ref<string>(options.value[0]);
     const lifetime = ref(0);
-    function getBrowserIcon(browser: string) {
-      return browser == 'firefox'
+    function getBrowserIcon(br: string) {
+      const browser = br.toLowerCase();
+      return browser.includes('firefox')
         ? 'mdi-firefox'
-        : browser == 'chrome'
+        : browser.includes('chrome')
         ? 'mdi-google-chrome'
-        : browser == 'safari'
+        : browser.includes('safari')
         ? 'mdi-apple-safari'
+        : browser.includes('edge')
+        ? 'mdi-microsoft-edge'
+        : browser.includes('opera')
+        ? 'mdi-opera'
+        : browser.includes('ie')
+        ? 'mdi-internet-explorer'
         : 'mdi-help';
     }
 
-    function getPlatformIcon(platform: string) {
-      return platform == 'linux'
+    function getPlatformIcon(pl: string) {
+      const platform = pl.toLowerCase();
+      console.log('platform', platform);
+      return platform.includes('linux')
         ? 'mdi-linux'
-        : platform == 'windows'
+        : platform.includes('windows')
         ? 'mdi-microsoft-windows'
-        : platform == 'macos'
+        : platform.includes('mac')
         ? 'mdi-apple'
-        : platform == 'iphone'
-        ? 'mdi-cellphone-iphone'
-        : platform == 'android'
-        ? 'mdi-cellphone-android'
+        : platform.includes('ios')
+        ? 'mdi-cellphone'
+        : platform.includes('android')
+        ? 'mdi-cellphone'
         : 'mdi-help';
     }
 
+    function getOS(pl: string) {
+      const platform = pl.toLowerCase();
+      return platform.includes('ios')
+        ? 'mdi-apple'
+        : platform.includes('android')
+        ? 'mdi-android'
+        : false;
+    }
+
     async function deleteSession(token: string) {
       await sessionStore.deleteSession(token);
       emit('delete');
@@ -104,6 +134,33 @@ export default defineComponent({
 
     const isEdit = ref(false);
 
+    function _fillTime(val: string) {
+      while (val.length < 2) {
+        val = '0' + val;
+      }
+      return val;
+    }
+
+    const computeShownLifeTime = computed(() => {
+      let seconds = props.modelValue.lifetime;
+      let minutes;
+      let hours;
+      if (seconds < 60) {
+        return `${_fillTime(seconds.toString())} Sekunden`;
+      } else if (seconds < 60 * 60) {
+        minutes = Math.floor(seconds / 60);
+        seconds = seconds % 60;
+        return `${_fillTime(minutes.toString())}:${_fillTime(seconds.toString())} Minuten`;
+      } else {
+        hours = Math.floor(seconds / (60 * 60));
+        minutes = Math.floor((seconds % (60 * 60)) / 60);
+        seconds = minutes % 60;
+        return `${_fillTime(hours.toString())}:${_fillTime(minutes.toString())}:${_fillTime(
+          seconds.toString()
+        )} Stunden`;
+      }
+    });
+
     const computedLifetime = computed({
       get: () => {
         switch (option.value) {
@@ -158,8 +215,13 @@ export default defineComponent({
       options,
       option,
       lifetime,
+      computeShownLifeTime,
       computedLifetime,
       save,
+      getOS,
+      log: () => {
+        console.log(props.modelValue);
+      },
     };
   },
 });

src/index.ts

@@ -1,6 +1,7 @@
 import { FG_Plugin } from '@flaschengeist/types';
 import { defineAsyncComponent } from 'vue';
 import routes from './routes';
+import { DisplayNameMode } from './models';
 
 const plugin: FG_Plugin.Plugin = {
   id: 'users',
@@ -16,6 +17,15 @@ const plugin: FG_Plugin.Plugin = {
       widget: defineAsyncComponent(() => import('./components/Widget.vue')),
     },
   ],
+  settingWidgets: [
+    {
+      priority: 1,
+      name: 'userSettings',
+      permissions: [],
+      widget: defineAsyncComponent(() => import('./components/SettingWidget.vue')),
+    },
+  ],
 };
 
 export default plugin;
+export { DisplayNameMode };

src/models.ts

@@ -12,3 +12,12 @@ export interface LoginResponse {
 export interface CurrentUserResponse extends FG.User {
   permissions: FG.Permission[];
 }
+
+export enum DisplayNameMode {
+  FIRSTNAME = 'firstname',
+  LASTNAME = 'lastname',
+  FULLNAME = 'fullname',
+  DISPLAYNAME = 'display_name',
+  FIRSTNAME_LASTNAME = 'firstname_lastname',
+  LASTNAME_FIRSTNAME = 'lastname_firstname',
+}

src/pages/AdminSettings.vue

@@ -45,30 +45,58 @@
 
 <script lang="ts">
 import { Screen } from 'quasar';
+import { useRoute, useRouter } from 'vue-router';
+import { onBeforeMount, watch } from 'vue';
 import { PERMISSIONS } from '../permissions';
 import NewUser from '../components/NewUser.vue';
 import { hasPermission } from '@flaschengeist/api';
 import { computed, defineComponent, ref } from 'vue';
 import UpdateUser from '../components/UpdateUser.vue';
 import RoleSettings from '../components/settings/RoleSettings.vue';
+import { useUserStore } from '@flaschengeist/api';
 
 export default defineComponent({
   name: 'AdminSettings',
   components: { RoleSettings, UpdateUser, NewUser },
   setup() {
     const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
+    const route = useRoute();
+    const router = useRouter();
+    const userStore = useUserStore();
 
     interface Tab {
       name: string;
       label: string;
+      permissions: Array<string>;
     }
 
     const tabs: Tab[] = [
-      { name: 'user', label: 'Mitglieder' },
-      { name: 'newUser', label: 'Neues Mitglied' },
-      { name: 'roles', label: 'Rollen' },
+      {
+        name: 'user',
+        label: 'Mitglieder',
+        permissions: [PERMISSIONS.EDIT_OTHER, PERMISSIONS.SET_ROLES],
+      },
+      { name: 'newUser', label: 'Neues Mitglied', permissions: [PERMISSIONS.SET_ROLES] },
+      { name: 'roles', label: 'Rollen', permissions: [PERMISSIONS.ROLES_EDIT] },
     ];
 
+    onBeforeMount(async () => {
+      if (
+        route.query.keys?.length === 0 ||
+        !tabs.some((value) => value.name == route.query.q_tab)
+      ) {
+        await router.replace({ query: { q_tab: 'user' } });
+      }
+      tab.value = route.query.q_tab as string;
+      void userStore.getUsers(true);
+    });
+
+    const _tabs = computed(() =>
+      tabs.filter((tab) => {
+        return tab.permissions.every((permission) => hasPermission(permission));
+      })
+    );
+
     const drawer = ref<boolean>(false);
 
     const showDrawer = computed({
@@ -82,11 +110,15 @@ export default defineComponent({
 
     const tab = ref<string>('user');
 
+    watch(tab, async (val) => {
+      await router.replace({ query: { q_tab: val } });
+    });
+
     return {
       canEditRoles,
       showDrawer,
       tab,
-      tabs,
+      tabs: _tabs,
     };
   },
 });

src/pages/Members.vue

@@ -0,0 +1,153 @@
+<template>
+  <q-page>
+    <q-table
+      :columns="cols"
+      :rows="users"
+      :filter="filter"
+      :grid="grid"
+      :pagination="initialPagination"
+    >
+      <template v-slot:body-cell-avatar="props">
+        <q-td :key="props.key" :props="props">
+          <user-avatar v-model="props.row" />
+        </q-td>
+      </template>
+      <template v-slot:top-right="props">
+        <q-input v-model="filter" filled dense debounce="300" placeholder="Suche">
+          <template v-slot:append>
+            <q-icon name="mdi-magnify" />
+          </template>
+        </q-input>
+        <q-btn
+          flat
+          round
+          dense
+          :icon="grid ? 'mdi-land-rows-horizontal' : 'mdi-card-account-details'"
+          @click="grid = !grid"
+        />
+      </template>
+      <template v-slot:item="props">
+        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
+          <q-card bordered>
+            <div class="row justify-center">
+              <q-img :src="avatarURL(props.row.userid)">
+                <template #error>
+                  <div
+                    class="row fit justify-center items-center"
+                    style="background-color: transparent"
+                  >
+                    <img src="no-image.svg" style="object-fit: contain; height: 100%" />
+                  </div>
+                </template>
+              </q-img>
+            </div>
+            <q-card-section>
+              <div class="text-h6">{{ props.row.firstname }} {{ props.row.lastname }}</div>
+              <div class="text-caption">{{ props.row.display_name }}</div>
+            </q-card-section>
+            <q-card-section>
+              <div class="row items-center">
+                <q-btn
+                  flat
+                  dense
+                  icon="mdi-email"
+                  :href="'mailto:' + props.row.mail"
+                  class="q-mr-xs"
+                  no-caps
+                />
+                <div class="text-caption">{{ props.row.mail }}</div>
+              </div>
+              <div class="row items-center">
+                <q-btn
+                  flat
+                  dense
+                  icon="mdi-calendar"
+                  class="q-mr-xs"
+                  no-caps
+                  v-if="props.row.birthday"
+                />
+                <div class="text-caption" v-if="props.row.birthday">
+                  {{ props.row.birthday.toLocaleDateString() }}
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+        </div>
+      </template>
+    </q-table>
+  </q-page>
+</template>
+<script lang="ts">
+import { defineComponent, onBeforeMount, computed, ref } from 'vue';
+import { useUserStore, avatarURL } from '@flaschengeist/api';
+import { UserAvatar } from '@flaschengeist/api/components';
+
+const cols = [
+  {
+    name: 'avatar',
+    label: 'Profilbild',
+    sortable: false,
+  },
+  {
+    name: 'firstName',
+    label: 'Vorname',
+    field: 'firstname',
+    sortable: true,
+  },
+  {
+    name: 'lastName',
+    label: 'Nachname',
+    field: 'lastname',
+    sortable: true,
+  },
+  {
+    name: 'displayName',
+    label: 'Anzeigename',
+    field: 'display_name',
+    sortable: true,
+  },
+  {
+    name: 'mail',
+    label: 'E-Mail',
+    field: 'mail',
+    sortable: true,
+  },
+  {
+    name: 'birthday',
+    label: 'Geburtstag',
+    field: 'birthday',
+    sortable: true,
+    format: (val: Date | undefined) => {
+      return val?.toLocaleDateString();
+    },
+  },
+];
+
+export default defineComponent({
+  components: { UserAvatar },
+  setup() {
+    const userStore = useUserStore();
+    onBeforeMount(() => {
+      void userStore.getUsers(true);
+    });
+    const filter = ref('');
+
+    const users = computed(() => userStore.users);
+    const grid = ref(false);
+    return {
+      users,
+      cols,
+      filter,
+      grid,
+      avatarURL,
+      initialPagination: {
+        sortBy: 'lastName',
+        descending: false,
+        page: 1,
+        rowsPerPage: 0,
+        // rowsNumber: xx if getting data from a server
+      },
+    };
+  },
+});
+</script>

src/pages/Settings.vue

@@ -7,26 +7,32 @@
         </q-card-section>
         <MainUserSettings :user="currentUser" @update:user="updateUser" />
       </q-card>
+      <div v-for="(item, index) in widgets" :key="index" class="full-height col-12">
+        <component :is="item.widget" />
+      </div>
       <div class="col-12 text-left text-h6">Aktive Sessions:</div>
-      <Session
+      <user-session
         v-for="(session, index) in sessions"
         :key="'session' + index"
         v-model="sessions[index]"
         @delete="removeSession(session)"
       />
+      <q-btn label="List Widgets" @click="listWidgets" />
     </q-page>
   </div>
 </template>
 
 <script lang="ts">
-import { useMainStore, useUserStore, useSessionStore } from '@flaschengeist/api';
+import { useMainStore, useUserStore, useSessionStore, hasPermissions } from '@flaschengeist/api';
 import MainUserSettings from '../components/settings/MainUserSettings.vue';
-import { defineComponent, onBeforeMount, ref } from 'vue';
-import Session from '../components/settings/Session.vue';
+import { defineComponent, onBeforeMount, ref, computed, inject } from 'vue';
+import UserSession from '../components/settings/UserSession.vue';
+import { FG_Plugin } from '@flaschengeist/types';
+import { Notify } from 'quasar';
 
 export default defineComponent({
-  // name: 'PageName'
-  components: { Session, MainUserSettings },
+  name: 'UserSettings',
+  components: { MainUserSettings, UserSession },
   setup() {
     const mainStore = useMainStore();
     const sessionStore = useSessionStore();
@@ -38,17 +44,37 @@ export default defineComponent({
 
     async function updateUser(value: FG.User) {
       await userStore.updateUser(value);
+      Notify.create({
+        group: false,
+        type: 'positive',
+        message: 'Änderungen gespeichert',
+        timeout: 4000,
+        progress: true,
+        actions: [{ icon: 'mdi-close', color: 'white' }],
+      });
+      console.log(widgets);
     }
 
     function removeSession(s: FG.Session) {
       sessions.value = sessions.value.filter((ss) => ss.token !== s.token);
     }
 
+    const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
+    const widgets = computed(() =>
+      flaschengeist?.settingWidgets.filter((widget) => hasPermissions(widget.permissions))
+    );
+
+    function listWidgets() {
+      console.log(widgets);
+    }
+
     return {
       currentUser,
       sessions,
       updateUser,
       removeSession,
+      widgets,
+      listWidgets,
     };
   },
 });

src/permissions.ts

@@ -1,12 +1,17 @@
 export const PERMISSIONS = {
-  // Kann andere Nutzer bearbeiten
+  /* User permissions */
+  // Can edit other users
   EDIT_OTHER: 'users_edit_other',
-  // Kann Rollen von Nutzern setzen
+  // Can assign roles to users
   SET_ROLES: 'users_set_roles',
-  // Kann Nutzer löschen
-  DELETE: 'users_delete_other',
-  // Kann neue Nutzer hinzufügen
+  // Can delete users
+  DELETE: 'users_delete',
+  // Can register new users
   REGISTER: 'users_register',
-  // Kann Rollen löschen oder bearbeiten, z.b. Rechte hinzufügen etc
+
+  /* Role permissions */
+  // Can edit roles, assign permissions to roles and change names
   ROLES_EDIT: 'roles_edit',
+  // Can delete roles
+  ROLES_DELETE: 'roles_delete',
 };

src/routes/index.ts

@@ -10,6 +10,16 @@ const mainRoutes: FG_Plugin.MenuRoute[] = [
     permissions: ['user'],
     route: { path: 'user', name: 'user', redirect: { name: 'user-settings' } },
     children: [
+      {
+        title: 'Mitglieder',
+        icon: 'mdi-account-multiple',
+        shortcut: true,
+        route: {
+          path: 'members',
+          name: 'user-members',
+          component: () => import('../pages/Members.vue'),
+        },
+      },
       {
         title: 'Einstellungen',
         icon: 'mdi-account-edit',

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@quasar/app/tsconfig-preset",
+  "extends": "@quasar/app-webpack/tsconfig-preset",
   "target": "esnext",
   "compilerOptions": {
     "baseUrl": "src",