Merge pull request 'release v2.0.0' (!4) from develop into master

Reviewed-on: Flaschengeist/flaschengeist-frontend#4

.eslintignore

@@ -5,3 +5,4 @@
 /.quasar
 /node_modules
 /src-ssr
+.*

.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
@@ -38,15 +38,13 @@ module.exports = {
     // Uncomment any of the lines below to choose desired strictness,
     // but leave only one uncommented!
     // See https://eslint.vuejs.org/rules/#available-rules
-    'plugin:vue/essential', // Priority A: Essential (Error Prevention)
-    // 'plugin:vue/strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-    // 'plugin:vue/recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+    // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
-    'prettier',
-    'prettier/@typescript-eslint',
-    'prettier/vue'
+    'plugin:prettier/recommended',
   ],
 
   plugins: [
@@ -56,31 +54,38 @@ 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: {
     ga: true, // Google Analytics
     cordova: true,
     __statics: true,
+    __QUASAR_SSR__: true,
+    __QUASAR_SSR_SERVER__: true,
+    __QUASAR_SSR_CLIENT__: true,
+    __QUASAR_SSR_PWA__: true,
     process: true,
     Capacitor: true,
-    chrome: true
+    chrome: true,
   },
 
   // add your custom rules here
   rules: {
-    'prefer-promise-reject-errors': 'off',
+    // VueStuff
+    // Defaults to error on eslint-plugin-vue 8.0.3, but let us be not too strict with names
+    'vue/multi-word-component-names': 'off',
 
-    // TypeScript
-    quotes: ['warn', 'single', { avoidEscape: true }],
+    // Rejects on promises should always be of the Error type (and allow empty rejects as well)
+    'prefer-promise-reject-errors': ['error', { allowEmptyReject: true }],
+
+    // Allow " if ' is contained inside the string, so we can avoid escaping
+    quotes: ['error', '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',
+  },
+};

.gitignore

@@ -2,6 +2,10 @@
 .thumbs.db
 node_modules
 
+# We use yarn, so ignore npm
+package-lock.json
+yarn.lock
+
 # Quasar core related directories
 .quasar
 /dist
@@ -14,6 +18,8 @@ node_modules
 
 # Capacitor related directories and files
 /src-capacitor/www
+/src-capacitor/android
+/src-capacitor/ios
 /src-capacitor/node_modules
 
 # BEX related directories and files

.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'),
+  ],
+};

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true
-}

.prettierrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  singleQuote: true,
-  semi: true
-};

.vscode/settings.json

@@ -9,7 +9,22 @@
   "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
   "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
   "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
-  "vetur.format.defaultFormatter.html": "js-beautify-html",
-  "vetur.format.defaultFormatter.js": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "vetur.format.defaultFormatter.html": "prettier",
+  "vetur.format.defaultFormatter.js": "prettier-eslint",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vetur.format.defaultFormatterOptions": {
+
+    "js-beautify-html": {
+      "wrap_attributes": "force-expand-multiline"
+    },
+    "prettyhtml": {
+      "printWidth": 100,
+      "singleQuote": false,
+      "wrapAttributes": false,
+      "sortAttributes": false
+    }
+  },
+  "vetur.format.defaultFormatter.ts": "prettier-tslint",
+  "typescript.format.enable": false,
+  "prettier.configPath": "./package.json"
 }

.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
+

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,88 @@
-# Flaschengeist (flaschengeist-frontend)
+# Flaschengeist (frontend)
+![status-badge](https://ci.os-sc.org/api/badges/Flaschengeist/flaschengeist-frontend/status.svg)
 
-Dynamischen Managementsystem für Studentenclubs
 
-## Install the dependencies
+Modular student club administration system, licensed under the MIT license.
+
+## Installation
+
+### Requirements
+
+```
+ "engines": {
+    "node": ">= 14.18.1",
+    "npm": ">= 6.14.12",
+    "yarn": ">= 1.22.0"
+ }
+```
+
+So on debian (buster and bullseye) you will need to install node.js and yarn beside the debian packages to meet the needed versions.
+
 ```bash
-npm install
+pushd ~/opt
+wget https://nodejs.org/dist/latest-v16.x/node-v16.13.0-linux-x64.tar.xz
+tar -xJf node-v16.13.0-linux-x64.tar.xz
+export PATH="$(pwd)/node-v16.13.0-linux-x64/bin":"$PATH"
+npm i -g yarn
+npm i -g @quasar/cli
+popd
 ```
 
-## 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;
-```
+### Install the dependencies
 
-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
-quasar dev
+yarn install
 ```
 
-### Lint the files
-```bash
-npm run lint
+Be aware npm might not work.
+
+### Configure Plugins
+
+#### Installing a plugin
+
+Simply add it as a dependency and install it, for example installing the `pricelist`-plugin:
+
+```sh
+yarn add '@flaschengeist/pricelist'
+yarn install
 ```
 
-### Build the app for production
-```bash
-quasar build
+#### Enable / Disable a plugin
+
+After installing a plugin you will have to enable it,
+this is done by adding it to the `plugin.config.js` file.
+For the example above the file should look like:
+
+```js
+module.exports = [
+  // pricelist plugin:
+  '@flaschengeist/pricelist',
+];
 ```
-<!--
-### Customize the configuration
-See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
--->
+
+Remember to rebuild the project
+
+### Configure Backend
+
+The application is using the API of [the backend](https://flaschengeist.dev/Flaschengeist/flaschengeist)
+This access needs to be configured in `src/config.ts'->config.baseURL
+
+- either you do have a proxy webserver that maps the '/api' to the backend (http://localhost:5000) or
+- you do directly configure the backend there:`baseURL: 'http://localhost:5000'`. Be aware not committing this configuration.
+
+### Build the application
+
+```sh
+yarn quasar build
+```
+
+### Notes on mobile apps (Cordova)
+
+For mobile applications older web engines should or must be supported,
+as manufaturer often do not update their phones, so for building cordova apps set the `BROWSERSLIST_ENV` environment variable to
+`BROWSERSLIST_ENV=cordova`.
+This will produce ECDMAscript compatible with iOS 13+ and Android Webview 76 (relased October 2019).
+
+## Development
+
+Please refer to our [development wiki](https://flaschengeist.dev/Flaschengeist/flaschengeist/wiki/Development).

api/components/IsoDateInput.vue

@@ -0,0 +1,167 @@
+<template>
+  <q-input
+    v-model="dateTime"
+    filled
+    :readonly="readonly"
+    :label="label"
+    :placeholder="placeholder"
+    :rules="customRules"
+    :clearable="clearable"
+    v-bind="attrs"
+    @clear="dateTime = ''"
+  >
+    <template #append>
+      <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">
+              <q-btn v-close-popup label="Schließen" color="primary" flat />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+      <q-icon
+        v-if="type == 'time' || type == 'datetime'"
+        name="mdi-clock-outline"
+        class="cursor-pointer"
+      >
+        <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
+          <q-time v-model="time" mask="HH:mm">
+            <div class="row items-center justify-end">
+              <q-btn v-close-popup label="Schließen" color="primary" flat />
+            </div>
+          </q-time>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import { date as q_date } from 'quasar';
+import { stringIsDate, stringIsTime, stringIsDateTime, Validator } from '..';
+
+export default defineComponent({
+  name: 'IsoDateInput',
+  props: {
+    modelValue: { type: Object as PropType<Date | undefined>, default: undefined },
+    type: {
+      type: String,
+      default: 'date',
+      validator: (value: string) => ['date', 'time', 'datetime'].indexOf(value) !== -1,
+    },
+    label: { type: String, default: 'Datum' },
+    readonly: Boolean,
+    rules: {
+      type: Array as PropType<Validator<Date>[]>,
+      default: () => [],
+    },
+  },
+  emits: { 'update:modelValue': (date?: Date) => !!date || !date },
+  setup(props, { emit, attrs }) {
+    const customRules = computed(() => [
+      props.type == 'date' ? stringIsDate : props.type == 'time' ? stringIsTime : stringIsDateTime,
+      (value?: string) => {
+        if (props.rules.length > 0 && !!value) {
+          let date: Date | undefined = undefined;
+          if (props.type == 'date') date = modifyDate(value);
+          else if (props.type == 'time') date = modifyTime(value);
+          else {
+            const split = value.split(' ');
+            date = modifyTime(split[1], modifyDate(split[0]));
+          }
+          for (const rule of props.rules) {
+            const r = rule(date);
+            if (typeof r === 'string') return r;
+          }
+          return true;
+        }
+      },
+    ]);
+
+    const clearable = computed(() =>
+      customRules.value.every((r) => (<Validator>r)(undefined) === true)
+    );
+
+    const placeholder = computed(() => {
+      switch (props.type) {
+        case 'date':
+          return 'YYYY-MM-DD';
+        case 'time':
+          return 'HH:mm';
+        case 'datetime':
+          return 'YYYY-MM-DD HH:mm';
+      }
+      throw 'Invalid type given';
+    });
+
+    const date = computed({
+      get: () => q_date.formatDate(props.modelValue, 'YYYY-MM-DD'),
+      set: (v: string) => {
+        const d = modifyDate(v);
+        if (d) emit('update:modelValue', d);
+      },
+    });
+
+    const time = computed({
+      get: () => q_date.formatDate(props.modelValue, 'HH:mm'),
+      set: (v: string) => {
+        const d = modifyTime(v);
+        if (d) emit('update:modelValue', d);
+      },
+    });
+
+    const dateTime = computed({
+      get: () => (props.modelValue ? q_date.formatDate(props.modelValue, placeholder.value) : ''),
+      set: (v: string) => {
+        if (!v) emit('update:modelValue', undefined);
+        switch (props.type) {
+          case 'date':
+            date.value = v;
+            break;
+          case 'time':
+            time.value = v;
+            break;
+          case 'datetime':
+            const split = v.split(' ').filter((c) => c !== '');
+            if (split.length == 2) {
+              const d = modifyTime(split[1], modifyDate(split[0]));
+              if (d) emit('update:modelValue', d);
+            }
+            break;
+        }
+      },
+    });
+
+    function modifyTime(v: string, d: Date | undefined = props.modelValue) {
+      if (d && /^\d\d:\d\d$/.test(v)) {
+        const split = v.split(':');
+        return q_date.adjustDate(d, { hours: +split[0], minutes: +split[1] });
+      }
+    }
+
+    function modifyDate(v: string, d: Date | undefined = props.modelValue) {
+      if (!d) d = q_date.buildDate({ hours: 0, minutes: 0, seconds: 0 });
+      if (/^\d{4}-\d\d-\d\d$/.test(v)) {
+        const split = v.split('-');
+        return q_date.adjustDate(d, {
+          year: +split[0],
+          month: +split[1],
+          date: +split[2],
+        });
+      }
+    }
+
+    return {
+      attrs,
+      clearable,
+      customRules,
+      date,
+      dateTime,
+      placeholder,
+      time,
+    };
+  },
+});
+</script>

api/components/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>

api/components/UserAvatar.vue

@@ -0,0 +1,46 @@
+<template>
+  <q-avatar>
+    <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%" />
+        </template>
+      </q-img>
+    </slot>
+  </q-avatar>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { avatarURL } from '@flaschengeist/api';
+
+/**
+ * Display an avatar for an user
+ *
+ * Slots:
+ *  default - scope: {avatarURL}
+ */
+export default defineComponent({
+  name: 'UserAvatar',
+  props: {
+    modelValue: {
+      type: [Object, String] as PropType<FG.User | string>,
+      required: true,
+    },
+    showZoom: {
+      type: Boolean,
+      default: false,
+    },
+    fallback: {
+      type: String,
+      default: 'no-image.svg',
+    },
+  },
+  emits: ['error'],
+  setup() {
+    return {
+      avatarURL,
+    };
+  },
+});
+</script>

api/components/index.ts

@@ -0,0 +1,5 @@
+import IsoDateInput from './IsoDateInput.vue';
+import PasswordInput from './PasswordInput.vue';
+import UserAvatar from './UserAvatar.vue';
+
+export { IsoDateInput, PasswordInput, UserAvatar };

api/index.ts

@@ -0,0 +1,10 @@
+export { api, pinia } from './src/internal';
+
+export * from './src/stores/';
+
+export * from './src/utils/datetime';
+export * from './src/utils/permission';
+export * from './src/utils/persistent';
+export * from './src/utils/user';
+export * from './src/utils/validators';
+export * from './src/utils/misc';

api/package.json

@@ -0,0 +1,28 @@
+{
+  "license": "MIT",
+  "version": "1.0.0",
+  "name": "@flaschengeist/api",
+  "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/issues"
+  },
+  "main": "./src/index.ts",
+  "peerDependencies": {
+    "@quasar/app-webpack": "^3.7.2",
+    "flaschengeist": "^2.0.0",
+    "pinia": "^2.0.8"
+  },
+  "devDependencies": {
+    "@flaschengeist/types": "^1.0.0",
+    "@types/node": "^14.18.0",
+    "typescript": "^4.5.4"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "semi": true,
+    "printWidth": 100,
+    "arrowParens": "always"
+  }
+}

api/shims-vue.d.ts

@@ -0,0 +1,6 @@
+//https://github.com/vuejs/vue-next/issues/3130
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue';
+  const component: ComponentOptions;
+  export default component;
+}

api/src/internal.ts

@@ -0,0 +1,6 @@
+import axios from 'axios';
+import { createPinia } from 'pinia';
+
+export const api = axios.create();
+
+export const pinia = createPinia();

api/src/stores/index.ts

@@ -0,0 +1,23 @@
+import { AxiosError } from 'axios';
+
+/**
+ * Check if error is an AxiosError, and optional if a specific status was returned
+ *
+ * @param error Thrown error to check
+ * @param status If set, check if this error has set thouse status code
+ */
+export function isAxiosError(error: unknown, status?: number) {
+  // Check if it is an axios error (with axios 1.0 `error instanceof AxiosError` will be possible)
+  if (typeof error !== 'object' || !error || !('isAxiosError' in error)) return false;
+  // Check status code if status was given
+  if (status !== undefined)
+    return (
+      (<AxiosError>error).response !== undefined && (<AxiosError>error).response?.status === status
+    );
+
+  return true;
+}
+
+export * from './main';
+export * from './session';
+export * from './user';

api/src/stores/main.ts

@@ -0,0 +1,163 @@
+import { FG_Plugin } from '@flaschengeist/types';
+import { fixSession, useSessionStore, useUserStore } from '.';
+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));
+}
+
+function clearPersistant() {
+  void PersistentStorage.remove('fg_session');
+}
+
+export function saveSession(session?: FG.Session) {
+  if (session === undefined) return clearPersistant();
+  PersistentStorage.set('fg_session', session).catch(() =>
+    console.error('Could not save token to storage')
+  );
+}
+
+export const useMainStore = defineStore({
+  id: 'main',
+
+  state: () => ({
+    session: undefined as FG.Session | undefined,
+    user: undefined as FG.User | undefined,
+    notifications: [] as Array<FG_Plugin.Notification>,
+    shortcuts: [] as Array<FG_Plugin.MenuLink>,
+  }),
+
+  getters: {
+    loggedIn(): boolean {
+      return this.session !== undefined;
+    },
+    currentUser(): FG.User {
+      if (this.user === undefined) throw 'Not logged in, this should not be called';
+      return this.user;
+    },
+    currentSession(): FG.Session {
+      if (this.session === undefined) throw 'Not logged in, this should not be called';
+      return this.session;
+    },
+    permissions(): string[] {
+      return this.user?.permissions || [];
+    },
+  },
+
+  actions: {
+    /** Ininitalize store from saved session
+     *  Updates session and loads current user
+     */
+    async init() {
+      const sessionStore = useSessionStore();
+      const userStore = useUserStore();
+
+      try {
+        this.session = await reviveSession();
+        if (this.session !== undefined) {
+          this.session = await sessionStore.getSession(this.session.token);
+          if (this.session !== undefined) this.user = await userStore.getUser(this.session.userid);
+        }
+      } catch (error) {
+        console.warn('Could not load token from storage', error);
+      }
+    },
+
+    async login(userid: string, password: string) {
+      const userStore = useUserStore();
+      try {
+        const { data } = await api.post<FG.Session>('/auth', { userid, password });
+        this.session = fixSession(data);
+        this.user = await userStore.getUser(data.userid, true);
+        return true;
+      } catch ({ response }) {
+        this.handleLoggedOut();
+        return (<AxiosResponse | undefined>response)?.status || false;
+      }
+    },
+
+    async logout() {
+      if (!this.session || !this.session.token) return false;
+
+      try {
+        const token = this.session.token;
+        await api.delete(`/auth/${token}`);
+      } catch (error) {
+        return false;
+      } finally {
+        this.handleLoggedOut();
+      }
+      return true;
+    },
+
+    async requestReset(userid: string) {
+      return await api
+        .post('/auth/reset', { userid })
+        .then(() => true)
+        .catch(() => false);
+    },
+
+    async resetPassword(token: string, password: string) {
+      return await api
+        .post('/auth/reset', { token, password })
+        .then(() => true)
+        .catch(({ response }) =>
+          response && 'status' in response ? (<AxiosResponse>response).status : false
+        );
+    },
+
+    async loadNotifications(flaschengeist: FG_Plugin.Flaschengeist) {
+      const { data } = await api.get<FG.Notification[]>('/notifications', {
+        params:
+          this.notifications.length > 0
+            ? { from: this.notifications[this.notifications.length - 1].time }
+            : {},
+      });
+
+      const notes = [] as FG_Plugin.Notification[];
+      data.forEach((n) => {
+        n.time = new Date(n.time);
+        const plugin = flaschengeist?.plugins.filter((p) => p.id === n.plugin)[0];
+        if (!plugin) console.debug('Could not find a parser for this notification', n);
+        else notes.push(plugin.notification(n));
+      });
+      this.notifications.push(...notes);
+      return notes;
+    },
+
+    async removeNotification(id: number) {
+      const idx = this.notifications.findIndex((n) => n.id === id);
+      if (idx >= 0)
+        try {
+          this.notifications.splice(idx, 1);
+          await api.delete(`/notifications/${id}`);
+        } catch (error) {
+          if (this.notifications.length > idx)
+            this.notifications.splice(idx, this.notifications.length - idx - 1);
+        }
+    },
+
+    async getShortcuts() {
+      const { data } = await api.get<Array<FG_Plugin.MenuLink>>(
+        `users/${this.currentUser.userid}/shortcuts`
+      );
+      this.shortcuts = data;
+    },
+
+    async setShortcuts() {
+      await api.put(`users/${this.currentUser.userid}/shortcuts`, this.shortcuts);
+    },
+
+    handleLoggedOut() {
+      this.$reset();
+      void clearPersistant();
+      LocalStorage.clear();
+      SessionStorage.clear();
+    },
+  },
+});
+
+export default () => useMainStore;

api/src/stores/session.ts

@@ -0,0 +1,71 @@
+import { AxiosResponse } from 'axios';
+import { defineStore } from 'pinia';
+import { api } from '../internal';
+import { isAxiosError, useMainStore } from '.';
+
+export function fixSession(s?: FG.Session) {
+  return !s ? s : Object.assign(s, { expires: new Date(s.expires) });
+}
+
+export const useSessionStore = defineStore({
+  id: 'sessions',
+
+  state: () => ({}),
+
+  getters: {},
+
+  actions: {
+    async getSession(token: string) {
+      return await api
+        .get(`/auth/${token}`)
+        .then(({ data }: AxiosResponse<FG.Session>) => data)
+        .catch(() => undefined);
+    },
+
+    async getSessions() {
+      try {
+        const { data } = await api.get<FG.Session[]>('/auth');
+        data.forEach(fixSession);
+
+        const mainStore = useMainStore();
+        const currentSession = data.find((session) => {
+          return session.token === mainStore.session?.token;
+        });
+        if (currentSession) {
+          mainStore.session = currentSession;
+        }
+        return data;
+      } catch (error) {
+        return [] as FG.Session[];
+      }
+    },
+
+    async deleteSession(token: string) {
+      const mainStore = useMainStore();
+      if (token === mainStore.session?.token) return mainStore.logout();
+
+      try {
+        await api.delete(`/auth/${token}`);
+        return true;
+      } catch (error) {
+        // Ignore 401, as this means we are already logged out, throw all other
+        if (!isAxiosError(error, 401)) throw error;
+      }
+      return false;
+    },
+
+    async updateSession(lifetime: number, token: string) {
+      try {
+        const { data } = await api.put<FG.Session>(`auth/${token}`, { value: lifetime });
+        fixSession(data);
+
+        const mainStore = useMainStore();
+        if (mainStore.session?.token == data.token) mainStore.session = data;
+
+        return true;
+      } catch (error) {
+        return false;
+      }
+    },
+  },
+});

api/src/stores/user.ts

@@ -0,0 +1,211 @@
+import { defineStore } from 'pinia';
+import { api } from '../internal';
+import { isAxiosError, useMainStore } from '.';
+
+export function fixUser(u?: FG.User) {
+  return !u ? u : Object.assign(u, { birthday: u.birthday ? new Date(u.birthday) : undefined });
+}
+
+/**
+ * Check if state is outdated / dirty
+ * Value is considered outdated after 15 minutes
+ * @param updated Time of last updated (in milliseconds see Date.now())
+ * @returns True if outdated, false otherwise
+ */
+function isDirty(updated: number) {
+  return Date.now() - updated > 15 * 60 * 1000;
+}
+
+export const useUserStore = defineStore({
+  id: 'users',
+
+  state: () => ({
+    roles: [] as FG.Role[],
+    permissions: [] as FG.Permission[],
+    // 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
+    _dirty_users: 0,
+    _dirty_roles: 0,
+  }),
+
+  getters: {
+    users(state) {
+      return state._users.filter((u) => !u.deleted);
+    },
+  },
+
+  actions: {
+    /** Simply filter all users by ID */
+    findUser(userid: string) {
+      return this._users.find((user) => user.userid === userid);
+    },
+
+    /** Retrieve user by ID
+     * @param userid ID of user to retrieve
+     * @param force If set to true the user is loaded from backend even when a local copy is available
+     * @returns Retrieved user (Promise) or raise an error
+     * @throws Probably an AxiosError if loading failed
+     */
+    async getUser(userid: string, force = false) {
+      const idx = this._users.findIndex((user) => user.userid === userid);
+      if (force || idx === -1 || isDirty(this._dirty_users)) {
+        try {
+          const { data } = await api.get<FG.User>(`/users/${userid}`);
+          fixUser(data);
+          if (idx === -1) this._users.push(data);
+          else this._users[idx] = data;
+          return data;
+        } catch (error) {
+          // Ignore 404, throw all other
+          if (!isAxiosError(error, 404)) throw error;
+        }
+      } else {
+        return this._users[idx];
+      }
+    },
+
+    /** Retrieve list of all users
+     * @param force If set to true a fresh users list is loaded from backend even when a local copy is available
+     * @returns Array of retrieved users (Promise)
+     * @throws Probably an AxiosError if loading failed
+     */
+    async getUsers(force = false) {
+      if (force || isDirty(this._dirty_users)) {
+        const { data } = await api.get<FG.User[]>('/users');
+        data.forEach(fixUser);
+        this._users = data;
+        this._dirty_users = Date.now();
+      }
+      return this._users;
+    },
+
+    /** Save modifications of user on backend
+     * @param user Modified user to save
+     * @throws Probably an AxiosError if request failed (404 = Invalid userid, 400 = Invalid data)
+     */
+    async updateUser(user: FG.User) {
+      await api.put(`/users/${user.userid}`, user);
+      // Modifcation accepted by backend
+      // Save modifications back to our users list
+      const idx = this._users.findIndex((u) => u.userid === user.userid);
+      if (idx > -1) this._users[idx] = user;
+      // If user was current user, save modifications back to the main store
+      const mainStore = useMainStore();
+      if (user.userid === mainStore.user?.userid) mainStore.user = user;
+    },
+
+    /** Register a new user
+     * @param user User to register (id not set)
+     * @returns The registered user (id set)
+     * @throws Probably an AxiosError if request failed
+     */
+    async createUser(user: FG.User) {
+      const { data } = await api.post<FG.User>('/users', user);
+      this._users.push(<FG.User>fixUser(data));
+      return data;
+    },
+
+    /** Delete an user
+     * Throws if failed and resolves void if succeed
+     *
+     * @param user User or ID of user to delete
+     * @throws Probably an AxiosError if request failed
+     */
+    async deleteUser(user: FG.User | string) {
+      if (typeof user === 'object') user = user.userid;
+
+      await api.delete(`/users/${user}`);
+      this._users = this._users.filter((u) => u.userid != user);
+    },
+
+    /** Upload an avatar for an user
+     * Throws if failed and resolves void if succeed
+     *
+     * @param user User or ID of user
+     * @param file Avatar file to upload
+     * @throws Probably an AxiosError if request failed
+     */
+    async uploadAvatar(user: FG.User | string, file: string | File) {
+      if (typeof user === 'object') user = user.userid;
+
+      const formData = new FormData();
+      formData.append('file', file);
+      await api.post(`/users/${user}/avatar`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+    },
+
+    /** Delete avatar of an user
+     * @param user User or ID of user
+     * @throws Probably an AxiosError if request failed
+     */
+    async deleteAvatar(user: FG.User | string) {
+      if (typeof user === 'object') user = user.userid;
+
+      await api.delete(`/users/${user}/avatar`);
+    },
+
+    /** Retrieve list of all permissions
+     * @param force If set to true a fresh list is loaded from backend even when a local copy is available
+     * @returns Array of retrieved permissions (Promise)
+     * @throws Probably an AxiosError if request failed
+     */
+    async getPermissions(force = false) {
+      if (force || this.permissions.length === 0) {
+        const { data } = await api.get<FG.Permission[]>('/roles/permissions');
+        this.permissions = data;
+      }
+      return this.permissions;
+    },
+
+    /** Retrieve list of all roles
+     * @param force If set to true a fresh list is loaded from backend even when a local copy is available
+     * @returns Array of retrieved roles (Promise)
+     * @throws Probably an AxiosError if request failed
+     */
+    async getRoles(force = false) {
+      if (force || isDirty(this._dirty_roles)) {
+        const { data } = await api.get<FG.Role[]>('/roles');
+        this.roles = data;
+        this._dirty_roles = Date.now();
+      }
+      return this.roles;
+    },
+
+    /** Save modifications of role on the backend
+     * @param role role to save
+     * @throws Probably an AxiosError if request failed
+     */
+    async updateRole(role: FG.Role) {
+      await api.put(`/roles/${role.id}`, role);
+
+      const idx = this.roles.findIndex((r) => r.id === role.id);
+      if (idx != -1) this.roles[idx] = role;
+      else this._dirty_roles = 0;
+    },
+
+    /** Create a new role
+     * @param role Role to create (ID not set)
+     * @returns Created role (ID set)
+     * @throws Probably an AxiosError if request failed
+     */
+    async newRole(role: FG.Role) {
+      const { data } = await api.post<FG.Role>('/roles', role);
+      this.roles.push(data);
+      return data;
+    },
+
+    /** Delete a role
+     * @param role Role or ID of role to delete
+     * @throws Probably an AxiosError if request failed (409 if role still in use)
+     */
+    async deleteRole(role: FG.Role | number) {
+      if (typeof role === 'object') role = role.id;
+      await api.delete(`/roles/${role}`);
+      this.roles = this.roles.filter((r) => r.id !== role);
+    },
+  },
+});

api/src/utils/datetime.ts

@@ -0,0 +1,45 @@
+export function formatDateTime(
+  date: Date,
+  useDate = true,
+  useTime = false,
+  useSeconds = false,
+  useWeekday = false
+) {
+  const dateTimeFormat = new Intl.DateTimeFormat([], {
+    year: useDate ? 'numeric' : undefined,
+    month: useDate ? '2-digit' : undefined,
+    day: useDate ? '2-digit' : undefined,
+    weekday: useWeekday ? 'long' : undefined,
+    hour: useTime ? '2-digit' : undefined,
+    minute: useTime ? '2-digit' : undefined,
+    second: useTime && useSeconds ? '2-digit' : undefined,
+  });
+  return dateTimeFormat.format(date);
+}
+
+export function asDate(date?: Date, placeholder = '') {
+  return date ? formatDateTime(date, true) : placeholder;
+}
+
+export function asHour(date?: Date, placeholder = '') {
+  return date ? formatDateTime(date, false, true) : placeholder;
+}
+
+export function formatStartEnd(start: Date, end?: Date) {
+  const today = asDate(new Date());
+  const startDate = asDate(start);
+  const endDate = end ? asDate(end) : '';
+  return (
+    (today !== startDate ? `${startDate}, ` : '') +
+    asHour(start) +
+    (end ? ' - ' + (endDate !== startDate ? `${endDate}, ` : '') + asHour(end) : '')
+  );
+}
+
+export function startOfWeek(date: Date, startMonday = true) {
+  const start = new Date(date);
+  const day = date.getDay() || 7;
+  if (startMonday && day !== 1) start.setHours(-24 * (day - 1));
+  else if (!startMonday && day !== 7) start.setHours(-24 * day);
+  return start;
+}

api/src/utils/loading.ts

@@ -1,8 +1,8 @@
-import { watch, WatchSource } from '@vue/composition-api';
+import { watch, WatchSource } from 'vue';
 import { LoadingBar } from 'quasar';
 
 function setLoadingBar(loading: WatchSource<boolean>) {
-  return watch<boolean>(loading, loading => {
+  return watch<boolean>(loading, (loading) => {
     if (loading) LoadingBar.start(10000);
     if (!loading) LoadingBar.stop();
   });

api/src/utils/misc.ts

@@ -0,0 +1,3 @@
+export function clone<T>(o: T): T {
+  return <T>JSON.parse(JSON.stringify(o));
+}

api/src/utils/permission.ts

@@ -0,0 +1,16 @@
+import { useMainStore } from '../stores';
+
+export function hasPermission(permission: string) {
+  const store = useMainStore();
+  return store.permissions.includes(permission);
+}
+
+export function hasPermissions(needed: string[]) {
+  const store = useMainStore();
+  return needed.every((value) => store.permissions.includes(value));
+}
+
+export function hasSomePermissions(needed: string[]) {
+  const store = useMainStore();
+  return needed.some((value) => store.permissions.includes(value));
+}

api/src/utils/persistent.ts

@@ -0,0 +1,35 @@
+import { LocalStorage, Platform } from 'quasar';
+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 Preferences.clear();
+    else return Promise.resolve(LocalStorage.clear());
+  }
+
+  static remove(key: string) {
+    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 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 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 Preferences.keys().then((v) => v.keys);
+    else return Promise.resolve(LocalStorage.getAllKeys());
+  }
+}

api/src/utils/user.ts

@@ -0,0 +1,6 @@
+import { api } from '../internal';
+
+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/src/utils/validators.ts

@@ -0,0 +1,23 @@
+export type Validator<T = unknown> = (value?: T | null) => boolean | string;
+
+export function notEmpty(val: unknown) {
+  return !!val || 'Feld darf nicht leer sein!';
+}
+
+export function stringIsDate(val: string) {
+  return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
+}
+
+export function stringIsTime(val: string) {
+  return !val || /^\d\d:\d\d$/.test(val) || 'Zeit ist nicht gültig.';
+}
+
+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.'
+  );
+}

api/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@quasar/app/tsconfig-preset",
+  "target": "esnext",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "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,50 +1,78 @@
 {
-  "name": "flaschengeist-frontend",
-  "version": "0.0.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",
+  "productName": "flaschengeist-frontend",
+  "name": "flaschengeist",
+  "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/issues"
+  },
   "scripts": {
-    "lint": "eslint --ext .js,.ts,.vue ./",
-    "test": "echo \"No test specified\" && exit 0"
+    "format": "prettier --config ./package.json  --write '{,!(node_modules|dist|.*)/**/}*.{js,ts,vue}'",
+    "lint": "eslint --ext .js,.ts,.vue ./src ./api"
   },
   "dependencies": {
-    "@quasar/extras": "^1.9.10",
-    "@types/crypto-js": "^4.0.1",
-    "@vue/composition-api": "^0.6.4",
-    "axios": "^0.18.1",
-    "core-js": "^3.7.0",
-    "quasar": "^1.14.3",
-    "vue-router": "3.3.2"
+    "@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": {
-    "@quasar/app": "^2.1.6",
-    "@types/node": "^10.17.44",
-    "@types/webpack": "^4.41.25",
-    "@types/webpack-env": "^1.15.3",
-    "@typescript-eslint/eslint-plugin": "^3.3.0",
-    "@typescript-eslint/parser": "^3.3.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-loader": "^3.0.3",
-    "eslint-plugin-vue": "^6.1.2",
-    "typescript": "^4.0.5"
+    "@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.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-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"
   },
-  "browserslist": [
-    "last 10 Chrome versions",
-    "last 10 Firefox versions",
+  "prettier": {
+    "singleQuote": true,
+    "semi": true,
+    "printWidth": 100,
+    "arrowParens": "always"
+  },
+  "browserslist": {
+    "defaults": [
+      "Firefox esr",
+      "last 6 Chrome versions",
+      "last 4 Firefox versions",
       "last 4 Edge versions",
       "last 4 Safari versions",
-    "last 8 Android versions",
-    "last 1 ChromeAndroid versions",
-    "last 1 FirefoxAndroid versions",
-    "last 6 iOS versions"
+      "last 4 ChromeAndroid versions",
+      "last 1 FirefoxAndroid versions"
     ],
+    "cordova": [
+      "iOS >= 13.0",
+      "Android >= 76",
+      "ChromeAndroid >= 76"
+    ]
+  },
   "engines": {
-    "node": ">= 11.0.0",
-    "npm": ">= 6.13.4",
-    "yarn": ">= 1.21.1"
+    "node": ">= 14.18.1",
+    "npm": ">= 6.14.12",
+    "yarn": ">= 1.22.0"
   }
 }

plugin.config.js

@@ -0,0 +1,6 @@
+// You can add your plugins here
+module.exports = [
+//  '@flaschengeist/balance',
+//  '@flaschengeist/schedule',
+//  '@flaschengeist/pricelist',
+]

public/flaschengeist-logo-white.svg

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1024"
+   height="1024"
+   viewBox="0 0 270.93333 270.93334"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2 (e86c8708, 2021-01-15)"
+   sodipodi:docname="flaschengeist-logo-white.svg"
+   inkscape:export-filename="/Users/crimsen/git/flaschengeist-frontend/public/flaschengeist-logo.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="391.55984"
+     inkscape:cy="526.94717"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:document-rotation="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-26.06665)">
+    <circle
+       id="path10"
+       cx="135.46666"
+       cy="161.53333"
+       style="stroke-width:0.26506463;fill:#1976d2;fill-opacity:1;opacity:0"
+       r="135.46666" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.44061947;stroke-opacity:1"
+       d="m 154.04963,46.75413 c -2.62014,0.516924 -5.22545,1.168424 -7.80617,1.95206 -42.75163,12.981828 -43.91253,68.68501 -54.129684,109.64785 -13.512037,49.65839 -58.120549,32.45922 -53.364321,57.25551 4.247764,22.14545 69.262455,44.34715 71.908285,44.72513 7.43909,1.06272 -52.780019,-26.79368 -40.437456,-42.16974 10.871821,-13.54384 54.907216,-1.28617 101.792266,-18.34148 41.23972,-15.24969 76.0405,-52.05406 67.35884,-95.66274 -8.0739,-40.556134 -44.95534,-65.37088 -85.32176,-57.40659 z m 2.80071,29.231473 5.1e-4,-9.9e-5 c 2.13365,-0.334266 3.95652,0.01931 5.31987,1.031879 4.77648,3.547266 2.89647,14.166887 -4.19904,23.719127 -7.09532,9.55196 -16.7189,14.41932 -21.49476,10.87151 -4.77606,-3.54747 -2.89605,-14.166665 4.19913,-23.718615 4.83297,-6.506353 11.08277,-11.106027 16.17429,-11.903802 z m 47.56936,23.874148 c 2.13386,-0.334401 3.95691,0.01915 5.32037,1.031789 4.77577,3.54775 2.89554,14.16692 -4.19964,23.7187 -7.09514,9.55189 -16.7186,14.41945 -21.49466,10.87203 -4.77578,-3.54775 -2.89554,-14.16693 4.19965,-23.71872 4.83296,-6.50635 11.08277,-11.10602 16.17428,-11.903799 z M 151.12801,132.2755 c 2.17877,-0.55401 4.13861,-0.53197 5.77959,0.065 7.31131,2.65972 6.76636,15.88363 -1.21719,29.5365 -7.98356,13.65282 -20.38249,22.56458 -27.69389,19.90504 -7.31132,-2.65972 -6.76637,-15.88364 1.21719,-29.53651 5.96208,-10.19594 14.66479,-18.12654 21.9143,-19.97007 z"
+       id="path897"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccsssccccccscccccccccccccccc" />
+    <ellipse
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-opacity:1"
+       id="path962"
+       cx="128.25729"
+       cy="26.431171"
+       rx="17.575893"
+       ry="21.733631"
+       transform="rotate(16.845913)" />
+    <ellipse
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.29560357;stroke-opacity:1"
+       id="path964"
+       cx="245.22121"
+       cy="-179.49768"
+       rx="18.099041"
+       ry="22.821976"
+       transform="matrix(0.33166949,0.94339565,-0.88087771,0.47334392,0,0)" />
+    <path
+       id="path568"
+       style="fill:#ffffff;stroke:#fafdff;stroke-width:0.356;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 106.97295,259.61975 c 0.0134,-0.25385 0.0292,-0.51409 0.0479,-0.78105 0.59479,-8.54288 2.97751,-9.88474 2.97751,-9.88474 l 5.54253,1.04351 c 0,0 1.48321,-0.66332 2.12354,-0.41427 0.64035,0.24904 1.37204,1.54389 1.37204,1.54389 l 19.02927,1.6087 c 0,0 0.94865,-0.94047 1.49023,-0.87767 0.54159,0.0628 1.11451,1.0657 1.11451,1.0657 l 5.49906,0.38814 c 0,0 0.7213,-0.79744 1.26976,-0.81461 0.54847,-0.0172 0.96423,0.87635 1.55867,0.86729 5.38159,0.0341 6.75238,-5.59098 8.60298,-8.67755 2.71811,-4.53347 7.42673,-7.64228 12.37681,-7.81427 13.99182,-0.48614 40.20387,8.31062 59.56072,9.9243 0,0 1.79066,-1.55292 6.57665,0.26655 4.78599,1.81946 9.12249,14.44555 8.18358,22.71047 -0.93889,8.26491 -3.47489,19.11211 -13.95088,21.6659 -3.19793,0.77959 -5.68428,-1.12259 -5.68428,-1.12259 -19.43608,0.50444 -53.00574,1.66081 -58.30446,0.46928 -8.87322,-1.99535 -10.84377,-6.76824 -12.19967,-11.35447 -1.60897,-5.44215 -2.79837,-6.93993 -6.77895,-7.55802 -0.51289,-0.0791 -0.87857,0.7764 -1.40831,0.66359 -0.52994,-0.11191 -1.10453,-1.28294 -1.10453,-1.28294 l -5.72273,-0.25317 c 0,0 -0.78608,0.71794 -1.26373,0.67 -0.47765,-0.048 -1.12057,-0.92034 -1.12057,-0.92034 l -18.5064,-1.6898 c 0,0 -0.84969,1.03174 -1.57251,1.09172 -0.72282,0.06 -2.20406,-1.04108 -2.20406,-1.04108 l -5.80786,0.0336 c 0,0 -2.10591,-1.65583 -1.69677,-9.52605 z m 49.4674,-3.83693 c 0,0 11.61657,-9.2335 15.58779,-9.09888 10.08861,0.34198 53.22418,5.36627 53.22418,5.36627 0,0 -51.7418,-11.56961 -56.92412,-9.67165 -3.70211,1.35585 -11.88785,13.40426 -11.88785,13.40426 z" />
+  </g>
+</svg>

public/flaschengeist-logo.svg

@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1024"
+   height="1024"
+   viewBox="0 0 270.93333 270.93334"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2 (e86c8708, 2021-01-15)"
+   sodipodi:docname="flaschengeist-logo.svg"
+   inkscape:export-filename="/Users/crimsen/git/flaschengeist-frontend/public/flaschengeist-logo.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="391.55984"
+     inkscape:cy="526.94717"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:document-rotation="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-26.06665)">
+    <circle
+       id="path10"
+       cx="135.46666"
+       cy="161.53333"
+       style="stroke-width:0.26506463;fill:#1976d2;fill-opacity:1"
+       r="135.46666" />
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.44061947;stroke-opacity:1"
+       d="m 154.04963,46.75413 c -2.62014,0.516924 -5.22545,1.168424 -7.80617,1.95206 -42.75163,12.981828 -43.91253,68.68501 -54.129684,109.64785 -13.512037,49.65839 -58.120549,32.45922 -53.364321,57.25551 4.247764,22.14545 69.262455,44.34715 71.908285,44.72513 7.43909,1.06272 -52.780019,-26.79368 -40.437456,-42.16974 10.871821,-13.54384 54.907216,-1.28617 101.792266,-18.34148 41.23972,-15.24969 76.0405,-52.05406 67.35884,-95.66274 -8.0739,-40.556134 -44.95534,-65.37088 -85.32176,-57.40659 z m 2.80071,29.231473 5.1e-4,-9.9e-5 c 2.13365,-0.334266 3.95652,0.01931 5.31987,1.031879 4.77648,3.547266 2.89647,14.166887 -4.19904,23.719127 -7.09532,9.55196 -16.7189,14.41932 -21.49476,10.87151 -4.77606,-3.54747 -2.89605,-14.166665 4.19913,-23.718615 4.83297,-6.506353 11.08277,-11.106027 16.17429,-11.903802 z m 47.56936,23.874148 c 2.13386,-0.334401 3.95691,0.01915 5.32037,1.031789 4.77577,3.54775 2.89554,14.16692 -4.19964,23.7187 -7.09514,9.55189 -16.7186,14.41945 -21.49466,10.87203 -4.77578,-3.54775 -2.89554,-14.16693 4.19965,-23.71872 4.83296,-6.50635 11.08277,-11.10602 16.17428,-11.903799 z M 151.12801,132.2755 c 2.17877,-0.55401 4.13861,-0.53197 5.77959,0.065 7.31131,2.65972 6.76636,15.88363 -1.21719,29.5365 -7.98356,13.65282 -20.38249,22.56458 -27.69389,19.90504 -7.31132,-2.65972 -6.76637,-15.88364 1.21719,-29.53651 5.96208,-10.19594 14.66479,-18.12654 21.9143,-19.97007 z"
+       id="path897"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccsssccccccscccccccccccccccc" />
+    <ellipse
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-opacity:1"
+       id="path962"
+       cx="128.25729"
+       cy="26.431171"
+       rx="17.575893"
+       ry="21.733631"
+       transform="rotate(16.845913)" />
+    <ellipse
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.29560357;stroke-opacity:1"
+       id="path964"
+       cx="245.22121"
+       cy="-179.49768"
+       rx="18.099041"
+       ry="22.821976"
+       transform="matrix(0.33166949,0.94339565,-0.88087771,0.47334392,0,0)" />
+    <path
+       id="path568"
+       style="fill:#ffffff;stroke:#1976d2;stroke-width:0.356;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 106.97295,259.61975 c 0.0134,-0.25385 0.0292,-0.51409 0.0479,-0.78105 0.59479,-8.54288 2.97751,-9.88474 2.97751,-9.88474 l 5.54253,1.04351 c 0,0 1.48321,-0.66332 2.12354,-0.41427 0.64035,0.24904 1.37204,1.54389 1.37204,1.54389 l 19.02927,1.6087 c 0,0 0.94865,-0.94047 1.49023,-0.87767 0.54159,0.0628 1.11451,1.0657 1.11451,1.0657 l 5.49906,0.38814 c 0,0 0.7213,-0.79744 1.26976,-0.81461 0.54847,-0.0172 0.96423,0.87635 1.55867,0.86729 5.38159,0.0341 6.75238,-5.59098 8.60298,-8.67755 2.71811,-4.53347 7.42673,-7.64228 12.37681,-7.81427 13.99182,-0.48614 40.20387,8.31062 59.56072,9.9243 0,0 1.79066,-1.55292 6.57665,0.26655 4.78599,1.81946 9.12249,14.44555 8.18358,22.71047 -0.93889,8.26491 -3.47489,19.11211 -13.95088,21.6659 -3.19793,0.77959 -5.68428,-1.12259 -5.68428,-1.12259 -19.43608,0.50444 -53.00574,1.66081 -58.30446,0.46928 -8.87322,-1.99535 -10.84377,-6.76824 -12.19967,-11.35447 -1.60897,-5.44215 -2.79837,-6.93993 -6.77895,-7.55802 -0.51289,-0.0791 -0.87857,0.7764 -1.40831,0.66359 -0.52994,-0.11191 -1.10453,-1.28294 -1.10453,-1.28294 l -5.72273,-0.25317 c 0,0 -0.78608,0.71794 -1.26373,0.67 -0.47765,-0.048 -1.12057,-0.92034 -1.12057,-0.92034 l -18.5064,-1.6898 c 0,0 -0.84969,1.03174 -1.57251,1.09172 -0.72282,0.06 -2.20406,-1.04108 -2.20406,-1.04108 l -5.80786,0.0336 c 0,0 -2.10591,-1.65583 -1.69677,-9.52605 z m 49.4674,-3.83693 c 0,0 11.61657,-9.2335 15.58779,-9.09888 10.08861,0.34198 53.22418,5.36627 53.22418,5.36627 0,0 -51.7418,-11.56961 -56.92412,-9.67165 -3.70211,1.35585 -11.88785,13.40426 -11.88785,13.40426 z" />
+  </g>
+</svg>

public/no-image.svg

@@ -0,0 +1,168 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1024"
+   height="1024"
+   viewBox="0 0 270.93333 270.93334"
+   version="1.1"
+   id="svg37"
+   inkscape:version="1.0.2 (e86c8708, 2021-01-15)"
+   sodipodi:docname="no-image.svg">
+  <defs
+     id="defs31">
+    <rect
+       x="-328.72475"
+       y="24.854798"
+       width="167.56944"
+       height="62.537879"
+       id="rect1100" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.66"
+     inkscape:cx="-222.85714"
+     inkscape:cy="248.57143"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="2560"
+     inkscape:window-height="1303"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata34">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <circle
+       id="path10"
+       cx="135.46666"
+       cy="135.46666"
+       style="fill:#1976d2;fill-opacity:1;stroke-width:0.265065;opacity:1"
+       r="135.46666" />
+    <path
+       id="path897"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#1976d2;stroke-width:2.4226772;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 443.15234 56.630859 A 66.428573 82.142858 16.845913 0 0 371.42188 118.32031 A 66.428573 82.142858 16.845913 0 0 411.19531 216.18945 A 66.428573 82.142858 16.845913 0 0 417.72266 217.72852 C 381.34438 302.48672 370.45756 410.53422 348.14648 499.98438 C 297.07736 687.66963 128.47878 622.66455 146.45508 716.38281 C 160.50823 789.6481 350.53291 863.07431 404.40039 881.20117 C 404.36927 881.70781 404.3327 882.22702 404.30664 882.7207 C 402.76028 912.46642 410.7207 918.72461 410.7207 918.72461 L 432.67188 918.59766 C 432.67187 918.59766 438.27004 922.75802 441.00195 922.53125 C 443.73387 922.30455 446.94531 918.40625 446.94531 918.40625 L 516.89062 924.79297 C 516.89062 924.79297 519.31971 928.09007 521.125 928.27148 C 522.93029 928.45267 525.90234 925.73828 525.90234 925.73828 L 547.53125 926.69531 C 547.53125 926.69531 549.70216 931.12195 551.70508 931.54492 C 553.70725 931.97129 555.09081 928.73815 557.0293 929.03711 C 572.07401 931.3732 576.56924 937.03281 582.65039 957.60156 C 587.77505 974.93535 595.22123 992.9761 628.75781 1000.5176 C 648.78447 1005.021 775.66385 1000.6487 849.12305 998.74219 C 849.12305 998.74219 858.5188 1005.9328 870.60547 1002.9863 C 910.19976 993.33421 919.78542 952.33706 923.33398 921.09961 C 926.88262 889.86212 910.49308 842.14037 892.4043 835.26367 C 874.31552 828.38693 867.54688 834.25781 867.54688 834.25781 C 794.38713 828.15886 695.31802 794.91067 642.43555 796.74805 C 623.72658 797.39809 605.92942 809.14688 595.65625 826.28125 C 588.66186 837.94703 583.48245 859.20701 563.14258 859.07812 C 560.89588 859.11237 559.32296 855.73577 557.25 855.80078 C 555.17708 855.86568 552.45117 858.87891 552.45117 858.87891 L 531.66797 857.41211 C 531.66797 857.41211 529.50203 853.62212 527.45508 853.38477 C 525.40816 853.14741 521.82422 856.70312 521.82422 856.70312 L 449.90234 850.62305 C 449.90234 850.62305 447.13702 845.72836 444.7168 844.78711 C 442.29665 843.84582 436.68945 846.35352 436.68945 846.35352 L 415.74219 842.4082 C 415.74219 842.4082 407.89779 846.84558 405.02539 873.69922 C 358.98121 845.1153 229.07948 771.28872 265.40039 726.04102 C 306.49077 674.8517 472.92361 721.17976 650.12695 656.71875 C 726.82706 628.35646 797.61671 580.25753 845.84766 519.08398 A 66.376657 87.827348 48.964508 0 0 927.6875 519.24805 A 66.376657 87.827348 48.964508 0 0 980.98047 413.88477 A 66.376657 87.827348 48.964508 0 0 907.37109 380.61328 C 911.18565 353.15829 910.56576 324.56748 904.71094 295.1582 C 874.19541 141.87518 734.80037 48.0882 582.23438 78.189453 C 572.33148 80.143182 562.48437 82.604632 552.73047 85.566406 C 533.35813 91.448951 516.25153 99.658419 501.06836 109.80859 A 66.428573 82.142858 16.845913 0 0 458.80469 58.953125 A 66.428573 82.142858 16.845913 0 0 443.15234 56.630859 z M 598.64062 188.20703 C 604.22194 188.22929 609.06312 189.70004 612.92773 192.57031 C 630.98057 205.9773 623.87627 246.11384 597.05859 282.2168 C 570.24164 318.31869 533.86885 336.71569 515.81836 323.30664 C 497.76711 309.89888 504.87302 269.76201 531.68945 233.66016 C 549.9558 209.06922 573.57677 191.68513 592.82031 188.66992 L 592.82227 188.66992 C 594.83831 188.35408 596.78019 188.19961 598.64062 188.20703 z M 778.42969 278.44141 C 784.01155 278.46343 788.85382 279.93226 792.71875 282.80273 C 810.7689 296.21155 803.66213 336.34605 776.8457 372.44727 C 750.02943 408.54893 713.65672 426.94663 695.60547 413.53906 C 677.55528 400.13024 684.66205 359.99578 711.47852 323.89453 C 729.74482 299.3036 753.36587 281.91757 772.60938 278.90234 C 774.62562 278.58637 776.56907 278.43406 778.42969 278.44141 z M 582.87695 399.91016 C 586.53338 399.95128 589.93604 400.53593 593.03711 401.66406 C 620.67041 411.71655 618.60959 461.69743 588.43555 513.29883 C 558.26146 564.90004 511.39926 598.58305 483.76562 588.53125 C 456.13229 578.47876 458.1931 528.49788 488.36719 476.89648 C 510.90103 438.36065 543.79364 408.38759 571.19336 401.41992 C 575.31072 400.37297 579.22053 399.86903 582.87695 399.91016 z M 643.83594 816.76172 C 685.1496 816.94824 851.34766 854.11133 851.34766 854.11133 C 851.34766 854.11133 688.31573 835.12065 650.18555 833.82812 C 635.17621 833.31932 591.27148 868.21875 591.27148 868.21875 C 591.27148 868.21875 622.20895 822.68111 636.20117 817.55664 C 637.73138 816.99622 640.33478 816.74591 643.83594 816.76172 z "
+       transform="scale(0.26458333)" />
+    <path
+       id="path10-8"
+       style="fill-opacity:1;stroke-width:3.64724414;fill:#ffffff;stroke-miterlimit:4;stroke-dasharray:none;stroke:#ffffff;stroke-opacity:1;opacity:0.80057803"
+       d="M 512 0 A 511.99997 511.99997 0 0 0 0 512 A 511.99997 511.99997 0 0 0 512 1024 A 511.99997 511.99997 0 0 0 659.25 1002.3672 C 706.36552 1003.0651 793.17503 1000.1943 849.12305 998.74219 C 849.12305 998.74219 858.5188 1005.9328 870.60547 1002.9863 C 910.19976 993.33421 919.78542 952.33706 923.33398 921.09961 C 926.20746 895.80534 916.007 859.7095 902.41797 843.23633 A 511.99997 511.99997 0 0 0 1024 512 A 511.99997 511.99997 0 0 0 512 0 z "
+       transform="scale(0.26458333)" />
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:0.33699;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect942-1"
+       width="76.028526"
+       height="73.388649"
+       x="-21.278112"
+       y="109.32571"
+       ry="3.5350549"
+       transform="rotate(-30.00892)" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.391977;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect944-7"
+       width="69.4505"
+       height="56.151112"
+       x="-17.909185"
+       y="113.14103"
+       ry="0"
+       transform="rotate(-30.00892)" />
+    <path
+       id="path10-3-94"
+       style="fill:#1976d2;fill-opacity:1;stroke-width:0.0683297"
+       d="m 68.884108,90.871044 a 34.92124,34.92124 0 0 0 -11.74769,43.865396 l 2.70637,4.68588 a 34.92124,34.92124 0 0 0 15.52651,12.5468 L 123.2496,124.31547 a 34.92124,34.92124 0 0 0 -2.38462,-18.10096 l -4.46922,-7.73814 A 34.92124,34.92124 0 0 0 73.568128,88.16575 Z" />
+    <path
+       id="path897-6-8"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#1976d2;stroke-width:0.165241;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 69.039278,95.120659 a 5.6025989,4.5307973 76.836993 0 0 -2.13225,6.090461 5.6025989,4.5307973 76.836993 0 0 5.68756,4.42371 5.6025989,4.5307973 76.836993 0 0 0.43811,-0.13196 c 0.74268,6.24695 3.78537,13.00002 5.51895,19.04423 3.38604,12.82723 -8.78931,14.73905 -4.53067,19.66107 1.76551,2.04052 6.4553,2.39549 11.0381,2.16453 l 3.43497,-1.98389 c -3.77377,-0.36303 -7.4885,-1.26121 -7.11831,-3.66758 0.68073,-4.42505 12.09089,-7.36618 20.358052,-17.21816 3.5626,-4.29154 6.10303,-9.54716 6.86491,-14.80546 a 4.5272563,5.9903123 18.955588 0 0 4.83918,-2.78197 4.5272563,5.9903123 18.955588 0 0 -0.44664,-8.041018 4.5272563,5.9903123 18.955588 0 0 -5.48235,0.545791 c -0.71126,-1.751685 -1.72325,-3.419125 -3.07226,-4.956384 -7.031112,-8.012324 -18.463402,-8.796579 -26.447502,-1.814405 -0.51824,0.453207 -1.01578,0.934617 -1.49084,1.442271 -0.94352,1.008269 -1.67389,2.076631 -2.2244,3.194051 a 5.6025989,4.5307973 76.836993 0 0 -4.23087,-1.562013 5.6025989,4.5307973 76.836993 0 0 -1.00374,0.396734 z m 13.67184,2.467287 c 0.33015,-0.189526 0.66651,-0.267379 0.99269,-0.229688 1.52358,0.176032 2.47307,2.788932 2.12069,5.836062 -0.35237,3.04705 -1.87308,5.37436 -3.3966,5.19813 -1.52351,-0.17613 -2.47289,-2.78913 -2.12054,-5.83615 0.24002,-2.07551 1.04204,-3.90793 2.07575,-4.742444 l 1.7e-4,-9.5e-5 c 0.10831,-0.08739 0.21769,-0.162799 0.32783,-0.225833 z m 13.69685,-0.803574 c 0.33018,-0.189545 0.6664,-0.267533 0.9926,-0.229843 1.52349,0.176235 2.4729,2.789172 2.12054,5.836151 -0.35234,3.04702 -1.87298,5.37441 -3.39651,5.1983 -1.52348,-0.17624 -2.4729,-2.78917 -2.12054,-5.83617 0.24,-2.075497 1.04211,-3.908161 2.07582,-4.742688 0.10834,-0.0874 0.21795,-0.162716 0.32809,-0.22575 z m -7.40627,13.845038 c 0.21745,-0.12213 0.43816,-0.20399 0.65981,-0.24312 1.97501,-0.34891 3.55829,2.67343 3.53636,6.75042 -0.0219,4.077 -1.64072,7.66488 -3.61571,8.01383 -1.975,0.34891 -3.55819,-2.67326 -3.53627,-6.75027 0.0164,-3.04468 0.93655,-5.93703 2.31716,-7.28321 0.20748,-0.20228 0.42129,-0.36535 0.63865,-0.48765 z m 17.352832,21.22847 c -0.10315,0.0588 -0.20272,0.11824 -0.29832,0.17807 -1.05105,0.65671 -1.69275,1.90208 -1.75,3.22056 l 1.74663,-1.00878 c 0.10074,-0.33823 0.21509,-0.61452 0.34506,-0.77008 0.0713,-0.0853 0.2166,-0.18885 0.42393,-0.30733 0.72661,-0.41504 2.22115,-1.01463 3.95458,-1.65068 l 5.84666,-3.37678 c -3.78613,1.29335 -7.9478,2.39117 -10.26846,3.71516 z" />
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:0.33699;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect942"
+       width="76.028526"
+       height="73.388649"
+       x="97.497429"
+       y="66.694847"
+       ry="3.5350549" />
+    <rect
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.391977;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect944"
+       width="69.4505"
+       height="56.151112"
+       x="100.86639"
+       y="70.51017"
+       ry="0" />
+    <path
+       id="path10-3"
+       style="fill:#1976d2;fill-opacity:1;stroke-width:0.0683297"
+       d="M 132.97782,70.510038 A 34.92124,34.92124 0 0 0 100.8663,102.61974 v 5.41128 a 34.92124,34.92124 0 0 0 7.17007,18.63021 h 55.29238 a 34.92124,34.92124 0 0 0 6.98797,-16.86711 v -8.93604 A 34.92124,34.92124 0 0 0 138.38694,70.510038 Z" />
+    <path
+       id="path897-6"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#1976d2;stroke-width:0.165241;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 130.9868,74.267588 a 4.5307973,5.6025989 16.845913 0 0 -4.89247,4.20761 4.5307973,5.6025989 16.845913 0 0 2.71268,6.675244 4.5307973,5.6025989 16.845913 0 0 0.44538,0.10485 c -2.4812,5.78097 -3.22383,13.15053 -4.74557,19.251518 -3.4832,12.80118 -14.98258,8.3674 -13.7565,14.75951 0.5083,2.64997 4.39189,5.30288 8.47586,7.39491 h 3.96671 c -3.08632,-2.20176 -5.85386,-4.8374 -4.32979,-6.73605 2.80259,-3.4914 14.15415,-0.33165 26.2404,-4.72825 5.23137,-1.93447 10.05977,-5.215 13.34938,-9.38737 a 4.5272563,5.9903123 48.964508 0 0 5.58183,0.0112 4.5272563,5.9903123 48.964508 0 0 3.63483,-7.186478 4.5272563,5.9903123 48.964508 0 0 -5.0204,-2.26929 c 0.26017,-1.87259 0.21778,-3.82264 -0.18155,-5.82851 -2.08133,-10.454754 -11.58886,-16.851564 -21.9947,-14.798494 -0.67543,0.13326 -1.34705,0.3013 -2.01232,0.50331 -1.32131,0.40122 -2.4881,0.96108 -3.52367,1.65338 a 4.5307973,5.6025989 16.845913 0 0 -2.8825,-3.46863 4.5307973,5.6025989 16.845913 0 0 -1.0676,-0.15845 z m 10.60512,8.974304 c 0.38068,10e-4 0.71089,0.10181 0.97449,0.29758 1.2313,0.91443 0.74671,3.65194 -1.08241,6.11436 -1.82906,2.46235 -4.30989,3.71712 -5.54104,2.80255 -1.23119,-0.91448 -0.74644,-3.65202 1.08259,-6.11436 1.24587,-1.67724 2.85684,-2.8629 4.16936,-3.06855 h 1.8e-4 c 0.1375,-0.0215 0.26994,-0.0321 0.39683,-0.0316 z m 12.26265,6.15442 c 0.38072,0.001 0.71088,0.10162 0.97449,0.2974 1.23112,0.91456 0.74644,3.65206 -1.08258,6.11436 -1.82902,2.46234 -4.30984,3.71721 -5.54104,2.80274 -1.23112,-0.91456 -0.74645,-3.65206 1.08258,-6.11437 1.24586,-1.67724 2.85702,-2.86307 4.16954,-3.06873 0.13752,-0.0215 0.27011,-0.0319 0.39701,-0.0314 z m -13.33783,8.28494 c 0.24939,0.003 0.48145,0.0425 0.69297,0.11947 1.88474,0.68563 1.74421,4.094668 -0.31382,7.614168 -2.05805,3.51949 -5.25426,5.8168 -7.13902,5.13121 -1.88474,-0.68563 -1.74422,-4.09448 0.31382,-7.61399 1.53693,-2.62835 3.78032,-4.672758 5.64914,-5.147988 0.28082,-0.0714 0.54752,-0.10567 0.79691,-0.10287 z m 4.40955,27.061498 c -0.11872,-7e-4 -0.23468,0.001 -0.34739,0.005 -1.2386,0.043 -2.41713,0.80049 -3.12612,1.9136 h 2.01701 c 0.2564,-0.24251 0.4936,-0.42457 0.68395,-0.49428 0.10436,-0.0382 0.28201,-0.0552 0.52081,-0.0541 0.83678,0.004 2.43085,0.23225 4.25002,0.54842 h 6.75175 c -3.92545,-0.7736 -8.07829,-1.90434 -10.75003,-1.91848 z" />
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:0.33699;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect942-6"
+       width="76.028526"
+       height="73.388649"
+       x="183.4511"
+       y="-21.159952"
+       ry="3.5350549"
+       transform="rotate(27.418518)" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.391977;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect944-6"
+       width="69.4505"
+       height="56.151112"
+       x="186.82002"
+       y="-17.344629"
+       ry="0"
+       transform="rotate(27.418518)" />
+    <path
+       id="path10-3-9"
+       style="fill:#1976d2;fill-opacity:1;stroke-width:0.0683297"
+       d="m 202.32517,85.418659 a 34.92124,34.92124 0 0 0 -43.2904,13.715795 l -2.49182,4.803416 a 34.92124,34.92124 0 0 0 -2.21435,19.83912 l 49.0812,25.46141 a 34.92124,34.92124 0 0 0 13.97007,-11.7545 l 4.11493,-7.93223 A 34.92124,34.92124 0 0 0 207.12667,87.90949 Z" />
+    <path
+       id="path897-6-3"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#1976d2;stroke-width:0.165241;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 198.82751,87.837273 a 4.5307973,5.6025989 44.264431 0 0 -6.28043,1.482039 4.5307973,5.6025989 44.264431 0 0 -0.6659,7.174546 4.5307973,5.6025989 44.264431 0 0 0.34706,0.298162 c -4.86454,3.98902 -8.91733,10.18876 -13.07755,14.90366 -8.9867,9.75921 -17.15262,0.52818 -19.00775,6.76684 -0.76908,2.58635 1.45663,6.72959 4.11849,10.46723 l 3.52111,1.82662 c -1.72575,-3.37564 -2.96872,-6.98962 -0.74155,-7.97318 4.09551,-1.80864 12.71689,6.22341 25.47003,7.88625 5.5345,0.69181 11.33116,0.003 16.17256,-2.18564 a 4.5272563,5.9903123 76.383026 0 0 4.94964,2.5803 4.5272563,5.9903123 76.383026 0 0 6.5358,-4.70541 4.5272563,5.9903123 76.383026 0 0 -3.41147,-4.3262 c 1.09325,-1.54243 1.95359,-3.29295 2.5228,-5.25738 2.96674,-10.23876 -2.52713,-20.295083 -12.70946,-23.264393 -0.66092,-0.192737 -1.33447,-0.352844 -2.01803,-0.479873 -1.35764,-0.252295 -2.65117,-0.292618 -3.88921,-0.154954 a 4.5307973,5.6025989 44.264431 0 0 -0.96143,-4.406339 4.5307973,5.6025989 44.264431 0 0 -0.87472,-0.632269 z m 5.28126,12.849707 c 0.33746,0.17619 0.58416,0.41773 0.72799,0.71289 0.67191,1.37871 -1.01884,3.58556 -3.7764,4.92908 -2.75748,1.34349 -5.53743,1.31492 -6.20913,-0.0638 -0.67178,-1.3787 1.01911,-3.58551 3.77656,-4.929 1.87826,-0.91512 3.85425,-1.22576 5.11402,-0.80391 l 1.7e-4,8e-5 c 0.13196,0.0442 0.25439,0.0958 0.3668,0.15469 z m 8.05112,11.10986 c 0.33749,0.17621 0.58422,0.41755 0.72807,0.71273 0.67168,1.37874 -1.01913,3.58554 -3.77655,4.929 -2.75744,1.3435 -5.53743,1.31502 -6.20922,-0.0637 -0.67169,-1.37874 1.01912,-3.58554 3.77655,-4.92901 1.87826,-0.91512 3.8545,-1.22583 5.11428,-0.80399 0.13197,0.0442 0.25445,0.0961 0.36687,0.15495 z m -15.65465,1.21237 c 0.21999,0.1175 0.4078,0.25943 0.56011,0.42515 1.3573,1.47651 -0.33727,4.43789 -3.7848,6.61434 -3.44753,2.17643 -7.34258,2.74386 -8.69992,1.26738 -1.3573,-1.47651 0.33717,-4.43772 3.78471,-6.61418 2.57461,-1.62536 5.50741,-2.40706 7.38513,-1.96834 0.28216,0.0659 0.53468,0.15833 0.75477,0.27565 z m -8.54725,26.05213 c -0.10506,-0.0553 -0.20878,-0.10718 -0.31067,-0.15553 -1.11927,-0.53219 -2.51422,-0.40249 -3.65614,0.2591 l 1.79043,0.92881 c 0.33927,-0.0972 0.63366,-0.14958 0.83473,-0.12381 0.11023,0.0142 0.27575,0.0809 0.48722,0.19181 0.74094,0.38887 2.05083,1.32553 3.52006,2.44389 l 5.9933,3.10909 c -3.12826,-2.49432 -6.2939,-5.41036 -8.65901,-6.65322 z" />
+    <text
+       xml:space="preserve"
+       id="text1098"
+       style="font-style:normal;font-weight:normal;font-size:22.57779999999999987px;line-height:1.35;font-family:sans-serif;white-space:pre;shape-inside:url(#rect1100);fill:#000000;fill-opacity:1;stroke:none;"
+       x="52.690414"
+       y="0"
+       transform="translate(380.03788,147.12437)"><tspan
+         x="-284.65002"
+         y="47.162986"><tspan
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:condensed;font-size:22.5778px;font-family:'Helvetica Neue';-inkscape-font-specification:'Helvetica Neue Bold Condensed';text-align:center;text-anchor:middle">Kein Bild </tspan></tspan><tspan
+         x="-292.36704"
+         y="78.223231"><tspan
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:condensed;font-size:22.5778px;font-family:'Helvetica Neue';-inkscape-font-specification:'Helvetica Neue Bold Condensed';text-align:center;text-anchor:middle">vorhanden</tspan></tspan></text>
+  </g>
+</svg>

quasar.conf.js

@@ -5,17 +5,31 @@
 
 // Configuration for your app
 // https://quasar.dev/quasar-cli/quasar-conf-js
+
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
+const ESLintPlugin = require('eslint-webpack-plugin');
+const { ModifySourcePlugin, ReplaceOperation } = require('modify-source-webpack-plugin');
 const { configure } = require('quasar/wrappers');
 
-module.exports = configure(function(ctx) {
+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 {
     // https://quasar.dev/quasar-cli/supporting-ts
     supportTS: {
       tsCheckerConfig: {
-        eslint: true
-      }
+        eslint: {
+          enabled: true,
+          files: './src/**/*.{ts,tsx,js,jsx,vue}',
+        },
+      },
     },
 
     // https://quasar.dev/quasar-cli/prefetch-feature
@@ -24,23 +38,23 @@ module.exports = configure(function(ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/boot-files
-    boot: ['composition-api', 'axios', 'plugins', 'loading', 'filter', 'login'],
+    boot: ['axios', 'store', 'plugins', 'login', 'init'],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ['app.scss'],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
-      // 'ionicons-v4',
-      'mdi-v5',
-      // 'fontawesome-v5',
       // 'eva-icons',
-      // 'themify',
+      // 'fontawesome-v5',
+      // 'ionicons-v5',
       // 'line-awesome',
-      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+      // 'material-icons',
+      'mdi-v6',
+      // '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
@@ -54,55 +68,62 @@ module.exports = configure(function(ctx) {
       // Applies only if "transpile" is set to true.
       // transpileDependencies: [],
 
-      // rtl: false, // https://quasar.dev/options/rtl-support
-      // preloadChunks: true,
-      // showProgress: false,
-      // gzip: true,
+      // rtl: false,
+
       // analyze: true,
 
       // Options below are automatically set depending on the env, set them if you want to override
       // extractCSS: false,
 
       // https://quasar.dev/quasar-cli/handling-webpack
-      extendWebpack(cfg) {
-        // linting is slow in TS projects, we execute it only for production builds
-        if (ctx.prod) {
-          cfg.module.rules.push({
-            enforce: 'pre',
-            test: /\.(js|vue)$/,
-            loader: 'eslint-loader',
-            exclude: /node_modules/
+      // "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, [
+          {
+            rules: [
+              {
+                test: /plugins\.ts$/,
+                operations: [operation()],
+              },
+            ],
+          },
+        ]);
+        chain.merge({
+          snapshot: {
+            managedPaths: [],
+          },
         });
-        }
-      }
+      },
     },
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
     devServer: {
       https: false,
       port: 8080,
-      open: false // opens browser window automatically
+      open: false, // opens browser window automatically
+      watchFiles: { paths: ['/node_modules/@flaschengeist/**/*'] },
     },
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
     framework: {
-      iconSet: 'material-icons', // Quasar icon set
+      iconSet: 'mdi-v6', // Quasar icon set
       lang: 'de', // Quasar language pack
       config: {
         dark: 'auto',
         loadingBar: {
           position: 'top',
           color: 'warning',
-          size: '5px'
-        }
+          size: '5px',
+        },
       },
 
-      // Possible values for "importStrategy":
-      // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
-      // * 'all'  - Manually specify what to import
-      importStrategy: 'auto',
-
-      // For special cases outside of where "auto" importStrategy can have an impact
+      // For special cases outside of where the auto-import stategy can have an impact
       // (like functional components as one of the examples),
       // you can manually specify Quasar components/directives to be available everywhere:
       //
@@ -110,13 +131,7 @@ module.exports = configure(function(ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: [
-        'LocalStorage',
-        'SessionStorage',
-        'Loading',
-        'Notify',
-        'LoadingBar'
-      ]
+      plugins: ['LocalStorage', 'SessionStorage', 'Dialog', 'Loading', 'Notify', 'LoadingBar'],
     },
 
     // animations: 'all', // --- includes all animations
@@ -125,7 +140,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
@@ -135,39 +150,29 @@ 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',
         theme_color: '#027be3',
         icons: [
           {
-            src: 'icons/icon-128x128.png',
+            src: 'flaschengeist-logo.svg',
+            sizes: 'any',
+            type: 'image/svg+xml',
+          },
+          {
+            src: 'favicon-128x128.png',
             sizes: '128x128',
-            type: 'image/png'
+            type: 'image/png',
           },
           {
-            src: 'icons/icon-192x192.png',
-            sizes: '192x192',
-            type: 'image/png'
-          },
-          {
-            src: 'icons/icon-256x256.png',
+            src: 'favicon-256x256.png',
             sizes: '256x256',
-            type: 'image/png'
+            type: 'image/png',
           },
-          {
-            src: 'icons/icon-384x384.png',
-            sizes: '384x384',
-            type: 'image/png'
+        ],
       },
-          {
-            src: 'icons/icon-512x512.png',
-            sizes: '512x512',
-            type: 'image/png'
-          }
-        ]
-      }
     },
 
     // Full list of options: https://quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
@@ -177,7 +182,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
@@ -198,7 +203,7 @@ 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
@@ -207,7 +212,7 @@ module.exports = configure(function(ctx) {
       extendWebpack(/* cfg */) {
         // do something with Electron main process Webpack cfg
         // chainWebpack also available besides this extendWebpack
-      }
-    }
+      },
+    },
   };
 });

src-capacitor/capacitor-flag.d.ts

@@ -1,9 +1,10 @@
+/* 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 {
-    cordova: true;
+    capacitor: true;
   }
 }

src-capacitor/capacitor.config.json

@@ -0,0 +1,13 @@
+{
+  "appId": "dev.flaschengeist",
+  "appName": "flaschengeist-frontend",
+  "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

@@ -0,0 +1,16 @@
+{
+  "name": "flaschengeist",
+  "version": "2.0.0",
+  "description": "Modular student club administration system",
+  "author": "Tim Gröger <flaschengeist@wu5.de>",
+  "private": true,
+  "dependencies": {
+    "@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-cordova/.gitignore

@@ -1,8 +0,0 @@
-.DS_Store
-
-# Generated by package manager
-node_modules/
-
-# Generated by Cordova
-/plugins/
-/platforms/

src-cordova/config.xml

@@ -1,24 +0,0 @@
-<?xml version='1.0' encoding='utf-8'?>
-<widget id="de.wu5.flaschengeist" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>Flaschengeist</name>
-    <description>Dynamischen Managementsystem für Studentenclubs</description>
-    <author email="dev@cordova.apache.org" href="http://cordova.io">
-        Apache Cordova Team
-    </author>
-    <content src="index.html" />
-    <access origin="*" />
-    <allow-intent href="http://*/*" />
-    <allow-intent href="https://*/*" />
-    <allow-intent href="tel:*" />
-    <allow-intent href="sms:*" />
-    <allow-intent href="mailto:*" />
-    <allow-intent href="geo:*" />
-    <platform name="android">
-        <allow-intent href="market:*" />
-    </platform>
-    <platform name="ios">
-        <allow-intent href="itms:*" />
-        <allow-intent href="itms-apps:*" />
-    </platform>
-    <allow-navigation href="about:*" />
-</widget>

src-cordova/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "de.wu5.flaschengeist",
-  "displayName": "Flaschengeist",
-  "version": "1.0.0",
-  "description": "A sample Apache Cordova application that responds to the deviceready event.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "ecosystem:cordova"
-  ],
-  "author": "Apache Cordova Team",
-  "license": "Apache-2.0",
-  "devDependencies": {
-    "cordova-ios": "^6.1.1",
-    "cordova-plugin-whitelist": "^1.3.4"
-  },
-  "cordova": {
-    "plugins": {
-      "cordova-plugin-whitelist": {}
-    },
-    "platforms": [
-      "ios"
-    ]
-  }
-}

src-electron/electron-flag.d.ts

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

src-electron/electron-main.js

@@ -0,0 +1,56 @@
+import { app, BrowserWindow, nativeTheme } from 'electron'
+import path from 'path'
+
+try {
+  if (process.platform === 'win32' && nativeTheme.shouldUseDarkColors === true) {
+    require('fs').unlinkSync(require('path').join(app.getPath('userData'), 'DevTools Extensions'))
+  }
+} catch (_) { }
+
+let mainWindow
+
+function createWindow () {
+  /**
+   * Initial window options
+   */
+  mainWindow = new BrowserWindow({
+    width: 1000,
+    height: 600,
+    useContentSize: true,
+    webPreferences: {
+      contextIsolation: true,
+      // More info: /quasar-cli/developing-electron-apps/electron-preload-script
+      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
+    }
+  })
+
+  mainWindow.loadURL(process.env.APP_URL)
+
+  if (process.env.DEBUGGING) {
+    // if on DEV or Production with debug enabled
+    mainWindow.webContents.openDevTools()
+  } else {
+    // we're on production; no access to devtools pls
+    mainWindow.webContents.on('devtools-opened', () => {
+      mainWindow.webContents.closeDevTools()
+    })
+  }
+
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+}
+
+app.on('ready', createWindow)
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (mainWindow === null) {
+    createWindow()
+  }
+})

src-electron/electron-preload.js

@@ -0,0 +1,17 @@
+/**
+ * This file is used specifically for security reasons.
+ * Here you can access Nodejs stuff and inject functionality into
+ * the renderer thread (accessible there through the "window" object)
+ *
+ * WARNING!
+ * If you import anything from node_modules, then make sure that the package is specified
+ * in package.json > dependencies and NOT in devDependencies
+ *
+ * Example (injects window.myAPI.doAThing() into renderer thread):
+ *
+ *   const { contextBridge } = require('electron')
+ *
+ *   contextBridge.exposeInMainWorld('myAPI', {
+ *     doAThing: () => {}
+ *   })
+ */

src/App.vue

@@ -1,12 +1,10 @@
 <template>
-  <div id="q-app">
   <router-view />
-  </div>
 </template>
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'App'
+  name: 'App',
 });
 </script>

src/boot/axios.ts

@@ -1,57 +1,109 @@
-import axios, { AxiosInstance, AxiosError } from 'axios';
+/**
+ * This boot file registers interceptors for axios
+ */
+import { useMainStore, api } from '@flaschengeist/api';
+import { AxiosError } from 'axios';
 import { boot } from 'quasar/wrappers';
-import config from '../config';
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
+import config from 'src/config';
+import { clone } from '@flaschengeist/api';
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    $axios: AxiosInstance;
+/**
+ * Minify data sent to backend server
+ *
+ * Drop unneeded entities which can be identified by ID.
+ *
+ * @param obj Object to minify
+ * @param cloned If this entity is already cloned (JSON En+Decoded)
+ * @returns Minified object (some types are converted, like a Date object is now a ISO string)
+ */
+function minify(entity: unknown, cloned = false) {
+  if (!cloned) entity = clone(entity);
+
+  if (typeof entity === 'object') {
+    const obj = entity as { [index: string]: unknown };
+
+    for (const prop in obj) {
+      if (obj.hasOwnProperty(prop) && !!obj[prop]) {
+        if (Array.isArray(obj[prop])) {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+          obj[prop] = (<Array<unknown>>obj[prop]).map((v) => minify(v, true));
+        } else if (
+          typeof obj[prop] === 'object' &&
+          Object.keys(<object>obj[prop]).includes('id') &&
+          typeof (<{ id: unknown }>obj[prop])['id'] === 'number' &&
+          !isNaN((<{ id: number }>obj[prop])['id'])
+        ) {
+          obj[prop] = (<{ id: unknown }>obj[prop])['id'];
         }
       }
+    }
+    return obj;
+  }
+  return entity;
+}
 
-export default boot<Store<StateInterface>>(({ Vue, store, router }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  Vue.prototype.$axios = axios;
-  axios.defaults.baseURL = config.baseURL;
+export default boot(({ router }) => {
+  // Persisted value is read in plugins.ts boot file!
+  if (api.defaults.baseURL === undefined) api.defaults.baseURL = config.baseURL;
 
   /***
-   * Intercept requests and insert Token if available
+   * Intercept requests
+   *   - insert Token if available
+   *   - minify JSON requests
    */
-  axios.interceptors.request.use(config => {
-    const session = store.state.session.currentSession;
-    if (session?.token) {
-      config.headers = { Authorization: 'Bearer ' + session.token };
+  api.interceptors.request.use((config) => {
+    const store = useMainStore();
+    if (store.session?.token) {
+      config.headers = Object.assign(config.headers || {}, {
+        Authorization: `Bearer ${store.session.token}`,
+      });
     }
+    // Minify JSON requests
+    if (
+      !!config.data &&
+      (config.headers === undefined ||
+        config.headers['Content-Type'] === undefined ||
+        config.headers['Content-Type'] === 'application/json')
+    )
+      config.data = minify(config.data);
     return config;
   });
 
   /***
    * Intercept responses
-   *   - filter 401 --> logout
+   *   - filter 401 --> handleLoggedOut
    *   - filter timeout or 502-504 --> backendOffline
    */
-  axios.interceptors.response.use(
-    response => response,
-    error => {
+  api.interceptors.response.use(
+    (response) => response,
+    async (error) => {
+      const store = useMainStore();
+
       if (error) {
         const e = <AxiosError>error;
+        const current = router.currentRoute.value;
         if (
           e.code === 'ECONNABORTED' ||
           (e.response && e.response.status >= 502 && e.response.status <= 504)
         ) {
-          return router.push({
+          let next = current.path;
+          if ((current.name == 'login' || current.name == 'offline') && current.query.redirect)
+            next = <string>current.query.redirect;
+          await router.push({
             name: 'offline',
-            query: { redirect: router.currentRoute.fullPath }
+            query: { redirect: next },
           });
         } else if (e.response && e.response.status == 401) {
-          if (router.currentRoute.name !== 'login')
-            return store.dispatch('session/clearCurrent');
+          store.handleLoggedOut();
+          if (current.name != 'login') {
+            await router.push({
+              name: 'login',
+              query: { redirect: current.fullPath },
+            });
           }
         }
-      return Promise.reject(error);
+      }
+      throw error;
     }
   );
 });
-
-export { axios };

src/boot/composition-api.ts

@@ -1,7 +0,0 @@
-import VueCompositionApi from '@vue/composition-api';
-import { VueConstructor } from 'vue';
-import { boot } from 'quasar/wrappers';
-
-export default boot(({ Vue }: { Vue: VueConstructor }) => {
-  Vue.use(VueCompositionApi);
-});

src/boot/filter.ts

@@ -1,12 +0,0 @@
-import { boot } from 'quasar/wrappers';
-import { formatDateTime } from 'src/utils/datetime';
-
-export default boot(({ Vue }) => {
-  Vue.filter('date', formatDateTime);
-  Vue.filter('time', (date: Date, seconds = false) =>
-    formatDateTime(date, false, true, seconds)
-  );
-  Vue.filter('dateTime', (date: Date, seconds = false, weekday = false) =>
-    formatDateTime(date, true, true, seconds, weekday)
-  );
-});

src/boot/init.ts

@@ -0,0 +1,97 @@
+/**
+ * This boot file initalizes the store from persistent storage and load all plugins
+ */
+import {
+  PersistentStorage,
+  api,
+  isAxiosError,
+  saveSession,
+  useMainStore,
+} from '@flaschengeist/api';
+import { Notify, Platform } from 'quasar';
+import { loadPlugins } from './plugins';
+import { boot } from 'quasar/wrappers';
+import routes from 'src/router/routes';
+
+async function loadBaseUrl() {
+  try {
+    const url = await PersistentStorage.get<string>('baseURL');
+    if (url !== null) api.defaults.baseURL = url;
+  } catch (e) {
+    console.warn('Could not load BaseURL', e);
+  }
+}
+// eslint-disable-next-line
+class BackendError extends Error { }
+
+/**
+ * Loading backend information
+ * @returns Backend object or null
+ */
+async function getBackend() {
+  const { data } = await api.get<FG.Backend>('/');
+  if (!data || typeof data !== 'object' || !('plugins' in data))
+    throw new BackendError('Invalid backend response received');
+  return data;
+}
+
+/**
+ * Boot file for loading baseURL + Session from PersistentStorage + loading and initializing all plugins
+ */
+export default boot(async ({ app, router }) => {
+  const store = useMainStore();
+
+  // FIRST(!) get the base URL
+  await loadBaseUrl();
+
+  // Init the store, load current session and user, if available
+  try {
+    await store.init();
+  } finally {
+    // Any changes on the session is written back to the persistent store
+    store.$subscribe((mutation, state) => {
+      saveSession(state.session);
+    });
+  }
+
+  // Load all plugins
+  try {
+    // Fetch backend data
+    const backend = await getBackend();
+    // Load enabled plugins
+    const flaschengeist = await loadPlugins(backend, routes);
+    // Add loaded routes to router
+    flaschengeist.routes.forEach((route) => router.addRoute(route));
+    // save plugins in VM-variable
+    app.provide('flaschengeist', flaschengeist);
+  } catch (error) {
+    // 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' });
+        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
+      void router.push({ name: 'error' });
+      Notify.create({
+        type: 'negative',
+        message: `Fehler beim Laden: Bitte wende dich an den Admin (${error})!`,
+        timeout: 10000,
+        progress: true,
+      });
+    } else {
+      console.error('Unknown error in init.ts:', error);
+    }
+  }
+});

src/boot/loading.ts

@@ -1,13 +0,0 @@
-import { boot } from 'quasar/wrappers';
-import { Loading } from 'quasar';
-import DarkCircularProgress from 'components/loading/DarkCircularProgress.vue';
-
-// "async" is optional;
-// more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
-export default boot((/* { app, router, Vue ... } */) => {
-  Loading.setDefaults({
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    spinner: DarkCircularProgress
-  });
-});

src/boot/login.ts

@@ -1,58 +1,33 @@
+/**
+ * This boot file registers login / authentification related axios interceptors
+ */
+import { useMainStore, hasPermissions } from '@flaschengeist/api';
 import { boot } from 'quasar/wrappers';
-import { StateInterface } from 'src/store';
-import { RouteRecord } from 'vue-router';
-import { Store } from 'vuex';
 
-export default boot<Store<StateInterface>>(({ router, store }) => {
-  router.beforeEach((to, from, next) => {
-    const session = store.state.session.currentSession;
+export default boot(({ router }) => {
+  /**
+   * Login guard
+   * Check if user tries to access the secured area and validates token
+   */
+  router.beforeEach((to, from) => {
+    const store = useMainStore();
 
-    if (to.path == from.path) {
-      return;
-    }
+    // Skip loops
+    if (to.name == 'login' && from.name == 'login') return false;
 
-    if (to.path.startsWith('/main')) {
-      // Secured area (LOGIN REQUIRED)
-      // Check login is ok
-      if (!session || session.expires <= new Date()) {
-        store.dispatch('session/logout').catch(error => {
-          console.warn(error);
-        });
-        return;
-      }
-
-      // Check if special permissions are required
-      if (
-        to.matched.every((record: RouteRecord) => {
-          if (!('meta' in record) || !('permissions' in record.meta))
-            return true;
-          if (record.meta) {
-            if ((<{ permissions: FG.Permission[] }>record.meta).permissions) {
-              return (<{ permissions: FG.Permission[] }>(
-                record.meta
-              )).permissions.every((permission: string) => {
-                return store.state.user.currentPermissions.includes(permission);
-              });
-            }
-          }
-        })
-      ) {
-        next();
-      } else {
-        next({ name: 'login', query: { redirect: to.fullPath } });
-      }
-    } else {
-      if (
-        to.name == 'login' &&
-        store.state.user.currentUser &&
-        !to.params['logout']
-      ) {
-        // Called login while already logged in
-        void next({ name: 'dashboard' });
-      } else {
-        // We are on the non secured area
-        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/notify.ts

@@ -1,14 +0,0 @@
-import { boot } from 'quasar/wrappers';
-import { Notify } from 'quasar';
-
-// "async" is optional;
-// more info on params: https://quasar.dev/quasar-cli/boot-files
-export default boot((/* { app, router, Vue ... } */) => {
-  Notify.registerType('error', {
-    color: 'negative',
-    icon: 'mdi-alert-circle',
-    progress: true,
-    position: 'bottom',
-    actions: [{ icon: 'mdi-close', color: 'white' }]
-  });
-});

src/boot/plugins.ts

@@ -1,71 +1,96 @@
-import {boot} from 'quasar/wrappers';
-import {RouteConfig} from 'vue-router';
-import {VueRouter} from 'vue-router/types/router';
-import {Store} from 'vuex';
-import {StateInterface} from 'src/store';
-import {FG_Plugin} from 'src/plugins';
-import routes from 'src/router/routes';
-import {axios} from 'boot/axios';
-import {AxiosResponse} from 'axios';
+import { FG_Plugin } from '@flaschengeist/types';
+import { RouteRecordRaw } from 'vue-router';
 
-const config = {
-  // Do not change required Modules !!
-  requiredModules: ['User'],
-  // here you can import plugins.
-  loadModules: ['Balance', 'Schedule']
-};
+/****************************************************
+ ******** Internal area for some magic **************
+ ****************************************************/
 
-// do not change anything here !!
+declare type ImportPlgn = { default: FG_Plugin.Plugin };
 
-// combine routes from source to target
-
-interface BackendPlugin {
-  permissions: string[];
-  version: string;
-}
-
-interface BackendPlugins {
-  [key: string]: BackendPlugin
-}
-
-interface Backend {
-  plugins: [key: string];
-  version: string;
-}
-
-export {Backend}
-
-function combineRoutes(
-  target: RouteConfig[],
-  source: FG_Plugin.PluginRouteConfig[],
-  mainPath: '/' | '/main' = '/'
-): RouteConfig[] {
-  target.forEach(target => {
-    if (target.path === mainPath) {
-      source.forEach((sourceMainConfig: FG_Plugin.PluginRouteConfig) => {
-        const targetMainConfig = target.children?.find(
-          (targetMainConfig: RouteConfig) => {
-            return sourceMainConfig.path === targetMainConfig.path;
-          }
+function validatePlugin(plugin: FG_Plugin.Plugin) {
+  return (
+    typeof plugin.name === 'string' &&
+    typeof plugin.id === 'string' &&
+    plugin.id.length > 0 &&
+    typeof plugin.version === 'string'
   );
-        if (targetMainConfig) {
-          const sourceChildren: RouteConfig[] = [];
-          sourceMainConfig.children?.forEach(child => {
-            sourceChildren.push(<RouteConfig>child);
+}
+
+// Here does some magic happens, WebPack will automatically replace the following comment with the import statements
+const PLUGINS = <Array<Promise<ImportPlgn>>>[
+  /*INSERT_PLUGIN_LIST*/
+];
+
+// Handle Notifications
+export const translateNotification = (note: FG.Notification): FG_Plugin.Notification => note;
+
+// Combine routes, shortcuts and widgets from plugins
+
+/**
+ * Helper function, set permissions from MenuRoute to meta from RouteRecordRaw
+ * @param object MenuRoute to set route meta
+ */
+function setPermissions(object: FG_Plugin.MenuRoute) {
+  if (object.permissions !== undefined) {
+    if (object.route.meta === undefined) object.route.meta = {};
+    object.route.meta['permissions'] = object.permissions;
+  }
+}
+
+/**
+ * Helper function to convert MenuRoute to the parents RouteRecordRaw
+ * @param parent Parent RouteRecordRaw
+ * @param children MenuRoute to convert
+ */
+function convertRoutes(parent: RouteRecordRaw, children?: FG_Plugin.MenuRoute[]) {
+  if (children !== undefined) {
+    children.forEach((child) => {
+      setPermissions(child);
+      convertRoutes(child.route, child.children);
+      if (parent.children === undefined) parent.children = [];
+      parent.children.push(child.route);
     });
-          if (targetMainConfig.children) {
-            targetMainConfig.children = Object.assign(
-              targetMainConfig.children,
-              sourceChildren
-            );
-          } else {
-            targetMainConfig.children = sourceChildren;
   }
+}
+
+/**
+ * Combines routes from plugin MenuRoute to Vue-Router RouteRecordRaw to get a clean route-tree
+ * @param target
+ * @param source
+ * @param mainPath
+ */
+function combineMenuRoutes(
+  target: RouteRecordRaw[],
+  source: FG_Plugin.MenuRoute[],
+  mainPath: '/' | '/in' = '/'
+): RouteRecordRaw[] {
+  // Search parent
+  target.forEach((target) => {
+    if (target.path === mainPath) {
+      // Parent found = target
+      source.forEach((sourceMainConfig: FG_Plugin.MenuRoute) => {
+        // Check if source is already in target
+        const targetMainConfig = target.children?.find((targetMainConfig: RouteRecordRaw) => {
+          return sourceMainConfig.route.path === targetMainConfig.path;
+        });
+        // Already in target routes, add only children
+        if (targetMainConfig) {
+          convertRoutes(targetMainConfig, sourceMainConfig.children);
         } else {
+          // Append to target
           if (target.children === undefined) {
             target.children = [];
           }
-          target.children.push(<RouteConfig>sourceMainConfig);
+          convertRoutes(sourceMainConfig.route, sourceMainConfig.children);
+          if (
+            sourceMainConfig.children &&
+            sourceMainConfig.children.length > 0 &&
+            !sourceMainConfig.route.component
+          )
+            Object.assign(sourceMainConfig.route, {
+              component: () => import('src/components/navigation/EmptyParent.vue'),
+            });
+          target.children.push(sourceMainConfig.route);
         }
       });
     }
@@ -73,223 +98,191 @@ function combineRoutes(
   return target;
 }
 
-// combine Links of Plugins from source to target
-function combineMainLinks(
-  target: FG_Plugin.PluginMainLink[],
-  source: FG_Plugin.PluginRouteConfig
-): FG_Plugin.PluginMainLink[] {
-  const targetPluginMainLink:
-    | FG_Plugin.PluginMainLink
-    | undefined = target.find(
-    (targetPluginMainLink: FG_Plugin.PluginMainLink) => {
-      console.log(targetPluginMainLink.title, source.title);
-      return targetPluginMainLink.title == source.title;
-    }
+function combineRoutes(
+  target: RouteRecordRaw[],
+  source: FG_Plugin.NamedRouteRecordRaw[],
+  mainPath: '/' | '/in'
+) {
+  // Search parent
+  target.forEach((target) => {
+    if (target.path === mainPath) {
+      // Parent found = target
+      source.forEach((sourceRoute) => {
+        // Check if source is already in target
+        const targetRoot = target.children?.find(
+          (targetRoot) => sourceRoute.path === targetRoot.path
         );
-  if (targetPluginMainLink) {
-    source.children?.forEach(
-      (sourcePluginChildLink: FG_Plugin.PluginRouteConfig) => {
-        targetPluginMainLink.children.push(<FG_Plugin.PluginChildLink>{
-          title: sourcePluginChildLink.title,
-          icon: sourcePluginChildLink.icon,
-          link: sourcePluginChildLink.name,
-          name: sourcePluginChildLink.name,
-          permissions: sourcePluginChildLink.meta?.permissions
+        // Already in target routes, add only children
+        if (targetRoot) {
+          if (targetRoot.children === undefined) targetRoot.children = [];
+          targetRoot.children.push(...(sourceRoute.children || []));
+        } else {
+          // Append to target
+          if (target.children === undefined) target.children = [];
+          if (
+            sourceRoute.children &&
+            sourceRoute.children.length > 0 &&
+            sourceRoute.component === undefined
+          )
+            Object.assign(sourceRoute, {
+              component: () => import('src/components/navigation/EmptyParent.vue'),
+            });
+          target.children.push(sourceRoute);
+        }
       });
     }
-    );
-  } else {
-    const mainLink: FG_Plugin.PluginMainLink = <FG_Plugin.PluginMainLink>{
+  });
+}
+
+/**
+ * Combine MenuRoutes into Flaschengeist MenuLinks for the main menu
+ * @param target Flaschengeist list of menu links
+ * @param source MenuRoutes to combine
+ */
+function combineMenuLinks(target: FG_Plugin.MenuLink[], source: FG_Plugin.MenuRoute) {
+  let idx = target.findIndex((link) => link.title == source.title);
+  // Link not found, add new one
+  if (idx === -1) {
+    idx += target.push({
       title: source.title,
       icon: source.icon,
-      link: source.name,
-      name: source.name,
-      permissions: source.meta?.permissions
-    };
-    source.children?.forEach(child => {
-      if (mainLink.children === undefined) {
-        mainLink.children = [];
+      link: source.route.name,
+      permissions: source.permissions,
+    });
   }
-      mainLink.children.push(<FG_Plugin.PluginChildLink>{
-        title: child.title,
-        icon: child.icon,
-        link: child.name,
-        name: child.name,
-        permissions: child.meta?.permissions
+  if (target[idx].children === undefined) {
+    target[idx].children = [];
+  }
+  source.children?.forEach((sourceChild) => {
+    target[idx].children?.push({
+      title: sourceChild.title,
+      icon: sourceChild.icon,
+      link: sourceChild.route.name,
+      permissions: sourceChild.permissions,
     });
   });
-    target.push(mainLink);
-  }
-  return target;
 }
 
-function loadShortCuts(
-  target: FG_Plugin.ShortCutLink[],
-  source: FG_Plugin.PluginRouteConfig[]
-): FG_Plugin.ShortCutLink[] {
-  source.forEach(route => {
+/**
+ * Combine shortcuts from Plugin MenuRouts into the Flaschenbeist Shortcut list
+ * @param target Flaschengeist list of shortcuts
+ * @param source MenuRoutes to extract shortcuts from
+ */
+function combineShortcuts(target: FG_Plugin.Shortcut[], source: FG_Plugin.MenuRoute[]) {
+  source.forEach((route) => {
     if (route.shortcut) {
-      target.push(<FG_Plugin.ShortCutLink>{
-        link: route.name,
+      target.push(<FG_Plugin.Shortcut>{
+        link: route.route.name,
         icon: route.icon,
-        permissions: route.meta?.permissions
+        permissions: route.permissions,
       });
     }
     if (route.children) {
-      target = loadShortCuts(target, route.children);
+      combineShortcuts(target, route.children);
     }
   });
-  return target;
 }
 
-// loade plugins
+/**
+ * Load a Flaschengeist plugin
+ * @param loadedPlugins Flaschgeist object
+ * @param plugin Plugin to load
+ * @param router VueRouter instance
+ */
 function loadPlugin(
-  loadedPlugins: FG_Plugin.LoadedPlugins,
-  modules: string[],
-  backendpromise: Promise<Backend | null>,
-  plugins: FG_Plugin.Plugin[],
-  store: Store<any>,
-  router: VueRouter
-): FG_Plugin.LoadedPlugins {
-  modules.forEach(requiredModule => {
-    const plugin = plugins.find(plugin => {
-      return plugin.name == requiredModule;
-    });
-    if (plugin) {
-      if (plugin.mainRoutes) {
-        loadedPlugins.routes = combineRoutes(
-          loadedPlugins.routes,
-          plugin.mainRoutes,
-          '/main'
-        );
-        plugin.mainRoutes.forEach(route => {
-          loadedPlugins.mainLinks = combineMainLinks(
-            loadedPlugins.mainLinks,
-            route
-          );
-        });
-        loadedPlugins.shortcuts = loadShortCuts(
-          loadedPlugins.shortcuts,
-          plugin.mainRoutes
-        );
+  loadedPlugins: FG_Plugin.Flaschengeist,
+  plugin: FG_Plugin.Plugin,
+  backend: FG.Backend
+) {
+  // Check if already loaded
+  if (loadedPlugins.plugins.findIndex((p) => p.id === plugin.id) !== -1) return true;
+
+  // Check backend dependencies
+  if (
+    !plugin.requiredModules.every(
+      (required) =>
+        backend.plugins[required[0]] !== undefined &&
+        (required.length == 1 ||
+          true) /* validate the version, semver440 from python is... tricky on node*/
+    )
+  ) {
+    console.error(`Plugin ${plugin.id}: Backend modules not satisfied`);
+    return false;
   }
-      if (plugin.outRoutes) {
-        loadedPlugins.routes = combineRoutes(
-          loadedPlugins.routes,
-          plugin.outRoutes
-        );
-        loadedPlugins.shortcutsOut = loadShortCuts(
-          loadedPlugins.shortcutsOut,
-          plugin.outRoutes
-        );
+
+  // Start combining and loading routes, shortcuts etc
+  if (plugin.internalRoutes) {
+    combineRoutes(loadedPlugins.routes, plugin.internalRoutes, '/in');
   }
+
+  if (plugin.innerRoutes) {
+    // Routes for Vue Router
+    combineMenuRoutes(loadedPlugins.routes, plugin.innerRoutes, '/in');
+    // Combine links for menu
+    plugin.innerRoutes.forEach((route) => combineMenuLinks(loadedPlugins.menuLinks, route));
+    // Combine shortcuts
+    combineShortcuts(loadedPlugins.shortcuts, plugin.innerRoutes);
+  }
+
+  if (plugin.outerRoutes) {
+    combineMenuRoutes(loadedPlugins.routes, plugin.outerRoutes);
+    combineShortcuts(loadedPlugins.outerShortcuts, plugin.outerRoutes);
+  }
+
   if (plugin.widgets.length > 0) {
-        plugin.widgets.forEach(
-          widget => (widget.name = plugin.name + '_' + widget.name)
-        );
+    plugin.widgets.forEach((widget) => (widget.name = plugin.id + '.' + widget.name));
     Array.prototype.push.apply(loadedPlugins.widgets, plugin.widgets);
   }
-      if (plugin.store) {
-        plugin.store.forEach((store_plugin, store_namespace) => {
-          store.registerModule(store_namespace, store_plugin);
-        });
-      }
+
   loadedPlugins.plugins.push({
+    id: plugin.id,
     name: plugin.name,
-        version: plugin.version
+    version: plugin.version,
+    notification: plugin.notification?.bind({}) || translateNotification,
   });
-    } else {
-      console.exception(`Could not find required Plugin ${requiredModule}`);
-      router.push({name: 'error'}).catch((e) => {
-        console.warn(e)
-      })
-    }
-  });
-  return loadedPlugins;
+
+  return true;
 }
 
-async function getBackend(): Promise<Backend | null> {
-  let backend: Backend | null = null;
-  try {
-    const response: AxiosResponse<Backend> = await axios.get('/');
-    backend = response.data;
-  } catch (e) {
-    console.log(e);
-    return null;
-  } finally {
-    return backend;
-  }
-}
-
-// "async" is optional;
-// more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
-export default boot<Store<StateInterface>>(({Vue, router, store}) => {
-  const plugins: FG_Plugin.Plugin[] = [];
-
-  const backendPromise = getBackend();
-
-  let loadedPlugins: FG_Plugin.LoadedPlugins = {
-    routes,
+export async function loadPlugins(backend: FG.Backend, baseRoutes: RouteRecordRaw[]) {
+  const loadedPlugins: FG_Plugin.Flaschengeist = {
+    routes: baseRoutes,
     plugins: [],
-    mainLinks: [],
+    menuLinks: [],
     shortcuts: [],
-    shortcutsOut: [],
-    widgets: []
+    outerShortcuts: [],
+    widgets: [],
   };
 
-  // get all plugins
-  const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
-  pluginsContext.keys().forEach((fileName: string) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    plugins.push(pluginsContext(fileName).default);
+  // Wait for all plugins to be loaded
+  const results = await Promise.allSettled(PLUGINS);
+
+  // Check if loaded successfully
+  results.forEach((result) => {
+    if (result.status === 'rejected') {
+      throw <string>result.reason;
+    } else {
+      if (
+        !(
+          validatePlugin(result.value.default) &&
+          loadPlugin(loadedPlugins, result.value.default, backend)
+        )
+      )
+        throw result.value.default.id;
+    }
   });
 
-  // check dependencies
-  backendPromise.then((backend) => {
-    console.log(backend)
-    if (backend) {
-      plugins.forEach((plugin: FG_Plugin.Plugin) => {
-        plugin.requiredModules.forEach((requiredModule: string) => {
-          if (!(config.requiredModules.includes(requiredModule) || config.loadModules.includes(requiredModule))) {
-            console.error(`Plugin ${plugin.name} need Plugin ${requiredModule}`)
-            router.push({name: 'error'}).catch((e) => {
-              console.warn(e)
-            })
-          }
-        })
-        plugin.requiredBackendModules.forEach((requiredBackendModule: string) => {
-          if (!(requiredBackendModule in backend.plugins)) {
-            console.error(`Plugin ${plugin.name} need Plugin ${requiredBackendModule} in backend.`)
-            router.push({name: 'error'}).catch(err => {
-              console.warn(err)
-            })
-          }
-        })
-      })
-    }
-  })
-    .catch(e => {
-      console.error(e)
-    })
-
-
-  // load plugins
-  loadedPlugins = loadPlugin(
-    loadedPlugins,
-    config.requiredModules,
-    backendPromise,
-    plugins,
-    store,
-    router
+  // Sort widgets by priority
+  /** @todo Remove priority with first beta */
+  loadedPlugins.widgets.sort(
+    (a, b) => <number>(b.order || b.priority) - <number>(a.order || a.priority)
   );
-  loadedPlugins = loadPlugin(loadedPlugins, config.loadModules, backendPromise, plugins, store, router);
 
-  loadedPlugins.widgets.sort((a, b) => b.priority - a.priority);
-
-  // add new routes for plugins
-  router.addRoutes(loadedPlugins.routes);
-
-  // save plugins in VM-variable
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  Vue.prototype.$flaschengeistPlugins = loadedPlugins;
+  /** @todo Can be cleaned up with first beta */
+  loadedPlugins.menuLinks.sort((a, b) => {
+    const diff = a.order && b.order ? b.order - a.order : 0;
+    return diff ? diff : a.title.toString().localeCompare(b.title.toString());
   });
+
+  return loadedPlugins;
+}

src/boot/store.ts

@@ -0,0 +1,9 @@
+/**
+ * This boot file installs the global pinia instance
+ */
+import { pinia } from '@flaschengeist/api';
+import { boot } from 'quasar/wrappers';
+
+export default boot(({ app }) => {
+  app.use(pinia);
+});

src/components/Notification.vue

@@ -0,0 +1,101 @@
+<template>
+  <q-card
+    bordered
+    style="position: relative; min-height: 3em"
+    :class="{ 'cursor-pointer': modelValue.link }"
+    @click="click"
+  >
+    <q-btn
+      round
+      dense
+      icon="mdi-trash-can"
+      size="sm"
+      color="negative"
+      class="q-ma-xs"
+      title="Löschen"
+      style="position: absolute; top: 0; right: 0; z-index: 999"
+      @click.stop.prevent="dismiss"
+    />
+    <q-card-section class="q-pa-xs">
+      <div class="text-overline">{{ dateString }}</div>
+      <q-item style="padding: 1px">
+        <q-item-section v-if="modelValue.icon" side
+          ><q-icon color="primary" :name="modelValue.icon"
+        /></q-item-section>
+        <q-item-section>{{ modelValue.text }}</q-item-section>
+      </q-item>
+    </q-card-section>
+    <q-card-actions v-if="modelValue.reject || modelValue.accept">
+      <q-btn
+        v-if="modelValue.accept"
+        icon="mdi-check"
+        color="positive"
+        label="Annehmen"
+        flat
+        dense
+        size="sm"
+        @click.stop.prevent="accept"
+      />
+      <q-btn
+        v-if="modelValue.reject"
+        icon="mdi-close"
+        color="negative"
+        label="Ablehnen"
+        flat
+        dense
+        size="sm"
+        @click.stop.prevent="reject"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue';
+import { formatDateTime } from '@flaschengeist/api';
+import { FG_Plugin } from '@flaschengeist/types';
+import { useRouter } from 'vue-router';
+
+export default defineComponent({
+  name: 'Notification',
+  props: {
+    modelValue: {
+      required: true,
+      type: Object as PropType<FG_Plugin.Notification>,
+    },
+  },
+  emits: {
+    remove: (id: number) => !!id,
+  },
+  setup(props, { emit }) {
+    const router = useRouter();
+    const dateString = computed(() => formatDateTime(props.modelValue.time, true, true));
+
+    async function click() {
+      if (props.modelValue.link) await router.push(props.modelValue.link);
+    }
+
+    function accept() {
+      if (typeof props.modelValue.accept === 'function')
+        void props.modelValue.accept().finally(() => emit('remove', props.modelValue.id));
+      else emit('remove', props.modelValue.id);
+    }
+
+    function reject() {
+      if (typeof props.modelValue.reject === 'function')
+        void props.modelValue.reject().finally(() => emit('remove', props.modelValue.id));
+      else emit('remove', props.modelValue.id);
+    }
+
+    function dismiss() {
+      if (typeof props.modelValue.dismiss === 'function')
+        void props.modelValue.dismiss().finally(() => emit('remove', props.modelValue.id));
+      else emit('remove', props.modelValue.id);
+    }
+
+    return { accept, click, dateString, dismiss, reject };
+  },
+});
+</script>
+
+<style scoped></style>

src/components/about/Developer.vue

@@ -22,31 +22,35 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Developer',
   props: {
     pic: {
-      default: 'logo-dark.svg'
+      default: 'logo-dark.svg',
+      type: String,
     },
     firstname: {
-      //required: true,
-      default: 'firstname'
+      required: true,
+      type: String,
     },
     lastname: {
-      //required: true,
-      default: 'lastname'
+      required: true,
+      type: String,
     },
     job: {
-      default: 'student'
+      default: 'student',
+      type: String,
     },
     club: {
-      default: 'Studentenclub Wu5 e.V.'
+      default: 'Studentenclub Wu5 e.V.',
+      type: String,
     },
     description: {
       default:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '
-    }
-  }
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
+      type: String,
+    },
+  },
 });
 </script>

src/components/loading/CircularProgress.vue

@@ -10,14 +10,14 @@
     track-color="grey-3"
   >
     <q-avatar size="60px">
-      <img src="logo-dark.svg" />
+      <img src="flaschengeist-logo.svg" />
     </q-avatar>
   </q-circular-progress>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 export default defineComponent({
-  name: 'CircularProgress'
+  name: 'CircularProgress',
 });
 </script>

src/components/loading/DarkCircularProgress.vue

@@ -10,14 +10,14 @@
     track-color="grey-3"
   >
     <q-avatar size="60px">
-      <img src="logo.svg" />
+      <img src="flaschengeist-logo.svg" />
     </q-avatar>
   </q-circular-progress>
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent } from 'vue';
 export default defineComponent({
-  name: 'DarkCircularProgress'
+  name: 'DarkCircularProgress',
 });
 </script>

src/components/navigation/EmptyParent.vue

@@ -0,0 +1,14 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'EmptyParent',
+  setup() {
+    return {};
+  },
+});
+</script>

src/components/navigation/EssentialExpansionLink.vue

@@ -0,0 +1,61 @@
+<template>
+  <q-expansion-item
+    v-if="isGranted(entry)"
+    clickable
+    :label="getTitle(entry)"
+    :icon="entry.icon"
+    expand-separator
+  >
+    <q-list class="q-ml-lg">
+      <div v-for="child in entry.children" :key="child.link">
+        <q-item v-if="isGranted(child)" clickable :to="{ name: child.link }">
+          <q-menu context-menu>
+            <q-btn v-close-popup label="Verknüpfung erstellen" dense @click="addShortCut(child)" />
+          </q-menu>
+          <q-item-section avatar>
+            <q-icon :name="child.icon" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>
+              {{ getTitle(child) }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </div>
+    </q-list>
+  </q-expansion-item>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { hasPermissions } from '@flaschengeist/api';
+import { FG_Plugin } from '@flaschengeist/types';
+
+export default defineComponent({
+  name: 'EssentialExpansionLink',
+  components: {},
+  props: {
+    entry: {
+      type: Object as PropType<FG_Plugin.MenuLink>,
+      required: true,
+    },
+  },
+  emits: {
+    addShortCut: (val: FG_Plugin.MenuLink) => val.link,
+  },
+  setup(_, { emit }) {
+    function isGranted(val: FG_Plugin.MenuLink) {
+      return hasPermissions(val.permissions || []);
+    }
+    function getTitle(entry: FG_Plugin.MenuLink) {
+      return typeof entry.title === 'function' ? entry.title() : entry.title;
+    }
+
+    function addShortCut(val: FG_Plugin.MenuLink) {
+      emit('addShortCut', val);
+    }
+
+    return { isGranted, getTitle, addShortCut };
+  },
+});
+</script>

src/components/navigation/EssentialLink.vue

@@ -1,68 +1,35 @@
 <template>
-  <q-item clickable tag="a" target="self" :to="{ name: link }" v-if="isGranted">
-    <q-item-section v-if="icon" avatar>
-      <q-icon :name="icon" />
+  <q-item v-if="isGranted" clickable tag="a" target="self" :to="{ name: entry.link }">
+    <q-item-section v-if="entry.icon" avatar>
+      <q-icon :name="entry.icon" />
     </q-item-section>
 
     <q-item-section>
-      <q-item-label>{{ realTitle }}</q-item-label>
-      <!--<q-item-label caption>
-        {{ caption }}
-      </q-item-label>-->
+      <q-item-label>{{ title }}</q-item-label>
     </q-item-section>
   </q-item>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
-import { hasPermissions } from 'src/components/permission';
+import { computed, defineComponent, PropType } from 'vue';
+import { hasPermissions } from '@flaschengeist/api';
+import { FG_Plugin } from '@flaschengeist/types';
 
 export default defineComponent({
   name: 'EssentialLink',
   props: {
-    title: {
-      type: String,
-      required: true
+    entry: {
+      type: Object as PropType<FG_Plugin.MenuLink>,
+      required: true,
+    },
   },
 
-    caption: {
-      type: String,
-      default: ''
-    },
-
-    link: {
-      type: String,
-      default: 'home'
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    },
-    permissions: {
-      default: undefined
-    }
-  },
-
-  setup(props, { root }) {
-    let title = computed<string>(() => {
-      if (props.title.includes('loadFromStore')) {
-        const startIndex = props.title.indexOf('(') + 1;
-        const endIndex = props.title.indexOf(')');
-        const substring = props.title
-          .substring(startIndex, endIndex)
-          .replace(/"/g, '');
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        return <string>root.$store.getters[substring];
-      }
-      return props.title;
-    });
-
-    const isGranted = computed(() =>
-      hasPermissions(props.permissions || [], root.$store)
+  setup(props) {
+    const isGranted = computed(() => hasPermissions(props.entry.permissions || []));
+    const title = computed(() =>
+      typeof props.entry.title === 'function' ? props.entry.title() : props.entry.title
     );
-
-    return { realTitle: title, isGranted };
-  }
+    return { isGranted, title };
+  },
 });
 </script>

src/components/navigation/ShortCutLink.vue

@@ -1,31 +0,0 @@
-<template>
-  <q-btn flat dense :icon="icon" :to="{ name: link }" v-if="isGranted" />
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
-import { hasPermissions } from 'src/components/permission';
-
-export default defineComponent({
-  name: 'ShortCutLink',
-  props: {
-    link: {
-      required: true,
-      type: String
-    },
-    icon: {
-      required: true,
-      type: String
-    },
-    permissions: {
-      default: undefined
-    }
-  },
-  setup(props, { root }) {
-    const isGranted = computed(() =>
-      hasPermissions(props.permissions || [], root.$store)
-    );
-    return { isGranted };
-  }
-});
-</script>

src/components/navigation/ShortcutLink.vue

@@ -0,0 +1,37 @@
+<template>
+  <q-btn v-if="isGranted" flat dense :icon="shortcut.icon" :to="{ name: shortcut.link }" round>
+    <q-menu v-if="context" context-menu>
+      <q-btn v-close-popup label="Verknüpfung entfernen" @click="deleteShortcut" />
+    </q-menu>
+  </q-btn>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import { hasPermissions } from '@flaschengeist/api';
+import { FG_Plugin } from '@flaschengeist/types';
+
+export default defineComponent({
+  name: 'ShortcutLink',
+  props: {
+    shortcut: {
+      required: true,
+      type: Object as PropType<FG_Plugin.Shortcut | FG_Plugin.MenuLink>,
+    },
+    context: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    deleteShortcut: (val: FG_Plugin.MenuLink | FG_Plugin.Shortcut) => val.link,
+  },
+  setup(props, { emit }) {
+    const isGranted = computed(() => hasPermissions(props.shortcut.permissions || []));
+    function deleteShortcut() {
+      emit('deleteShortcut', props.shortcut);
+    }
+    return { isGranted, deleteShortcut };
+  },
+});
+</script>

src/components/permission.ts

@@ -1,14 +0,0 @@
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
-
-export function hasPermission(
-  permission: string,
-  store: Store<StateInterface>
-) {
-  return store.state.user.currentPermissions.includes(permission);
-}
-
-export function hasPermissions(needed: string[], store: Store<StateInterface>) {
-  const permissions = store.state.user.currentPermissions;
-  return needed.every(value => permissions.includes(value));
-}

src/components/utils/IsoDateInput.vue

@@ -1,85 +0,0 @@
-<template>
-  <q-input
-    class="col-xs-12 col-sm-6 q-pa-sm"
-    filled
-    :readonly="readonly"
-    :label="label"
-    :value="getDate()"
-    placeholder="YYYY-MM-DD"
-    v-on:input="dateChanged"
-    :rules="[isDate]"
-  >
-    <template v-slot:append>
-      <q-icon
-        name="event"
-        class="cursor-pointer"
-      >
-        <q-popup-proxy
-          ref="qDateProxy"
-          transition-show="scale"
-          transition-hide="scale"
-        >
-          <q-date
-            :value="getDate()"
-            mask="YYYY-MM-DD"
-            v-on:input="dateChanged"
-          >
-            <div class="row items-center justify-end">
-              <q-btn
-                v-close-popup
-                label="Schließen"
-                color="primary"
-                flat
-              />
-            </div>
-          </q-date>
-        </q-popup-proxy>
-      </q-icon>
-    </template>
-  </q-input>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import { date } from 'quasar';
-interface Props {
-  value?: Date;
-  label?: string;
-  readonly: boolean;
-}
-
-export default defineComponent({
-  name: 'IsoDateInput',
-  props: {
-    value: {
-      required: true,
-    },
-    label: {},
-    readonly: {
-      default: false,
-    },
-  },
-  setup(props: Props, { emit }) {
-    function getDate() {
-      if (props.value) {
-        return date.formatDate(props.value, 'YYYY-MM-DD');
-      }
-      return '';
-    }
-
-    function dateChanged(dateString: string) {
-      emit('input', new Date(dateString));
-    }
-
-    function isDate(val: string) {
-      return !val || /^\d{4}-\d\d-\d\d$/.test(val) || 'Datum ist nicht gültig.';
-    }
-
-    return {
-      getDate,
-      dateChanged,
-      isDate,
-    };
-  },
-});
-</script>

src/config.ts

@@ -1,5 +1,12 @@
+import { computed } from 'vue';
+import { LocalStorage } from 'quasar';
+
 const config = {
-  baseURL: '/api'
+  baseURL: '/api',
+  pollingInterval: 30000,
 };
 
+const baseURL = computed(() => LocalStorage.getItem<string>('baseURL') || config.baseURL);
+
+export { baseURL };
 export default config;

src/css/quasar.variables.scss

@@ -12,13 +12,13 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   : #1976D2;
-$secondary : #26A69A;
-$accent    : #9C27B0;
+$primary: #1976d2;
+$secondary: #26a69a;
+$accent: #9c27b0;
 
-$dark      : #1D1D1D;
+$dark: #1d1d1d;
 
-$positive  : #21BA45;
-$negative  : #C10015;
-$info      : #31CCEC;
-$warning   : #F2C037;
+$positive: #21ba45;
+$negative: #c10015;
+$info: #31ccec;
+$warning: #f2c037;

src/flaschengeist.d.ts

@@ -1,62 +0,0 @@
-declare namespace FG {
-  interface Session {
-    expires: Date;
-    token: string;
-    lifetime: number;
-    browser: string;
-    platform: string;
-    userid: string;
-  }
-  interface User {
-    userid: string;
-    display_name: string;
-    firstname: string;
-    lastname: string;
-    mail: string;
-    avatar_url?: string;
-    birthday?: Date;
-    roles: Array<string>;
-  }
-  type Permission = string;
-  interface Role {
-    id: number;
-    name: string;
-    permissions: Array<Permission>;
-  }
-  interface Transaction {
-    id: number;
-    time: Date;
-    amount: number;
-    reversal?: this;
-    sender_id?: string;
-    receiver_id?: string;
-    author_id?: string;
-  }
-  interface Event {
-    id: number;
-    start: Date;
-    description?: string;
-    type: EventType;
-    slots: Array<EventSlot>;
-  }
-  interface EventSlot {
-    id: number;
-    start: Date;
-    end?: Date;
-    jobs: Array<JobSlot>;
-  }
-  type EventType = string;
-  interface Job {
-    userid: string;
-    value: number;
-  }
-  interface JobSlot {
-    type: JobType;
-    users: Array<Job>;
-    required_jobs: number;
-  }
-  interface JobType {
-    id: number;
-    name: string;
-  }
-}

src/index.template.html

@@ -12,19 +12,10 @@
       content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
     />
 
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="128x128"
-      href="icons/favicon-128x128.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="icons/favicon-32x32.png"
-    />
-    <link rel="icon" type="image/ico" href="favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="flaschengeist-logo.svg" />
+    <link rel="alternate icon" type="image/ico" href="favicon.ico" />
+    <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="favicon-128x128.png" />
+    <link rel="apple-touch-icon" type="image/png" sizes="256x256" href="favicon-256x256.png" />
   </head>
 
   <body>

src/layouts/MainLayout.vue

@@ -1,45 +1,47 @@
 <template>
-  <q-layout view="hHh lpr lFf">
-    <q-header
-      elevated
-      class="bg-primary text-white"
-    >
+  <q-layout view="hHh Lpr lff">
+    <q-header elevated class="bg-primary text-white">
       <q-toolbar>
-        <!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
-        <q-btn
-          dense
-          flat
-          round
-          icon="menu"
-          @click="leftDrawerOpen = !leftDrawerOpen"
-          v-if="!leftDrawerOpen"
-        />
+        <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;"
-          >
-            <q-avatar>
-              <img src="logo.svg" />
+          <router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
+            <q-avatar rounded>
+              <img src="flaschengeist-logo-white.svg" />
             </q-avatar>
-            <span class="gt-xs">
-              Flaschengeist
-            </span>
+            <span class="gt-xs"> Flaschengeist </span>
           </router-link>
         </q-toolbar-title>
 
         <!-- Hier kommen die Shortlinks hin -->
-        <div>
-          <short-cut-link
-            v-for="(shortcut, index) in $flaschengeistPlugins.shortcuts"
-            :key="'shortcut' + index"
-            :link="shortcut.link"
-            :icon="shortcut.icon"
-            :permissions="shortcut.permissions"
-          />
-        </div>
+        <q-btn icon="mdi-message-bulleted" flat dense round>
+          <q-badge color="negative" floating>
+            {{ notifications.length }}
+          </q-badge>
+          <q-menu max-height="400px" style="min-width: 290px" class="q-pa-xs">
             <q-btn
+              v-if="useNative && noPermission"
+              label="Benachrichtigungen erlauben"
+              @click="requestPermission"
+            />
+            <template v-if="notifications.length > 0">
+              <Notification
+                v-for="(notification, index) in notifications"
+                :key="index"
+                :model-value="notification"
+                @remove="remove"
+              />
+            </template>
+            <div v-else class="q-pa-sm">Keine neuen Benachrichtigungen</div>
+          </q-menu>
+        </q-btn>
+        <drag v-model="shortCuts" item-key="link" ghost-class="ghost">
+          <template #item="{ element }">
+            <shortcut-link :shortcut="element" context @delete-shortcut="deleteShortcut" />
+          </template>
+        </drag>
+        <q-btn
+          v-if="!platform.is.capacitor"
           flat
           round
           dense
@@ -50,64 +52,49 @@
     </q-header>
 
     <q-drawer
-      show-if-above
-      v-model="leftDrawerOpen"
+      v-model="leftDrawer"
       side="left"
       bordered
       :mini="leftDrawerMini"
-      @click.capture="leftDrawerClicker"
+      @click.capture="openMenuMini"
     >
       <!-- Plugins -->
-      <q-list>
-        <essential-link
-          v-for="(link, index) in $flaschengeistPlugins.mainLinks"
+      <q-scroll-area class="fit">
+        <essential-expansion-link
+          v-for="(entry, index) in mainLinks"
           :key="'plugin' + index"
-          :title="link.title"
-          :link="link.link"
-          :icon="link.icon"
-          :permissions="link.permissions"
+          :entry="entry"
+          @add-short-cut="addShortcut"
         />
-      </q-list>
         <q-separator />
-
-      <!-- Plugin functions -->
-      <!-- <router-view name="plugin-nav" /> -->
-      <q-list>
         <essential-link
-          v-for="(link, index) in pluginChildLinks"
-          :key="'childPlugin' + index"
-          :title="link.title"
-          :link="link.link"
-          :icon="link.icon"
-          :permissions="link.permissions"
+          v-for="(entry, index) in essentials"
+          :key="'essential' + index"
+          :entry="entry"
         />
-      </q-list>
+        <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>
 
-      <div
-        class="q-mini-drawer-hide absolute"
-        style="top: 15px; right: -11px"
-      >
+            <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
-          size="sm"
           dense
           round
           unelevated
-          color="secondary"
-          icon="chevron_left"
-          @click="leftDrawerMini = true"
+          color="accent"
+          icon="mdi-chevron-left"
+          @click="openMenuMini(true)"
         />
       </div>
-
-      <q-separator />
-
-      <essential-link
-        v-for="(link, index) in links"
-        :key="'main' + index"
-        :title="link.title"
-        :link="link.link"
-        :icon="link.icon"
-        :permissions="link.permissions"
-      />
     </q-drawer>
     <q-page-container>
       <router-view />
@@ -116,100 +103,151 @@
 </template>
 
 <script lang="ts">
-import EssentialLink from 'components/navigation/EssentialLink.vue';
-import ShortCutLink from 'components/navigation/ShortCutLink.vue';
-import { Screen, Loading } from 'quasar';
-import { defineComponent, ref, computed } from '@vue/composition-api';
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
-import { FG_Plugin } from 'src/plugins';
+import EssentialExpansionLink from 'components/navigation/EssentialExpansionLink.vue';
+import EssentialLink from 'src/components/navigation/EssentialLink.vue';
+import ShortcutLink from 'src/components/navigation/ShortcutLink.vue';
+import Notification from 'src/components/Notification.vue';
+import { defineComponent, ref, inject, computed, onBeforeMount, onBeforeUnmount } from 'vue';
+import { Screen, Platform } from 'quasar';
+import config from 'src/config';
+import { useRouter } from 'vue-router';
+import { useMainStore } from '@flaschengeist/api';
+import { FG_Plugin } from '@flaschengeist/types';
+import drag from 'vuedraggable';
 
-const links = [
+const essentials: FG_Plugin.MenuLink[] = [
   {
-    name: 'about',
     title: 'Über Flaschengeist',
     link: 'about',
     icon: 'mdi-information',
   },
 ];
 
-const shortcuts = [
-  {
-    link: 'about',
-    icon: 'mdi-information',
-  },
-  {
-    link: 'user',
-    icon: 'mdi-account',
-  },
-  {
-    link: 'user-plugin1',
-    icon: 'mdi-account-plus',
-  },
-];
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $flaschengeistPlugins: FG_Plugin.LoadedPlugins;
-  }
-}
-
 export default defineComponent({
   name: 'MainLayout',
-  components: { EssentialLink, ShortCutLink },
-  setup(_, ctx) {
-    const leftDrawer = ref(false);
+  components: {
+    EssentialExpansionLink,
+    EssentialLink,
+    ShortcutLink,
+    Notification,
+    drag,
+  },
+  setup() {
+    const router = useRouter();
+    const mainStore = useMainStore();
+    const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
+    const leftDrawer = ref(!Platform.is.mobile);
+    const leftDrawerMini = ref(true);
+    const mainLinks = flaschengeist?.menuLinks || [];
+    const notifications = computed(() => mainStore.notifications.slice().reverse());
+    const polling = ref(NaN);
+    const useNative = 'Notification' in window && window.Notification !== undefined;
+    const noPermission = ref(!useNative || window.Notification.permission !== 'granted');
 
-    const leftDrawerOpen = ref(
-      computed({
-        get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
-        set: (val: boolean) => (leftDrawer.value = val),
+    onBeforeMount(() => {
+      polling.value = window.setInterval(() => pollNotification(), config.pollingInterval);
+      pollNotification();
+      void mainStore.getShortcuts();
+    });
+    onBeforeUnmount(() => window.clearInterval(polling.value));
+    /*
+    function openMenu(event: { target: HTMLInputElement }) {
+      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;
+          leftDrawerMini.value = false;
+        } else {
+          leftDrawerMini.value = Screen.gt.sm && !leftDrawerMini.value;
+          leftDrawer.value = leftDrawerMini.value;
+        }
+      }
+    }
+*/
+    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();
+    }
+
+    async function remove(id: number) {
+      await mainStore.removeNotification(id);
+    }
+
+    function requestPermission() {
+      void window.Notification.requestPermission().then(
+        (p) => (noPermission.value = p !== 'granted')
+      );
+    }
+
+    function pollNotification() {
+      void mainStore
+        .loadNotifications(<FG_Plugin.Flaschengeist>flaschengeist)
+        .then((notifications) => {
+          if (useNative && !noPermission.value)
+            notifications.forEach(
+              (notif) =>
+                new window.Notification(notif.text, {
+                  timestamp: notif.time.getTime(),
                 })
             );
-    const leftDrawerMini = ref(false);
-
-    function leftDrawerClicker() {
-      if (leftDrawerMini.value) {
-        leftDrawerMini.value = false;
-      }
+        });
     }
 
-    const pluginChildLinks = computed(() => {
-      const link:
-        | FG_Plugin.PluginMainLink
-        | undefined = ctx.root.$flaschengeistPlugins.mainLinks.find(
-        (plugin: FG_Plugin.PluginMainLink) => {
-          if (ctx.root.$route.matched.length > 1) {
-            return plugin.name == ctx.root.$route.matched[1].name;
-          }
-        }
-      );
-
-      if (link == undefined) {
-        return [];
-      } else {
-        return link.children;
-      }
+    const shortCuts = computed({
+      get: () => mainStore.shortcuts,
+      set: (val: Array<FG_Plugin.MenuLink>) => {
+        mainStore.shortcuts = val;
+        void mainStore.setShortcuts();
+      },
     });
 
-    function logout() {
-      Loading.show({ message: 'Session wird abgemeldet' });
-      (<Store<StateInterface>>ctx.root.$store)
-        .dispatch('session/logout')
-        .finally(() => {
-          Loading.hide();
-        });
+    function addShortcut(val: FG_Plugin.MenuLink) {
+      const idx = shortCuts.value.findIndex((a: FG_Plugin.MenuLink) => a.link === val.link);
+      if (idx < 0) {
+        shortCuts.value.push(val);
+        void mainStore.setShortcuts();
+      }
+    }
+
+    function deleteShortcut(val: FG_Plugin.MenuLink) {
+      const idx = shortCuts.value.findIndex((a: FG_Plugin.MenuLink) => a.link === val.link);
+      if (idx > -1) {
+        shortCuts.value.splice(idx, 1);
+        void mainStore.setShortcuts();
+      }
     }
 
     return {
-      leftDrawerOpen,
+      essentials,
+      leftDrawer,
       leftDrawerMini,
-      leftDrawerClicker,
-      links,
-      pluginChildLinks,
-      shortcuts,
       logout,
+      mainLinks,
+      notifications,
+      noPermission,
+      openMenu,
+      openMenuMini,
+      remove,
+      requestPermission,
+      useNative,
+      shortCuts,
+      addShortcut,
+      deleteShortcut,
+      platform: Platform,
     };
   },
 });
 </script>
+<style scoped lang="sass">
+.ghost
+  opacity: 0.5
+  background: $accent
+</style>

src/layouts/OutLayout.vue

@@ -3,37 +3,18 @@
     <q-header elevated>
       <q-toolbar>
         <q-toolbar-title>
-          <q-avatar>
-            <img src="logo.svg" />
+          <q-avatar rounded>
+            <img src="flaschengeist-logo-white.svg" />
           </q-avatar>
-          <span class="gt-xs">
-            Flaschengeist
-          </span>
+          <span class="gt-xs"> Flaschengeist </span>
         </q-toolbar-title>
-        <div>
-          <short-cut-link
-            v-for="(shortcut, index) in $flaschengeistPlugins.shortcutsOut"
+        <shortcut-link
+          v-for="(shortcut, index) in shortcuts"
           :key="'shortcut' + index"
-            :link="shortcut.link"
-            :icon="shortcut.icon"
-          />
-        </div>
-        <q-btn
-          flat
-          round
-          dense
-          icon="mdi-information"
-          v-if="$route.name != 'about_out'"
-          @click="$router.push({ name: 'about_out' })"
-        />
-        <q-btn
-          flat
-          round
-          dense
-          icon="mdi-login-variant"
-          v-if="$route.name != 'login'"
-          @click="$router.push({ name: 'login' })"
+          :shortcut="shortcut"
         />
+        <shortcut-link v-if="$route.name != 'about_out'" :shortcut="about" />
+        <shortcut-link v-if="$route.name != 'login'" :shortcut="login" />
       </q-toolbar>
     </q-header>
 
@@ -44,11 +25,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-import ShortCutLink from 'components/navigation/ShortCutLink.vue';
+import { defineComponent, inject } from 'vue';
+import { FG_Plugin } from '@flaschengeist/types';
+import ShortcutLink from 'components/navigation/ShortcutLink.vue';
 
 export default defineComponent({
   name: 'OutLayout',
-  components: { ShortCutLink },
+  components: { ShortcutLink },
+  setup() {
+    const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
+    const shortcuts = flaschengeist?.outerShortcuts || [];
+    const about: FG_Plugin.Shortcut = { icon: 'mdi-information', link: 'about_out' };
+    const login: FG_Plugin.Shortcut = { icon: 'mdi-login-variant', link: 'login' };
+
+    return { about, login, shortcuts };
+  },
 });
 </script>

src/pages/Dashboard.vue

@@ -1,35 +1,27 @@
 <template>
   <q-page
     padding
-    style="grid-auto-rows: 1fr;"
-    class="fit row justify-around items-start q-col-gutter-sm"
+    style="grid-auto-rows: 1fr"
+    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"
-    >
-      <component v-bind:is="item" />
+    <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>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from '@vue/composition-api';
-import { hasPermissions } from 'src/components/permission';
-import { AsyncComponentPromise } from 'vue/types/options';
+import { computed, defineComponent, inject } from 'vue';
+import { hasPermissions } from '@flaschengeist/api';
+import { FG_Plugin } from '@flaschengeist/types';
 
 export default defineComponent({
-  name: 'Dashboard',
-  setup(_, { root }) {
-    const widgets = ref<Array<AsyncComponentPromise>>([]);
-
-    onMounted(() => {
-      root.$flaschengeistPlugins.widgets.forEach((widget) => {
-        if (hasPermissions(widget.permissions, root.$store))
-          widgets.value.push(widget.widget);
-      });
-    });
+  name: 'PageDashboard',
+  setup() {
+    const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
+    const widgets = computed(() =>
+      flaschengeist?.widgets.filter((widget) => hasPermissions(widget.permissions))
+    );
 
     return {
       widgets,

src/pages/Login.vue

@@ -1,75 +1,200 @@
 <template>
   <q-page padding class="fit row justify-center items-center content-center">
-    <q-card
-      class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center"
-    >
+    <q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
       <q-toolbar class="bg-primary text-white">
-        <q-toolbar-title>
-          Login
-        </q-toolbar-title>
+        <q-toolbar-title>{{ backendSetup ? 'Servereinrichtung' : 'Login' }}</q-toolbar-title>
       </q-toolbar>
-
+      <div v-if="!backendSetup">
         <q-card-section>
-        <q-form ref="LoginForm" @submit="doLogin" class="q-gutter-md">
+          <q-form @submit="doLogin">
             <q-input
-            filled
               v-model="userid"
-            label="Benutzername oder E-Mail"
-            :rules="rules"
-          />
-          <q-input
+              class="q-pa-md"
               filled
-            v-model="password"
-            type="password"
-            label="Password"
-            :rules="rules"
+              label="Benutzername oder E-Mail"
+              autocomplete="username"
+              :rules="[notEmpty]"
+              tabindex="1"
             />
-          <div class="row justify-end">
-            <q-btn label="Login" type="submit" color="primary" />
+            <password-input
+              v-model="password"
+              class="q-px-md q-pt-md q-pb-none"
+              filled
+              label="Passwort"
+              autocomplete="cureent-password"
+              :rules="[notEmpty]"
+              tabindex="2"
+            />
+            <div class="full-width row justify-end q-px-md">
+              <q-btn
+                label="Passwort vergessen?"
+                type="a"
+                color="secondary"
+                tabindex="4"
+                flat
+                dense
+                size="sm"
+                @click="doReset"
+              />
+            </div>
+            <div class="full-width row justify-end q-px-md q-pt-md">
+              <q-btn label="Login" type="submit" color="primary" tabindex="3" />
             </div>
           </q-form>
         </q-card-section>
+        <div class="row justify-end">
+          <q-btn
+            v-if="$q.platform.is.capacitor || $q.platform.is.electron"
+            flat
+            round
+            :icon="showBackendSetup ? 'mdi-menu-up' : 'mdi-menu-down'"
+            @click="showBackendSetup = !showBackendSetup"
+          />
+        </div>
+      </div>
+      <q-slide-transition v-if="$q.platform.is.capacitor">
+        <div v-show="showBackendSetup || backendSetup">
+          <q-separator />
+          <q-card-section>
+            <q-form ref="ServerSettingsForm" class="q-gutter-md" @submit="changeBackend">
+              <div class="text-h6">Backend einrichten</div>
+              <q-input v-model="server" filled label="Server" dense />
+              <q-btn dense color="primary" label="Speichern" type="submit" />
+            </q-form>
+          </q-card-section>
+        </div>
+      </q-slide-transition>
     </q-card>
   </q-page>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
-import { Loading } from 'quasar';
+import { useRouter } from 'vue-router';
+import { Loading, Notify, useQuasar } from 'quasar';
+import { api, notEmpty, PersistentStorage, useMainStore } from '@flaschengeist/api';
+import { PasswordInput } from '@flaschengeist/api/components';
+import { defineComponent, onMounted, ref } from 'vue';
+import { useSessionStore } from 'app/api';
 
 export default defineComponent({
-  // name: 'PageName'
-  setup(_, { root }) {
+  name: 'PageLogin',
+  components: { PasswordInput },
+  props: {
+    backendSetup: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
     const mainRoute = { name: 'dashboard' };
 
+    const mainStore = useMainStore();
+    const sessionStore = useSessionStore();
+    const router = useRouter();
+    const quasar = useQuasar();
+
+    onMounted(() => {
+      if (mainStore.session) void router.replace(mainRoute);
+    });
+
     /* 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(api.defaults.baseURL);
+    const showBackendSetup = ref(!!props.backendSetup);
 
-    function doLogin() {
-      Loading.show({
-        message: 'Du wirst angemeldet'
+    function changeBackend() {
+      if (server.value) {
+        void PersistentStorage.set('baseURL', server.value).then(() => {
+          showBackendSetup.value = false;
+          void router.go(0);
         });
-      root.$store
-        .dispatch('session/login', {
-          userid: userid.value,
-          password: password.value
-        })
-        .then(() => {
-          const x = root.$route.query['redirect'];
-          void root.$router.push(
-            typeof x === 'string' ? { path: x } : mainRoute
-          );
-        })
-        .finally(() => {
+      }
+    }
+
+    async function doLogin() {
+      Loading.show({ message: 'Du wirst angemeldet' });
+      const status = await mainStore.login(userid.value, password.value);
+
+      if (status === true) {
+        // On capacitor we set the lifetime to at least two weeks to not annoy users.
+        if (quasar.platform.is.capacitor)
+          await sessionStore.updateSession(14 * 24 * 60 * 60, mainStore.currentSession.token);
+        // Redirect user to previous page, if any.
+        // 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 = '';
+        if (status === 401) {
+          Notify.create({
+            group: false,
+            type: 'negative',
+            message: 'Benutzername oder Passwort sind falsch.',
+            timeout: 10000,
+            progress: true,
+            actions: [{ icon: 'mdi-close', color: 'white' }],
+          });
+        }
+      }
       Loading.hide();
-        });
     }
 
-    return { userid, password, doLogin, rules };
+    async function doReset() {
+      if (userid.value == '') {
+        Notify.create({
+          group: false,
+          type: 'negative',
+          message: 'Der Benutzername darf nicht leer sein.',
+          timeout: 10000,
+          progress: true,
+          actions: [{ icon: 'mdi-close', color: 'white' }],
+        });
+        return;
       }
+
+      if (await mainStore.requestReset(userid.value)) {
+        userid.value = '';
+        password.value = '';
+        Notify.create({
+          group: false,
+          type: 'ongoing',
+          message:
+            'Sollte der Benutzername korrekt und vorhanden sein, erhälst du jetzt eine E-Mail.',
+          timeout: 10000,
+          progress: true,
+          actions: [{ icon: 'mdi-close', color: 'white' }],
+        });
+      }
+    }
+
+    return {
+      changeBackend,
+      doLogin,
+      doReset,
+      notEmpty,
+      password,
+      userid,
+      server,
+      showBackendSetup,
+    };
+  },
 });
 </script>

src/pages/Offline.vue

@@ -3,7 +3,7 @@
     <div>
       <div>
         <svg
-          style="max-width: 400px;"
+          style="max-width: 400px"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 292.761 292.761"
@@ -12,44 +12,44 @@
           fill="white"
         >
           <g>
-            <circle
-              cx="87.493"
-              cy="25.907"
-              r="25.907"
+            <circle cx="87.493" cy="25.907" r="25.907" />
+            <path
+              d="m194.386,209.531l-42.802-36.895c-1.825-1.573-4.001-2.683-6.345-3.237l-72.533-17.136 47.755,.703v-34.439l-46.525-26.18 50.36,14.829c4.016,1.182 8.356,0.276 11.564-2.414l38.264-32.093c1.1-0.923 2.001-1.994 2.698-3.161 2.656-4.442 2.36-10.26-1.154-14.449-4.437-5.29-12.32-5.981-17.61-1.544l-33.127,27.785-45.605-13.428 41.402,1.292 16.027-13.442-6.021-2.955-3.631,3.945-18.134,2.86h-37.216c-9.665,0-17.501,7.835-17.501,17.501v90.395l.029-.024c0.252,6.569 4.819,12.433 11.527,14.019l68.966,16.292 40.024,34.501c2.834,2.442 6.318,3.639 9.787,3.639 4.213,0 8.402-1.765 11.368-5.206 5.41-6.278 4.708-15.75-1.567-21.158z"
+            />
+            <path
+              d="m233.888,50.21l-43.49-21.349c-2.17-1.065-4.545-1.612-6.94-1.612-0.861,0-1.724,0.071-2.581,0.213l-13.243,2.2-24.213-11.886c-6.197-3.043-13.688-0.485-16.728,5.713-3.042,6.197-0.484,13.687 5.713,16.729l14.402,7.069 3.539-2.969c4.405-3.694 9.994-5.729 15.738-5.729 7.266,0 14.11,3.192 18.777,8.756 6.702,7.991 7.61,19.371 2.258,28.32-0.529,0.884-1.127,1.717-1.759,2.523l28.035,13.762c0.916,0.45 1.914,0.664 2.967,0.664 5.79,0 13.263-6.495 18.05-16.247 5.66-11.524 5.424-23.236-0.525-26.157z"
+            />
+            <path
+              d="m102.363,202.426l2.531,6.9-13.835,65.324c-1.716,8.105 3.463,16.065 11.567,17.782 1.048,0.222 2.092,0.328 3.122,0.328 6.936-0.001 13.165-4.839 14.66-11.896l14.265-67.357-5.513-4.752-26.797-6.329z"
             />
-            <path d="m194.386,209.531l-42.802-36.895c-1.825-1.573-4.001-2.683-6.345-3.237l-72.533-17.136 47.755,.703v-34.439l-46.525-26.18 50.36,14.829c4.016,1.182 8.356,0.276 11.564-2.414l38.264-32.093c1.1-0.923 2.001-1.994 2.698-3.161 2.656-4.442 2.36-10.26-1.154-14.449-4.437-5.29-12.32-5.981-17.61-1.544l-33.127,27.785-45.605-13.428 41.402,1.292 16.027-13.442-6.021-2.955-3.631,3.945-18.134,2.86h-37.216c-9.665,0-17.501,7.835-17.501,17.501v90.395l.029-.024c0.252,6.569 4.819,12.433 11.527,14.019l68.966,16.292 40.024,34.501c2.834,2.442 6.318,3.639 9.787,3.639 4.213,0 8.402-1.765 11.368-5.206 5.41-6.278 4.708-15.75-1.567-21.158z" />
-            <path d="m233.888,50.21l-43.49-21.349c-2.17-1.065-4.545-1.612-6.94-1.612-0.861,0-1.724,0.071-2.581,0.213l-13.243,2.2-24.213-11.886c-6.197-3.043-13.688-0.485-16.728,5.713-3.042,6.197-0.484,13.687 5.713,16.729l14.402,7.069 3.539-2.969c4.405-3.694 9.994-5.729 15.738-5.729 7.266,0 14.11,3.192 18.777,8.756 6.702,7.991 7.61,19.371 2.258,28.32-0.529,0.884-1.127,1.717-1.759,2.523l28.035,13.762c0.916,0.45 1.914,0.664 2.967,0.664 5.79,0 13.263-6.495 18.05-16.247 5.66-11.524 5.424-23.236-0.525-26.157z" />
-            <path d="m102.363,202.426l2.531,6.9-13.835,65.324c-1.716,8.105 3.463,16.065 11.567,17.782 1.048,0.222 2.092,0.328 3.122,0.328 6.936-0.001 13.165-4.839 14.66-11.896l14.265-67.357-5.513-4.752-26.797-6.329z" />
           </g>
         </svg>
       </div>
-      <div class="text-h2">
-        Der Admin is über's Kabel gestolpert!
-      </div>
+      <div class="text-h2">Der Admin is über's Kabel gestolpert!</div>
       <div>
-        Aktuell kann der Backend Server nicht erreicht werden, wir versuchen es in {{reload}} Sekunden erneut.
+        Aktuell kann der Backend Server nicht erreicht werden, wir versuchen es in
+        {{ reload }} Sekunden erneut.
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  ref,
-  onMounted,
-  onUnmounted,
-} from '@vue/composition-api';
+import { defineComponent, ref, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
-  name: 'Offline',
-  setup(_, { root }) {
+  name: 'PageOffline',
+  setup() {
+    const router = useRouter();
     const reload = ref(10);
     const ival = setInterval(() => {
       reload.value -= 1;
-      if (reload.value === 0) {
-        const path = <string | null>root.$route.query.redirect || '/login';
-        root.$router.replace({ path: path });
+      if (reload.value <= 0) {
+        if (router.currentRoute.value.params && 'refresh' in router.currentRoute.value.params)
+          router.go(0);
+        const path = router.currentRoute.value.query.redirect;
+        void router.replace(path ? { path: <string>path } : { name: 'login' });
       }
     }, 1000);
     onUnmounted(() => clearInterval(ival));

src/pages/PluginError.vue

@@ -2,33 +2,44 @@
   <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
     <div>
       <div>
-        <svg style="max-width: 400px;" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.761 292.761" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 292.761 292.761" fill="white">
+        <svg
+          style="max-width: 400px"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 292.761 292.761"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          enable-background="new 0 0 292.761 292.761"
+          fill="white"
+        >
           <g>
             <circle cx="87.493" cy="25.907" r="25.907" />
-            <path d="m194.386,209.531l-42.802-36.895c-1.825-1.573-4.001-2.683-6.345-3.237l-72.533-17.136 47.755,.703v-34.439l-46.525-26.18 50.36,14.829c4.016,1.182 8.356,0.276 11.564-2.414l38.264-32.093c1.1-0.923 2.001-1.994 2.698-3.161 2.656-4.442 2.36-10.26-1.154-14.449-4.437-5.29-12.32-5.981-17.61-1.544l-33.127,27.785-45.605-13.428 41.402,1.292 16.027-13.442-6.021-2.955-3.631,3.945-18.134,2.86h-37.216c-9.665,0-17.501,7.835-17.501,17.501v90.395l.029-.024c0.252,6.569 4.819,12.433 11.527,14.019l68.966,16.292 40.024,34.501c2.834,2.442 6.318,3.639 9.787,3.639 4.213,0 8.402-1.765 11.368-5.206 5.41-6.278 4.708-15.75-1.567-21.158z"/>
-            <path d="m233.888,50.21l-43.49-21.349c-2.17-1.065-4.545-1.612-6.94-1.612-0.861,0-1.724,0.071-2.581,0.213l-13.243,2.2-24.213-11.886c-6.197-3.043-13.688-0.485-16.728,5.713-3.042,6.197-0.484,13.687 5.713,16.729l14.402,7.069 3.539-2.969c4.405-3.694 9.994-5.729 15.738-5.729 7.266,0 14.11,3.192 18.777,8.756 6.702,7.991 7.61,19.371 2.258,28.32-0.529,0.884-1.127,1.717-1.759,2.523l28.035,13.762c0.916,0.45 1.914,0.664 2.967,0.664 5.79,0 13.263-6.495 18.05-16.247 5.66-11.524 5.424-23.236-0.525-26.157z"/>
-            <path d="m102.363,202.426l2.531,6.9-13.835,65.324c-1.716,8.105 3.463,16.065 11.567,17.782 1.048,0.222 2.092,0.328 3.122,0.328 6.936-0.001 13.165-4.839 14.66-11.896l14.265-67.357-5.513-4.752-26.797-6.329z"/>
+            <path
+              d="m194.386,209.531l-42.802-36.895c-1.825-1.573-4.001-2.683-6.345-3.237l-72.533-17.136 47.755,.703v-34.439l-46.525-26.18 50.36,14.829c4.016,1.182 8.356,0.276 11.564-2.414l38.264-32.093c1.1-0.923 2.001-1.994 2.698-3.161 2.656-4.442 2.36-10.26-1.154-14.449-4.437-5.29-12.32-5.981-17.61-1.544l-33.127,27.785-45.605-13.428 41.402,1.292 16.027-13.442-6.021-2.955-3.631,3.945-18.134,2.86h-37.216c-9.665,0-17.501,7.835-17.501,17.501v90.395l.029-.024c0.252,6.569 4.819,12.433 11.527,14.019l68.966,16.292 40.024,34.501c2.834,2.442 6.318,3.639 9.787,3.639 4.213,0 8.402-1.765 11.368-5.206 5.41-6.278 4.708-15.75-1.567-21.158z"
+            />
+            <path
+              d="m233.888,50.21l-43.49-21.349c-2.17-1.065-4.545-1.612-6.94-1.612-0.861,0-1.724,0.071-2.581,0.213l-13.243,2.2-24.213-11.886c-6.197-3.043-13.688-0.485-16.728,5.713-3.042,6.197-0.484,13.687 5.713,16.729l14.402,7.069 3.539-2.969c4.405-3.694 9.994-5.729 15.738-5.729 7.266,0 14.11,3.192 18.777,8.756 6.702,7.991 7.61,19.371 2.258,28.32-0.529,0.884-1.127,1.717-1.759,2.523l28.035,13.762c0.916,0.45 1.914,0.664 2.967,0.664 5.79,0 13.263-6.495 18.05-16.247 5.66-11.524 5.424-23.236-0.525-26.157z"
+            />
+            <path
+              d="m102.363,202.426l2.531,6.9-13.835,65.324c-1.716,8.105 3.463,16.065 11.567,17.782 1.048,0.222 2.092,0.328 3.122,0.328 6.936-0.001 13.165-4.839 14.66-11.896l14.265-67.357-5.513-4.752-26.797-6.329z"
+            />
           </g>
         </svg>
       </div>
-      <div class="text-h2">
-        Der Admin war betrunken!!
-      </div>
+      <div class="text-h2">Der Admin war betrunken!!</div>
       <div>
-        Einige Plugins konnten nicht geladen werden.<br />Sollte diese Seite jemals auftauchen, kontaktiere einen nüchternen Admin.
+        Einige Plugins konnten nicht geladen werden.<br />Sollte diese Seite jemals auftauchen,
+        kontaktiere einen nüchternen Admin.
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent} from '@vue/composition-api';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'PluginError.vue'
-})
+  name: 'PagePluginError',
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/pages/Reset.vue

@@ -0,0 +1,109 @@
+<template>
+  <q-page padding class="fit row justify-center items-center content-center">
+    <q-card class="col-xs-11 col-sm-8 col-md-6 col-lg-4 justify-center items-center content-center">
+      <q-toolbar class="bg-primary text-white">
+        <q-toolbar-title> Passwort vergessen </q-toolbar-title>
+      </q-toolbar>
+
+      <q-card-section>
+        <q-form ref="ResetForm" class="q-gutter-md" @submit="doReset">
+          <q-input
+            v-model="password"
+            filled
+            type="password"
+            label="Passwort"
+            :rules="rules"
+            hint="Min. 8 Zeichen"
+            tabindex="1"
+          />
+          <q-input
+            v-model="password2"
+            filled
+            type="password"
+            label="Passwort Wiederholung"
+            :rules="rules"
+            tabindex="2"
+          />
+          <div class="row justify-end">
+            <q-btn label="Zurücksetzen" type="submit" color="primary" />
+          </div>
+        </q-form>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>
+
+<script lang="ts">
+import { useMainStore } from '@flaschengeist/api';
+import { useRouter } from 'vue-router';
+import { Loading, Notify } from 'quasar';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'PageReset',
+  setup() {
+    const mainStore = useMainStore();
+    const router = useRouter();
+    const password = ref('');
+    const password2 = ref('');
+
+    const rules = [
+      (val: string) =>
+        (val && val.length >= 8) || 'Das Passwort muss mindestens 8 Zeichen lang sein!',
+    ];
+
+    function doReset() {
+      if (password.value !== password2.value) {
+        Notify.create({
+          group: false,
+          type: 'negative',
+          message: 'Die Passwörter stimmen nicht überein!',
+          timeout: 10000,
+          progress: true,
+          actions: [{ icon: 'mdi-close', color: 'white' }],
+        });
+        password2.value = '';
+        return;
+      }
+
+      const token = router.currentRoute.value.query.token;
+      if (token === null)
+        if (password.value !== password2.value) {
+          Notify.create({
+            group: false,
+            type: 'negative',
+            message: 'Der Link wurde nicht richtig geöffnet, Token nicht gefunden.',
+            timeout: 10000,
+            progress: true,
+            actions: [{ icon: 'mdi-close', color: 'white' }],
+          });
+          return;
+        }
+
+      Loading.show({
+        message: 'Das Passwort wird zurückgesetzt',
+      });
+      mainStore
+        .resetPassword(<string>token, password.value)
+        .catch((status) => {
+          if (status == 403) {
+            Notify.create({
+              group: false,
+              type: 'negative',
+              message: 'Der Link ist abgelaufen!',
+              timeout: 10000,
+              progress: true,
+              actions: [{ icon: 'mdi-close', color: 'white' }],
+            });
+          }
+        })
+        .finally(() => {
+          Loading.hide();
+          void router.replace({ name: 'login' });
+        });
+    }
+
+    return { password, password2, doReset, rules };
+  },
+});
+</script>

src/pages/about/About.vue

@@ -1,38 +1,32 @@
 <template>
   <q-page
+    v-if="$route.name == 'about' || $route.name == 'about_out'"
     padding
     class="fit row justify-center content-center items-center"
-    v-if="$route.name == 'about' || $route.name == 'about_out'"
   >
     <div class="fit row justify-center content-center items-center">
       <q-img
-        :src="$q.dark.isActive? 'logo.svg' : 'logo-dark.svg'"
+        :src="$q.dark.isActive ? 'flaschengeist-logo.svg' : 'flaschengeist-logo.svg'"
         class="col-12 q-ma-md"
         style="min-width: 200px; max-width: 400px"
       />
       <div class="col-12 text-h4 text-center q-pa-sm">
         Flaschengeist
-        <div class="text-caption">
-          Version 2.0.0
+        <div class="text-caption">Version 2.0.0</div>
       </div>
-      </div>
-      <div class="col-12 text-center q-ma-sm" style="max-width: 600px;">
-        Flaschengeist ist ein dynamischen Managementsystem für Studentenclubs.
-        Es ermöglicht unter anderem die Mitgliederverwaltung, Dienstverwaltung,
-        Arbeitsgruppenverwaltung und vieles meher. Es kann fast alles ermöglich
-        werden, wenn ein Plugin dafür geschrieben wird. Jeder Club hat die
-        Möglichkeit sein eigenes Flaschengeist zu hosten. Ziel ist später
+      <div class="col-12 text-center q-ma-sm" style="max-width: 600px">
+        Flaschengeist ist ein dynamischen Managementsystem für Studentenclubs. Es ermöglicht unter
+        anderem die Mitgliederverwaltung, Dienstverwaltung, Arbeitsgruppenverwaltung und vieles
+        meher. Es kann fast alles ermöglich werden, wenn ein Plugin dafür geschrieben wird. Jeder
+        Club hat die Möglichkeit sein eigenes Flaschengeist zu hosten. Ziel ist später
         Clubübergreifend dezentralisiert miteinander zu arbeiten.
       </div>
 
-
       <q-separator />
-      <div class="col-12 text-h6 q-pa-sm" v-if="$route.name == 'about'">
-        Geladene Plugins:
-      </div>
-      <div class="col-12 q-pa-sm" v-if="$route.name == 'about'">
+      <div v-if="$route.name == 'about'" class="col-12 text-h6 q-pa-sm">Geladene Plugins:</div>
+      <div v-if="$route.name == 'about'" class="col-12 q-pa-sm">
         <q-chip
-          v-for="(plugin, index) in $flaschengeistPlugins.plugins"
+          v-for="(plugin, index) in plugins"
           :key="'plugin' + index"
           square
           :color="$q.dark.isActive ? 'accent' : ''"
@@ -45,13 +39,9 @@
         </q-chip>
       </div>
       <q-separator />
-      <div class="col-12 text-h6 q-pa-sm">
-        Entwickler:
-      </div>
+      <div class="col-12 text-h6 q-pa-sm">Entwickler:</div>
 
-      <div
-        class="fit row inline wrap justify-around items-start content-start"
-      >
+      <div class="fit row inline wrap justify-around items-start content-start">
         <developer
           v-for="(developer, index) in developers"
           :key="'dev' + index"
@@ -69,7 +59,8 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from '@vue/composition-api';
+import { defineComponent, inject } from 'vue';
+import { FG_Plugin } from '@flaschengeist/types';
 import Developer from 'components/about/Developer.vue';
 
 const developers = [
@@ -78,20 +69,18 @@ const developers = [
     lastname: 'Gröger',
     club: 'Studentenclub Wu5 e.V.',
     job: 'Gründer von Flaschengeist; Maintainer',
-    pic:
-      'https://scontent-frt3-2.xx.fbcdn.net/v/t1.0-9/31768724_1663023210401956_3834323197281435648_n.jpg?_nc_cat=109&_nc_sid=09cbfe&_nc_ohc=jWvUfn_xJ9YAX_oJ3CE&_nc_ht=scontent-frt3-2.xx&oh=15249378051f1e27f8b15122effb5c4a&oe=5FAC6A17',
+    pic: 'https://scontent-frt3-2.xx.fbcdn.net/v/t1.0-9/31768724_1663023210401956_3834323197281435648_n.jpg?_nc_cat=109&_nc_sid=09cbfe&_nc_ohc=jWvUfn_xJ9YAX_oJ3CE&_nc_ht=scontent-frt3-2.xx&oh=15249378051f1e27f8b15122effb5c4a&oe=5FAC6A17',
     description:
-      'Eigentlich wöllte ich jetzt hier echt viel hinschreiben. Aber ich habe keinen Plan was. Früher war ich einfach nur Tim G. und habe für andere den Kaffe geholt. Unter anderen für Ferdinand Thiessen.'
+      'Eigentlich wöllte ich jetzt hier echt viel hinschreiben. Aber ich habe keinen Plan was. Früher war ich einfach nur Tim G. und habe für andere den Kaffe geholt. Unter anderen für Ferdinand Thiessen.',
   },
   {
     firstname: 'Ferdinand',
     lastname: 'Thiessen',
     club: 'Club Aquarium e.V.',
-    pic:
-      'https://scontent-frx5-1.xx.fbcdn.net/v/t1.0-9/17022243_1418942461493397_9069541318944803902_n.jpg?_nc_cat=110&_nc_sid=174925&_nc_ohc=HjkSm8vcRW8AX8bTnJ8&_nc_ht=scontent-frx5-1.xx&oh=f09bd36525f3c6e55feaafb3b05b43d2&oe=5FAD432A',
+    pic: 'https://scontent-frx5-1.xx.fbcdn.net/v/t1.0-9/17022243_1418942461493397_9069541318944803902_n.jpg?_nc_cat=110&_nc_sid=174925&_nc_ohc=HjkSm8vcRW8AX8bTnJ8&_nc_ht=scontent-frx5-1.xx&oh=f09bd36525f3c6e55feaafb3b05b43d2&oe=5FAD432A',
     job: 'Backend-Developer; Co-Maintainer',
     description:
-      'Geiler Typ. Einfach mal so alles Aufgeräumt. Aufeinmal könnte man aus dem Code eine Dokumentation zaubern!'
+      'Geiler Typ. Einfach mal so alles Aufgeräumt. Aufeinmal könnte man aus dem Code eine Dokumentation zaubern!',
   },
   {
     firstname: 'Dominik',
@@ -99,15 +88,15 @@ const developers = [
     club: 'Studentenclub Wu5 e.V.',
     job: 'Eigentlich Frontend-Developer',
     description: 'Er findet sich langsam rein.',
-    pic:
-      'https://scontent-frt3-1.xx.fbcdn.net/v/t31.0-8/10363433_647611335326483_3447118968375865826_o.jpg?_nc_cat=104&_nc_sid=09cbfe&_nc_ohc=nWMgo-6Ih74AX_NiGUz&_nc_ht=scontent-frt3-1.xx&oh=f16d2edfe86f68d54900099087edb9c9&oe=5FAACFD4'
-  }
+    pic: 'https://scontent-frt3-1.xx.fbcdn.net/v/t31.0-8/10363433_647611335326483_3447118968375865826_o.jpg?_nc_cat=104&_nc_sid=09cbfe&_nc_ohc=nWMgo-6Ih74AX_NiGUz&_nc_ht=scontent-frt3-1.xx&oh=f16d2edfe86f68d54900099087edb9c9&oe=5FAACFD4',
+  },
 ];
 export default defineComponent({
-  // name: 'PageName'
+  name: 'PageAbout',
   components: { Developer },
   setup() {
-    return {developers};
-  }
+    const plugins = inject<FG_Plugin.Flaschengeist>('flaschengeist')?.plugins || [];
+    return { developers, plugins };
+  },
 });
 </script>

src/plugins.d.ts

@@ -1,64 +0,0 @@
-import { RouteConfig } from 'vue-router';
-import { Module } from 'vuex';
-import { StateInterface } from 'src/store';
-import { AsyncComponentPromise } from 'vue/types/options';
-
-declare namespace FG_Plugin {
-  interface ShortCutLink {
-    link: string;
-    icon: string;
-    permissions?: string[];
-  }
-
-  interface PluginRouteConfig extends RouteConfig {
-    shortcut?: boolean;
-    title: string;
-    icon: string;
-    children?: PluginRouteConfig[];
-    meta?: { permissions?: string[] };
-  }
-
-  interface Widget {
-    name: string;
-    priority: number;
-    permissions: FG.Permission[];
-    widget: AsyncComponentPromise;
-  }
-
-  interface Plugin {
-    name: string;
-    version: string;
-    widgets: Widget[];
-    requiredModules: string[];
-    requiredBackendModules: string[];
-    mainRoutes?: PluginRouteConfig[];
-    outRoutes?: PluginRouteConfig[];
-    store?: Map<string, Module<any, StateInterface>>;
-  }
-
-  interface PluginMainLink extends PluginChildLink {
-    children: PluginChildLink[];
-  }
-
-  interface PluginChildLink {
-    name: string;
-    title: string;
-    link: string;
-    icon: string;
-    permissions?: string[];
-  }
-
-  interface LoadedPlugin {
-    name: string;
-    version: string;
-  }
-
-  interface LoadedPlugins {
-    plugins: LoadedPlugin[];
-    routes: RouteConfig[];
-    mainLinks: PluginMainLink[];
-    shortcuts: ShortCutLink[];
-    shortcutsOut: ShortCutLink[];
-    widgets: Widget[];
-  }
-}

src/plugins/balance/components/Widget.vue

@@ -1,34 +0,0 @@
-<template>
-  <q-card style="text-align: center;">
-    <q-card-section>
-      <div class="text-h6">Gerücht: {{ balance.toFixed(2) }} €</div>
-    </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
-import { BalanceInterface } from 'src/plugins/balance/store/balance';
-import { Store } from 'vuex';
-
-export default defineComponent({
-  name: 'BalanceWidget',
-  setup(_, { root }) {
-    onBeforeMount(() => {
-      store.dispatch('balance/getBalance').catch(err => {
-        console.warn(err);
-      });
-    });
-
-    const store: Store<{ balance: BalanceInterface }> = <
-      Store<{ balance: BalanceInterface }>
-    >root.$store;
-
-    const balance = computed<number>(() => {
-      return store.state.balance.balance;
-    });
-
-    return { balance };
-  }
-});
-</script>

src/plugins/balance/pages/Add.vue

@@ -1,95 +0,0 @@
-<template>
-  <q-page padding>
-    <q-card>
-      <q-card-section class="row">
-        <div class="col-4 row q-pa-sm">
-          <q-btn
-            class="col"
-            color="green"
-            label="2€"
-            @click="changeBalance(-2)"
-          />
-        </div>
-        <div class="col-4 row q-pa-sm">
-          <q-btn
-            class="col"
-            color="green"
-            label="1€"
-            @click="changeBalance(-1)"
-          />
-        </div>
-        <div class="col-4 row q-pa-sm">
-          <q-btn
-            class="col"
-            color="green"
-            label="0,50€"
-            @click="changeBalance(-0.5)"
-          />
-        </div>
-        <div class="col-4 row q-pa-sm">
-          <q-btn
-            class="col"
-            color="green"
-            label="0,40€"
-            @click="changeBalance(-0.4)"
-          />
-        </div>
-        <div class="col-4 row q-pa-sm">
-          <q-btn
-            class="col"
-            color="green"
-            label="0,20€"
-            @click="changeBalance(-0.2)"
-          />
-        </div>
-        <div class="col-4 row q-pa-sm">
-          <q-btn
-            class="col"
-            color="green"
-            label="0,10€"
-            @click="changeBalance(-0.1)"
-          />
-        </div>
-      </q-card-section>
-      <q-card-section>
-        <div class="text-h6">{{ balance.toFixed(2) }} €</div>
-      </q-card-section>
-      <q-card-actions>
-        <q-btn label="test" @click="$store.dispatch('balance/getBalance')" />
-      </q-card-actions>
-    </q-card>
-  </q-page>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
-import { BalanceInterface } from 'src/plugins/balance/store/balance';
-import { Store } from 'vuex';
-
-export default defineComponent({
-  // name: 'PageName'
-  setup(_, { root }) {
-    onBeforeMount(() => {
-      store.dispatch('balance/getBalance').catch(err => {
-        console.warn(err);
-      });
-    });
-
-    const store: Store<{ balance: BalanceInterface }> = <
-      Store<{ balance: BalanceInterface }>
-    >root.$store;
-
-    const balance = computed<number>(() => {
-      return store.state.balance.balance;
-    });
-
-    function changeBalance(amount: number) {
-      store
-        .dispatch('balance/changeBalance', amount)
-        .catch(err => console.log(err));
-    }
-
-    return { balance, changeBalance };
-  }
-});
-</script>

src/plugins/balance/pages/MainPage.vue

@@ -1,51 +0,0 @@
-<template>
-  <div>
-    <q-page padding v-if="checkMain">
-      <q-card>
-        <q-card-section>
-          <q-list
-            v-for="(mainRoute, index) in mainRoutes"
-            :key="'mainRoute' + index"
-          >
-            <essential-link
-              v-for="(route, index2) in mainRoute.children"
-              :key="'route' + index2"
-              :title="route.title"
-              :icon="route.icon"
-              :link="route.name"
-              :permissions="route.meta.permissions"
-            />
-          </q-list>
-        </q-card-section>
-      </q-card>
-    </q-page>
-    <router-view />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
-import EssentialLink from 'src/components/navigation/EssentialLink.vue';
-import mainRoutes from 'src/plugins/balance/routes';
-import { Store } from 'vuex';
-import { BalanceInterface } from 'src/plugins/balance/store/balance';
-import setLoadingBar from 'components/loading';
-import { StateInterface } from 'src/store';
-export default defineComponent({
-  // name: 'PageName'
-  components: { EssentialLink },
-  setup(_, { root }) {
-    const store = <Store<StateInterface>>root.$store;
-    const loading = computed(() => {
-      return (<BalanceInterface>store.state.balance).loading > 0;
-    });
-    const checkMain = computed(() => {
-      return root.$route.matched.length == 2;
-    });
-
-    setLoadingBar(loading);
-
-    return { checkMain, mainRoutes };
-  }
-});
-</script>

src/plugins/balance/plugin.ts

@@ -1,26 +0,0 @@
-import { Module } from 'vuex';
-import { StateInterface } from 'src/store';
-import mainRoutes from './routes';
-import { FG_Plugin } from 'src/plugins';
-import balance, { BalanceInterface } from './store/balance';
-
-const plugin: FG_Plugin.Plugin = {
-  name: 'Balance',
-  mainRoutes,
-  requiredModules: ['User'],
-  requiredBackendModules: ['balance'],
-  version: '0.0.1',
-  store: new Map<string, Module<BalanceInterface, StateInterface>>([
-    ['balance', balance]
-  ]),
-  widgets: [
-    {
-      priority: 0,
-      name: 'current',
-      permissions: ['balance_show'],
-      widget: () => import('./components/Widget.vue')
-    }
-  ]
-};
-
-export default plugin;