LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright 2021 Tim Gröger | Flaschengeist Developers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,47 +1,62 @@
-# Flaschengeist (flaschengeist-frontend)
+# Flaschengeist (frontend)
 
-Dynamischen Managementsystem für Studentenclubs
+Modular student club administration system, licensed under the MIT license.
+
+## Installation
+
+### Install the dependencies
 
-## Install the dependencies
 ```bash
 yarn install
 ```
 
-## Plugins
+### Configure Plugins
-### Build a Plugin
+
+You can activate and deactive Plugins in `src/boot/plugins.ts`.
+You have to set the name of the Plugin into `config.loadModules`.
+
+### Build the application
+
+```bash
+yarn quasar build
+```
+
+## Development
+
+### Icons used
+
+We are using the `mdi-v5` icon set, so feel free to use any icon from it.
+A list can be found [here](https://materialdesignicons.com/)
+
+### Commands useful for development
+
+#### Start the app in development mode
+
+Provides hot-code reloading, error reporting, etc.
+
+```bash
+yarn quasar dev
+```
+
+#### File linting
+
+```bash
+yarn run lint
+```
+
+### Plugins
+
+#### Build a Plugin
+
 A Flaschengeist-Frontend-Plugin should be placed in `src/plugins`.
 It needs a `plugin.ts` File which exports a plugin with the following interface:
+
 ```
 name: string;
 mainRoutes?: PluginRouteConfig[];
 outRoutes?: PluginRouteConfig[];
-store?: Map<string, Module<any, StateInterface>>;
 requiredModules: string[];
 version: string;
 ```
 
 You have to import `FG_Plugin` from `plugins.d.ts`.
-
-### Configure Plugin
-
-You can activate and deactive Plugins in `src/boot/plugins.ts`. You have to set the name of the Plugin into `config.loadModules`.
-The order of the plugins is importend!
-
-### Start the app in development mode (hot-code reloading, error reporting, etc.)
-```bash
-yarn quasar dev
-```
-
-### Lint the files
-```bash
-yarn run lint
-```
-
-### Build the app for production
-```bash
-yarn quasar build
-```
-<!--
-### Customize the configuration
-See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
--->

package.json

@@ -1,10 +1,15 @@
 {
-  "name": "flaschengeist-frontend",
-  "version": "0.1.0-alpha.1",
-  "description": "Dynamischen Managementsystem für Studentenclubs",
-  "productName": "Flaschengeist",
-  "author": "Tim Gröger <tim@groeger-clan.de>",
   "private": true,
+  "license": "MIT",
+  "version": "2.0.0-alpha.1",
+  "productName": "Flaschengeist",
+  "name": "flaschengeist-frontend",
+  "author": "Tim Gröger <flaschengeist@wu5.de>",
+  "homepage": "https://flaschengeist.dev/Flaschengeist",
+  "description": "Modular student club administration system",
+  "bugs": {
+    "url" : "https://flaschengeist.dev/Flaschengeist/flaschengeist-frontend/issues"
+  },
   "scripts": {
     "format": "prettier --config ./package.json  --write '{,!(node_modules)/**/}*.ts'",
     "lint": "eslint --ext .js,.ts,.vue ./src"
@@ -12,32 +17,31 @@
   "dependencies": {
     "axios": "^0.21.1",
     "cordova": "^10.0.0",
-    "core-js": "^3.9.1",
+    "pinia": "^2.0.0-alpha.10",
-    "pinia": "^2.0.0-alpha.7",
     "quasar": "^2.0.0-beta.11"
   },
+  "devDependencies": {
+    "@quasar/app": "^3.0.0-beta.10",
+    "@quasar/extras": "^1.10.2",
+    "@quasar/quasar-app-extension-qcalendar": "file:deps/quasar-ui-qcalendar/app-extension",
+    "@types/node": "^12.20.7",
+    "@types/webpack": "^4.41.27",
+    "@types/webpack-env": "^1.16.0",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
+    "eslint": "^7.23.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-vue": "^7.8.0",
+    "eslint-webpack-plugin": "^2.5.3",
+    "prettier": "^2.2.1",
+    "typescript": "^4.2.3"
+  },
   "prettier": {
     "singleQuote": true,
     "semi": true,
     "printWidth": 100,
     "arrowParens": "always"
   },
-  "devDependencies": {
-    "@quasar/app": "^3.0.0-beta.10",
-    "@quasar/extras": "^1.10.0",
-    "@quasar/quasar-app-extension-qcalendar": "file:deps/quasar-ui-qcalendar/app-extension",
-    "@types/node": "^12.20.6",
-    "@types/webpack": "^4.41.26",
-    "@types/webpack-env": "^1.16.0",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "eslint": "^7.22.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-vue": "^7.7.0",
-    "eslint-webpack-plugin": "^2.5.2",
-    "prettier": "^2.2.1",
-    "typescript": "^4.2.3"
-  },
   "browserslist": [
     "last 10 Chrome versions",
     "last 10 Firefox versions",

quasar.conf.js

@@ -37,16 +37,16 @@ module.exports = configure(function (/* ctx */) {
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
-      // 'ionicons-v4',
-       'mdi-v5',
-      // 'fontawesome-v5',
       // 'eva-icons',
-      // 'themify',
+      // 'fontawesome-v5',
+      // 'ionicons-v4',
       // 'line-awesome',
-      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+      // 'material-icons',
+      'mdi-v5',
+      // 'themify',
   
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
       'roboto-font', // optional, you are not bound to it
-      'material-icons', // optional, you are not bound to it
     ],
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
@@ -74,7 +74,7 @@ module.exports = configure(function (/* ctx */) {
       chainWebpack (chain) {
         chain.plugin('eslint-webpack-plugin')
           .use(ESLintPlugin, [{
-            extensions: [ 'js', 'vue' ],
+            extensions: [ 'ts', 'js', 'vue' ],
             exclude: 'node_modules'
           }])
         },
@@ -90,7 +90,7 @@ module.exports = configure(function (/* ctx */) {
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
-      iconSet: 'material-icons', // Quasar icon set
+      iconSet: 'mdi-v5', // Quasar icon set
       lang: 'de', // Quasar language pack
       config: {
         dark: 'auto',
@@ -134,7 +134,7 @@ module.exports = configure(function (/* ctx */) {
       manifest: {
         name: 'Flaschengeist',
         short_name: 'Flaschengeist',
-        description: 'Dynamischen Managementsystem für Studentenclubs',
+        description: 'Modular student club administration system',
         display: 'standalone',
         orientation: 'portrait',
         background_color: '#ffffff',

src/components/utils/IsoDateInput.vue

@@ -7,10 +7,11 @@
     :placeholder="placeholder"
     :rules="customRules"
     :clearable="clearable"
+    v-bind="attrs"
     @clear="dateTime = ''"
   >
     <template #append>
-      <q-icon v-if="'date' || type == 'datetime'" name="event" class="cursor-pointer">
+      <q-icon v-if="'date' || type == 'datetime'" name="mdi-calendar" class="cursor-pointer">
         <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
           <q-date v-model="date" mask="YYYY-MM-DD">
             <div class="row items-center justify-end">
@@ -58,7 +59,7 @@ export default defineComponent({
     },
   },
   emits: { 'update:modelValue': (date?: Date) => !!date || !date },
-  setup(props, { emit }) {
+  setup(props, { emit, attrs }) {
     const customRules = computed(() => [
       props.type == 'date' ? stringIsDate : props.type == 'time' ? stringIsTime : stringIsDateTime,
       ...props.rules,
@@ -138,12 +139,13 @@ export default defineComponent({
     }
 
     return {
+      attrs,
       clearable,
-      date,
-      time,
-      dateTime,
       customRules,
+      date,
+      dateTime,
       placeholder,
+      time,
     };
   },
 });

src/components/utils/PasswordInput.vue

@@ -0,0 +1,47 @@
+<template>
+  <q-input v-model="password" v-bind="attrs" :label="label" :type="type">
+    <template #append><q-icon :name="name" class="cursor-pointer" @click="toggle" /></template
+  ></q-input>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'PasswordInput',
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: {
+    'update:modelValue': (value: string) => !!value,
+  },
+  setup(props, { emit, attrs }) {
+    const isPassword = ref(true);
+    const type = computed(() => (isPassword.value ? 'password' : 'text'));
+    const name = computed(() => (isPassword.value ? 'mdi-eye-off' : 'mdi-eye'));
+    const password = computed({
+      get: () => props.modelValue,
+      set: (value: string) => emit('update:modelValue', value),
+    });
+    function toggle() {
+      isPassword.value = !isPassword.value;
+    }
+
+    return {
+      attrs,
+      isPassword,
+      name,
+      password,
+      toggle,
+      type,
+    };
+  },
+});
+</script>

src/layouts/MainLayout.vue

@@ -1,15 +1,8 @@
 <template>
-  <q-layout view="hHh lpr lFf">
+  <q-layout view="hHh Lpr lff">
     <q-header elevated class="bg-primary text-white">
       <q-toolbar>
-        <q-btn
+        <q-btn dense flat round icon="mdi-menu" @click="openMenu" />
-          v-if="!leftDrawerOpen"
-          dense
-          flat
-          round
-          icon="menu"
-          @click="leftDrawerOpen = !leftDrawerOpen"
-        />
 
         <q-toolbar-title>
           <router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
@@ -21,7 +14,7 @@
         </q-toolbar-title>
 
         <!-- Hier kommen die Shortlinks hin -->
-        <q-btn icon="message" flat dense
+        <q-btn icon="mdi-message-bulleted" flat dense
           ><q-badge color="negative" floating>{{ notifications.length }}</q-badge>
           <q-menu style="max-height: 400px; overflow: auto">
             <q-btn
@@ -50,12 +43,11 @@
     </q-header>
 
     <q-drawer
-      v-model="leftDrawerOpen"
+      v-model="leftDrawer"
-      show-if-above
       side="left"
       bordered
       :mini="leftDrawerMini"
-      @click.capture="leftDrawerClicker"
+      @click.capture="openMenu"
     >
       <!-- Plugins -->
       <q-list>
@@ -66,28 +58,13 @@
         />
         <q-separator />
         <!-- Plugin functions -->
-
         <essential-link
           v-for="(entry, index) in subLinks"
           :key="'childPlugin' + index"
           :entry="entry"
         />
       </q-list>
-
-      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
-        <q-btn
-          size="sm"
-          dense
-          round
-          unelevated
-          color="secondary"
-          icon="chevron_left"
-          @click="leftDrawerMini = true"
-        />
-      </div>
-
       <q-separator />
-
       <essential-link
         v-for="(entry, index) in essentials"
         :key="'essential' + index"
@@ -126,7 +103,7 @@ export default defineComponent({
     const router = useRouter();
     const mainStore = useMainStore();
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
-    const leftDrawer = ref(false);
+    const leftDrawer = ref(true);
     const leftDrawerMini = ref(false);
     const shortcuts = flaschengeist?.shortcuts || [];
     const mainLinks = flaschengeist?.menuLinks || [];
@@ -135,22 +112,27 @@ export default defineComponent({
     const useNative = 'Notification' in window && window.Notification !== undefined;
     const noPermission = ref(!useNative || window.Notification.permission !== 'granted');
 
-    onBeforeMount(() => pollNotification());
-    onBeforeUnmount(() => window.clearInterval(polling.value));
-
-    const leftDrawerOpen = computed({
-      get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
-      set: (val: boolean) => (leftDrawer.value = val),
-    });
-
     const subLinks = computed(() => {
       const matched = router.currentRoute.value.matched[1];
       return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
     });
 
-    function leftDrawerClicker() {
+    onBeforeMount(() => {
-      if (leftDrawerMini.value) {
+      polling.value = window.setInterval(() => pollNotification(), config.pollingInterval);
+      pollNotification();
+    });
+    onBeforeUnmount(() => window.clearInterval(polling.value));
+
+    function openMenu(event: { target: HTMLInputElement }) {
+      if (event.target.nodeName === 'DIV') leftDrawerMini.value = false;
+      else {
+        if (!leftDrawer.value || leftDrawerMini.value) {
+          leftDrawer.value = true;
           leftDrawerMini.value = false;
+        } else {
+          leftDrawerMini.value = Screen.gt.sm && !leftDrawerMini.value;
+          leftDrawer.value = leftDrawerMini.value;
+        }
       }
     }
 
@@ -170,7 +152,6 @@ export default defineComponent({
     }
 
     function pollNotification() {
-      polling.value = window.setInterval(() => {
       void mainStore
         .loadNotifications(<FG_Plugin.Flaschengeist>flaschengeist)
         .then((notifications) => {
@@ -182,18 +163,17 @@ export default defineComponent({
                 })
             );
         });
-      }, config.pollingInterval);
     }
 
     return {
       essentials,
-      leftDrawerOpen,
+      leftDrawer,
       leftDrawerMini,
-      leftDrawerClicker,
       logout,
       mainLinks,
       notifications,
       noPermission,
+      openMenu,
       remove,
       requestPermission,
       shortcuts,

src/pages/Login.vue

@@ -6,20 +6,21 @@
       </q-toolbar>
 
       <q-card-section>
-        <q-form ref="LoginForm" class="q-gutter-md" @submit="doLogin">
+        <q-form class="q-gutter-md" @submit="doLogin">
           <q-input
             v-model="userid"
             filled
             label="Benutzername oder E-Mail"
-            :rules="rules"
+            autocomplete="username"
+            :rules="[notEmpty]"
             tabindex="1"
           />
-          <q-input
+          <password-input
             v-model="password"
             filled
-            type="password"
+            label="Passwort"
-            label="Password"
+            autocomplete="cureent-password"
-            :rules="rules"
+            :rules="[notEmpty]"
             tabindex="2"
           />
           <div class="row justify-between">
@@ -54,15 +55,18 @@
 </template>
 
 <script lang="ts">
-import { useMainStore } from 'src/stores';
 import { useRouter } from 'vue-router';
 import { Loading, Notify } from 'quasar';
+import { useMainStore } from 'src/stores';
 import { defineComponent, ref } from 'vue';
 import { setBaseURL, api } from 'boot/axios';
+import { notEmpty } from 'src/utils/validators';
 import { useUserStore } from 'src/plugins/user/store';
+import PasswordInput from 'src/components/utils/PasswordInput.vue';
 
 export default defineComponent({
   name: 'Login',
+  components: { PasswordInput },
   setup() {
     const mainStore = useMainStore();
     const mainRoute = { name: 'dashboard' };
@@ -71,7 +75,6 @@ export default defineComponent({
     /* Stuff for the real login page */
     const userid = ref('');
     const password = ref('');
-    const rules = [(val: string) => (val && val.length > 0) || 'Feld darf nicht leer sein!'];
     const server = ref<string | undefined>(api.defaults.baseURL);
     const visible = ref(false);
 
@@ -138,15 +141,15 @@ export default defineComponent({
     }
 
     return {
-      userid,
+      changeUrl,
-      password,
       doLogin,
       doReset,
-      rules,
+      notEmpty,
-      server,
-      changeUrl,
-      visible,
       openServerSettings,
+      password,
+      server,
+      userid,
+      visible,
     };
   },
 });

src/plugins/balance/pages/MainPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
     <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
@@ -37,7 +37,6 @@
         </div>
       </q-list>
     </q-drawer>
-    <q-page padding class="fit row justify-left q-col-gutter-sm">
     <q-tab-panels
       v-model="tab"
       style="background-color: transparent"
@@ -62,7 +61,6 @@
       </q-tab-panel>
     </q-tab-panels>
   </q-page>
-  </div>
 </template>
 
 <script lang="ts">

src/plugins/user/components/Widget.vue

@@ -1,10 +1,10 @@
 <template>
   <q-card style="text-align: center">
     <q-card-section class="row justify-center content-stretch">
-      <div class="col-4">
+      <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" />
+            <img :src="avatarLink" :onerror="error" />
           </q-avatar>
         </div>
       </div>
@@ -39,9 +39,14 @@ export default defineComponent({
     // Ensure users are loaded,so we can query birthdays
     onMounted(() => userStore.getUsers(false));
 
-    const name = ref(mainStore.currentUser.display_name);
+    const avatar = ref(true);
+    const name = ref(mainStore.currentUser.firstname);
     const avatarLink = ref(mainStore.currentUser.avatar_url);
 
+    function error() {
+      avatar.value = false;
+    }
+
     function userHasBirthday(user: FG.User) {
       const today = new Date();
       return (
@@ -61,7 +66,7 @@ export default defineComponent({
         .filter((user) => user.userid !== mainStore.currentUser.userid)
     );
 
-    return { avatarLink, name, hasBirthday, birthday };
+    return { avatar, avatarLink, error, name, hasBirthday, birthday };
   },
 });
 </script>

src/plugins/user/components/settings/MainUserSettings.vue

@@ -2,44 +2,48 @@
   <q-form @submit="save" @reset="reset">
     <q-card-section class="fit row justify-start content-center items-center">
       <q-input
-        v-model="user_model.firstname"
+        v-model="userModel.firstname"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Vorname"
         :rules="[notEmpty]"
+        autocomplete="given-name"
         filled
       />
       <q-input
-        v-model="user_model.lastname"
+        v-model="userModel.lastname"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Nachname"
         :rules="[notEmpty]"
+        autocomplete="family-name"
         filled
       />
-
       <q-input
-        v-model="user_model.display_name"
+        v-model="userModel.display_name"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Angezeigter Name"
         :rules="[notEmpty]"
+        autocomplete="nickname"
         filled
       />
       <q-input
-        v-model="user_model.mail"
+        v-model="userModel.mail"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="E-Mail"
         :rules="[isEmail, notEmpty]"
+        autocomplete="email"
         filled
       />
       <q-input
-        v-model="user_model.userid"
+        v-model="userModel.userid"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Benutzername"
         :readonly="!newUser"
-        :rules="[isUseridUsed, notEmpty]"
+        :rules="newUser ? [isFreeUID, notEmpty] : []"
+        autocomplete="username"
         filled
       />
       <q-select
-        v-model="user_model.roles"
+        v-model="userModel.roles"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Rollen"
         filled
@@ -51,9 +55,10 @@
         option-value="name"
       />
       <IsoDateInput
-        v-model="user_model.birthday"
+        v-model="userModel.birthday"
         class="col-xs-12 col-sm-6 q-pa-sm"
         label="Geburtstag"
+        autocomplete="bday"
       />
       <q-file
         v-model="avatar"
@@ -72,31 +77,22 @@
     </q-card-section>
     <q-separator v-if="!newUser" />
     <q-card-section v-if="!newUser" class="fit row justify-start content-center items-center">
-      <q-input
+      <PasswordInput
         v-if="isCurrentUser"
         v-model="password"
-        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
-        label="Password"
-        type="password"
-        hint="Password muss immer eingetragen werden"
         :rules="[notEmpty]"
         filled
+        label="Passwort"
+        autocomplete="current-password"
+        class="col-xs-12 col-sm-6 q-pa-sm"
+        hint="Passwort muss immer eingetragen werden"
       />
-      <q-input
+      <PasswordInput
-        v-model="new_password"
+        v-model="newPassword"
-        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
+        filled
         label="Neues Password"
-        type="password"
+        autocomplete="new-password"
-        filled
+        class="col-xs-12 col-sm-6 q-pa-sm"
-      />
-      <q-input
-        v-model="new_password2"
-        class="col-xs-12 col-sm-6 col-md-4 q-pa-sm"
-        label="Wiederhole neues Password"
-        type="password"
-        :disable="new_password.length == 0"
-        :rules="[samePassword]"
-        filled
       />
     </q-card-section>
     <q-card-actions align="right">
@@ -109,14 +105,16 @@
 <script lang="ts">
 import { Notify } from 'quasar';
 import { hasPermission } from 'src/utils/permission';
+import { notEmpty, isEmail } from 'src/utils/validators';
 import IsoDateInput from 'src/components/utils/IsoDateInput.vue';
-import { defineComponent, computed, ref, onBeforeMount, PropType } from 'vue';
+import PasswordInput from 'src/components/utils/PasswordInput.vue';
+import { defineComponent, computed, ref, onBeforeMount, PropType, watch } from 'vue';
 import { useUserStore } from '../../store';
 import { useMainStore } from 'src/stores';
 
 export default defineComponent({
   name: 'MainUserSettings',
-  components: { IsoDateInput },
+  components: { IsoDateInput, PasswordInput },
   props: {
     user: {
       required: true,
@@ -131,17 +129,25 @@ export default defineComponent({
     const userStore = useUserStore();
     const mainStore = useMainStore();
 
-    const user_model = ref(props.user);
-
     onBeforeMount(() => {
       void userStore.getRoles(false);
     });
 
-    const isCurrentUser = computed(() => user_model.value.userid === mainStore.currentUser.userid);
+    const password = ref('');
+    const newPassword = ref('');
+    const avatar = ref<File | FileList | string[]>();
+    const userModel = ref(props.user);
 
     const canSetRoles = computed(() => hasPermission('users_set_roles'));
+    const allRoles = computed(() => userStore.roles.map((role) => role.name));
+    const isCurrentUser = computed(() => userModel.value.userid === mainStore.currentUser.userid);
+
+    /* Reset model if props changed */
+    watch(
+      () => props.user,
+      () => (userModel.value = props.user)
+    );
 
-    const avatar = ref([] as string[]);
     function onAvatarRejected() {
       Notify.create({
         group: false,
@@ -151,30 +157,27 @@ export default defineComponent({
         progress: true,
         actions: [{ icon: 'mdi-close', color: 'white' }],
       });
-      avatar.value = [];
+      avatar.value = undefined;
     }
 
-    const allRoles = computed(() => userStore.roles.map((role) => role.name));
-    const password = ref('');
-    const new_password = ref('');
-    const new_password2 = ref('');
-
     function save() {
-      let changed = user_model.value;
+      let changed = userModel.value;
       if (typeof changed.birthday === 'string') changed.birthday = new Date(changed.birthday);
       changed = Object.assign(changed, {
         password: password.value,
       });
-      if (new_password.value != '') {
+      if (newPassword.value != '') {
         changed = Object.assign(changed, {
-          new_password: new_password.value,
+          new_password: newPassword.value,
         });
       }
 
       emit('update:user', changed);
 
-      if (avatar.value && (avatar.value.length > 0 || avatar.value instanceof File))
+      if (avatar.value)
-        userStore.uploadAvatar(changed, avatar.value[0]).catch((response: Response) => {
+        userStore
+          .uploadAvatar(changed, avatar.value instanceof File ? avatar.value : avatar.value[0])
+          .catch((response: Response) => {
             if (response && response.status == 400) {
               onAvatarRejected();
             }
@@ -183,52 +186,32 @@ export default defineComponent({
     }
 
     function reset() {
-      user_model.value = props.user;
+      userModel.value = props.user;
       password.value = '';
-      new_password.value = '';
+      newPassword.value = '';
-      new_password2.value = '';
     }
 
-    function samePassword(val: string) {
+    function isFreeUID(val: string) {
-      return val == new_password.value || 'Passwörter sind nicht identisch!';
-    }
-
-    function notEmpty(val: string) {
-      return !!val || 'Feld darf nicht leer sein!';
-    }
-
-    function isEmail(val: string | null) {
       return (
-        !val || /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w\w+)+$/.test(val) || 'E-Mail ist nicht valide.'
+        userStore.users.findIndex((user) => user.userid === val) === -1 ||
-      );
-    }
-
-    function isUseridUsed(val: string) {
-      return (
-        !userStore.users.find((user: FG.User) => {
-          return user.userid == val;
-        }) ||
-        !props.newUser ||
         'Benutzername ist schon vergeben'
       );
     }
 
     return {
-      avatar,
-      user_model,
-      onAvatarRejected,
       allRoles,
+      avatar,
       canSetRoles,
-      password,
-      new_password,
-      new_password2,
-      samePassword,
       isCurrentUser,
       isEmail,
+      isFreeUID,
+      newPassword,
       notEmpty,
-      isUseridUsed,
+      onAvatarRejected,
-      save,
+      password,
       reset,
+      save,
+      userModel,
     };
   },
 });

src/plugins/user/components/settings/RoleSettings.vue

@@ -22,15 +22,15 @@
           />
         </q-card-section>
         <q-separator />
-        <q-card-section v-if="role" class="fit row justify-start content-center items-center">
+        <q-card-section v-if="role">
-          <q-scroll-area style="height: 20em; width: 100%">
+          <q-input v-if="role.id !== -1" v-model="newRoleName" filled label="neuer Name" />
-            <q-input v-if="role.id != -1" v-model="newRoleName" filled label="neuer Name" />
+          <q-scroll-area style="height: 40vh; width: 100%" class="background-like-input">
             <q-option-group
               :model-value="role.permissions"
               :options="permissions"
               color="primary"
               type="checkbox"
-              @input="updatePermissions"
+              @update:modelValue="updatePermissions"
             />
           </q-scroll-area>
         </q-card-section>
@@ -143,3 +143,18 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="sass" scoped>
+// Same colors like qinput with filled attribute set
+.body--light .background-like-input
+  background-color: rgba(0, 0, 0, 0.05)
+  &:hover
+    background: rgba(0,0,0,.1)
+    border-bottom: 1px solid rgba(0, 0, 0, 0.42)
+
+.body--dark .background-like-input
+  background-color: rgba(255, 255, 255, 0.07)
+  &:hover
+    background: rgba(255, 255, 255, 0.14)
+    border-bottom: 1px solid #fff
+</style>

src/plugins/user/pages/AdminSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
     <q-tabs v-if="$q.screen.gt.sm" v-model="tab">
       <q-tab
         v-for="(tabindex, index) in tabs"
@@ -24,7 +24,6 @@
         </q-item>
       </q-list>
     </q-drawer>
-    <q-page padding class="fit row justify-center content-start items-start q-gutter-sm">
     <q-tab-panels
       v-model="tab"
       style="background-color: transparent"
@@ -42,7 +41,6 @@
       </q-tab-panel>
     </q-tab-panels>
   </q-page>
-  </div>
 </template>
 
 <script lang="ts">

src/plugins/user/store.ts

@@ -64,7 +64,7 @@ export const useUserStore = defineStore({
       return data;
     },
 
-    async uploadAvatar(user: FG.User, file: string) {
+    async uploadAvatar(user: FG.User, file: string | File) {
       const formData = new FormData();
       formData.append('file', file);
       await api.post(`/users/${user.userid}/avatar`, formData, {

src/utils/validators.ts

@@ -15,3 +15,9 @@ export function stringIsTime(val: string) {
 export function stringIsDateTime(val: string) {
   return !val || /^\d{4}-\d\d-\d\d \d\d:\d\d$/.test(val) || 'Datum und Zeit ist nicht gültig.';
 }
+
+export function isEmail(val: string) {
+  return (
+    !val || /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w\w+)+$/.test(val) || 'E-Mail ist nicht gültig.'
+  );
+}