update to version 2.1.0

Reviewed-on: #4

.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
   ],
 
   globals: {
@@ -70,7 +66,7 @@ module.exports = {
     __QUASAR_SSR_PWA__: true,
     process: true,
     Capacitor: true,
-    chrome: true
+    chrome: true,
   },
 
   // add your custom rules here
@@ -80,20 +76,16 @@ module.exports = {
     'vue/multi-word-component-names': 'off',
 
     // Rejects on promises should always be of the Error type (and allow empty rejects as well)
-    'prefer-promise-reject-errors': ["error", {"allowEmptyReject": true}],
+    'prefer-promise-reject-errors': ['error', { allowEmptyReject: true }],
+
+    // Allow " if ' is contained inside the string, so we can avoid escaping
+    quotes: ['error', 'single', { avoidEscape: true }],
 
-    // Allow " if ' is contained inside the string, so we can avoid escaping 
-    quotes: [
-      process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-      'single',
-      { avoidEscape: true }
-    ],
-  
     // TypeScript, let us be not too strict
     '@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',
+  },
+};

.npmignore

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

.postcssrc.js

@@ -3,6 +3,6 @@
 module.exports = {
   plugins: [
     // to edit target browsers: use "browserslist" field in package.json
-    require('autoprefixer')
-  ]
-}
+    require('autoprefixer'),
+  ],
+};

.woodpecker/deploy.yml

@@ -0,0 +1,15 @@
+pipeline:
+  deploy:
+    when:
+      event: tag
+      tag: "@flaschengeist/api-v*"
+    image: node:lts-alpine
+    commands:
+      - cd api
+      - 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,6 @@
 # Flaschengeist (frontend)
+![status-badge](https://ci.os-sc.org/api/badges/Flaschengeist/flaschengeist-frontend/status.svg)
+
 
 Modular student club administration system, licensed under the MIT license.
 

api/components/PasswordInput.vue

@@ -44,4 +44,4 @@ export default defineComponent({
     };
   },
 });
-</script>
+</script>

api/components/UserAvatar.vue

@@ -1,6 +1,6 @@
 <template>
   <q-avatar>
-    <slot :avatarURL="avatarURL(modelValue)">
+    <slot :avatar-u-r-l="avatarURL(modelValue)">
       <q-img :src="avatarURL(modelValue)" style="min-width: 100%; min-height: 100%">
         <template #error>
           <img :src="fallback" style="height: 100%" />
@@ -43,4 +43,4 @@ export default defineComponent({
     };
   },
 });
-</script>
+</script>

api/package.json

@@ -1,6 +1,6 @@
 {
   "license": "MIT",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0",
   "name": "@flaschengeist/api",
   "author": "Tim Gröger <flaschengeist@wu5.de>",
   "homepage": "https://flaschengeist.dev/Flaschengeist",
@@ -10,14 +10,14 @@
   },
   "main": "./src/index.ts",
   "peerDependencies": {
-    "@quasar/app": "^3.2.4",
-    "flaschengeist": "^2.0.0-alpha.1",
-    "pinia": "^2.0.6"
+    "@quasar/app-webpack": "^3.7.2",
+    "flaschengeist": "^2.0.0",
+    "pinia": "^2.0.8"
   },
   "devDependencies": {
-    "@flaschengeist/types": "^1.0.0-alpha.10",
-    "@types/node": "^14.18.00",
-    "typescript": "^4.5.2"
+    "@flaschengeist/types": "^1.0.0",
+    "@types/node": "^14.18.0",
+    "typescript": "^4.5.4"
   },
   "prettier": {
     "singleQuote": true,

api/src/stores/main.ts

@@ -4,7 +4,7 @@ import { AxiosResponse } from 'axios';
 import { api } from '../internal';
 import { defineStore } from 'pinia';
 import { PersistentStorage } from '../utils/persistent';
-
+import { LocalStorage, SessionStorage } from 'quasar';
 function reviveSession() {
   return PersistentStorage.get<FG.Session>('fg_session').then((s) => fixSession(s || undefined));
 }
@@ -154,6 +154,8 @@ export const useMainStore = defineStore({
     handleLoggedOut() {
       this.$reset();
       void clearPersistant();
+      LocalStorage.clear();
+      SessionStorage.clear();
     },
   },
 });

api/src/stores/user.ts

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { api } from '../internal';
 import { isAxiosError, useMainStore } from '.';
+import { DisplayNameMode } from '@flaschengeist/users';
 
 export function fixUser(u?: FG.User) {
   return !u ? u : Object.assign(u, { birthday: u.birthday ? new Date(u.birthday) : undefined });
@@ -22,6 +23,7 @@ export const useUserStore = defineStore({
   state: () => ({
     roles: [] as FG.Role[],
     permissions: [] as FG.Permission[],
+    userSettings: {} as FG.UserSettings,
     // list of all users, include deleted ones, use `users` getter for list of active ones
     _users: [] as FG.User[],
     // Internal flags for deciding if lists need to force-loaded
@@ -31,7 +33,42 @@ export const useUserStore = defineStore({
 
   getters: {
     users(state) {
-      return state._users.filter((u) => !u.deleted);
+      const u = state._users.filter((u) => !u.deleted);
+
+      switch (this.userSettings['display_name']) {
+        case DisplayNameMode.FIRSTNAME_LASTNAME || DisplayNameMode.FIRSTNAME:
+          u.sort((a, b) => {
+            const a_lastname = a.lastname.toLowerCase();
+            const b_lastname = b.lastname.toLowerCase();
+            const a_firstname = a.firstname.toLowerCase();
+            const b_firstname = b.firstname.toLowerCase();
+            if (a_firstname === b_firstname) {
+              return a_lastname < b_lastname ? -1 : 1;
+            }
+            return a_firstname < b_firstname ? -1 : 1;
+          });
+          break;
+        case <string>DisplayNameMode.DISPLAYNAME:
+          u.sort((a, b) => {
+            const a_displayname = a.display_name.toLowerCase();
+            const b_displayname = b.display_name.toLowerCase();
+            return a_displayname < b_displayname ? -1 : 1;
+          });
+          break;
+        default:
+          u.sort((a, b) => {
+            const a_lastname = a.lastname.toLowerCase();
+            const b_lastname = b.lastname.toLowerCase();
+            const a_firstname = a.firstname.toLowerCase();
+            const b_firstname = b.firstname.toLowerCase();
+            if (a_lastname === b_lastname) {
+              return a_firstname < b_firstname ? -1 : 1;
+            }
+            return a_lastname < b_lastname ? -1 : 1;
+          });
+      }
+
+      return u;
     },
   },
 
@@ -207,5 +244,35 @@ export const useUserStore = defineStore({
       await api.delete(`/roles/${role}`);
       this.roles = this.roles.filter((r) => r.id !== role);
     },
+
+    /** Get Settings for display name mode
+     * @param force If set to true a fresh list is loaded from backend even when a local copy is available
+     * @throws Probably an AxiosError if request failed
+     * @returns Settings for display name mode
+     */
+    async getDisplayNameModeSetting(force = false): Promise<string> {
+      const mainStore = useMainStore();
+      if (force) {
+        const { data } = await api.get<{ data: string }>(
+          `users/${mainStore.currentUser.userid}/setting/display_name_mode`
+        );
+        this.userSettings['display_name'] = data.data;
+      }
+      return this.userSettings['display_name'];
+    },
+
+    /** Set Settings for display name mode
+     * @param mode New display name mode
+     * @throws Probably an AxiosError if request failed
+     * @returns Settings for display name mode
+     */
+    async setDisplayNameModeSetting(mode: string): Promise<string> {
+      const mainStore = useMainStore();
+      await api.put(`users/${mainStore.currentUser.userid}/setting/display_name_mode`, {
+        data: mode,
+      });
+      this.userSettings['display_name'] = mode;
+      return mode;
+    },
   },
 });

api/src/utils/persistent.ts

@@ -1,35 +1,35 @@
 import { LocalStorage, Platform } from 'quasar';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type PersitentTypes = Date | RegExp | number | boolean | string | object;
 
 export class PersistentStorage {
   static clear() {
-    if (Platform.is.capacitor) return Storage.clear();
+    if (Platform.is.capacitor) return Preferences.clear();
     else return Promise.resolve(LocalStorage.clear());
   }
 
   static remove(key: string) {
-    if (Platform.is.capacitor) return Storage.remove({ key: key });
+    if (Platform.is.capacitor) return Preferences.remove({ key: key });
     else return Promise.resolve(LocalStorage.remove(key));
   }
 
   static set(key: string, value: PersitentTypes) {
-    if (Platform.is.capacitor) return Storage.set({ key, value: JSON.stringify(value) });
+    if (Platform.is.capacitor) return Preferences.set({ key, value: JSON.stringify(value) });
     else return Promise.resolve(LocalStorage.set(key, value));
   }
 
   static get<T extends PersitentTypes>(key: string) {
     if (Platform.is.capacitor)
-      return Storage.get({ key }).then((v) =>
+      return Preferences.get({ key }).then((v) =>
         v.value === null ? null : (JSON.parse(v.value) as T)
       );
     else return Promise.resolve(LocalStorage.getItem<T>(key));
   }
 
   static keys() {
-    if (Platform.is.capacitor) return Storage.keys().then((v) => v.keys);
+    if (Platform.is.capacitor) return Preferences.keys().then((v) => v.keys);
     else return Promise.resolve(LocalStorage.getAllKeys());
   }
 }

api/src/utils/user.ts

@@ -1,7 +1,6 @@
 import { api } from '../internal';
 
-export function avatarURL(user: FG.User, thumbnail = true) {
-  return `${api.defaults?.baseURL || ''}/users/${user.userid}/avatar${
-    thumbnail ? '?thumbnail' : ''
-  }`;
+export function avatarURL(user: FG.User | string, thumbnail = true) {
+  if (typeof user === 'object') user = user.userid;
+  return `${api.defaults?.baseURL || ''}/users/${user}/avatar${thumbnail ? '?thumbnail' : ''}`;
 }

api/tsconfig.json

@@ -3,14 +3,7 @@
   "target": "esnext",
   "compilerOptions": {
     "baseUrl": "./",
-    "lib": [
-      "es2020",
-      "dom"
-    ],
-    "types": [
-      "@flaschengeist/types",
-      "@quasar/app",
-      "node"
-    ]
- }
+    "lib": ["es2020", "dom"],
+    "types": ["@flaschengeist/types", "@quasar/app", "node"]
+  }
 }

babel.config.js

@@ -1,6 +1,4 @@
 /* eslint-env node */
 module.exports = {
-  presets: [
-    '@quasar/babel-preset-app'
-  ]
-}
+  presets: ['@quasar/babel-preset-app'],
+};

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "license": "MIT",
-  "version": "2.0.0-alpha.1",
+  "version": "2.1.0",
   "productName": "flaschengeist-frontend",
   "name": "flaschengeist",
   "author": "Tim Gröger <flaschengeist@wu5.de>",
@@ -11,34 +11,41 @@
     "url": "https://flaschengeist.dev/Flaschengeist/flaschengeist/issues"
   },
   "scripts": {
-    "format": "prettier --config ./package.json  --write '{,!(node_modules)/**/}*.ts'",
+    "format": "prettier --config ./package.json  --write '{,!(node_modules|dist|.*)/**/}*.{js,ts,vue}'",
     "lint": "eslint --ext .js,.ts,.vue ./src ./api"
   },
   "dependencies": {
-    "@flaschengeist/api": "file:./api",
-    "@flaschengeist/users": "^1.0.0-alpha.1",
-    "axios": "^0.24.0",
-    "pinia": "^2.0.4",
-    "quasar": "^2.3.3"
+    "@flaschengeist/api": "^1.0.0",
+    "@flaschengeist/balance": "^1.0.0",
+    "@flaschengeist/pricelist-old": "^1.0.0",
+    "@flaschengeist/schedule": "^1.0.0",
+    "@flaschengeist/users": "^1.0.0",
+    "axios": "^1.4.0",
+    "pinia": "^2.0.8",
+    "quasar": "^2.11.10",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    "@capacitor/core": "^3.3.2",
-    "@capacitor/storage": "^1.2.3",
-    "@flaschengeist/types": "^1.0.0-alpha.9",
-    "@quasar/app": "^3.2.3",
-    "@quasar/extras": "^1.12.1",
-    "@types/node": "^14.17.34",
+    "@capacitor/core": "^5.0.0",
+    "@capacitor/preferences": "^5.0.0",
+    "@flaschengeist/types": "^1.0.0",
+    "@quasar/app-webpack": "^3.7.2",
+    "@quasar/extras": "^1.16.3",
+    "@types/node": "^14.18.0",
     "@types/webpack": "^5.28.0",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "eslint": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
+    "@vue/devtools": "^6.5.0",
+    "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^8.1.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "modify-source-webpack-plugin": "^3.0.0",
-    "prettier": "^2.4.1",
-    "typescript": "^4.5.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^9.14.1",
+    "eslint-webpack-plugin": "^4.0.1",
+    "modify-source-webpack-plugin": "^4.1.0",
+    "prettier": "^2.5.1",
+    "typescript": "^4.5.4",
     "vuedraggable": "^4.1.0"
   },
   "prettier": {

plugin.config.js

@@ -3,4 +3,4 @@ module.exports = [
 //  '@flaschengeist/balance',
 //  '@flaschengeist/schedule',
 //  '@flaschengeist/pricelist',
-]
+  '@flaschengeist/schedule',

quasar.conf.js

@@ -8,10 +8,23 @@
 
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
-const ESLintPlugin = require('eslint-webpack-plugin')
-const { ModifySourcePlugin } = require('modify-source-webpack-plugin')
-const { configure } = require('quasar/wrappers')
+const ESLintPlugin = require('eslint-webpack-plugin');
+const { ModifySourcePlugin, ReplaceOperation } = require('modify-source-webpack-plugin');
+const { configure } = require('quasar/wrappers');
 
+const operation = () => {
+  const custom_plgns = require('./plugin.config.js');
+  const required_plgns = require('./src/vendor-plugin.config.js');
+  const plugins = [...custom_plgns, ...required_plgns].map(
+    (v) => `import("${v}").catch(() => "${v}")`
+  );
+  const replace = new ReplaceOperation(
+    'all',
+    `\\/\\* *INSERT_PLUGIN_LIST *\\*\\/`,
+    `${plugins.join(', ')}`
+  );
+  return replace;
+};
 
 module.exports = configure(function (/* ctx */) {
   return {
@@ -22,7 +35,7 @@ module.exports = configure(function (/* ctx */) {
           enabled: true,
           files: './src/**/*.{ts,tsx,js,jsx,vue}',
         },
-      }
+      },
     },
 
     // https://quasar.dev/quasar-cli/prefetch-feature
@@ -43,9 +56,9 @@ module.exports = configure(function (/* ctx */) {
       // 'ionicons-v5',
       // 'line-awesome',
       // 'material-icons',
-      'mdi-v6',
+      'mdi-v7',
       // 'themify',
-  
+
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
       'roboto-font', // optional, you are not bound to it
     ],
@@ -53,10 +66,9 @@ module.exports = configure(function (/* ctx */) {
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
       vueRouterMode: 'history', // available values: 'hash', 'history'
-
+      //publicPath: 'flaschengeist2',
       // transpile: false,
 
-
       // Add dependencies for transpiling with Babel (Array of string/regex)
       // (from node_modules, which are by default not transpiled).
       // Applies only if "transpile" is set to true.
@@ -71,33 +83,29 @@ module.exports = configure(function (/* ctx */) {
 
       // https://quasar.dev/quasar-cli/handling-webpack
       // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
-      chainWebpack (chain) {
-        chain.plugin('eslint-webpack-plugin')
-          .use(ESLintPlugin, [{
-            extensions: [ 'ts', 'js', 'vue' ],
-            exclude: ['node_modules', 'src-capacitor']
-          }])
-        chain.plugin('modify-source-webpack-plugin')
-          .use(ModifySourcePlugin, [{
+      chainWebpack(chain) {
+        chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [
+          {
+            extensions: ['ts', 'js', 'vue'],
+            exclude: ['node_modules', 'src-capacitor'],
+          },
+        ]);
+        chain.plugin('modify-source-webpack-plugin').use(ModifySourcePlugin, [
+          {
             rules: [
               {
                 test: /plugins\.ts$/,
-                modify: (src, filename) => {
-                  const custom_plgns = require('./plugin.config.js')
-                  const required_plgns = require('./src/vendor-plugin.config.js')
-                  return src.replace(/\/\* *INSERT_PLUGIN_LIST *\*\//, 
-                  [...custom_plgns, ...required_plgns].map(v => `import("${v}").catch(() => "${v}")`)
-                    .join(','))
-                  }
-              }
-            ]
-          }])
+                operations: [operation()],
+              },
+            ],
+          },
+        ]);
         chain.merge({
           snapshot: {
-            managedPaths: []
-          }
-        })
-      }
+            managedPaths: [],
+          },
+        });
+      },
     },
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
@@ -105,7 +113,7 @@ module.exports = configure(function (/* ctx */) {
       https: false,
       port: 8080,
       open: false, // opens browser window automatically
-      watchFiles: {paths: ['/node_modules/@flaschengeist/**/*']}
+      watchFiles: { paths: ['/node_modules/@flaschengeist/**/*'] },
     },
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
@@ -117,8 +125,8 @@ module.exports = configure(function (/* ctx */) {
         loadingBar: {
           position: 'top',
           color: 'warning',
-          size: '5px'
-        }
+          size: '5px',
+        },
       },
 
       // For special cases outside of where the auto-import stategy can have an impact
@@ -129,14 +137,7 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: [
-        'LocalStorage',
-        'SessionStorage',
-        'Dialog',
-        'Loading',
-        'Notify',
-        'LoadingBar'
-      ]
+      plugins: ['LocalStorage', 'SessionStorage', 'Dialog', 'Loading', 'Notify', 'LoadingBar'],
     },
 
     // animations: 'all', // --- includes all animations
@@ -145,7 +146,7 @@ module.exports = configure(function (/* ctx */) {
 
     // https://quasar.dev/quasar-cli/developing-ssr/configuring-ssr
     ssr: {
-      pwa: false
+      pwa: false,
     },
 
     // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
@@ -164,20 +165,20 @@ module.exports = configure(function (/* ctx */) {
           {
             src: 'flaschengeist-logo.svg',
             sizes: 'any',
-            type: 'image/svg+xml'
+            type: 'image/svg+xml',
           },
           {
             src: 'favicon-128x128.png',
             sizes: '128x128',
-            type: 'image/png'
+            type: 'image/png',
           },
           {
             src: 'favicon-256x256.png',
             sizes: '256x256',
-            type: 'image/png'
+            type: 'image/png',
           },
-        ]
-      }
+        ],
+      },
     },
 
     // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
@@ -187,7 +188,7 @@ module.exports = configure(function (/* ctx */) {
 
     // Full list of options: https://quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
     capacitor: {
-      hideSplashscreen: true
+      hideSplashscreen: true,
     },
 
     // Full list of options: https://quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
@@ -196,13 +197,11 @@ module.exports = configure(function (/* ctx */) {
 
       packager: {
         // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
-
         // OS X / Mac App Store
         // appBundleId: '',
         // appCategoryType: '',
         // osxSign: '',
         // protocol: 'myapp://path',
-
         // Windows only
         // win32metadata: { ... }
       },
@@ -210,16 +209,19 @@ module.exports = configure(function (/* ctx */) {
       builder: {
         // https://www.electron.build/configuration/configuration
 
-        appId: 'flaschengeist-frontend'
+        appId: 'flaschengeist-frontend',
       },
 
       // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration
       nodeIntegration: true,
 
-      extendWebpack (/* cfg */) {
+      extendWebpack(/* cfg */) {
         // do something with Electron main process Webpack cfg
         // chainWebpack also available besides this extendWebpack
-      }
-    }
-  }
+      },
+    },
+    bin: {
+      linuxAndroidStudio: '/home/crimsen/.local/share/JetBrains/Toolbox/scripts/studio',
+    },
+  };
 });

src-capacitor/capacitor-flag.d.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
 // THIS FEATURE-FLAG FILE IS AUTOGENERATED,
 //  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
+import 'quasar/dist/types/feature-flag';
 
-declare module "quasar/dist/types/feature-flag" {
+declare module 'quasar/dist/types/feature-flag' {
   interface QuasarFeatureFlags {
     capacitor: true;
   }

src-capacitor/capacitor.config.json

@@ -4,6 +4,9 @@
   "bundledWebRuntime": false,
   "npmClient": "yarn",
   "webDir": "www",
+  "android": {
+    "minWebViewVersion": 71
+  },
   "ios": {
     "allowsLinkPreview": false
   }

src-capacitor/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Quasar</title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="Quasar Capacitor App">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
+
+    <style>
+      .page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        text-align: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="page">
+      <div>
+        This file will be auto-generated. Do not edit.
+      </div>
+
+      <div>
+        Run "quasar dev" or "quasar build" with Capacitor mode.
+      </div>
+    </div>
+  </body>
+</html>

src-capacitor/package.json

@@ -1,16 +1,16 @@
 {
   "name": "flaschengeist",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0",
   "description": "Modular student club administration system",
   "author": "Tim Gröger <flaschengeist@wu5.de>",
   "private": true,
   "dependencies": {
-    "@capacitor/android": "^3.3.2",
-    "@capacitor/app": "^1.0.0",
-    "@capacitor/cli": "^3.0.0",
-    "@capacitor/core": "^3.0.0",
-    "@capacitor/ios": "^3.0.0-beta.0",
-    "@capacitor/splash-screen": "^1.0.0",
-    "@capacitor/storage": "^1.2.3"
+    "@capacitor/android": "^5.0.0-beta.0",
+    "@capacitor/app": "^5.0.0",
+    "@capacitor/cli": "^5.0.0",
+    "@capacitor/core": "^5.0.0",
+    "@capacitor/ios": "^5.0.0",
+    "@capacitor/preferences": "^5.0.0",
+    "@capacitor/splash-screen": "^5.0.0"
   }
-}
+}

src/boot/axios.ts

@@ -94,12 +94,11 @@ export default boot(({ router }) => {
             query: { redirect: next },
           });
         } else if (e.response && e.response.status == 401) {
-          void store.handleLoggedOut();
-          if (current.name !== 'login') {
+          store.handleLoggedOut();
+          if (current.name != 'login') {
             await router.push({
               name: 'login',
-              params: { logout: 'logout' },
-              query: { redirect: current.path },
+              query: { redirect: current.fullPath },
             });
           }
         }

src/boot/init.ts

@@ -21,8 +21,8 @@ async function loadBaseUrl() {
     console.warn('Could not load BaseURL', e);
   }
 }
-
-class BackendError extends Error {}
+// eslint-disable-next-line
+class BackendError extends Error { }
 
 /**
  * Loading backend information
@@ -68,8 +68,18 @@ export default boot(async ({ app, router }) => {
     // Handle errors from loading the backend information
     if (error instanceof BackendError || isAxiosError(error)) {
       router.isReady().finally(() => {
-        if (Platform.is.capacitor) void router.push({ name: 'setup_backend' });
-        else void router.push({ name: 'offline', params: { refresh: 1 } });
+        // if (Platform.is.capacitor) void router.push({ name: 'setup_backend' });
+        if (Platform.is.capacitor) {
+          //void router.push({ name: 'setup_backend' })
+          Notify.create({
+            type: 'negative',
+            message:
+              'Backend nicht erreichbar! Prüfe deine Internetverbindung oder probiere es später nochmal.',
+            timeout: 0,
+            icon: 'mdi-alert-circle-outline',
+            closeBtn: true,
+          });
+        } else void router.push({ name: 'offline', params: { refresh: 1 } });
       });
     } else if (typeof error === 'string') {
       // Handle plugin not found errors

src/boot/login.ts

@@ -3,46 +3,31 @@
  */
 import { useMainStore, hasPermissions } from '@flaschengeist/api';
 import { boot } from 'quasar/wrappers';
-import { RouteRecord } from 'vue-router';
 
 export default boot(({ router }) => {
-  router.beforeResolve((to, from, next) => {
+  /**
+   * Login guard
+   * Check if user tries to access the secured area and validates token
+   */
+  router.beforeEach((to, from) => {
     const store = useMainStore();
 
-    // Skip if same path
-    if (to.path == from.path) return next();
+    // Skip loops
+    if (to.name == 'login' && from.name == 'login') return false;
 
-    // Check if secured area or public
-    if (to.path.startsWith('/in')) {
-      // Secured area (LOGIN REQUIRED)
-      // Check login is ok
-      if (!store.session || store.session.expires <= new Date()) {
-        void store.handleLoggedOut();
-        return next({ name: 'login', query: { redirect: to.fullPath } });
-      }
-
-      // Check if special permissions are required
-      if (
-        to.matched.every((record: RouteRecord) => {
-          if (!('meta' in record) || !('permissions' in record.meta)) return true;
-          if ((<{ permissions: FG.Permission[] }>record.meta).permissions) {
-            return hasPermissions((<{ permissions: FG.Permission[] }>record.meta).permissions);
-          }
-        })
-      ) {
-        return next();
-      } else {
-        return next({ name: 'login', query: { redirect: to.fullPath } });
-      }
-    } else {
-      // Public space just handle login loops
-      if (to.name == 'login' && store.user && !to.params['logout']) {
-        // Called login while already logged in
-        return next({ name: 'dashboard' });
-      } else {
-        // We are on the non secured area
-        return next();
-      }
+    // Secured area '/in/...' requires to be authenticated
+    if (to.path.startsWith('/in') && (!store.session || store.session.expires <= new Date())) {
+      store.handleLoggedOut();
+      return { name: 'login' };
     }
   });
+
+  /**
+   * Permission guard
+   * Check permissions for route, cancel navigation on errors
+   */
+  router.beforeResolve((to) => {
+    if (!!to.meta.permissions && !hasPermissions(<FG.Permission[]>to.meta.permissions))
+      return false;
+  });
 });

src/boot/plugins.ts

@@ -234,6 +234,12 @@ function loadPlugin(
     Array.prototype.push.apply(loadedPlugins.widgets, plugin.widgets);
   }
 
+  if (!plugin.settingWidgets) plugin.settingWidgets = [];
+  if (plugin.settingWidgets.length > 0) {
+    plugin.settingWidgets.forEach((widget) => (widget.name = plugin.id + '.' + widget.name));
+    Array.prototype.push.apply(loadedPlugins.settingWidgets, plugin.settingWidgets);
+  }
+
   loadedPlugins.plugins.push({
     id: plugin.id,
     name: plugin.name,
@@ -252,6 +258,7 @@ export async function loadPlugins(backend: FG.Backend, baseRoutes: RouteRecordRa
     shortcuts: [],
     outerShortcuts: [],
     widgets: [],
+    settingWidgets: [],
   };
 
   // Wait for all plugins to be loaded

src/components/Notification.vue

@@ -14,7 +14,7 @@
       class="q-ma-xs"
       title="Löschen"
       style="position: absolute; top: 0; right: 0; z-index: 999"
-      @click="dismiss"
+      @click.stop.prevent="dismiss"
     />
     <q-card-section class="q-pa-xs">
       <div class="text-overline">{{ dateString }}</div>
@@ -34,7 +34,7 @@
         flat
         dense
         size="sm"
-        @click="accept"
+        @click.stop.prevent="accept"
       />
       <q-btn
         v-if="modelValue.reject"
@@ -44,7 +44,7 @@
         flat
         dense
         size="sm"
-        @click="reject"
+        @click.stop.prevent="reject"
       />
     </q-card-actions>
   </q-card>

src/layouts/MainLayout.vue

@@ -2,7 +2,7 @@
   <q-layout view="hHh Lpr lff">
     <q-header elevated class="bg-primary text-white">
       <q-toolbar>
-        <q-btn dense flat round icon="mdi-menu" @click="openMenu" />
+        <q-btn dense flat round icon="mdi-menu" @click="openMenu(true)" />
 
         <q-toolbar-title>
           <router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
@@ -40,7 +40,14 @@
             <shortcut-link :shortcut="element" context @delete-shortcut="deleteShortcut" />
           </template>
         </drag>
-        <q-btn v-if="!platform.is.capacitor" flat round dense icon="mdi-exit-to-app" @click="logout()" />
+        <q-btn
+          v-if="!platform.is.capacitor"
+          flat
+          round
+          dense
+          icon="mdi-exit-to-app"
+          @click="logout()"
+        />
       </q-toolbar>
     </q-header>
 
@@ -49,32 +56,44 @@
       side="left"
       bordered
       :mini="leftDrawerMini"
-      @click.capture="openMenu"
+      @click.capture="openMenuMini"
     >
       <!-- Plugins -->
-      <essential-expansion-link
-        v-for="(entry, index) in mainLinks"
-        :key="'plugin' + index"
-        :entry="entry"
-        @add-short-cut="addShortcut"
-      />
-      <q-separator />
-      <essential-link
-        v-for="(entry, index) in essentials"
-        :key="'essential' + index"
-        :entry="entry"
-      />
-      <div v-if="platform.is.capacitor">
-      <q-separator />
-      <q-item clickable tag="a" target="self" @click="logout">
-        <q-item-section avatar>
-          <q-icon name="mdi-exit-to-app" />
-        </q-item-section>
+      <q-scroll-area class="fit">
+        <essential-expansion-link
+          v-for="(entry, index) in mainLinks"
+          :key="'plugin' + index"
+          :entry="entry"
+          @add-short-cut="addShortcut"
+        />
+        <q-separator />
+        <essential-link
+          v-for="(entry, index) in essentials"
+          :key="'essential' + index"
+          :entry="entry"
+        />
+        <div v-if="platform.is.capacitor">
+          <q-separator />
+          <q-item clickable tag="a" target="self" @click="logout">
+            <q-item-section avatar>
+              <q-icon name="mdi-exit-to-app" />
+            </q-item-section>
 
-        <q-item-section>
-          <q-item-label>Logout</q-item-label>
-        </q-item-section>
-      </q-item>
+            <q-item-section>
+              <q-item-label>Logout</q-item-label>
+            </q-item-section>
+          </q-item>
+        </div>
+      </q-scroll-area>
+      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
+        <q-btn
+          dense
+          round
+          unelevated
+          color="accent"
+          icon="mdi-chevron-left"
+          @click="openMenuMini(true)"
+        />
       </div>
     </q-drawer>
     <q-page-container>
@@ -118,7 +137,7 @@ export default defineComponent({
     const mainStore = useMainStore();
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
     const leftDrawer = ref(!Platform.is.mobile);
-    const leftDrawerMini = ref(false);
+    const leftDrawerMini = ref(true);
     const mainLinks = flaschengeist?.menuLinks || [];
     const notifications = computed(() => mainStore.notifications.slice().reverse());
     const polling = ref(NaN);
@@ -131,9 +150,11 @@ export default defineComponent({
       void mainStore.getShortcuts();
     });
     onBeforeUnmount(() => window.clearInterval(polling.value));
-
+    /*
     function openMenu(event: { target: HTMLInputElement }) {
-      if (event.target.nodeName === 'DIV') leftDrawerMini.value = false;
+      console.log(event.target.nodeName);
+      if (event.target.nodeName === 'DIV' || event.target.nodeName === 'I')
+        leftDrawerMini.value = false;
       else {
         if (!leftDrawer.value || leftDrawerMini.value) {
           leftDrawer.value = true;
@@ -144,7 +165,13 @@ export default defineComponent({
         }
       }
     }
-
+*/
+    function openMenu(value = !leftDrawer.value) {
+      leftDrawer.value = value;
+    }
+    function openMenuMini(value = !leftDrawerMini.value) {
+      leftDrawerMini.value = value;
+    }
     function logout() {
       void router.push({ name: 'login', params: { logout: 'logout' } });
       void mainStore.logout();
@@ -207,6 +234,7 @@ export default defineComponent({
       notifications,
       noPermission,
       openMenu,
+      openMenuMini,
       remove,
       requestPermission,
       useNative,

src/pages/Dashboard.vue

@@ -2,9 +2,9 @@
   <q-page
     padding
     style="grid-auto-rows: 1fr"
-    class="fit row justify-around items-start q-col-gutter-sm"
+    class="row justify-center content-center items-center q-col-gutter-lg"
   >
-    <div v-for="(item, index) in widgets" :key="index" class="col-4 full-height col-sm-6 col-xs-12">
+    <div v-for="(item, index) in widgets" :key="index" class="full-height col-sm-6 col-xs-12">
       <component :is="item.widget" />
     </div>
   </q-page>

src/pages/Login.vue

@@ -119,10 +119,27 @@ export default defineComponent({
       if (status === true) {
         // On capacitor we set the lifetime to at least two weeks to not annoy users.
         if (quasar.platform.is.capacitor)
-          void sessionStore.updateSession(14 * 24 * 60 * 60, mainStore.currentSession.token);
+          await sessionStore.updateSession(14 * 24 * 60 * 60, mainStore.currentSession.token);
         // Redirect user to previous page, if any.
-        const x = router.currentRoute.value.query['redirect'];
-        void router.push(!!x && typeof x === 'string' ? { path: x } : mainRoute);
+        // there are different redirects possible:
+        // 1. when explicitely entered
+        //    a) http://localhost:8080/ -> should be redirected to mainRoute
+        //    b) http://localhost:8080/in/user/settings -> should be redirected to in/user/settings
+        // 2. when automatically logged out:
+        //    http://localhost:8080/login?redirect=/in/user/settings
+        //    -> should be redirected to in/user/settings
+        var redirect;
+        if (router.currentRoute.value.redirectedFrom) {
+          redirect = router.currentRoute.value.redirectedFrom.path;
+          if (redirect === '/') {
+            redirect = mainRoute;
+          }
+        } else if ('redirect' in router.currentRoute.value.query) {
+          redirect = { path: router.currentRoute.value.query.redirect as string };
+        } else {
+          redirect = mainRoute;
+        }
+        void router.push(redirect);
       } else {
         // Login failed, notify and reset form
         password.value = '';

src/vendor-plugin.config.js

@@ -1,3 +1 @@
-module.exports = [
-    '@flaschengeist/users',
-]
+module.exports = ['@flaschengeist/users'];

tsconfig.json

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