Merge branch 'master' into 751-BusinessConcept_to_create_a_Community

.github/workflows/test.yml

@@ -29,6 +29,32 @@ jobs:
           name: docker-frontend-test
           path: /tmp/frontend.tar
 
+  ##############################################################################
+  # JOB: DOCKER BUILD TEST ADMIN INTERFACE #####################################
+  ##############################################################################
+  build_test_admin:
+    name: Docker Build Test - Admin Interface
+    runs-on: ubuntu-latest
+    #needs: [nothing]
+    steps:
+      ##########################################################################
+      # CHECKOUT CODE ##########################################################
+      ##########################################################################
+      - name: Checkout code
+        uses: actions/checkout@v2
+      ##########################################################################
+      # ADMIN INTERFACE ########################################################
+      ##########################################################################
+      - name: Admin | Build `test` image
+        run: |
+          docker build --target test -t "gradido/admin:test" admin/ --build-arg NODE_ENV="test"
+          docker save "gradido/admin:test" > /tmp/admin.tar
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: docker-admin-test
+          path: /tmp/admin.tar
+
   ##############################################################################
   # JOB: DOCKER BUILD TEST BACKEND #############################################
   ##############################################################################
@@ -240,7 +266,65 @@ jobs:
         run: docker run --rm gradido/frontend:test yarn run lint
 
   ##############################################################################
-  # JOB: LINT BACKEND #########################################################
+  # JOB: LINT ADMIN INTERFACE ##################################################
+  ##############################################################################
+  lint_admin:
+    name: Lint - Admin Interface
+    runs-on: ubuntu-latest
+    needs: [build_test_admin]
+    steps:
+      ##########################################################################
+      # CHECKOUT CODE ##########################################################
+      ##########################################################################
+      - name: Checkout code
+        uses: actions/checkout@v2
+      ##########################################################################
+      # DOWNLOAD DOCKER IMAGE ##################################################
+      ##########################################################################
+      - name: Download Docker Image (Admin Interface)
+        uses: actions/download-artifact@v2
+        with:
+          name: docker-admin-test
+          path: /tmp
+      - name: Load Docker Image
+        run: docker load < /tmp/admin.tar
+      ##########################################################################
+      # LINT ADMIN INTERFACE ###################################################
+      ##########################################################################
+      - name: Admin Interface | Lint
+        run: docker run --rm gradido/admin:test yarn run lint
+
+  ##############################################################################
+  # JOB: LOCALES ADMIN ######################################################
+  ##############################################################################
+  locales_admin:
+    name: Locales - Admin
+    runs-on: ubuntu-latest
+    needs: [build_test_admin]
+    steps:
+      ##########################################################################
+      # CHECKOUT CODE ##########################################################
+      ##########################################################################
+      - name: Checkout code
+        uses: actions/checkout@v2
+      ##########################################################################
+      # DOWNLOAD DOCKER IMAGE ##################################################
+      ##########################################################################
+      - name: Download Docker Image (Admin Interface)
+        uses: actions/download-artifact@v2
+        with:
+          name: docker-admin-test
+          path: /tmp
+      - name: Load Docker Image
+        run: docker load < /tmp/admin.tar
+      ##########################################################################
+      # LOCALES FRONTEND #######################################################
+      ##########################################################################
+      - name: admin | Locales
+        run: docker run --rm gradido/admin:test yarn run locales
+
+  ##############################################################################
+  # JOB: LINT BACKEND ##########################################################
   ##############################################################################
   lint_backend:
     name: Lint - Backend
@@ -325,7 +409,7 @@ jobs:
       ##########################################################################
       - name: frontend | Unit tests
         run: |
-          docker run -v ~/coverage:/app/coverage --rm gradido/frontend:test yarn run test
+          docker run --env NODE_ENV=test -v ~/coverage:/app/coverage --rm gradido/frontend:test yarn run test
           cp -r ~/coverage ./coverage
       ##########################################################################
       # COVERAGE REPORT FRONTEND ###############################################
@@ -344,9 +428,51 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 85
+          min_coverage: 94
           token: ${{ github.token }}
   
+  ##############################################################################
+  # JOB: UNIT TEST ADMIN INTERFACE #############################################
+  ##############################################################################
+  unit_test_admin:
+    name: Unit tests - Admin Interface
+    runs-on: ubuntu-latest
+    needs: [build_test_admin]
+    steps:
+      ##########################################################################
+      # CHECKOUT CODE ##########################################################
+      ##########################################################################
+      - name: Checkout code
+        uses: actions/checkout@v2
+      ##########################################################################
+      # DOWNLOAD DOCKER IMAGES #################################################
+      ##########################################################################
+      - name: Download Docker Image (Admin Interface)
+        uses: actions/download-artifact@v2
+        with:
+          name: docker-admin-test
+          path: /tmp
+      - name: Load Docker Image
+        run: docker load < /tmp/admin.tar
+      ##########################################################################
+      # UNIT TESTS ADMIN INTERFACE #############################################
+      ##########################################################################
+      - name: Admin Interface | Unit tests
+        run: |
+          docker run -v ~/coverage:/app/coverage --rm gradido/admin:test yarn run test
+          cp -r ~/coverage ./coverage
+      ##########################################################################
+      # COVERAGE CHECK ADMIN INTERFACE #########################################
+      ##########################################################################
+      - name: Admin Interface | Coverage check
+        uses: webcraftmedia/coverage-check-action@master
+        with:
+          report_name: Coverage Admin Interface
+          type: lcov
+          result_path: ./coverage/lcov.info
+          min_coverage: 76
+          token: ${{ github.token }}
+
   ##############################################################################
   # JOB: UNIT TEST BACKEND  ####################################################
   ##############################################################################
@@ -394,7 +520,7 @@ jobs:
           report_name: Coverage Backend
           type: lcov
           result_path: ./backend/coverage/lcov.info
-          min_coverage: 39
+          min_coverage: 37
           token: ${{ github.token }}
 
   ##############################################################################
@@ -560,4 +686,4 @@ jobs:
       - name: database | up
         run: docker-compose -f docker-compose.yml run -T database yarn up
       - name: database | reset
-        run: docker-compose -f docker-compose.yml run -T database yarn reset
+        run: docker-compose -f docker-compose.yml run -T database yarn reset

.gitignore

@@ -1,6 +1,5 @@
 *.log
 /node_modules/*
-.vscode
 messages.pot
 nbproject
 .metadata

.vscode/extensions.json

@@ -2,6 +2,7 @@
     "recommendations": [
         "streetsidesoftware.code-spell-checker",
         "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode"
+        "esbenp.prettier-vscode",
+        "hediet.vscode-drawio"
     ]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

README.md

@@ -69,6 +69,22 @@ We are currently restructuring the service to reduce dependencies and unify busi
 
 Once you have `docker-compose` up and running, you can open [http://localhost/vue](http://localhost/vue) and create yourself a new wallet account.
 
+## How to release
+
+A release is tagged on Github by its version number and published as github release. This is done automatically when a new version is defined in the [package.json](./package.json) and merged into master - furthermore we set all our sub-package-versions to the same version as the main package.json version to make version management as simple as possible.
+Each release is accompanied with release notes automatically generated from the git log which is available as [CHANGELOG.md](./CHANGELOG.md).
+
+To generate the Changelog and set a new Version you should use the following commands in the main folder
+```bash
+git fetch --all
+yarn release
+```
+
+The first command `git fetch --all` will make sure you have all tags previously defined which is required to generate a correct changelog. The second command `yarn release` will execute the changelog tool and set version numbers in the main package and sub-packages. It is required to do `yarn install` before you can use this command.
+After generating a new version you should commit the changes. This will be the CHANGELOG.md and several package.json files. This commit will be omitted in the changelog.
+
+Note: The Changelog will be regenerated with all tags on release on the external builder tool, but will not be checked in there. The Changelog on the github release will therefore always be correct, on the repo it might be incorrect due to missing tags when executing the `yarn release` command.
+
 ## Troubleshooting
 
 | Problem | Issue | Solution | Description |

admin/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.git
+.gitignore

admin/.env.dist

@@ -0,0 +1,3 @@
+GRAPHQL_URI=http://localhost:4000/graphql
+WALLET_AUTH_URL=http://localhost/vue/authenticate?token=$1
+DEBUG_DISABLE_AUTH=false

admin/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+coverage
+**/*.min.js
+dist

admin/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  extends: ['standard', 'plugin:vue/essential', 'plugin:prettier/recommended'],
+  // required to lint *.vue files
+  plugins: ['vue', 'prettier', 'jest'],
+  // add your custom rules here
+  rules: {
+    'no-console': ['error'],
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+    'prettier/prettier': [
+      'error',
+      {
+        htmlWhitespaceSensitivity: 'ignore',
+      },
+    ],
+  },
+}

admin/.gitattributes

@@ -0,0 +1,15 @@
+# Auto detect text files and perform LF normalization
+*.scss linguist-language=Vue
+*.css linguist-language=Vue
+
+# Standard to msysgit
+*.doc	 diff=astextplain
+*.DOC	 diff=astextplain
+*.docx diff=astextplain
+*.DOCX diff=astextplain
+*.dot  diff=astextplain
+*.DOT  diff=astextplain
+*.pdf  diff=astextplain
+*.PDF	 diff=astextplain
+*.rtf	 diff=astextplain
+*.RTF	 diff=astextplain

admin/.gitignore

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+.cache/
+
+.env
+
+# coverage folder
+coverage/
+
+# emacs
+*~

admin/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: false,
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: "all",
+  tabWidth: 2,
+  bracketSpacing: true
+};

admin/Dockerfile

@@ -0,0 +1,98 @@
+##################################################################################
+# BASE ###########################################################################
+##################################################################################
+FROM node:14.17.0-alpine3.10 as base
+
+# ENVs (available in production aswell, can be overwritten by commandline or env file)
+## DOCKER_WORKDIR would be a classical ARG, but that is not multi layer persistent - shame
+ENV DOCKER_WORKDIR="/app"
+## We Cannot do `$(date -u +'%Y-%m-%dT%H:%M:%SZ')` here so we use unix timestamp=0
+ENV BUILD_DATE="1970-01-01T00:00:00.00Z"
+## We cannot do $(npm run version).${BUILD_NUMBER} here so we default to 0.0.0.0
+ENV BUILD_VERSION="0.0.0.0"
+## We cannot do `$(git rev-parse --short HEAD)` here so we default to 0000000
+ENV BUILD_COMMIT="0000000"
+## SET NODE_ENV
+ARG NODE_ENV="production"
+## App relevant Envs
+ENV PORT="8080"
+
+# Labels
+LABEL org.label-schema.build-date="${BUILD_DATE}"
+LABEL org.label-schema.name="gradido:admin"
+LABEL org.label-schema.description="Gradido Vue Admin Interface"
+LABEL org.label-schema.usage="https://github.com/gradido/gradido/admin/README.md"
+LABEL org.label-schema.url="https://gradido.net"
+LABEL org.label-schema.vcs-url="https://github.com/gradido/gradido/backend"
+LABEL org.label-schema.vcs-ref="${BUILD_COMMIT}"
+LABEL org.label-schema.vendor="gradido Community"
+LABEL org.label-schema.version="${BUILD_VERSION}"
+LABEL org.label-schema.schema-version="1.0"
+LABEL maintainer="support@ogradido.net"
+
+# Install Additional Software
+## install: git
+#RUN apk --no-cache add git
+
+# Settings
+## Expose Container Port
+EXPOSE ${PORT}
+
+## Workdir
+RUN mkdir -p ${DOCKER_WORKDIR}
+WORKDIR ${DOCKER_WORKDIR}
+
+##################################################################################
+# DEVELOPMENT (Connected to the local environment, to reload on demand) ##########
+##################################################################################
+FROM base as development
+
+# We don't need to copy or build anything since we gonna bind to the
+# local filesystem which will need a rebuild anyway
+
+# Run command
+# (for development we need to execute yarn install since the
+#  node_modules are on another volume and need updating)
+CMD /bin/sh -c "yarn install && yarn run dev"
+
+##################################################################################
+# BUILD (Does contain all files and is therefore bloated) ########################
+##################################################################################
+FROM base as build
+
+# Copy everything
+COPY . .
+# yarn install
+RUN yarn install --production=false --frozen-lockfile --non-interactive
+# yarn build
+RUN yarn run build
+
+##################################################################################
+# TEST ###########################################################################
+##################################################################################
+FROM build as test
+
+# Install Additional Software
+RUN apk add --no-cache bash jq
+
+# Run command
+CMD /bin/sh -c "yarn run dev"
+
+##################################################################################
+# PRODUCTION (Does contain only "binary"- and static-files to reduce image size) #
+##################################################################################
+FROM base as production
+
+# Copy "binary"-files from build image
+COPY --from=build ${DOCKER_WORKDIR}/dist ./dist
+# We also copy the node_modules express and serve-static for the run script
+COPY --from=build ${DOCKER_WORKDIR}/node_modules ./node_modules
+# Copy static files
+COPY --from=build ${DOCKER_WORKDIR}/public ./public
+# Copy package.json for script definitions (lock file should not be needed)
+COPY --from=build ${DOCKER_WORKDIR}/package.json ./package.json
+# Copy run scripts run/
+COPY --from=build ${DOCKER_WORKDIR}/run ./run
+
+# Run command
+CMD /bin/sh -c "yarn run start"

admin/README.md

@@ -0,0 +1,26 @@
+# admin
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Unit tests
+```
+yarn test
+```

admin/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = function (api) {
+  api.cache(true)
+
+  const presets = ['@babel/preset-env']
+  const plugins = []
+
+  if (process.env.NODE_ENV === 'test') {
+    plugins.push('transform-require-context')
+  }
+
+  return {
+    presets,
+    plugins,
+  }
+}

admin/jest.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  verbose: true,
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!**/node_modules/**',
+    '!src/assets/**',
+    '!**/?(*.)+(spec|test).js?(x)',
+  ],
+  moduleFileExtensions: [
+    'js',
+    // 'jsx',
+    'json',
+    'vue',
+  ],
+  // coverageReporters: ['lcov', 'text'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(css|less)$': 'identity-obj-proxy',
+  },
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.(js|jsx)?$': 'babel-jest',
+    '<rootDir>/node_modules/vee-validate/dist/rules': 'babel-jest',
+  },
+  setupFiles: ['<rootDir>/test/testSetup.js'],
+  testMatch: ['**/?(*.)+(spec|test).js?(x)'],
+  // snapshotSerializers: ['jest-serializer-vue'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!vee-validate/dist/rules)'],
+  testEnvironment: 'jest-environment-jsdom-sixteen',
+}

admin/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "admin",
+  "description": "Administraion Interface for Gradido",
+  "main": "index.js",
+  "author": "Moriz Wahl",
+  "version": "0.1.0",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "start": "node run/server.js",
+    "serve": "vue-cli-service serve --open",
+    "dev": "yarn run serve",
+    "build": "vue-cli-service build",
+    "lint": "eslint --ext .js,.vue .",
+    "test": "jest --coverage",
+    "locales": "scripts/missing-keys.sh && scripts/sort.sh"
+  },
+  "dependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/node": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@vue/cli-plugin-unit-jest": "^4.5.14",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "^1.2.2",
+    "apollo-boost": "^0.4.9",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^27.3.1",
+    "babel-plugin-component": "^1.1.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-vue": "^2.0.2",
+    "bootstrap": "^5.1.3",
+    "bootstrap-vue": "^2.21.2",
+    "core-js": "^3.6.5",
+    "dotenv-webpack": "^7.0.3",
+    "graphql": "^15.6.1",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "26.6.3",
+    "moment": "^2.29.1",
+    "regenerator-runtime": "^0.13.9",
+    "stats-webpack-plugin": "^0.7.0",
+    "vue": "^2.6.11",
+    "vue-apollo": "^3.0.8",
+    "vue-i18n": "^8.26.5",
+    "vue-jest": "^3.0.7",
+    "vue-moment": "^4.1.0",
+    "vue-router": "^3.5.3",
+    "vue-toasted": "^1.1.28",
+    "vuex": "^3.6.2",
+    "vuex-persistedstate": "^4.1.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.15.8",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-require-context": "^0.1.1",
+    "eslint": "7.25.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-vue": "^7.20.0",
+    "jest-environment-jsdom-sixteen": "^2.0.0",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ]
+}

admin/public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="icon" type="image/png" sizes="96x96" href="<%= webpackConfig.output.publicPath %>favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+  <title>Gradido Admin Interface</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+
+  <!-- Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+</head>
+<body>
+<div class="wrapper" id="app">
+
+</div>
+<!-- built files will be auto injected -->
+
+</body>
+</html>

admin/run/server.js

@@ -0,0 +1,15 @@
+// Imports
+const express = require('express')
+const serveStatic = require('serve-static')
+
+// Port
+const port = process.env.PORT || 8080
+
+// Express Server
+const app = express()
+// eslint-disable-next-line node/no-path-concat
+app.use(serveStatic(__dirname + '/../dist'))
+app.listen(port)
+
+// eslint-disable-next-line no-console
+console.log(`http://admin:${port} server started.`)

admin/scripts/missing-keys.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+
+ROOT_DIR=$(dirname "$0")/..
+
+sorting="jq -f $ROOT_DIR/scripts/sort_filter.jq"
+english="$sorting $ROOT_DIR/src/locales/en.json"
+german="$sorting $ROOT_DIR/src/locales/de.json"
+listPaths="jq -c 'path(..)|[.[]|tostring]|join(\".\")'"
+diffString="<( $english | $listPaths ) <( $german | $listPaths )"
+if eval "diff -q $diffString";
+then
+  : # all good
+else
+  eval "diff -y $diffString | grep '[|<>]'";
+  printf "\nEnglish and German translation keys do not match, see diff above.\n"
+  exit 1
+fi

admin/scripts/sort.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+ROOT_DIR=$(dirname "$0")/..
+
+tmp=$(mktemp)
+exit_code=0
+
+for locale_file in $ROOT_DIR/src/locales/*.json
+do
+  jq -f $(dirname "$0")/sort_filter.jq $locale_file > "$tmp"
+  if [ "$*" == "--fix" ]
+  then
+    mv "$tmp" $locale_file
+  else
+    if diff -q "$tmp" $locale_file > /dev/null ;
+    then
+      : # all good
+    else
+      exit_code=$?
+      echo "$(basename -- $locale_file) is not sorted by keys"
+    fi
+  fi
+done
+
+exit $exit_code

admin/scripts/sort_filter.jq

@@ -0,0 +1,13 @@
+def walk(f):
+  . as $in
+  | if type == "object" then
+      reduce keys_unsorted[] as $key
+        ( {}; . + { ($key):  ($in[$key] | walk(f)) } ) | f
+  elif type == "array" then map( walk(f) ) | f
+  else f
+  end;
+
+def keys_sort_by(f):
+  to_entries | sort_by(.key|f ) | from_entries;
+
+walk(if type == "object" then keys_sort_by(ascii_upcase) else . end)

admin/src/App.spec.js

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils'
+import App from './App'
+
+const localVue = global.localVue
+
+const stubs = {
+  RouterView: true,
+}
+
+const mocks = {
+  $store: {
+    state: {
+      token: null,
+    },
+  },
+}
+
+describe('App', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return shallowMount(App, { localVue, stubs, mocks })
+  }
+
+  describe('shallowMount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a div with id "app"', () => {
+      expect(wrapper.find('div#app').exists()).toBeTruthy()
+    })
+  })
+})

admin/src/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <div id="app">
+    <default-layout v-if="$store.state.token" />
+    <router-view v-else></router-view>
+  </div>
+</template>
+
+<script>
+import defaultLayout from '@/layouts/defaultLayout.vue'
+
+export default {
+  name: 'app',
+  components: { defaultLayout },
+}
+</script>

admin/src/assets/mocks/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

admin/src/components/ConfirmRegisterMailFormular.spec.js

@@ -0,0 +1,72 @@
+import { mount } from '@vue/test-utils'
+import ConfirmRegisterMailFormular from './ConfirmRegisterMailFormular.vue'
+
+const localVue = global.localVue
+
+const apolloMutateMock = jest.fn().mockResolvedValue()
+const toastSuccessMock = jest.fn()
+const toastErrorMock = jest.fn()
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $apollo: {
+    mutate: apolloMutateMock,
+  },
+  $toasted: {
+    success: toastSuccessMock,
+    error: toastErrorMock,
+  },
+}
+
+const propsData = {
+  email: 'bob@baumeister.de',
+  dateLastSend: '',
+}
+
+describe('ConfirmRegisterMailFormular', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(ConfirmRegisterMailFormular, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.component-confirm-register-mail', () => {
+      expect(wrapper.find('.component-confirm-register-mail').exists()).toBeTruthy()
+    })
+
+    describe('send register mail with success', () => {
+      beforeEach(() => {
+        wrapper.find('button.test-button').trigger('click')
+      })
+
+      it('calls the API with email', () => {
+        expect(apolloMutateMock).toBeCalledWith(
+          expect.objectContaining({
+            variables: { email: 'bob@baumeister.de' },
+          }),
+        )
+      })
+
+      it('toasts a success message', () => {
+        expect(toastSuccessMock).toBeCalledWith('unregister_mail.success')
+      })
+    })
+
+    describe('send register mail with error', () => {
+      beforeEach(() => {
+        apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
+        wrapper = Wrapper()
+        wrapper.find('button.test-button').trigger('click')
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorMock).toBeCalledWith('unregister_mail.error')
+      })
+    })
+  })
+})

admin/src/components/ConfirmRegisterMailFormular.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="component-confirm-register-mail">
+    <div class="shadow p-3 mb-5 bg-white rounded">
+      <div class="h5">
+        {{ $t('unregister_mail.text', { date: dateLastSend, mail: email }) }}
+      </div>
+
+      <!-- Using components -->
+      <b-input-group :prepend="$t('unregister_mail.info')" class="mt-3">
+        <b-form-input readonly :value="email"></b-form-input>
+        <b-input-group-append>
+          <b-button variant="outline-success" class="test-button" @click="sendRegisterMail">
+            {{ $t('unregister_mail.button') }}
+          </b-button>
+        </b-input-group-append>
+      </b-input-group>
+    </div>
+  </div>
+</template>
+<script>
+import { sendActivationEmail } from '../graphql/sendActivationEmail'
+
+export default {
+  name: 'ConfirmRegisterMail',
+  props: {
+    email: {
+      type: String,
+    },
+    dateLastSend: {
+      type: String,
+    },
+  },
+  methods: {
+    sendRegisterMail() {
+      this.$apollo
+        .mutate({
+          mutation: sendActivationEmail,
+          variables: {
+            email: this.email,
+          },
+        })
+        .then(() => {
+          this.$toasted.success(this.$t('unregister_mail.success', { email: this.email }))
+        })
+        .catch((error) => {
+          this.$toasted.error(this.$t('unregister_mail.error', { message: error.message }))
+        })
+    },
+  },
+}
+</script>
+<style>
+.input-group-text {
+  background-color: rgb(255, 252, 205);
+}
+</style>

admin/src/components/ContentFooter.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="">
+    <hr />
+    <br />
+    <div class="text-center">
+      {{ $t('gradido_admin_footer') }}
+      <div><small>Version: 1.0.0</small></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ContentFooter',
+}
+</script>

admin/src/components/CreationFormular.spec.js

@@ -0,0 +1,361 @@
+import { mount } from '@vue/test-utils'
+import CreationFormular from './CreationFormular.vue'
+
+const localVue = global.localVue
+
+const apolloMock = jest.fn().mockResolvedValue({
+  data: {
+    verifyLogin: {
+      name: 'success',
+      id: 0,
+    },
+  },
+})
+const apolloMutateMock = jest.fn().mockResolvedValue({
+  data: {
+    createPendingCreation: [0, 0, 0],
+  },
+})
+const stateCommitMock = jest.fn()
+const toastedErrorMock = jest.fn()
+const toastedSuccessMock = jest.fn()
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $moment: jest.fn(() => {
+    return {
+      format: jest.fn((m) => m),
+      subtract: jest.fn(() => {
+        return {
+          format: jest.fn((m) => m),
+        }
+      }),
+    }
+  }),
+  $apollo: {
+    query: apolloMock,
+    mutate: apolloMutateMock,
+  },
+  $store: {
+    commit: stateCommitMock,
+    state: {
+      moderator: {
+        id: 0,
+        name: 'test moderator',
+      },
+    },
+  },
+  $toasted: {
+    error: toastedErrorMock,
+    success: toastedSuccessMock,
+  },
+}
+
+const propsData = {
+  type: '',
+  creation: [],
+  itemsMassCreation: {},
+}
+
+describe('CreationFormular', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(CreationFormular, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.component-creation-formular', () => {
+      expect(wrapper.find('.component-creation-formular').exists()).toBeTruthy()
+    })
+
+    describe('server sends back moderator data', () => {
+      it('called store commit with mocked data', () => {
+        expect(stateCommitMock).toBeCalledWith('moderator', { name: 'success', id: 0 })
+      })
+    })
+
+    describe('server throws error for moderator data call', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        apolloMock.mockRejectedValueOnce({ message: 'Ouch!' })
+        wrapper = Wrapper()
+      })
+
+      it('has called store commit with fake data', () => {
+        expect(stateCommitMock).toBeCalledWith('moderator', { id: 0, name: 'Test Moderator' })
+      })
+    })
+
+    describe('radio buttons to selcet month', () => {
+      it('has three radio buttons', () => {
+        expect(wrapper.findAll('input[type="radio"]').length).toBe(3)
+      })
+
+      describe('with mass creation', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper.setProps({ type: 'massCreation' })
+        })
+
+        describe('first radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(0).setChecked()
+          })
+
+          it('emits update-radio-selected with index 0', () => {
+            expect(wrapper.emitted()['update-radio-selected']).toEqual([
+              [expect.arrayContaining([0])],
+            ])
+          })
+        })
+
+        describe('second radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(1).setChecked()
+          })
+
+          it('emits update-radio-selected with index 1', () => {
+            expect(wrapper.emitted()['update-radio-selected']).toEqual([
+              [expect.arrayContaining([1])],
+            ])
+          })
+        })
+
+        describe('third radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(2).setChecked()
+          })
+
+          it('emits update-radio-selected with index 2', () => {
+            expect(wrapper.emitted()['update-radio-selected']).toEqual([
+              [expect.arrayContaining([2])],
+            ])
+          })
+        })
+      })
+
+      describe('with single creation', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+          await wrapper.setData({ rangeMin: 180 })
+          await wrapper.setData({ text: 'Test create coins' })
+          await wrapper.setData({ value: 90 })
+        })
+
+        describe('first radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(0).setChecked()
+          })
+
+          it('sets rangeMin to 0', () => {
+            expect(wrapper.vm.rangeMin).toBe(0)
+          })
+
+          it('sets rangeMax to 200', () => {
+            expect(wrapper.vm.rangeMax).toBe(200)
+          })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends ... to apollo', () => {
+              expect(apolloMutateMock).toBeCalled()
+            })
+          })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              apolloMutateMock.mockRejectedValueOnce({ message: 'Ouch!' })
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('toasts an error message', () => {
+              expect(toastedErrorMock).toBeCalledWith('Ouch!')
+            })
+          })
+
+          describe('Negativ value', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ value: -20 })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Empty text', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: '' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Text length less than 10', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: 'Try this' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+        })
+
+        describe('second radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(1).setChecked()
+          })
+
+          it('sets rangeMin to 0', () => {
+            expect(wrapper.vm.rangeMin).toBe(0)
+          })
+
+          it('sets rangeMax to 400', () => {
+            expect(wrapper.vm.rangeMax).toBe(400)
+          })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends ... to apollo', () => {
+              expect(apolloMutateMock).toBeCalled()
+            })
+          })
+
+          describe('Negativ value', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ value: -20 })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Empty text', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: '' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Text length less than 10', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: 'Try this' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+        })
+
+        describe('third radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(2).setChecked()
+          })
+
+          it('sets rangeMin to 0', () => {
+            expect(wrapper.vm.rangeMin).toBe(0)
+          })
+
+          it('sets rangeMax to 400', () => {
+            expect(wrapper.vm.rangeMax).toBe(600)
+          })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends mutation to apollo', () => {
+              expect(apolloMutateMock).toBeCalled()
+            })
+
+            it('toast success message', () => {
+              expect(toastedSuccessMock).toBeCalled()
+            })
+
+            it('store commit openCreationPlus', () => {
+              expect(stateCommitMock).toBeCalledWith('openCreationsPlus', 1)
+            })
+          })
+
+          describe('Negativ value', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ value: -20 })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Empty text', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: '' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Text length less than 10', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: 'Try this' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+        })
+      })
+    })
+  })
+})

admin/src/components/CreationFormular.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="component-creation-formular">
+    {{ $t('creation_form.form') }}
+    <div class="shadow p-3 mb-5 bg-white rounded">
+      <b-form ref="creationForm">
+        <b-row class="m-4">
+          <label>{{ $t('creation_form.select_month') }}</label>
+          <b-col class="text-left">
+            <b-form-radio
+              id="beforeLastMonth"
+              v-model="radioSelected"
+              :value="beforeLastMonth"
+              :disabled="creation[0] === 0"
+              size="lg"
+              @change="updateRadioSelected(beforeLastMonth, 0, creation[0])"
+            >
+              <label for="beforeLastMonth">
+                {{ beforeLastMonth.short }} {{ creation[0] != null ? creation[0] + ' GDD' : '' }}
+              </label>
+            </b-form-radio>
+          </b-col>
+          <b-col>
+            <b-form-radio
+              id="lastMonth"
+              v-model="radioSelected"
+              :value="lastMonth"
+              :disabled="creation[1] === 0"
+              size="lg"
+              @change="updateRadioSelected(lastMonth, 1, creation[1])"
+            >
+              <label for="lastMonth">
+                {{ lastMonth.short }} {{ creation[1] != null ? creation[1] + ' GDD' : '' }}
+              </label>
+            </b-form-radio>
+          </b-col>
+          <b-col class="text-right">
+            <b-form-radio
+              id="currentMonth"
+              v-model="radioSelected"
+              :value="currentMonth"
+              :disabled="creation[2] === 0"
+              size="lg"
+              @change="updateRadioSelected(currentMonth, 2, creation[2])"
+            >
+              <label for="currentMonth">
+                {{ currentMonth.short }} {{ creation[2] != null ? creation[2] + ' GDD' : '' }}
+              </label>
+            </b-form-radio>
+          </b-col>
+        </b-row>
+
+        <b-row class="m-4" v-show="createdIndex != null">
+          <label>{{ $t('creation_form.select_value') }}</label>
+          <div>
+            <b-input-group prepend="GDD" append=".00">
+              <b-form-input
+                type="number"
+                v-model="value"
+                :min="rangeMin"
+                :max="rangeMax"
+              ></b-form-input>
+            </b-input-group>
+
+            <b-input-group prepend="0" :append="String(rangeMax)" class="mt-3">
+              <b-form-input
+                type="range"
+                v-model="value"
+                :min="rangeMin"
+                :max="rangeMax"
+                step="10"
+              ></b-form-input>
+            </b-input-group>
+          </div>
+        </b-row>
+        <b-row class="m-4">
+          <label>{{ $t('creation_form.enter_text') }}</label>
+          <div>
+            <b-form-textarea
+              id="textarea-state"
+              v-model="text"
+              :state="text.length >= 10"
+              :placeholder="$t('creation_form.min_characters')"
+              rows="3"
+            ></b-form-textarea>
+          </div>
+        </b-row>
+        <b-row class="m-4">
+          <b-col class="text-center">
+            <b-button type="reset" variant="danger" @click="$refs.creationForm.reset()">
+              {{ $t('creation_form.reset') }}
+            </b-button>
+          </b-col>
+          <b-col class="text-center">
+            <div class="text-right">
+              <b-button
+                v-if="pagetype === 'PageCreationConfirm'"
+                type="button"
+                variant="success"
+                class="test-submit"
+                @click="submitCreation"
+                :disabled="radioSelected === '' || value <= 0 || text.length < 10"
+              >
+                {{ $t('creation_form.update_creation') }}
+              </b-button>
+
+              <b-button
+                v-else
+                type="button"
+                variant="success"
+                class="test-submit"
+                @click="submitCreation"
+                :disabled="radioSelected === '' || value <= 0 || text.length < 10"
+              >
+                {{ $t('creation_form.submit_creation') }}
+              </b-button>
+            </div>
+          </b-col>
+        </b-row>
+      </b-form>
+    </div>
+  </div>
+</template>
+<script>
+import { verifyLogin } from '../graphql/verifyLogin'
+import { createPendingCreation } from '../graphql/createPendingCreation'
+export default {
+  name: 'CreationFormular',
+  props: {
+    type: {
+      type: String,
+      required: false,
+    },
+    pagetype: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    item: {
+      type: Object,
+      required: false,
+      default() {
+        return {}
+      },
+    },
+    items: {
+      type: Array,
+      required: false,
+      default() {
+        return []
+      },
+    },
+    creationUserData: {
+      type: Object,
+      required: false,
+      default() {
+        return {}
+      },
+    },
+    creation: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      radioSelected: '',
+      text: !this.creationUserData.memo ? '' : this.creationUserData.memo,
+      value: !this.creationUserData.amount ? 0 : this.creationUserData.amount,
+      rangeMin: 0,
+      rangeMax: 1000,
+      currentMonth: {
+        short: this.$moment().format('MMMM'),
+        long: this.$moment().format('YYYY-MM-DD'),
+        year: this.$moment().format('YYYY'),
+      },
+      lastMonth: {
+        short: this.$moment().subtract(1, 'month').format('MMMM'),
+        long: this.$moment().subtract(1, 'month').format('YYYY-MM') + '-01',
+        year: this.$moment().subtract(1, 'month').format('YYYY'),
+      },
+      beforeLastMonth: {
+        short: this.$moment().subtract(2, 'month').format('MMMM'),
+        long: this.$moment().subtract(2, 'month').format('YYYY-MM') + '-01',
+        year: this.$moment().subtract(2, 'month').format('YYYY'),
+      },
+      submitObj: null,
+      isdisabled: true,
+      createdIndex: null,
+    }
+  },
+
+  methods: {
+    // Auswählen eines Zeitraumes
+    updateRadioSelected(name, index, openCreation) {
+      this.createdIndex = index
+      this.text = this.$t('creation_form.creation_for') + ' ' + name.short + ' ' + name.year
+      // Wenn Mehrfachschöpfung
+      if (this.type === 'massCreation') {
+        // An Creation.vue emitten und radioSelectedMass aktualisieren
+        this.$emit('update-radio-selected', [name, index])
+      } else if (this.type === 'singleCreation') {
+        this.rangeMin = 0
+        // Der maximale offene Betrag an GDD die für ein User noch geschöpft werden kann
+        this.rangeMax = openCreation
+      }
+    },
+    submitCreation() {
+      if (this.type === 'massCreation') {
+        // Die anzahl der Mitglieder aus der Mehrfachschöpfung
+        const i = Object.keys(this.itemsMassCreation).length
+        // hinweis das eine Mehrfachschöpfung ausgeführt wird an (Anzahl der MItgleider an die geschöpft wird)
+        this.submitObj = [
+          {
+            item: this.itemsMassCreation,
+            email: this.item.email,
+            creationDate: this.radioSelected.long,
+            amount: this.value,
+            memo: this.text,
+            moderator: this.$store.state.moderator.id,
+          },
+        ]
+
+        // $store - offene Schöpfungen hochzählen
+        this.$store.commit('openCreationsPlus', i)
+
+        // lösche alle Mitglieder aus der MehrfachSchöpfungsListe nach dem alle Mehrfachschpfungen zum bestätigen gesendet wurden.
+        this.$emit('remove-all-bookmark')
+      } else if (this.type === 'singleCreation') {
+        this.submitObj = {
+          email: this.item.email,
+          creationDate: this.radioSelected.long,
+          amount: Number(this.value),
+          memo: this.text,
+          moderator: Number(this.$store.state.moderator.id),
+        }
+
+        this.$apollo
+          .mutate({
+            mutation: createPendingCreation,
+            variables: this.submitObj,
+          })
+          .then((result) => {
+            this.$emit('update-user-data', this.item, result.data.createPendingCreation)
+            this.$toasted.success(
+              this.$t('creation_form.toasted', {
+                value: this.value,
+                email: this.item.email,
+              }),
+            )
+            this.$store.commit('openCreationsPlus', 1)
+            this.submitObj = null
+            this.createdIndex = null
+            // das creation Formular reseten
+            this.$refs.creationForm.reset()
+            // Den geschöpften Wert auf o setzen
+            this.value = 0
+          })
+          .catch((error) => {
+            this.$toasted.error(error.message)
+            this.submitObj = null
+            // das creation Formular reseten
+            this.$refs.creationForm.reset()
+            // Den geschöpften Wert auf o setzen
+            this.value = 0
+          })
+      }
+    },
+    searchModeratorData() {
+      this.$apollo
+        .query({ query: verifyLogin })
+        .then((result) => {
+          this.$store.commit('moderator', result.data.verifyLogin)
+        })
+        .catch(() => {
+          this.$store.commit('moderator', { id: 0, name: 'Test Moderator' })
+        })
+    },
+  },
+  created() {
+    this.searchModeratorData()
+  },
+}
+</script>

admin/src/components/CreationTransactionListFormular.spec.js

@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import CreationTransactionListFormular from './CreationTransactionListFormular.vue'
+
+const localVue = global.localVue
+
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    transactionList: {
+      transactions: [
+        {
+          type: 'created',
+          balance: 100,
+          decayStart: 0,
+          decayEnd: 0,
+          decayDuration: 0,
+          memo: 'Testing',
+          transactionId: 1,
+          name: 'Bibi',
+          email: 'bibi@bloxberg.de',
+          date: new Date(),
+          decay: {
+            balance: 0.01,
+            decayStart: 0,
+            decayEnd: 0,
+            decayDuration: 0,
+            decayStartBlock: 0,
+          },
+        },
+        {
+          type: 'created',
+          balance: 200,
+          decayStart: 0,
+          decayEnd: 0,
+          decayDuration: 0,
+          memo: 'Testing 2',
+          transactionId: 2,
+          name: 'Bibi',
+          email: 'bibi@bloxberg.de',
+          date: new Date(),
+          decay: {
+            balance: 0.01,
+            decayStart: 0,
+            decayEnd: 0,
+            decayDuration: 0,
+            decayStartBlock: 0,
+          },
+        },
+      ],
+    },
+  },
+})
+
+const toastedErrorMock = jest.fn()
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $apollo: {
+    query: apolloQueryMock,
+  },
+  $toasted: {
+    global: {
+      error: toastedErrorMock,
+    },
+  },
+}
+
+const propsData = {
+  userId: 1,
+}
+
+describe('CreationTransactionListFormular', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(CreationTransactionListFormular, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('sends query to Apollo when created', () => {
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({
+          variables: {
+            currentPage: 1,
+            pageSize: 25,
+            order: 'DESC',
+            onlyCreations: true,
+            userId: 1,
+          },
+        }),
+      )
+    })
+
+    it('has two values for the transaction', () => {
+      expect(wrapper.find('tbody').findAll('tr').length).toBe(2)
+    })
+
+    describe('query transaction with error', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockRejectedValue({ message: 'OUCH!' })
+        wrapper = Wrapper()
+      })
+
+      it('calls the API', () => {
+        expect(apolloQueryMock).toBeCalled()
+      })
+
+      it('toast error', () => {
+        expect(toastedErrorMock).toBeCalledWith('OUCH!')
+      })
+    })
+  })
+})

admin/src/components/CreationTransactionListFormular.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="component-creation-transaction-list">
+    {{ $t('transactionlist.title') }}
+    <b-table striped hover :items="items"></b-table>
+  </div>
+</template>
+<script>
+import { transactionList } from '../graphql/transactionList'
+export default {
+  name: 'CreationTransactionList',
+  props: {
+    userId: { type: Number, required: true },
+  },
+  data() {
+    return {
+      items: [],
+    }
+  },
+  methods: {
+    getTransactions() {
+      this.$apollo
+        .query({
+          query: transactionList,
+          variables: {
+            currentPage: 1,
+            pageSize: 25,
+            order: 'DESC',
+            onlyCreations: true,
+            userId: parseInt(this.userId),
+          },
+        })
+        .then((result) => {
+          this.items = result.data.transactionList.transactions
+        })
+        .catch((error) => {
+          this.$toasted.global.error(error.message)
+        })
+    },
+  },
+  created() {
+    this.getTransactions()
+  },
+}
+</script>

admin/src/components/EditCreationFormular.spec.js

@@ -0,0 +1,256 @@
+import { mount } from '@vue/test-utils'
+import EditCreationFormular from './EditCreationFormular.vue'
+
+const localVue = global.localVue
+
+const apolloMutateMock = jest.fn().mockResolvedValue({
+  data: {
+    updatePendingCreation: {
+      creation: [0, 0, 0],
+      date: new Date(),
+      memo: 'qwertzuiopasdfghjkl',
+      moderator: 0,
+    },
+  },
+})
+
+const stateCommitMock = jest.fn()
+const toastedErrorMock = jest.fn()
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $moment: jest.fn(() => {
+    return {
+      format: jest.fn((m) => m),
+      subtract: jest.fn(() => {
+        return {
+          format: jest.fn((m) => m),
+        }
+      }),
+    }
+  }),
+  $apollo: {
+    mutate: apolloMutateMock,
+  },
+  $store: {
+    state: {
+      moderator: {
+        id: 0,
+        name: 'test moderator',
+      },
+    },
+    commit: stateCommitMock,
+  },
+  $toasted: {
+    error: toastedErrorMock,
+  },
+}
+
+const propsData = {
+  creation: [200, 400, 600],
+  creationUserData: {
+    memo: 'Test schöpfung 1',
+    amount: 100,
+    date: '2021-12-01',
+  },
+}
+
+describe('EditCreationFormular', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(EditCreationFormular, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.component-edit-creation-formular', () => {
+      expect(wrapper.find('.component-edit-creation-formular').exists()).toBeTruthy()
+    })
+
+    describe('radio buttons to select month', () => {
+      it('has three radio buttons', () => {
+        expect(wrapper.findAll('input[type="radio"]').length).toBe(3)
+      })
+
+      describe('with single creation', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper.setProps({ creation: [200, 400, 600] })
+          await wrapper.setData({ rangeMin: 180 })
+          await wrapper.setData({ text: 'Test create coins' })
+          await wrapper.setData({ value: 90 })
+        })
+
+        describe('first radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(0).setChecked()
+          })
+
+          it('sets rangeMin to 0', () => {
+            expect(wrapper.vm.rangeMin).toBe(0)
+          })
+
+          it('sets rangeMax to 200', () => {
+            expect(wrapper.vm.rangeMax).toBe(200)
+          })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends ... to apollo', () => {
+              expect(apolloMutateMock).toBeCalledWith(
+                expect.objectContaining({
+                  variables: {
+                    amount: 90,
+                    creationDate: 'YYYY-MM-01',
+                    email: undefined,
+                    id: undefined,
+                    memo: 'Test create coins',
+                    moderator: 0,
+                  },
+                }),
+              )
+            })
+
+            describe('sendForm with error', () => {
+              beforeEach(async () => {
+                jest.clearAllMocks()
+                apolloMutateMock.mockRejectedValue({
+                  message: 'Ouch!',
+                })
+                wrapper = Wrapper()
+                await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+                await wrapper.setData({ text: 'Test create coins' })
+                await wrapper.setData({ value: 90 })
+                await wrapper.findAll('input[type="radio"]').at(0).setChecked()
+                await wrapper.setData({ rangeMin: 100 })
+                await wrapper.find('.test-submit').trigger('click')
+              })
+
+              it('toast error message', () => {
+                expect(toastedErrorMock).toBeCalledWith('Ouch!')
+              })
+            })
+          })
+        })
+
+        describe('second radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(1).setChecked()
+          })
+
+          it('sets rangeMin to 0', () => {
+            expect(wrapper.vm.rangeMin).toBe(0)
+          })
+
+          it('sets rangeMax to 400', () => {
+            expect(wrapper.vm.rangeMax).toBe(400)
+          })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends ... to apollo', () => {
+              expect(apolloMutateMock).toBeCalledWith(
+                expect.objectContaining({
+                  variables: {
+                    amount: 90,
+                    creationDate: 'YYYY-MM-01',
+                    email: undefined,
+                    id: undefined,
+                    memo: 'Test create coins',
+                    moderator: 0,
+                  },
+                }),
+              )
+            })
+
+            describe('sendForm with error', () => {
+              beforeEach(async () => {
+                jest.clearAllMocks()
+                apolloMutateMock.mockRejectedValue({
+                  message: 'Ouch!',
+                })
+                wrapper = Wrapper()
+                await wrapper.setProps({ creation: [200, 400, 600] })
+                await wrapper.setData({ text: 'Test create coins' })
+                await wrapper.setData({ value: 100 })
+                await wrapper.findAll('input[type="radio"]').at(1).setChecked()
+                await wrapper.setData({ rangeMin: 180 })
+                await wrapper.find('.test-submit').trigger('click')
+              })
+
+              it('toast error message', () => {
+                expect(toastedErrorMock).toBeCalledWith('Ouch!')
+              })
+            })
+          })
+        })
+
+        describe('third radio button', () => {
+          beforeEach(async () => {
+            await wrapper.setData({ rangeMin: 180 })
+            await wrapper.findAll('input[type="radio"]').at(2).setChecked()
+          })
+
+          it('sets rangeMin to 180', () => {
+            expect(wrapper.vm.rangeMin).toBe(180)
+          })
+
+          it('sets rangeMax to 700', () => {
+            expect(wrapper.vm.rangeMax).toBe(700)
+          })
+
+          describe('sendForm with success', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends ... to apollo', () => {
+              expect(apolloMutateMock).toBeCalledWith(
+                expect.objectContaining({
+                  variables: {
+                    amount: 90,
+                    creationDate: 'YYYY-MM-DD',
+                    email: undefined,
+                    id: undefined,
+                    memo: 'Test create coins',
+                    moderator: 0,
+                  },
+                }),
+              )
+            })
+          })
+
+          describe('sendForm with error', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              apolloMutateMock.mockRejectedValue({
+                message: 'Ouch!',
+              })
+              wrapper = Wrapper()
+              await wrapper.setProps({ creation: [200, 400, 600] })
+              await wrapper.setData({ text: 'Test create coins' })
+              await wrapper.setData({ value: 90 })
+              await wrapper.findAll('input[type="radio"]').at(2).setChecked()
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('toast error message', () => {
+              expect(toastedErrorMock).toBeCalledWith('Ouch!')
+            })
+          })
+        })
+      })
+    })
+  })
+})

admin/src/components/EditCreationFormular.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="component-edit-creation-formular">
+    <div class="shadow p-3 mb-5 bg-white rounded">
+      <b-form ref="updateCreationForm">
+        <b-row class="m-4">
+          <label>{{ $t('creation_form.select_month') }}</label>
+          <b-col class="text-left">
+            <b-form-radio
+              id="beforeLastMonth"
+              v-model="radioSelected"
+              :value="beforeLastMonth"
+              :disabled="selectedOpenCreationAmount[0] === 0"
+              size="lg"
+              @change="updateRadioSelected(beforeLastMonth, 0, selectedOpenCreationAmount[0])"
+            >
+              <label for="beforeLastMonth">
+                {{ beforeLastMonth.short }}
+                {{
+                  selectedOpenCreationAmount[0] != null
+                    ? selectedOpenCreationAmount[0] + ' GDD'
+                    : ''
+                }}
+              </label>
+            </b-form-radio>
+          </b-col>
+          <b-col>
+            <b-form-radio
+              id="lastMonth"
+              v-model="radioSelected"
+              :value="lastMonth"
+              :disabled="selectedOpenCreationAmount[1] === 0"
+              size="lg"
+              @change="updateRadioSelected(lastMonth, 1, selectedOpenCreationAmount[1])"
+            >
+              <label for="lastMonth">
+                {{ lastMonth.short }}
+                {{
+                  selectedOpenCreationAmount[1] != null
+                    ? selectedOpenCreationAmount[1] + ' GDD'
+                    : ''
+                }}
+              </label>
+            </b-form-radio>
+          </b-col>
+          <b-col class="text-right">
+            <b-form-radio
+              id="currentMonth"
+              v-model="radioSelected"
+              :value="currentMonth"
+              :disabled="selectedOpenCreationAmount[2] === 0"
+              size="lg"
+              @change="updateRadioSelected(currentMonth, 2, selectedOpenCreationAmount[2])"
+            >
+              <label for="currentMonth">
+                {{ currentMonth.short }}
+                {{
+                  selectedOpenCreationAmount[2] != null
+                    ? selectedOpenCreationAmount[2] + ' GDD'
+                    : ''
+                }}
+              </label>
+            </b-form-radio>
+          </b-col>
+        </b-row>
+
+        <b-row class="m-4">
+          <label>{{ $t('creation_form.select_value') }}</label>
+          <div>
+            <b-input-group prepend="GDD" append=".00">
+              <b-form-input
+                type="number"
+                v-model="value"
+                :min="rangeMin"
+                :max="rangeMax"
+              ></b-form-input>
+            </b-input-group>
+
+            <b-input-group prepend="0" :append="String(rangeMax)" class="mt-3">
+              <b-form-input
+                type="range"
+                v-model="value"
+                :min="rangeMin"
+                :max="rangeMax"
+                step="10"
+              ></b-form-input>
+            </b-input-group>
+          </div>
+        </b-row>
+        <b-row class="m-4">
+          <label>{{ $t('creation_form.enter_text') }}</label>
+          <div>
+            <b-form-textarea
+              id="textarea-state"
+              v-model="text"
+              :state="text.length >= 10"
+              placeholder="Mindestens 10 Zeichen eingeben"
+              rows="3"
+            ></b-form-textarea>
+          </div>
+        </b-row>
+        <b-row class="m-4">
+          <b-col class="text-center">
+            <b-button type="reset" variant="danger" @click="$refs.updateCreationForm.reset()">
+              {{ $t('creation_form.reset') }}
+            </b-button>
+          </b-col>
+          <b-col class="text-center">
+            <div class="text-right">
+              <b-button
+                type="button"
+                variant="success"
+                class="test-submit"
+                @click="submitCreation"
+                :disabled="radioSelected === '' || value <= 0 || text.length < 10"
+              >
+                {{ $t('creation_form.update_creation') }}
+              </b-button>
+            </div>
+          </b-col>
+        </b-row>
+      </b-form>
+    </div>
+  </div>
+</template>
+<script>
+import { updatePendingCreation } from '../graphql/updatePendingCreation'
+export default {
+  name: 'EditCreationFormular',
+  props: {
+    item: {
+      type: Object,
+      required: false,
+      default() {
+        return {}
+      },
+    },
+    row: {
+      type: Object,
+      required: false,
+      default() {
+        return {}
+      },
+    },
+    creationUserData: {
+      type: Object,
+      required: false,
+      default() {
+        return {}
+      },
+    },
+    creation: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      radioSelected: '',
+      text: !this.creationUserData.memo ? '' : this.creationUserData.memo,
+      value: !this.creationUserData.amount ? 0 : this.creationUserData.amount,
+      rangeMin: 0,
+      rangeMax: 1000,
+      currentMonth: {
+        short: this.$moment().format('MMMM'),
+        long: this.$moment().format('YYYY-MM-DD'),
+      },
+      lastMonth: {
+        short: this.$moment().subtract(1, 'month').format('MMMM'),
+        long: this.$moment().subtract(1, 'month').format('YYYY-MM') + '-01',
+      },
+      beforeLastMonth: {
+        short: this.$moment().subtract(2, 'month').format('MMMM'),
+        long: this.$moment().subtract(2, 'month').format('YYYY-MM') + '-01',
+      },
+      submitObj: null,
+      isdisabled: true,
+      createdIndex: null,
+      selectedOpenCreationAmount: {},
+    }
+  },
+
+  methods: {
+    updateRadioSelected(name, index, openCreation) {
+      this.createdIndex = index
+      this.rangeMin = 0
+      this.rangeMax = this.creation[index]
+    },
+    submitCreation() {
+      this.submitObj = {
+        id: this.item.id,
+        email: this.item.email,
+        creationDate: this.radioSelected.long,
+        amount: Number(this.value),
+        memo: this.text,
+        moderator: Number(this.$store.state.moderator.id),
+      }
+
+      // hinweis das eine ein einzelne Schöpfung abgesendet wird an (email)
+      this.$apollo
+        .mutate({
+          mutation: updatePendingCreation,
+          variables: this.submitObj,
+        })
+        .then((result) => {
+          this.$emit('update-user-data', this.item, result.data.updatePendingCreation.creation)
+          this.$emit('update-creation-data', {
+            amount: Number(result.data.updatePendingCreation.amount),
+            date: result.data.updatePendingCreation.date,
+            memo: result.data.updatePendingCreation.memo,
+            moderator: Number(result.data.updatePendingCreation.moderator),
+            row: this.row,
+          })
+          this.$toasted.success(
+            this.$t('creation_form.toasted_update', {
+              value: this.value,
+              email: this.item.email,
+            }),
+          )
+          this.submitObj = null
+          this.createdIndex = null
+          // das creation Formular reseten
+          this.$refs.updateCreationForm.reset()
+          // Den geschöpften Wert auf o setzen
+          this.value = 0
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+          this.submitObj = null
+          // das creation Formular reseten
+          this.$refs.updateCreationForm.reset()
+          // Den geschöpften Wert auf o setzen
+          this.value = 0
+        })
+    },
+  },
+  created() {
+    if (this.creationUserData.date) {
+      switch (this.$moment(this.creationUserData.date).format('MMMM')) {
+        case this.currentMonth.short:
+          this.createdIndex = 2
+          this.radioSelected = this.currentMonth
+          break
+        case this.lastMonth.short:
+          this.createdIndex = 1
+          this.radioSelected = this.lastMonth
+          break
+        case this.beforeLastMonth.short:
+          this.createdIndex = 0
+          this.radioSelected = this.beforeLastMonth
+          break
+        default:
+          throw new Error('Something went wrong')
+      }
+      this.selectedOpenCreationAmount[this.createdIndex] =
+        this.creation[this.createdIndex] + this.creationUserData.amount
+      this.rangeMax = this.selectedOpenCreationAmount[this.createdIndex]
+    }
+  },
+}
+</script>

admin/src/components/NavBar.spec.js

@@ -0,0 +1,69 @@
+import { mount } from '@vue/test-utils'
+import NavBar from './NavBar.vue'
+
+const localVue = global.localVue
+
+const storeDispatchMock = jest.fn()
+const routerPushMock = jest.fn()
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $store: {
+    state: {
+      openCreations: 1,
+      token: 'valid-token',
+    },
+    dispatch: storeDispatchMock,
+  },
+  $router: {
+    push: routerPushMock,
+  },
+}
+
+describe('NavBar', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(NavBar, { mocks, localVue })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.component-nabvar', () => {
+      expect(wrapper.find('.component-nabvar').exists()).toBeTruthy()
+    })
+  })
+
+  describe('wallet', () => {
+    const assignLocationSpy = jest.fn()
+    beforeEach(async () => {
+      await wrapper.findAll('a').at(5).trigger('click')
+    })
+
+    it.skip('changes widnow location to wallet', () => {
+      expect(assignLocationSpy).toBeCalledWith('valid-token')
+    })
+
+    it('dispatches logout to store', () => {
+      expect(storeDispatchMock).toBeCalledWith('logout')
+    })
+  })
+
+  describe('logout', () => {
+    // const assignLocationSpy = jest.fn()
+    beforeEach(async () => {
+      await wrapper.findAll('a').at(6).trigger('click')
+    })
+
+    it('redirects to /logout', () => {
+      expect(routerPushMock).toBeCalledWith('/logout')
+    })
+
+    it('dispatches logout to store', () => {
+      expect(storeDispatchMock).toBeCalledWith('logout')
+    })
+  })
+})

admin/src/components/NavBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="component-nabvar">
+    <b-navbar toggleable="md" type="dark" variant="success" class="p-3">
+      <b-navbar-brand to="/">
+        <img src="img/brand/green.png" class="navbar-brand-img" alt="..." />
+      </b-navbar-brand>
+
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+      <b-collapse id="nav-collapse" is-nav>
+        <b-navbar-nav>
+          <b-nav-item to="/">{{ $t('navbar.overview') }}</b-nav-item>
+          <b-nav-item to="/user">{{ $t('navbar.user_search') }}</b-nav-item>
+          <b-nav-item to="/creation">{{ $t('navbar.multi_creation') }}</b-nav-item>
+          <b-nav-item
+            v-show="$store.state.openCreations > 0"
+            class="bg-color-creation p-1"
+            to="/creation-confirm"
+          >
+            {{ $store.state.openCreations }} {{ $t('navbar.open_creation') }}
+          </b-nav-item>
+          <b-nav-item @click="wallet">{{ $t('navbar.wallet') }}</b-nav-item>
+          <b-nav-item @click="logout">{{ $t('navbar.logout') }}</b-nav-item>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
+  </div>
+</template>
+<script>
+import CONFIG from '../config'
+
+export default {
+  name: 'navbar',
+  methods: {
+    logout() {
+      this.$store.dispatch('logout')
+      this.$router.push('/logout')
+    },
+    wallet() {
+      window.location = CONFIG.WALLET_AUTH_URL.replace('$1', this.$store.state.token)
+      this.$store.dispatch('logout') // logout without redirect
+    },
+  },
+}
+</script>
+<style>
+.navbar-brand-img {
+  height: 2rem;
+  padding-left: 10px;
+}
+.bg-color-creation {
+  background-color: #cf1010dc;
+}
+</style>

admin/src/components/NotFoundPage.spec.js

@@ -0,0 +1,22 @@
+import { mount } from '@vue/test-utils'
+import NotFoundPage from './NotFoundPage'
+
+const localVue = global.localVue
+
+describe('NotFoundPage', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(NotFoundPage, { localVue })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a svg', () => {
+      expect(wrapper.find('svg').exists()).toBeTruthy()
+    })
+  })
+})

admin/src/components/RowDetails.vue

@@ -0,0 +1,27 @@
+<template>
+  <b-card class="shadow-lg pl-3 pr-3 mb-5 bg-white rounded">
+    <b-row class="mb-2">
+      <b-col></b-col>
+    </b-row>
+    <slot :name="slotName" />
+    <b-button size="sm" @click="$emit('row-toogle-details', row, index)">
+      <b-icon
+        :icon="type === 'PageCreationConfirm' ? 'x' : 'eye-slash-fill'"
+        aria-label="Help"
+      ></b-icon>
+      {{ $t('hide_details') }} {{ row.item.firstName }} {{ row.item.lastName }}
+    </b-button>
+  </b-card>
+</template>
+
+<script>
+export default {
+  name: 'RowDetails',
+  props: {
+    row: { required: true, type: Object },
+    slotName: { requried: true, type: String },
+    type: { requried: true, type: String },
+    index: { requried: true, type: Number },
+  },
+}
+</script>

admin/src/components/UserTable.spec.js

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils'
+import UserTable from './UserTable.vue'
+
+const localVue = global.localVue
+
+describe('UserTable', () => {
+  let wrapper
+
+  const propsData = {
+    type: 'Type',
+    itemsUser: [],
+    fieldsTable: [],
+    creation: [],
+  }
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const Wrapper = () => {
+    return mount(UserTable, { localVue, propsData, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.component-user-table', () => {
+      expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
+    })
+  })
+})

admin/src/components/UserTable.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="component-user-table">
+    <div v-show="overlay" id="overlay" class="">
+      <b-jumbotron class="bg-light p-4">
+        <template #header>{{ overlayText.header }}</template>
+
+        <template #lead>
+          {{ overlayText.text1 }}
+        </template>
+
+        <hr class="my-4" />
+
+        <p>
+          {{ overlayText.text2 }}
+        </p>
+
+        <b-button size="md" variant="danger" class="m-3" @click="overlayCancel">
+          {{ overlayText.button_cancel }}
+        </b-button>
+        <b-button
+          size="md"
+          variant="success"
+          class="m-3 text-right"
+          @click="overlayOK(overlayBookmarkType, overlayItem)"
+        >
+          {{ overlayText.button_ok }}
+        </b-button>
+      </b-jumbotron>
+    </div>
+    <b-table-lite
+      :items="itemsUser"
+      :fields="fieldsTable"
+      :filter="criteria"
+      caption-top
+      striped
+      hover
+      stacked="md"
+    >
+      <template #cell(creation)="data">
+        <div v-html="data.value"></div>
+      </template>
+
+      <template #cell(edit_creation)="row">
+        <b-button variant="info" size="md" @click="rowToogleDetails(row, 0)" class="mr-2">
+          <b-icon :icon="row.detailsShowing ? 'x' : 'pencil-square'" aria-label="Help"></b-icon>
+        </b-button>
+      </template>
+
+      <template #cell(show_details)="row">
+        <b-button variant="info" size="md" @click="rowToogleDetails(row, 0)" class="mr-2">
+          <b-icon :icon="row.detailsShowing ? 'eye-slash-fill' : 'eye-fill'"></b-icon>
+        </b-button>
+      </template>
+
+      <template #cell(confirm_mail)="row">
+        <b-button
+          :variant="row.item.emailChecked ? 'success' : 'danger'"
+          size="md"
+          @click="rowToogleDetails(row, 1)"
+          class="mr-2"
+        >
+          <b-icon
+            :icon="row.item.emailChecked ? 'envelope-open' : 'envelope'"
+            aria-label="Help"
+          ></b-icon>
+        </b-button>
+      </template>
+
+      <template #cell(transactions_list)="row">
+        <b-button variant="warning" size="md" @click="rowToogleDetails(row, 2)" class="mr-2">
+          <b-icon icon="list"></b-icon>
+        </b-button>
+      </template>
+
+      <template #row-details="row">
+        <row-details
+          :row="row"
+          :type="type"
+          :slotName="slotName"
+          :index="slotIndex"
+          @row-toogle-details="rowToogleDetails"
+        >
+          <template #show-creation>
+            <div>
+              <creation-formular
+                v-if="type === 'PageUserSearch'"
+                type="singleCreation"
+                :pagetype="type"
+                :creation="row.item.creation"
+                :item="row.item"
+                :creationUserData="creationUserData"
+                @update-creation-data="updateCreationData"
+                @update-user-data="updateUserData"
+              />
+              <edit-creation-formular
+                v-else
+                type="singleCreation"
+                :pagetype="type"
+                :creation="row.item.creation"
+                :item="row.item"
+                :row="row"
+                :creationUserData="creationUserData"
+                @update-creation-data="updateCreationData"
+                @update-user-data="updateUserData"
+              />
+            </div>
+          </template>
+          <template #show-register-mail>
+            <confirm-register-mail-formular
+              :email="row.item.email"
+              :dateLastSend="$moment().subtract(1, 'month').format('dddd, DD.MMMM.YYYY HH:mm'),"
+            />
+          </template>
+          <template #show-transaction-list>
+            <creation-transaction-list-formular :userId="row.item.userId" />
+          </template>
+        </row-details>
+      </template>
+      <template #cell(bookmark)="row">
+        <b-button
+          variant="warning"
+          v-show="type === 'UserListSearch'"
+          size="md"
+          @click="bookmarkPush(row.item)"
+          class="mr-2"
+        >
+          <b-icon icon="plus" variant="success"></b-icon>
+        </b-button>
+        <b-button
+          variant="danger"
+          v-show="type === 'UserListMassCreation' || type === 'PageCreationConfirm'"
+          size="md"
+          @click="overlayShow('remove', row.item)"
+          class="mr-2"
+        >
+          <b-icon icon="x" variant="light"></b-icon>
+        </b-button>
+      </template>
+
+      <template #cell(confirm)="row">
+        <b-button
+          variant="success"
+          v-show="type === 'PageCreationConfirm'"
+          size="md"
+          @click="overlayShow('confirm', row.item)"
+          class="mr-2"
+        >
+          <b-icon icon="check" scale="2" variant=""></b-icon>
+        </b-button>
+      </template>
+    </b-table-lite>
+  </div>
+</template>
+
+<script>
+import CreationFormular from '../components/CreationFormular.vue'
+import EditCreationFormular from '../components/EditCreationFormular.vue'
+import ConfirmRegisterMailFormular from '../components/ConfirmRegisterMailFormular.vue'
+import CreationTransactionListFormular from '../components/CreationTransactionListFormular.vue'
+import RowDetails from '../components/RowDetails.vue'
+
+import { confirmPendingCreation } from '../graphql/confirmPendingCreation'
+
+const slotNames = ['show-creation', 'show-register-mail', 'show-transaction-list']
+
+export default {
+  name: 'UserTable',
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+    itemsUser: {
+      type: Array,
+      required: true,
+    },
+    fieldsTable: {
+      type: Array,
+      required: true,
+    },
+    criteria: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    creation: {
+      type: Array,
+      required: false,
+    },
+  },
+  components: {
+    CreationFormular,
+    EditCreationFormular,
+    ConfirmRegisterMailFormular,
+    CreationTransactionListFormular,
+    RowDetails,
+  },
+  data() {
+    return {
+      showCreationFormular: null,
+      showConfirmRegisterMailFormular: null,
+      showCreationTransactionListFormular: null,
+      creationUserData: {},
+      overlay: false,
+      overlayBookmarkType: '',
+      overlayItem: [],
+      overlayText: [
+        {
+          header: '-',
+          text1: '--',
+          text2: '---',
+          button_ok: 'OK',
+          button_cancel: 'Cancel',
+        },
+      ],
+      slotIndex: 0,
+      openRow: null,
+    }
+  },
+  methods: {
+    rowToogleDetails(row, index) {
+      if (this.openRow) {
+        if (this.openRow.index === row.index) {
+          if (index === this.slotIndex) {
+            row.toggleDetails()
+            this.openRow = null
+          } else {
+            this.slotIndex = index
+          }
+        } else {
+          this.openRow.toggleDetails()
+          row.toggleDetails()
+          this.slotIndex = index
+          this.openRow = row
+        }
+      } else {
+        row.toggleDetails()
+        this.slotIndex = index
+        this.openRow = row
+        if (this.type === 'PageCreationConfirm') {
+          this.creationUserData = row.item
+        }
+      }
+    },
+    overlayShow(bookmarkType, item) {
+      this.overlay = true
+      this.overlayBookmarkType = bookmarkType
+      this.overlayItem = item
+
+      if (bookmarkType === 'remove') {
+        this.overlayText.header = this.$t('overlay.remove.title')
+        this.overlayText.text1 = this.$t('overlay.remove.text')
+        this.overlayText.text2 = this.$t('overlay.remove.question')
+        this.overlayText.button_ok = this.$t('overlay.remove.yes')
+        this.overlayText.button_cancel = this.$t('overlay.remove.no')
+      }
+      if (bookmarkType === 'confirm') {
+        this.overlayText.header = this.$t('overlay.confirm.title')
+        this.overlayText.text1 = this.$t('overlay.confirm.text')
+        this.overlayText.text2 = this.$t('overlay.confirm.question')
+        this.overlayText.button_ok = this.$t('overlay.confirm.yes')
+        this.overlayText.button_cancel = this.$t('overlay.confirm.no')
+      }
+    },
+    overlayOK(bookmarkType, item) {
+      if (bookmarkType === 'remove') {
+        this.bookmarkRemove(item)
+      }
+      if (bookmarkType === 'confirm') {
+        this.bookmarkConfirm(item)
+      }
+      this.overlay = false
+    },
+    overlayCancel() {
+      this.overlay = false
+    },
+    bookmarkPush(item) {
+      this.$emit('update-item', item, 'push')
+    },
+    bookmarkRemove(item) {
+      if (this.type === 'UserListMassCreation') {
+        this.$emit('update-item', item, 'remove')
+      }
+
+      if (this.type === 'PageCreationConfirm') {
+        this.$emit('remove-confirm-result', item, 'remove')
+      }
+    },
+    bookmarkConfirm(item) {
+      this.$apollo
+        .mutate({
+          mutation: confirmPendingCreation,
+          variables: {
+            id: item.id,
+          },
+        })
+        .then(() => {
+          this.$emit('remove-confirm-result', item, 'confirmed')
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+    },
+    updateCreationData(data) {
+      this.creationUserData.amount = data.amount
+      this.creationUserData.date = data.date
+      this.creationUserData.memo = data.memo
+      this.creationUserData.moderator = data.moderator
+
+      data.row.toggleDetails()
+    },
+    updateUserData(rowItem, newCreation) {
+      rowItem.creation = newCreation
+    },
+  },
+  computed: {
+    slotName() {
+      return slotNames[this.slotIndex]
+    },
+  },
+}
+</script>
+<style>
+#overlay {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding-left: 5%;
+  background-color: rgba(12, 11, 11, 0.781);
+  z-index: 1000000;
+  cursor: pointer;
+}
+</style>

admin/src/config/index.js

@@ -0,0 +1,39 @@
+// ATTENTION: DO NOT PUT ANY SECRETS IN HERE (or the .env).
+//            The whole contents is exposed to the client
+
+// Load Package Details for some default values
+const pkg = require('../../package')
+
+const version = {
+  APP_VERSION: pkg.version,
+  BUILD_COMMIT: process.env.BUILD_COMMIT || null,
+  // self reference of `version.BUILD_COMMIT` is not possible at this point, hence the duplicate code
+  BUILD_COMMIT_SHORT: (process.env.BUILD_COMMIT || '0000000').substr(0, 7),
+}
+
+const environment = {
+  NODE_ENV: process.env.NODE_ENV,
+  DEBUG: process.env.NODE_ENV !== 'production' || false,
+  PRODUCTION: process.env.NODE_ENV === 'production' || false,
+}
+
+const endpoints = {
+  GRAPHQL_URI: process.env.GRAPHQL_URI || 'http://localhost:4000/graphql',
+  WALLET_AUTH_URL: process.env.WALLET_AUTH_URL || 'http://localhost/vue/authenticate?token=$1',
+}
+
+const debug = {
+  DEBUG_DISABLE_AUTH: process.env.DEBUG_DISABLE_AUTH === 'true' || false,
+}
+
+const options = {}
+
+const CONFIG = {
+  ...version,
+  ...environment,
+  ...endpoints,
+  ...options,
+  ...debug,
+}
+
+export default CONFIG

admin/src/graphql/confirmPendingCreation.js

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag'
+
+export const confirmPendingCreation = gql`
+  mutation ($id: Float!) {
+    confirmPendingCreation(id: $id)
+  }
+`

admin/src/graphql/createPendingCreation.js

@@ -0,0 +1,19 @@
+import gql from 'graphql-tag'
+
+export const createPendingCreation = gql`
+  mutation (
+    $email: String!
+    $amount: Float!
+    $memo: String!
+    $creationDate: String!
+    $moderator: Int!
+  ) {
+    createPendingCreation(
+      email: $email
+      amount: $amount
+      memo: $memo
+      creationDate: $creationDate
+      moderator: $moderator
+    )
+  }
+`

admin/src/graphql/deletePendingCreation.js

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag'
+
+export const deletePendingCreation = gql`
+  mutation ($id: Float!) {
+    deletePendingCreation(id: $id)
+  }
+`

admin/src/graphql/getPendingCreations.js

@@ -0,0 +1,17 @@
+import gql from 'graphql-tag'
+
+export const getPendingCreations = gql`
+  query {
+    getPendingCreations {
+      id
+      firstName
+      lastName
+      email
+      amount
+      memo
+      date
+      moderator
+      creation
+    }
+  }
+`

admin/src/graphql/searchUsers.js

@@ -0,0 +1,14 @@
+import gql from 'graphql-tag'
+
+export const searchUsers = gql`
+  query ($searchText: String!) {
+    searchUsers(searchText: $searchText) {
+      userId
+      firstName
+      lastName
+      email
+      creation
+      emailChecked
+    }
+  }
+`

admin/src/graphql/sendActivationEmail.js

@@ -0,0 +1,7 @@
+import gql from 'graphql-tag'
+
+export const sendActivationEmail = gql`
+  mutation ($email: String!) {
+    sendActivationEmail(email: $email)
+  }
+`

admin/src/graphql/transactionList.js

@@ -0,0 +1,44 @@
+import gql from 'graphql-tag'
+
+export const transactionList = gql`
+  query (
+    $currentPage: Int = 1
+    $pageSize: Int = 25
+    $order: Order = DESC
+    $onlyCreations: Boolean = false
+    $userId: Int = null
+  ) {
+    transactionList(
+      currentPage: $currentPage
+      pageSize: $pageSize
+      order: $order
+      onlyCreations: $onlyCreations
+      userId: $userId
+    ) {
+      gdtSum
+      count
+      balance
+      decay
+      decayDate
+      transactions {
+        type
+        balance
+        decayStart
+        decayEnd
+        decayDuration
+        memo
+        transactionId
+        name
+        email
+        date
+        decay {
+          balance
+          decayStart
+          decayEnd
+          decayDuration
+          decayStartBlock
+        }
+      }
+    }
+  }
+`

admin/src/graphql/updatePendingCreation.js

@@ -0,0 +1,27 @@
+import gql from 'graphql-tag'
+
+export const updatePendingCreation = gql`
+  mutation (
+    $id: Int!
+    $email: String!
+    $amount: Float!
+    $memo: String!
+    $creationDate: String!
+    $moderator: Int!
+  ) {
+    updatePendingCreation(
+      id: $id
+      email: $email
+      amount: $amount
+      memo: $memo
+      creationDate: $creationDate
+      moderator: $moderator
+    ) {
+      amount
+      date
+      memo
+      creation
+      moderator
+    }
+  }
+`

admin/src/graphql/verifyLogin.js

@@ -0,0 +1,12 @@
+import gql from 'graphql-tag'
+
+export const verifyLogin = gql`
+  query {
+    verifyLogin {
+      firstName
+      lastName
+      isAdmin
+      id
+    }
+  }
+`

admin/src/i18n.js

@@ -0,0 +1,89 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+const loadLocaleMessages = () => {
+  const locales = require.context('./locales/', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach((key) => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+const numberFormats = {
+  en: {
+    decimal: {
+      style: 'decimal',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    },
+    ungroupedDecimal: {
+      style: 'decimal',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+      useGrouping: false,
+    },
+  },
+  de: {
+    decimal: {
+      style: 'decimal',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    },
+    ungroupedDecimal: {
+      style: 'decimal',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+      useGrouping: false,
+    },
+  },
+}
+
+const dateTimeFormats = {
+  en: {
+    short: {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+    },
+    long: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      weekday: 'short',
+      hour: 'numeric',
+      minute: 'numeric',
+    },
+  },
+  de: {
+    short: {
+      day: 'numeric',
+      month: 'numeric',
+      year: 'numeric',
+    },
+    long: {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+      weekday: 'short',
+      hour: 'numeric',
+      minute: 'numeric',
+    },
+  },
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: loadLocaleMessages(),
+  numberFormats,
+  dateTimeFormats,
+})
+
+export default i18n

admin/src/i18n.test.js

@@ -0,0 +1,30 @@
+import i18n from './i18n'
+import VueI18n from 'vue-i18n'
+
+jest.mock('vue-i18n')
+
+describe('i18n', () => {
+  it('calls i18n with locale en', () => {
+    expect(VueI18n).toBeCalledWith(
+      expect.objectContaining({
+        locale: 'en',
+      }),
+    )
+  })
+
+  it('calls i18n with fallback locale en', () => {
+    expect(VueI18n).toBeCalledWith(
+      expect.objectContaining({
+        fallbackLocale: 'en',
+      }),
+    )
+  })
+
+  it('has a  _t function', () => {
+    expect(i18n).toEqual(
+      expect.objectContaining({
+        _t: expect.anything(),
+      }),
+    )
+  })
+})

admin/src/layouts/defaultLayout.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <nav-bar class="wrapper-nav" />
+    <router-view class="wrapper p-3"></router-view>
+    <content-footer />
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar.vue'
+import ContentFooter from '@/components/ContentFooter.vue'
+export default {
+  name: 'defaultLayout',
+  components: {
+    NavBar,
+    ContentFooter,
+  },
+}
+</script>

admin/src/locales/de.json

@@ -0,0 +1,65 @@
+{
+  "bookmark": "bookmark",
+  "confirmed": "bestätigt",
+  "creation_form": {
+    "creation_for": "Schöpfung für ",
+    "enter_text": "Text eintragen",
+    "form": "Schöpfungsformular",
+    "min_characters": "Mindestens 10 Zeichen eingeben",
+    "reset": "Zurücksetzen",
+    "select_month": "Monat auswählen",
+    "select_value": "Betrag auswählen",
+    "submit_creation": "Schöpfung einreichen",
+    "toasted": "Offene Schöpfung ({value} GDD) für {email} wurde gespeichert und liegt zur Bestätigung bereit",
+    "toasted_update": "`Offene Schöpfung {value} GDD) für {email} wurde geändert und liegt zur Bestätigung bereit",
+    "update_creation": "Schöpfung aktualisieren"
+  },
+  "details": "Details",
+  "e_mail": "E-Mail",
+  "firstname": "Vorname",
+  "gradido_admin_footer": "Gradido Akademie Adminkonsole",
+  "hide_details": "Details verbergen von",
+  "lastname": "Nachname",
+  "multiple_creation_text": "Bitte wähle ein oder mehrere Mitglieder aus für die du Schöpfen möchtest.",
+  "navbar": {
+    "logout": "Abmelden",
+    "multi_creation": "Mehrfachschöpfung",
+    "open_creation": "Offene Schöpfungen",
+    "overview": "Übersicht",
+    "user_search": "Nutzersuche",
+    "wallet": "Wallet"
+  },
+  "not_open_creations": "Keine offenen Schöpfungen",
+  "open_creation": "Offene Schöpfung",
+  "open_creations": "Offene Schöpfungen",
+  "overlay": {
+    "confirm": {
+      "no": "Nein, nicht speichern.",
+      "question": "Willst du diese vorgespeicherte Schöpfung wirklich vollziehen und entgültig speichern?",
+      "text": "Nach dem Speichern ist der Datensatz nicht mehr änderbar und kann auch nicht mehr gelöscht werden. Bitte überprüfe genau, dass alles stimmt.",
+      "title": "Schöpfung bestätigen!",
+      "yes": "Ja, Schöpfung bestätigen und speichern!"
+    },
+    "remove": {
+      "no": "Nein, nicht löschen.",
+      "question": "Willst du die vorgespeicherte Schöpfung wirklich löschen?",
+      "text": "Nach dem Löschen gibt es keine Möglichkeit mehr diesen Datensatz wiederherzustellen. Es wird aber der gesamte Vorgang in der Logdatei als Übersicht gespeichert.",
+      "title": "Achtung! Schöpfung löschen!",
+      "yes": "Ja, Schöpfung löschen!"
+    }
+  },
+  "remove": "Entfernen",
+  "transaction": "Transaktion",
+  "transactionlist": {
+    "title": "Alle geschöpften Transaktionen für den Nutzer"
+  },
+  "unregistered_emails": "Unregistrierte E-Mails",
+  "unregister_mail": {
+    "button": "Registrierungs-Email bestätigen, jetzt senden",
+    "error": "Fehler beim Senden des Bestätigungs-Links an den Benutzer: {message}",
+    "info": "Email bestätigen, wiederholt senden an:",
+    "success": "Erfolgreiches Senden des Bestätigungs-Links an die E-Mail des Nutzers! ({email})",
+    "text": " Die letzte Email wurde am <b>{date} Uhr</b> an das Mitglied ({mail}) gesendet."
+  },
+  "user_search": "Nutzer-Suche"
+}

admin/src/locales/en.json

@@ -0,0 +1,65 @@
+{
+  "bookmark": "Remember",
+  "confirmed": "confirmed",
+  "creation_form": {
+    "creation_for": "Creation for ",
+    "enter_text": "Enter text",
+    "form": "Creation form",
+    "min_characters": "Enter at least 10 characters",
+    "reset": "Reset",
+    "select_month": "Select month",
+    "select_value": "Select amount",
+    "submit_creation": "Submit creation",
+    "toasted": "Open creation ({value} GDD) for {email} has been saved and is ready for confirmation.",
+    "toasted_update": "Open creation {value} GDD) for {email} has been changed and is ready for confirmation.",
+    "update_creation": "Creation update"
+  },
+  "details": "Details",
+  "e_mail": "E-Mail",
+  "firstname": "Firstname",
+  "gradido_admin_footer": "Gradido Academy Admin Console",
+  "hide_details": "Hide details from",
+  "lastname": "Lastname",
+  "multiple_creation_text": "Please select one or more members for which you would like to perform creations.",
+  "navbar": {
+    "logout": "Logout",
+    "multi_creation": "Multiple creation",
+    "open_creation": "Open creations",
+    "overview": "Overview",
+    "user_search": "User search",
+    "wallet": "Wallet"
+  },
+  "not_open_creations": "No open creations",
+  "open_creation": "Open creation",
+  "open_creations": "Open creations",
+  "overlay": {
+    "confirm": {
+      "no": "No, do not save.",
+      "question": "Do you really want to carry out and finally save this pre-stored creation?",
+      "text": "After saving, the record can no longer be changed or deleted. Please check carefully that everything is correct.",
+      "title": "Confirm creation!",
+      "yes": "Yes, confirm and save creation!"
+    },
+    "remove": {
+      "no": "No, do not delete.",
+      "question": "Do you really want to delete the pre-stored creation?",
+      "text": "After deletion, there is no possibility to restore this data record. However, the entire process is saved in the log file as an overview.",
+      "title": "Attention! Delete creation!",
+      "yes": "Yes, delete creation!"
+    }
+  },
+  "remove": "Remove",
+  "transaction": "Transaction",
+  "transactionlist": {
+    "title": "All creation-transactions for the user"
+  },
+  "unregistered_emails": "Unregistered e-mails",
+  "unregister_mail": {
+    "button": "Confirm registration email, send now",
+    "error": "Error sending the confirmation link to the user: {message}",
+    "info": "Confirm email, send repeatedly to:",
+    "success": "Successfully send the confirmation link to the user's email! ({email})",
+    "text": " The last email was sent to the member ({mail}) on <b>{date} clock</b>."
+  },
+  "user_search": "User search"
+}

admin/src/locales/index.js

@@ -0,0 +1,16 @@
+const locales = [
+  {
+    name: 'English',
+    code: 'en',
+    iso: 'en-US',
+    enabled: true,
+  },
+  {
+    name: 'Deutsch',
+    code: 'de',
+    iso: 'de-DE',
+    enabled: true,
+  },
+]
+
+export default locales

admin/src/main.js

@@ -0,0 +1,54 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+// without this async calls are not working
+import 'regenerator-runtime'
+
+import store from './store/store'
+
+import router from './router/router'
+import addNavigationGuards from './router/guards'
+
+import i18n from './i18n'
+
+import VueApollo from 'vue-apollo'
+
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import moment from 'vue-moment'
+import Toasted from 'vue-toasted'
+
+import { apolloProvider } from './plugins/apolloProvider'
+
+Vue.use(BootstrapVue)
+
+Vue.use(IconsPlugin)
+
+Vue.use(moment)
+
+Vue.use(VueApollo)
+
+Vue.use(Toasted, {
+  position: 'top-center',
+  duration: 5000,
+  fullWidth: true,
+  action: {
+    text: 'x',
+    onClick: (e, toastObject) => {
+      toastObject.goAway(0)
+    },
+  },
+})
+
+addNavigationGuards(router, store, apolloProvider.defaultClient)
+
+new Vue({
+  moment,
+  router,
+  store,
+  i18n,
+  apolloProvider,
+  render: (h) => h(App),
+}).$mount('#app')

admin/src/main.test.js

@@ -0,0 +1,104 @@
+import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
+import './main'
+import CONFIG from './config'
+
+import Vue from 'vue'
+import VueApollo from 'vue-apollo'
+import i18n from './i18n'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import moment from 'vue-moment'
+import store from './store/store'
+import router from './router/router'
+
+jest.mock('vue')
+jest.mock('vue-apollo')
+jest.mock('vuex')
+jest.mock('vue-i18n')
+jest.mock('vue-moment')
+jest.mock('./store/store')
+jest.mock('./i18n')
+jest.mock('./router/router')
+
+jest.mock('apollo-boost', () => {
+  return {
+    __esModule: true,
+    ApolloClient: jest.fn(),
+    ApolloLink: jest.fn(() => {
+      return { concat: jest.fn() }
+    }),
+    InMemoryCache: jest.fn(),
+    HttpLink: jest.fn(),
+  }
+})
+
+jest.mock('bootstrap-vue', () => {
+  return {
+    __esModule: true,
+    BootstrapVue: jest.fn(),
+    IconsPlugin: jest.fn(() => {
+      return { concat: jest.fn() }
+    }),
+  }
+})
+
+describe('main', () => {
+  it('calls the HttpLink', () => {
+    expect(HttpLink).toBeCalledWith({ uri: CONFIG.GRAPHQL_URI })
+  })
+
+  it('calls the ApolloLink', () => {
+    expect(ApolloLink).toBeCalled()
+  })
+
+  it('calls the ApolloClient', () => {
+    expect(ApolloClient).toBeCalled()
+  })
+
+  it('calls the InMemoryCache', () => {
+    expect(InMemoryCache).toBeCalled()
+  })
+
+  it('calls the VueApollo', () => {
+    expect(VueApollo).toBeCalled()
+  })
+
+  it('calls Vue', () => {
+    expect(Vue).toBeCalled()
+  })
+
+  it('calls i18n', () => {
+    expect(Vue).toBeCalledWith(
+      expect.objectContaining({
+        i18n,
+      }),
+    )
+  })
+
+  it('calls BootstrapVue', () => {
+    expect(Vue.use).toBeCalledWith(BootstrapVue)
+  })
+
+  it('calls IconsPlugin', () => {
+    expect(Vue.use).toBeCalledWith(IconsPlugin)
+  })
+
+  it('calls Moment', () => {
+    expect(Vue.use).toBeCalledWith(moment)
+  })
+
+  it('creates a store', () => {
+    expect(Vue).toBeCalledWith(
+      expect.objectContaining({
+        store,
+      }),
+    )
+  })
+
+  it('creates a router', () => {
+    expect(Vue).toBeCalledWith(
+      expect.objectContaining({
+        router,
+      }),
+    )
+  })
+})

admin/src/pages/Creation.spec.js

@@ -0,0 +1,233 @@
+import { shallowMount } from '@vue/test-utils'
+import Creation from './Creation.vue'
+import Vue from 'vue'
+
+const localVue = global.localVue
+
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    searchUsers: [
+      {
+        id: 1,
+        firstName: 'Bibi',
+        lastName: 'Bloxberg',
+        email: 'bibi@bloxberg.de',
+        creation: [200, 400, 600],
+      },
+      {
+        id: 2,
+        firstName: 'Benjamin',
+        lastName: 'Blümchen',
+        email: 'benjamin@bluemchen.de',
+        creation: [800, 600, 400],
+      },
+    ],
+  },
+})
+
+const toastErrorMock = jest.fn()
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $apollo: {
+    query: apolloQueryMock,
+  },
+  $toasted: {
+    error: toastErrorMock,
+  },
+}
+
+describe('Creation', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return shallowMount(Creation, { localVue, mocks })
+  }
+
+  describe('shallowMount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.creation', () => {
+      expect(wrapper.find('div.creation').exists()).toBeTruthy()
+    })
+
+    describe('apollo returns user array', () => {
+      it('calls the searchUser query', () => {
+        expect(apolloQueryMock).toBeCalled()
+      })
+
+      it('sets the data of itemsList', () => {
+        expect(wrapper.vm.itemsList).toEqual([
+          {
+            id: 1,
+            firstName: 'Bibi',
+            lastName: 'Bloxberg',
+            email: 'bibi@bloxberg.de',
+            creation: [200, 400, 600],
+            showDetails: false,
+          },
+          {
+            id: 2,
+            firstName: 'Benjamin',
+            lastName: 'Blümchen',
+            email: 'benjamin@bluemchen.de',
+            creation: [800, 600, 400],
+            showDetails: false,
+          },
+        ])
+      })
+    })
+
+    describe('update item', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+      })
+
+      describe('push', () => {
+        beforeEach(() => {
+          wrapper.findComponent({ name: 'UserTable' }).vm.$emit(
+            'update-item',
+            {
+              id: 2,
+              firstName: 'Benjamin',
+              lastName: 'Blümchen',
+              email: 'benjamin@bluemchen.de',
+              creation: [800, 600, 400],
+              showDetails: false,
+            },
+            'push',
+          )
+        })
+
+        it('removes the pushed item from itemsList', () => {
+          expect(wrapper.vm.itemsList).toEqual([
+            {
+              id: 1,
+              firstName: 'Bibi',
+              lastName: 'Bloxberg',
+              email: 'bibi@bloxberg.de',
+              creation: [200, 400, 600],
+              showDetails: false,
+            },
+          ])
+        })
+
+        it('adds the pushed item to itemsMassCreation', () => {
+          expect(wrapper.vm.itemsMassCreation).toEqual([
+            {
+              id: 2,
+              firstName: 'Benjamin',
+              lastName: 'Blümchen',
+              email: 'benjamin@bluemchen.de',
+              creation: [800, 600, 400],
+              showDetails: false,
+            },
+          ])
+        })
+
+        describe('remove', () => {
+          beforeEach(() => {
+            wrapper.findComponent({ name: 'UserTable' }).vm.$emit(
+              'update-item',
+              {
+                id: 2,
+                firstName: 'Benjamin',
+                lastName: 'Blümchen',
+                email: 'benjamin@bluemchen.de',
+                creation: [800, 600, 400],
+                showDetails: false,
+              },
+              'remove',
+            )
+          })
+
+          it('removes the item from itemsMassCreation', () => {
+            expect(wrapper.vm.itemsMassCreation).toEqual([])
+          })
+
+          it('adds the item to itemsList', () => {
+            expect(wrapper.vm.itemsList).toEqual([
+              {
+                id: 1,
+                firstName: 'Bibi',
+                lastName: 'Bloxberg',
+                email: 'bibi@bloxberg.de',
+                creation: [200, 400, 600],
+                showDetails: false,
+              },
+              {
+                id: 2,
+                firstName: 'Benjamin',
+                lastName: 'Blümchen',
+                email: 'benjamin@bluemchen.de',
+                creation: [800, 600, 400],
+                showDetails: false,
+              },
+            ])
+          })
+        })
+      })
+
+      describe('error', () => {
+        const consoleErrorMock = jest.fn()
+        const warnHandler = Vue.config.warnHandler
+
+        beforeEach(() => {
+          Vue.config.warnHandler = (w) => {}
+          // eslint-disable-next-line no-console
+          console.error = consoleErrorMock
+          wrapper.findComponent({ name: 'UserTable' }).vm.$emit('update-item', {}, 'no-rule')
+        })
+
+        afterEach(() => {
+          Vue.config.warnHandler = warnHandler
+        })
+
+        it('throws an error', () => {
+          expect(consoleErrorMock).toBeCalledWith(expect.objectContaining({ message: 'no-rule' }))
+        })
+      })
+    })
+
+    describe('remove all bookmarks', () => {
+      beforeEach(async () => {
+        await wrapper.findComponent({ name: 'UserTable' }).vm.$emit(
+          'update-item',
+          {
+            id: 2,
+            firstName: 'Benjamin',
+            lastName: 'Blümchen',
+            email: 'benjamin@bluemchen.de',
+            creation: [800, 600, 400],
+            showDetails: false,
+          },
+          'push',
+        )
+        wrapper.findComponent({ name: 'CreationFormular' }).vm.$emit('remove-all-bookmark')
+      })
+
+      it('removes all items from itemsMassCreation', () => {
+        expect(wrapper.vm.itemsMassCreation).toEqual([])
+      })
+
+      it('adds all items to itemsList', () => {
+        expect(wrapper.vm.itemsList).toHaveLength(2)
+      })
+    })
+
+    describe('apollo returns error', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockRejectedValue({
+          message: 'Ouch',
+        })
+        wrapper = Wrapper()
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorMock).toBeCalledWith('Ouch')
+      })
+    })
+  })
+})

admin/src/pages/Creation.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="creation">
+    <b-row>
+      <b-col cols="12" lg="5">
+        <label>Usersuche</label>
+        <b-input
+          type="text"
+          v-model="criteria"
+          class="shadow p-3 mb-5 bg-white rounded"
+          placeholder="User suche"
+        ></b-input>
+        <user-table
+          v-if="itemsList.length > 0"
+          type="UserListSearch"
+          :itemsUser="itemsList"
+          :fieldsTable="Searchfields"
+          :criteria="criteria"
+          :creation="creation"
+          @update-item="updateItem"
+        />
+      </b-col>
+      <b-col cols="12" lg="7" class="shadow p-3 mb-5 rounded bg-info">
+        <user-table
+          v-show="itemsMassCreation.length > 0"
+          class="shadow p-3 mb-5 bg-white rounded"
+          type="UserListMassCreation"
+          :itemsUser="itemsMassCreation"
+          :fieldsTable="fields"
+          :criteria="null"
+          :creation="creation"
+          @update-item="updateItem"
+        />
+        <div v-if="itemsMassCreation.length === 0">
+          {{ $t('multiple_creation_text') }}
+        </div>
+        <creation-formular
+          v-else
+          type="massCreation"
+          :creation="creation"
+          :items="itemsMassCreation"
+          @remove-all-bookmark="removeAllBookmark"
+        />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import CreationFormular from '../components/CreationFormular.vue'
+import UserTable from '../components/UserTable.vue'
+import { searchUsers } from '../graphql/searchUsers'
+
+export default {
+  name: 'Creation',
+  components: {
+    CreationFormular,
+    UserTable,
+  },
+  data() {
+    return {
+      showArrays: false,
+      Searchfields: [
+        { key: 'bookmark', label: 'bookmark' },
+        { key: 'firstName', label: this.$t('firstname') },
+        { key: 'lastName', label: this.$t('lastname') },
+        { key: 'creation', label: this.$t('open_creations') },
+        { key: 'email', label: this.$t('e_mail') },
+      ],
+      fields: [
+        { key: 'email', label: this.$t('e_mail') },
+        { key: 'firstName', label: this.$t('firstname') },
+        { key: 'lastName', label: this.$t('lastname') },
+        { key: 'creation', label: this.$t('open_creations') },
+        { key: 'bookmark', label: this.$t('remove') },
+      ],
+      itemsList: [],
+      itemsMassCreation: [],
+      radioSelectedMass: '',
+      criteria: '',
+      creation: [null, null, null],
+    }
+  },
+  async created() {
+    await this.getUsers()
+  },
+  methods: {
+    async getUsers() {
+      this.$apollo
+        .query({
+          query: searchUsers,
+          variables: {
+            searchText: this.criteria,
+          },
+        })
+        .then((result) => {
+          this.itemsList = result.data.searchUsers.map((user) => {
+            return {
+              ...user,
+              showDetails: false,
+            }
+          })
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+    },
+    updateItem(e, event) {
+      let index = 0
+      let findArr = {}
+
+      switch (event) {
+        case 'push':
+          findArr = this.itemsList.find((arr) => arr.id === e.id)
+          index = this.itemsList.indexOf(findArr)
+          this.itemsList.splice(index, 1)
+          this.itemsMassCreation.push(e)
+          break
+        case 'remove':
+          findArr = this.itemsMassCreation.find((arr) => arr.id === e.id)
+          index = this.itemsMassCreation.indexOf(findArr)
+          this.itemsMassCreation.splice(index, 1)
+          this.itemsList.push(e)
+          break
+        default:
+          throw new Error(event)
+      }
+    },
+    removeAllBookmark() {
+      this.itemsMassCreation.forEach((item) => this.itemsList.push(item))
+      this.itemsMassCreation = []
+    },
+  },
+}
+</script>

admin/src/pages/CreationConfirm.spec.js

@@ -0,0 +1,222 @@
+import { mount } from '@vue/test-utils'
+import CreationConfirm from './CreationConfirm.vue'
+import { deletePendingCreation } from '../graphql/deletePendingCreation'
+
+const localVue = global.localVue
+
+const storeCommitMock = jest.fn()
+const toastedErrorMock = jest.fn()
+const toastedSuccessMock = jest.fn()
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    getPendingCreations: [
+      {
+        id: 1,
+        firstName: 'Bibi',
+        lastName: 'Bloxberg',
+        email: 'bibi@bloxberg.de',
+        amount: 500,
+        memo: 'Danke für alles',
+        date: new Date(),
+        moderator: 0,
+      },
+      {
+        id: 2,
+        firstName: 'Räuber',
+        lastName: 'Hotzenplotz',
+        email: 'raeuber@hotzenplotz.de',
+        amount: 1000000,
+        memo: 'Gut Ergatert',
+        date: new Date(),
+        moderator: 0,
+      },
+    ],
+  },
+})
+
+const apolloMutateMock = jest.fn().mockResolvedValue({})
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $store: {
+    commit: storeCommitMock,
+  },
+  $apollo: {
+    query: apolloQueryMock,
+    mutate: apolloMutateMock,
+  },
+  $toasted: {
+    error: toastedErrorMock,
+    success: toastedSuccessMock,
+  },
+  $moment: jest.fn((value) => {
+    return {
+      format: jest.fn((format) => value),
+    }
+  }),
+}
+
+describe('CreationConfirm', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(CreationConfirm, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      jest.clearAllMocks()
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.creation-confirm', () => {
+      expect(wrapper.find('div.creation-confirm').exists()).toBeTruthy()
+    })
+
+    describe('store', () => {
+      it('commits resetOpenCreations to store', () => {
+        expect(storeCommitMock).toBeCalledWith('resetOpenCreations')
+      })
+      it('commits setOpenCreations to store', () => {
+        expect(storeCommitMock).toBeCalledWith('setOpenCreations', 2)
+      })
+    })
+
+    describe('delete creation delete with success', () => {
+      beforeEach(async () => {
+        apolloQueryMock.mockResolvedValue({
+          data: {
+            getPendingCreations: [
+              {
+                id: 1,
+                firstName: 'Bibi',
+                lastName: 'Bloxberg',
+                email: 'bibi@bloxberg.de',
+                amount: 500,
+                memo: 'Danke für alles',
+                date: new Date(),
+                moderator: 0,
+              },
+              {
+                id: 2,
+                firstName: 'Räuber',
+                lastName: 'Hotzenplotz',
+                email: 'raeuber@hotzenplotz.de',
+                amount: 1000000,
+                memo: 'Gut Ergatert',
+                date: new Date(),
+                moderator: 0,
+              },
+            ],
+          },
+        })
+        await wrapper
+          .findComponent({ name: 'UserTable' })
+          .vm.$emit('remove-confirm-result', { id: 1 }, 'remove')
+      })
+
+      it('calls the deletePendingCreation mutation', () => {
+        expect(apolloMutateMock).toBeCalledWith({
+          mutation: deletePendingCreation,
+          variables: { id: 1 },
+        })
+      })
+
+      it('commits openCreationsMinus to store', () => {
+        expect(storeCommitMock).toBeCalledWith('openCreationsMinus', 1)
+      })
+
+      it('toasts a success message', () => {
+        expect(toastedSuccessMock).toBeCalledWith('Pending Creation has been deleted')
+      })
+    })
+
+    describe('delete creation delete with error', () => {
+      beforeEach(async () => {
+        apolloMutateMock.mockRejectedValue({ message: 'Ouchhh!' })
+        await wrapper
+          .findComponent({ name: 'UserTable' })
+          .vm.$emit('remove-confirm-result', { id: 1 }, 'remove')
+      })
+
+      it('toasts an error message', () => {
+        expect(toastedErrorMock).toBeCalledWith('Ouchhh!')
+      })
+    })
+
+    describe('confirm creation delete with success', () => {
+      beforeEach(async () => {
+        apolloQueryMock.mockResolvedValue({
+          data: {
+            getPendingCreations: [
+              {
+                id: 1,
+                firstName: 'Bibi',
+                lastName: 'Bloxberg',
+                email: 'bibi@bloxberg.de',
+                amount: 500,
+                memo: 'Danke für alles',
+                date: new Date(),
+                moderator: 0,
+              },
+              {
+                id: 2,
+                firstName: 'Räuber',
+                lastName: 'Hotzenplotz',
+                email: 'raeuber@hotzenplotz.de',
+                amount: 1000000,
+                memo: 'Gut Ergatert',
+                date: new Date(),
+                moderator: 0,
+              },
+            ],
+          },
+        })
+        await wrapper
+          .findComponent({ name: 'UserTable' })
+          .vm.$emit('remove-confirm-result', { id: 1 }, 'confirmed')
+      })
+
+      it('calls the deletePendingCreation mutation', () => {
+        expect(apolloMutateMock).not.toBeCalledWith({
+          mutation: deletePendingCreation,
+          variables: { id: 1 },
+        })
+      })
+
+      it('commits openCreationsMinus to store', () => {
+        expect(storeCommitMock).toBeCalledWith('openCreationsMinus', 1)
+      })
+
+      it('toasts a success message', () => {
+        expect(toastedSuccessMock).toBeCalledWith('Pending Creation has been deleted')
+      })
+    })
+
+    describe('delete creation delete with error', () => {
+      beforeEach(async () => {
+        await wrapper
+          .findComponent({ name: 'UserTable' })
+          .vm.$emit('remove-confirm-result', { id: 1 }, 'confirm')
+      })
+
+      it('toasts an error message', () => {
+        expect(toastedErrorMock).toBeCalledWith('Case confirm is not supported')
+      })
+    })
+
+    describe('server response is error', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        apolloQueryMock.mockRejectedValue({
+          message: 'Ouch!',
+        })
+        wrapper = Wrapper()
+      })
+
+      it('toast an error message', () => {
+        expect(toastedErrorMock).toBeCalledWith('Ouch!')
+      })
+    })
+  })
+})

admin/src/pages/CreationConfirm.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="creation-confirm">
+    <user-table
+      class="mt-4"
+      type="PageCreationConfirm"
+      :itemsUser="confirmResult"
+      :fieldsTable="fields"
+      @remove-confirm-result="removeConfirmResult"
+    />
+  </div>
+</template>
+<script>
+import UserTable from '../components/UserTable.vue'
+import { getPendingCreations } from '../graphql/getPendingCreations'
+import { deletePendingCreation } from '../graphql/deletePendingCreation'
+
+export default {
+  name: 'CreationConfirm',
+  components: {
+    UserTable,
+  },
+  data() {
+    return {
+      showArrays: false,
+      fields: [
+        { key: 'bookmark', label: 'löschen' },
+        { key: 'email', label: 'Email' },
+        { key: 'firstName', label: 'Vorname' },
+        { key: 'lastName', label: 'Nachname' },
+        {
+          key: 'amount',
+          label: 'Schöpfung',
+          formatter: (value) => {
+            return value + ' GDD'
+          },
+        },
+        { key: 'memo', label: 'Text' },
+        {
+          key: 'date',
+          label: 'Datum',
+          formatter: (value) => {
+            return this.$moment(value).format('ll')
+          },
+        },
+        { key: 'moderator', label: 'Moderator' },
+        { key: 'edit_creation', label: 'ändern' },
+        { key: 'confirm', label: 'speichern' },
+      ],
+      confirmResult: [],
+    }
+  },
+  methods: {
+    removeConfirmResult(e, event) {
+      let index = 0
+      const findArr = this.confirmResult.find((arr) => arr.id === e.id)
+      switch (event) {
+        case 'remove':
+          this.$apollo
+            .mutate({
+              mutation: deletePendingCreation,
+              variables: {
+                id: findArr.id,
+              },
+            })
+            .then((result) => {
+              index = this.confirmResult.indexOf(findArr)
+              this.confirmResult.splice(index, 1)
+              this.$store.commit('openCreationsMinus', 1)
+              this.$toasted.success('Pending Creation has been deleted')
+            })
+            .catch((error) => {
+              this.$toasted.error(error.message)
+            })
+          break
+        case 'confirmed':
+          this.confirmResult.splice(index, 1)
+          this.$store.commit('openCreationsMinus', 1)
+          this.$toasted.success('Pending Creation has been deleted')
+          break
+        default:
+          this.$toasted.error('Case ' + event + ' is not supported')
+      }
+    },
+    getPendingCreations() {
+      this.$apollo
+        .query({
+          query: getPendingCreations,
+          fetchPolicy: 'network-only',
+        })
+        .then((result) => {
+          this.$store.commit('resetOpenCreations')
+          this.confirmResult = result.data.getPendingCreations
+          this.$store.commit('setOpenCreations', result.data.getPendingCreations.length)
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+    },
+  },
+  async created() {
+    await this.getPendingCreations()
+  },
+}
+</script>

admin/src/pages/Overview.spec.js

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import Overview from './Overview.vue'
+
+const localVue = global.localVue
+
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    getPendingCreations: [
+      {
+        pending: true,
+      },
+      {
+        pending: true,
+      },
+      {
+        pending: true,
+      },
+    ],
+  },
+})
+
+const storeCommitMock = jest.fn()
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $apollo: {
+    query: apolloQueryMock,
+  },
+  $store: {
+    commit: storeCommitMock,
+    state: {
+      openCreations: 2,
+    },
+  },
+}
+
+describe('Overview', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(Overview, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('calls getPendingCreations', () => {
+      expect(apolloQueryMock).toBeCalled()
+    })
+
+    it('commts three pending creations to store', () => {
+      expect(storeCommitMock).toBeCalledWith('setOpenCreations', 3)
+    })
+
+    describe('with open creations', () => {
+      it('renders a link to confirm creations', () => {
+        expect(wrapper.find('a[href="creation-confirm"]').text()).toContain('2')
+        expect(wrapper.find('a[href="creation-confirm"]').exists()).toBeTruthy()
+      })
+    })
+
+    describe('without open creations', () => {
+      beforeEach(() => {
+        mocks.$store.state.openCreations = 0
+      })
+
+      it('renders a link to confirm creations', () => {
+        expect(wrapper.find('a[href="creation-confirm"]').text()).toContain('0')
+        expect(wrapper.find('a[href="creation-confirm"]').exists()).toBeTruthy()
+      })
+    })
+  })
+})

admin/src/pages/Overview.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="admin-overview">
+    <b-card
+      v-show="$store.state.openCreations > 0"
+      border-variant="primary"
+      :header="$t('open_creations')"
+      header-bg-variant="danger"
+      header-text-variant="white"
+      align="center"
+    >
+      <b-card-text>
+        <b-link to="creation-confirm">
+          <h1>{{ $store.state.openCreations }}</h1>
+        </b-link>
+      </b-card-text>
+    </b-card>
+    <b-card
+      v-show="$store.state.openCreations < 1"
+      border-variant="success"
+      :header="$t('not_open_creations')"
+      header-bg-variant="success"
+      header-text-variant="white"
+      align="center"
+    >
+      <b-card-text>
+        <b-link to="creation-confirm">
+          <h1>{{ $store.state.openCreations }}</h1>
+        </b-link>
+      </b-card-text>
+    </b-card>
+  </div>
+</template>
+<script>
+import { getPendingCreations } from '../graphql/getPendingCreations'
+
+export default {
+  name: 'overview',
+  methods: {
+    async getPendingCreations() {
+      this.$apollo
+        .query({
+          query: getPendingCreations,
+          fetchPolicy: 'network-only',
+        })
+        .then((result) => {
+          this.$store.commit('setOpenCreations', result.data.getPendingCreations.length)
+        })
+    },
+  },
+  created() {
+    this.getPendingCreations()
+  },
+}
+</script>

admin/src/pages/UserSearch.spec.js

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils'
+import UserSearch from './UserSearch.vue'
+
+const localVue = global.localVue
+
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    searchUsers: [
+      {
+        firstName: 'Bibi',
+        lastName: 'Bloxberg',
+        email: 'bibi@bloxberg.de',
+        creation: [200, 400, 600],
+        emailChecked: false,
+      },
+    ],
+  },
+})
+
+const toastErrorMock = jest.fn()
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $apollo: {
+    query: apolloQueryMock,
+  },
+  $toasted: {
+    error: toastErrorMock,
+  },
+  $moment: jest.fn(() => {
+    return {
+      format: jest.fn((m) => m),
+      subtract: jest.fn(() => {
+        return {
+          format: jest.fn((m) => m),
+        }
+      }),
+    }
+  }),
+}
+
+describe('UserSearch', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(UserSearch, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.user-search', () => {
+      expect(wrapper.find('div.user-search').exists()).toBeTruthy()
+    })
+
+    describe('unconfirmed emails', () => {
+      beforeEach(async () => {
+        await wrapper.find('button.btn-block').trigger('click')
+      })
+
+      it('filters the users by unconfirmed emails', () => {
+        expect(wrapper.vm.searchResult).toHaveLength(0)
+      })
+    })
+
+    describe('apollo returns error', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockRejectedValue({
+          message: 'Ouch',
+        })
+        wrapper = Wrapper()
+      })
+
+      it('toasts an error message', () => {
+        expect(toastErrorMock).toBeCalledWith('Ouch')
+      })
+    })
+  })
+})

admin/src/pages/UserSearch.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="user-search">
+    <div style="text-align: right">
+      <b-button block variant="danger" @click="unconfirmedRegisterMails">
+        <b-icon icon="envelope" variant="light"></b-icon>
+        {{ $t('unregistered_emails') }}
+      </b-button>
+    </div>
+    <label>{{ $t('user_search') }}</label>
+    <b-input
+      type="text"
+      v-model="criteria"
+      class="shadow p-3 mb-3 bg-white rounded"
+      :placeholder="$t('user_search')"
+      @input="getUsers"
+    ></b-input>
+
+    <user-table
+      type="PageUserSearch"
+      :itemsUser="searchResult"
+      :fieldsTable="fields"
+      :criteria="criteria"
+    />
+    <div></div>
+  </div>
+</template>
+<script>
+import UserTable from '../components/UserTable.vue'
+import { searchUsers } from '../graphql/searchUsers'
+
+export default {
+  name: 'UserSearch',
+  components: {
+    UserTable,
+  },
+  data() {
+    return {
+      showArrays: false,
+      fields: [
+        { key: 'email', label: this.$t('e_mail') },
+        { key: 'firstName', label: this.$t('firstname') },
+        { key: 'lastName', label: this.$t('lastname') },
+        {
+          key: 'creation',
+          label: this.$t('open_creation'),
+          formatter: (value, key, item) => {
+            return (
+              `
+            <div>` +
+              this.$moment().subtract(2, 'month').format('MMMM') +
+              ` - ` +
+              String(value[0]) +
+              ` GDD</div>
+            <div>` +
+              this.$moment().subtract(1, 'month').format('MMMM') +
+              ` - ` +
+              String(value[1]) +
+              ` GDD</div>
+            <div>` +
+              this.$moment().format('MMMM') +
+              ` - ` +
+              String(value[2]) +
+              ` GDD</div>
+            `
+            )
+          },
+        },
+        { key: 'show_details', label: this.$t('details') },
+        { key: 'confirm_mail', label: this.$t('confirmed') },
+        { key: 'transactions_list', label: this.$t('transaction') },
+      ],
+      searchResult: [],
+      massCreation: [],
+      criteria: '',
+      currentMonth: {
+        short: this.$moment().format('MMMM'),
+      },
+      lastMonth: {
+        short: this.$moment().subtract(1, 'month').format('MMMM'),
+      },
+      beforeLastMonth: {
+        short: this.$moment().subtract(2, 'month').format('MMMM'),
+      },
+    }
+  },
+
+  methods: {
+    unconfirmedRegisterMails() {
+      this.searchResult = this.searchResult.filter((user) => {
+        return user.emailChecked
+      })
+    },
+    getUsers() {
+      this.$apollo
+        .query({
+          query: searchUsers,
+          variables: {
+            searchText: this.criteria,
+          },
+        })
+        .then((result) => {
+          this.searchResult = result.data.searchUsers
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+    },
+  },
+  created() {
+    this.getUsers()
+  },
+}
+</script>

admin/src/plugins/apolloProvider.js

@@ -0,0 +1,37 @@
+import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
+import VueApollo from 'vue-apollo'
+import CONFIG from '../config'
+import store from '../store/store'
+import router from '../router/router'
+import i18n from '../i18n'
+
+const httpLink = new HttpLink({ uri: CONFIG.GRAPHQL_URI })
+
+const authLink = new ApolloLink((operation, forward) => {
+  const token = store.state.token
+  operation.setContext({
+    headers: {
+      Authorization: token && token.length > 0 ? `Bearer ${token}` : '',
+    },
+  })
+  return forward(operation).map((response) => {
+    if (response.errors && response.errors[0].message === '403.13 - Client certificate revoked') {
+      response.errors[0].message = i18n.t('error.session-expired')
+      store.dispatch('logout', null)
+      if (router.currentRoute.path !== '/logout') router.push('/logout')
+      return response
+    }
+    const newToken = operation.getContext().response.headers.get('token')
+    if (newToken) store.commit('token', newToken)
+    return response
+  })
+})
+
+const apolloClient = new ApolloClient({
+  link: authLink.concat(httpLink),
+  cache: new InMemoryCache(),
+})
+
+export const apolloProvider = new VueApollo({
+  defaultClient: apolloClient,
+})

admin/src/plugins/apolloProvider.test.js

@@ -0,0 +1,178 @@
+import { ApolloClient, ApolloLink, HttpLink } from 'apollo-boost'
+import './apolloProvider'
+import CONFIG from '../config'
+
+import VueApollo from 'vue-apollo'
+import store from '../store/store'
+import router from '../router/router'
+import i18n from '../i18n'
+
+jest.mock('vue-apollo')
+jest.mock('../store/store')
+jest.mock('../router/router')
+jest.mock('../i18n')
+
+jest.mock('apollo-boost', () => {
+  return {
+    __esModule: true,
+    ApolloClient: jest.fn(),
+    ApolloLink: jest.fn(() => {
+      return { concat: jest.fn() }
+    }),
+    InMemoryCache: jest.fn(),
+    HttpLink: jest.fn(),
+  }
+})
+
+describe('apolloProvider', () => {
+  it('calls the HttpLink', () => {
+    expect(HttpLink).toBeCalledWith({ uri: CONFIG.GRAPHQL_URI })
+  })
+
+  it('calls the ApolloLink', () => {
+    expect(ApolloLink).toBeCalled()
+  })
+
+  it('calls the ApolloClient', () => {
+    expect(ApolloClient).toBeCalled()
+  })
+
+  it('calls the VueApollo', () => {
+    expect(VueApollo).toBeCalled()
+  })
+
+  describe('ApolloLink', () => {
+    // mock store
+    const storeDispatchMock = jest.fn()
+    const storeCommitMock = jest.fn()
+    store.state = {
+      token: 'some-token',
+    }
+    store.dispatch = storeDispatchMock
+    store.commit = storeCommitMock
+
+    // mock i18n.t
+    i18n.t = jest.fn((t) => t)
+
+    // mock apllo response
+    const responseMock = {
+      errors: [{ message: '403.13 - Client certificate revoked' }],
+    }
+
+    // mock router
+    const routerPushMock = jest.fn()
+    router.push = routerPushMock
+    router.currentRoute = {
+      path: '/overview',
+    }
+
+    // mock context
+    const setContextMock = jest.fn()
+    const getContextMock = jest.fn(() => {
+      return {
+        response: {
+          headers: {
+            get: jest.fn(() => 'another-token'),
+          },
+        },
+      }
+    })
+
+    // mock apollo link function params
+    const operationMock = {
+      setContext: setContextMock,
+      getContext: getContextMock,
+    }
+
+    const forwardMock = jest.fn(() => {
+      return [responseMock]
+    })
+
+    // get apollo link callback
+    const middleware = ApolloLink.mock.calls[0][0]
+
+    describe('with token in store', () => {
+      it('sets authorization header with token', () => {
+        // run the apollo link callback with mocked params
+        middleware(operationMock, forwardMock)
+        expect(setContextMock).toBeCalledWith({
+          headers: {
+            Authorization: 'Bearer some-token',
+          },
+        })
+      })
+    })
+
+    describe('without token in store', () => {
+      beforeEach(() => {
+        store.state.token = null
+      })
+
+      it('sets authorization header empty', () => {
+        middleware(operationMock, forwardMock)
+        expect(setContextMock).toBeCalledWith({
+          headers: {
+            Authorization: '',
+          },
+        })
+      })
+    })
+
+    describe('apollo response is 403.13', () => {
+      beforeEach(() => {
+        // run the apollo link callback with mocked params
+        middleware(operationMock, forwardMock)
+      })
+
+      it('dispatches logout', () => {
+        expect(storeDispatchMock).toBeCalledWith('logout', null)
+      })
+
+      describe('current route is not logout', () => {
+        it('redirects to logout', () => {
+          expect(routerPushMock).toBeCalledWith('/logout')
+        })
+      })
+
+      describe('current route is logout', () => {
+        beforeEach(() => {
+          jest.clearAllMocks()
+          router.currentRoute.path = '/logout'
+        })
+
+        it('does not redirect to logout', () => {
+          expect(routerPushMock).not.toBeCalled()
+        })
+      })
+    })
+
+    describe('apollo response is with new token', () => {
+      beforeEach(() => {
+        delete responseMock.errors
+        middleware(operationMock, forwardMock)
+      })
+
+      it('commits new token to store', () => {
+        expect(storeCommitMock).toBeCalledWith('token', 'another-token')
+      })
+    })
+
+    describe('apollo response is without new token', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        getContextMock.mockReturnValue({
+          response: {
+            headers: {
+              get: jest.fn(() => null),
+            },
+          },
+        })
+        middleware(operationMock, forwardMock)
+      })
+
+      it('does not commit token to store', () => {
+        expect(storeCommitMock).not.toBeCalled()
+      })
+    })
+  })
+})

admin/src/router/guards.js

@@ -0,0 +1,48 @@
+import { verifyLogin } from '../graphql/verifyLogin'
+import CONFIG from '../config'
+
+const addNavigationGuards = (router, store, apollo) => {
+  // store token on `authenticate`
+  router.beforeEach(async (to, from, next) => {
+    if (to.path === '/authenticate' && to.query && to.query.token) {
+      store.commit('token', to.query.token)
+      await apollo
+        .query({
+          query: verifyLogin,
+          fetchPolicy: 'network-only',
+        })
+        .then((result) => {
+          const moderator = result.data.verifyLogin
+          if (moderator.isAdmin) {
+            store.commit('moderator', moderator)
+            next({ path: '/' })
+          } else {
+            next({ path: '/not-found' })
+          }
+        })
+        .catch(() => {
+          next({ path: '/not-found' })
+        })
+    } else {
+      next()
+    }
+  })
+
+  // protect all routes but `not-found`
+  router.beforeEach((to, from, next) => {
+    if (
+      !CONFIG.DEBUG_DISABLE_AUTH && // we did not disabled the auth module for debug purposes
+      (!store.state.token || // we do not have a token
+        !store.state.moderator || // no moderator set in store
+        !store.state.moderator.isAdmin) && // user is no admin
+      to.path !== '/not-found' && // we are not on `not-found`
+      to.path !== '/logout' // we are not on `logout`
+    ) {
+      next({ path: '/not-found' })
+    } else {
+      next()
+    }
+  })
+}
+
+export default addNavigationGuards

admin/src/router/guards.test.js

@@ -0,0 +1,134 @@
+import addNavigationGuards from './guards'
+import router from './router'
+
+const storeCommitMock = jest.fn()
+const apolloQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    verifyLogin: {
+      isAdmin: true,
+    },
+  },
+})
+
+const store = {
+  commit: storeCommitMock,
+  state: {
+    token: null,
+  },
+}
+
+const apollo = {
+  query: apolloQueryMock,
+}
+
+addNavigationGuards(router, store, apollo)
+
+describe('navigation guards', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('authenticate', () => {
+    const navGuard = router.beforeHooks[0]
+    const next = jest.fn()
+
+    describe('with valid token and as admin', () => {
+      beforeEach(() => {
+        navGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
+      })
+
+      it('commits the token to the store', async () => {
+        expect(storeCommitMock).toBeCalledWith('token', 'valid-token')
+      })
+
+      it('commits the moderator to the store', () => {
+        expect(storeCommitMock).toBeCalledWith('moderator', { isAdmin: true })
+      })
+
+      it('redirects to /', async () => {
+        expect(next).toBeCalledWith({ path: '/' })
+      })
+    })
+
+    describe('with valid token and not as admin', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockResolvedValue({
+          data: {
+            verifyLogin: {
+              isAdmin: false,
+            },
+          },
+        })
+        navGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
+      })
+
+      it('commits the token to the store', async () => {
+        expect(storeCommitMock).toBeCalledWith('token', 'valid-token')
+      })
+
+      it('does not commit the moderator to the store', () => {
+        expect(storeCommitMock).not.toBeCalledWith('moderator', { isAdmin: false })
+      })
+
+      it('redirects to /not-found', async () => {
+        expect(next).toBeCalledWith({ path: '/not-found' })
+      })
+    })
+
+    describe('with valid token and server error on verification', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockRejectedValue({
+          message: 'Ouch!',
+        })
+        navGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
+      })
+
+      it('commits the token to the store', async () => {
+        expect(storeCommitMock).toBeCalledWith('token', 'valid-token')
+      })
+
+      it('does not commit the moderator to the store', () => {
+        expect(storeCommitMock).not.toBeCalledWith('moderator', { isAdmin: false })
+      })
+
+      it('redirects to /not-found', async () => {
+        expect(next).toBeCalledWith({ path: '/not-found' })
+      })
+    })
+
+    describe('without valid token', () => {
+      it('does not commit the token to the store', async () => {
+        navGuard({ path: '/authenticate' }, {}, next)
+        expect(storeCommitMock).not.toBeCalledWith()
+      })
+
+      it('calls next withou arguments', async () => {
+        navGuard({ path: '/authenticate' }, {}, next)
+        expect(next).toBeCalledWith()
+      })
+    })
+  })
+
+  describe('protect all routes', () => {
+    const navGuard = router.beforeHooks[1]
+    const next = jest.fn()
+
+    it('redirects no not found with no token in store ', () => {
+      navGuard({ path: '/' }, {}, next)
+      expect(next).toBeCalledWith({ path: '/not-found' })
+    })
+
+    it('redirects to not found with token in store and not moderator', () => {
+      store.state.token = 'valid token'
+      navGuard({ path: '/' }, {}, next)
+      expect(next).toBeCalledWith({ path: '/not-found' })
+    })
+
+    it('does not redirect with token in store and as moderator', () => {
+      store.state.token = 'valid token'
+      store.state.moderator = { isAdmin: true }
+      navGuard({ path: '/' }, {}, next)
+      expect(next).toBeCalledWith()
+    })
+  })
+})

admin/src/router/router.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import routes from './routes'
+
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  base: '/admin',
+  routes,
+  linkActiveClass: 'active',
+  mode: 'history',
+  scrollBehavior: (to, from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition
+    }
+    if (to.hash) {
+      return { selector: to.hash }
+    }
+    return { x: 0, y: 0 }
+  },
+})
+
+export default router

admin/src/router/router.test.js

@@ -0,0 +1,92 @@
+import router from './router'
+
+describe('router', () => {
+  describe('options', () => {
+    const { options } = router
+    const { scrollBehavior, routes } = options
+
+    it('has "/admin" as base', () => {
+      expect(options).toEqual(
+        expect.objectContaining({
+          base: '/admin',
+        }),
+      )
+    })
+
+    it('has "active" as linkActiveClass', () => {
+      expect(options).toEqual(
+        expect.objectContaining({
+          linkActiveClass: 'active',
+        }),
+      )
+    })
+
+    it('has "history" as mode', () => {
+      expect(options).toEqual(
+        expect.objectContaining({
+          mode: 'history',
+        }),
+      )
+    })
+
+    describe('scroll behavior', () => {
+      it('returns save position when given', () => {
+        expect(scrollBehavior({}, {}, 'given')).toBe('given')
+      })
+
+      it('returns selector when hash is given', () => {
+        expect(scrollBehavior({ hash: '#to' }, {})).toEqual({ selector: '#to' })
+      })
+
+      it('returns top left coordinates as default', () => {
+        expect(scrollBehavior({}, {})).toEqual({ x: 0, y: 0 })
+      })
+    })
+
+    describe('routes', () => {
+      it('has seven routes defined', () => {
+        expect(routes).toHaveLength(7)
+      })
+
+      it('has "/overview" as default', async () => {
+        const component = await routes.find((r) => r.path === '/').component()
+        expect(component.default.name).toBe('overview')
+      })
+
+      describe('logout', () => {
+        it('loads the "NotFoundPage" component', async () => {
+          const component = await routes.find((r) => r.path === '/logout').component()
+          expect(component.default.name).toBe('not-found')
+        })
+      })
+
+      describe('user', () => {
+        it('loads the "UserSearch" component', async () => {
+          const component = await routes.find((r) => r.path === '/user').component()
+          expect(component.default.name).toBe('UserSearch')
+        })
+      })
+
+      describe('creation', () => {
+        it('loads the "Creation" component', async () => {
+          const component = await routes.find((r) => r.path === '/creation').component()
+          expect(component.default.name).toBe('Creation')
+        })
+      })
+
+      describe('creation-confirm', () => {
+        it('loads the "CreationConfirm" component', async () => {
+          const component = await routes.find((r) => r.path === '/creation-confirm').component()
+          expect(component.default.name).toBe('CreationConfirm')
+        })
+      })
+
+      describe('not found page', () => {
+        it('renders the "NotFound" component', async () => {
+          const component = await routes.find((r) => r.path === '*').component()
+          expect(component.default.name).toEqual('not-found')
+        })
+      })
+    })
+  })
+})

admin/src/router/routes.js

@@ -0,0 +1,32 @@
+const routes = [
+  {
+    path: '/authenticate',
+  },
+  {
+    path: '/',
+    component: () => import('@/pages/Overview.vue'),
+  },
+  {
+    // TODO: Implement a "You are logged out"-Page
+    path: '/logout',
+    component: () => import('@/components/NotFoundPage.vue'),
+  },
+  {
+    path: '/user',
+    component: () => import('@/pages/UserSearch.vue'),
+  },
+  {
+    path: '/creation',
+    component: () => import('@/pages/Creation.vue'),
+  },
+  {
+    path: '/creation-confirm',
+    component: () => import('@/pages/CreationConfirm.vue'),
+  },
+  {
+    path: '*',
+    component: () => import('@/components/NotFoundPage.vue'),
+  },
+]
+
+export default routes

admin/src/store/store.js

@@ -0,0 +1,53 @@
+import Vuex from 'vuex'
+import Vue from 'vue'
+import createPersistedState from 'vuex-persistedstate'
+import CONFIG from '../config'
+
+Vue.use(Vuex)
+
+export const mutations = {
+  openCreationsPlus: (state, i) => {
+    state.openCreations += i
+  },
+  openCreationsMinus: (state, i) => {
+    state.openCreations -= i
+  },
+  resetOpenCreations: (state) => {
+    state.openCreations = 0
+  },
+  token: (state, token) => {
+    state.token = token
+  },
+  setOpenCreations: (state, openCreations) => {
+    state.openCreations = openCreations
+  },
+  moderator: (state, moderator) => {
+    state.moderator = moderator
+  },
+}
+
+export const actions = {
+  logout: ({ commit, state }) => {
+    commit('token', null)
+    commit('moderator', null)
+    window.localStorage.clear()
+  },
+}
+
+const store = new Vuex.Store({
+  plugins: [
+    createPersistedState({
+      storage: window.localStorage,
+    }),
+  ],
+  state: {
+    token: CONFIG.DEBUG_DISABLE_AUTH ? 'validToken' : null,
+    moderator: null,
+    openCreations: 0,
+  },
+  // Syncronous mutation of the state
+  mutations,
+  actions,
+})
+
+export default store

admin/src/store/store.test.js

@@ -0,0 +1,112 @@
+import store, { mutations, actions } from './store'
+import CONFIG from '../config'
+
+jest.mock('../config')
+
+const {
+  token,
+  openCreationsPlus,
+  openCreationsMinus,
+  resetOpenCreations,
+  setOpenCreations,
+  moderator,
+} = mutations
+const { logout } = actions
+
+CONFIG.DEBUG_DISABLE_AUTH = true
+
+describe('Vuex store', () => {
+  describe('mutations', () => {
+    describe('token', () => {
+      it('sets the state of token', () => {
+        const state = { token: null }
+        token(state, '1234')
+        expect(state.token).toEqual('1234')
+      })
+    })
+
+    describe('openCreationsPlus', () => {
+      it('increases the open creations by a given number', () => {
+        const state = { openCreations: 0 }
+        openCreationsPlus(state, 12)
+        expect(state.openCreations).toEqual(12)
+      })
+    })
+
+    describe('openCreationsMinus', () => {
+      it('decreases the open creations by a given number', () => {
+        const state = { openCreations: 12 }
+        openCreationsMinus(state, 2)
+        expect(state.openCreations).toEqual(10)
+      })
+    })
+
+    describe('resetOpenCreations', () => {
+      it('sets the open creations to 0', () => {
+        const state = { openCreations: 24 }
+        resetOpenCreations(state)
+        expect(state.openCreations).toEqual(0)
+      })
+    })
+
+    describe('moderator', () => {
+      it('sets the moderator object in state', () => {
+        const state = { moderator: null }
+        moderator(state, { id: 1 })
+        expect(state.moderator).toEqual({ id: 1 })
+      })
+    })
+
+    describe('setOpenCreations', () => {
+      it('sets the open creations to given value', () => {
+        const state = { openCreations: 24 }
+        setOpenCreations(state, 12)
+        expect(state.openCreations).toEqual(12)
+      })
+    })
+  })
+
+  describe('actions', () => {
+    describe('logout', () => {
+      const windowStorageMock = jest.fn()
+      const commit = jest.fn()
+      const state = {}
+      beforeEach(() => {
+        jest.clearAllMocks()
+        window.localStorage.clear = windowStorageMock
+      })
+
+      it('deletes the token in store', () => {
+        logout({ commit, state })
+        expect(commit).toBeCalledWith('token', null)
+      })
+
+      it('deletes the moderator in store', () => {
+        logout({ commit, state })
+        expect(commit).toBeCalledWith('moderator', null)
+      })
+
+      it.skip('clears the window local storage', () => {
+        expect(windowStorageMock).toBeCalled()
+      })
+    })
+  })
+
+  describe('state', () => {
+    describe('authentication enabled', () => {
+      it('has no token', () => {
+        expect(store.state.token).toBe(null)
+      })
+    })
+
+    describe('authentication enabled', () => {
+      beforeEach(() => {
+        CONFIG.DEBUG_DISABLE_AUTH = false
+      })
+
+      it.skip('has a token', () => {
+        expect(store.state.token).toBe('validToken')
+      })
+    })
+  })
+})

admin/test/testSetup.js

@@ -0,0 +1,16 @@
+import { createLocalVue } from '@vue/test-utils'
+import Vue from 'vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+
+// without this async calls are not working
+import 'regenerator-runtime'
+
+global.localVue = createLocalVue()
+
+global.localVue.use(BootstrapVue)
+global.localVue.use(IconsPlugin)
+
+// throw errors for vue warnings to force the programmers to take care about warnings
+Vue.config.warnHandler = (w) => {
+  throw new Error(w)
+}

admin/vue.config.js

@@ -0,0 +1,51 @@
+const path = require('path')
+const webpack = require('webpack')
+const Dotenv = require('dotenv-webpack')
+const StatsPlugin = require('stats-webpack-plugin')
+
+// vue.config.js
+module.exports = {
+  devServer: {
+    port: process.env.PORT || 8080,
+  },
+  pluginOptions: {
+    i18n: {
+      locale: 'de',
+      fallbackLocale: 'de',
+      localeDir: 'locales',
+      enableInSFC: false,
+    },
+  },
+  lintOnSave: true,
+  publicPath: '/admin',
+  configureWebpack: {
+    // Set up all the aliases we use in our app.
+    resolve: {
+      alias: {
+        assets: path.join(__dirname, 'src/assets'),
+      },
+    },
+    plugins: [
+      // .env and Environment Variables
+      new Dotenv(),
+      new webpack.DefinePlugin({
+        // Those are Environment Variables transmitted via Docker and are only available when defined here aswell
+        // 'process.env.DOCKER_WORKDIR': JSON.stringify(process.env.DOCKER_WORKDIR),
+        // 'process.env.BUILD_DATE': JSON.stringify(process.env.BUILD_DATE),
+        // 'process.env.BUILD_VERSION': JSON.stringify(process.env.BUILD_VERSION),
+        'process.env.BUILD_COMMIT': JSON.stringify(process.env.BUILD_COMMIT),
+        // 'process.env.PORT': JSON.stringify(process.env.PORT),
+      }),
+      // generate webpack stats to allow analysis of the bundlesize
+      new StatsPlugin('webpack.stats.json'),
+    ],
+    infrastructureLogging: {
+      level: 'warn', // 'none' | 'error' | 'warn' | 'info' | 'log' | 'verbose'
+    },
+  },
+  css: {
+    // Enable CSS source maps.
+    sourceMap: process.env.NODE_ENV !== 'production',
+  },
+  outputDir: path.resolve(__dirname, './dist'),
+}

backend/.env.dist

@@ -2,8 +2,6 @@ PORT=4000
 JWT_SECRET=secret123
 JWT_EXPIRES_IN=10m
 GRAPHIQL=false
-LOGIN_API_URL=http://login-server:1201/
-COMMUNITY_API_URL=http://nginx/api/
 GDT_API_URL=https://gdt.gradido.net
 DB_HOST=localhost
 DB_PORT=3306
@@ -17,6 +15,9 @@ DB_DATABASE=gradido_community
 #EMAIL_PASSWORD=
 #EMAIL_SMTP_URL=
 #EMAIL_SMTP_PORT=587
+#RESEND_TIME=1 minute, 60 => 1hour, 1440 (60 minutes * 24 hours) => 24 hours 
+#RESEND_TIME=
+RESEND_TIME=10
 
 #EMAIL_LINK_VERIFICATION=http://localhost/vue/checkEmail/$1
 
@@ -30,4 +31,6 @@ COMMUNITY_URL=
 COMMUNITY_REGISTER_URL=
 COMMUNITY_DESCRIPTION=
 LOGIN_APP_SECRET=21ffbbc616fe
-LOGIN_SERVER_KEY=a51ef8ac7ef1abf162fb7a65261acd7a
+LOGIN_SERVER_KEY=a51ef8ac7ef1abf162fb7a65261acd7a
+
+WEBHOOK_ELOPAGE_SECRET=secret

backend/package.json

@@ -20,6 +20,7 @@
     "apollo-server-express": "^2.25.2",
     "apollo-server-testing": "^2.25.2",
     "axios": "^0.21.1",
+    "body-parser": "^1.19.0",
     "class-validator": "^0.13.1",
     "cors": "^2.8.5",
     "dotenv": "^10.0.0",
@@ -28,6 +29,7 @@
     "jest": "^27.2.4",
     "jsonwebtoken": "^8.5.1",
     "module-alias": "^2.2.2",
+    "moment": "^2.29.1",
     "mysql2": "^2.3.0",
     "nodemailer": "^6.6.5",
     "random-bigint": "^0.0.1",

backend/src/auth/CustomJwtPayload.ts

@@ -0,0 +1,5 @@
+import { JwtPayload } from 'jsonwebtoken'
+
+export interface CustomJwtPayload extends JwtPayload {
+  pubKey: Buffer
+}

backend/src/auth/INALIENABLE_RIGHTS.ts

@@ -0,0 +1,11 @@
+import { RIGHTS } from './RIGHTS'
+
+export const INALIENABLE_RIGHTS = [
+  RIGHTS.LOGIN,
+  RIGHTS.GET_COMMUNITY_INFO,
+  RIGHTS.COMMUNITIES,
+  RIGHTS.CREATE_USER,
+  RIGHTS.SEND_RESET_PASSWORD_EMAIL,
+  RIGHTS.SET_PASSWORD,
+  RIGHTS.CHECK_USERNAME,
+]

backend/src/auth/JWT.ts

@@ -0,0 +1,19 @@
+import jwt from 'jsonwebtoken'
+import CONFIG from '../config/'
+import { CustomJwtPayload } from './CustomJwtPayload'
+
+export const decode = (token: string): CustomJwtPayload | null => {
+  if (!token) throw new Error('401 Unauthorized')
+  try {
+    return <CustomJwtPayload>jwt.verify(token, CONFIG.JWT_SECRET)
+  } catch (err) {
+    return null
+  }
+}
+
+export const encode = (pubKey: Buffer): string => {
+  const token = jwt.sign({ pubKey }, CONFIG.JWT_SECRET, {
+    expiresIn: CONFIG.JWT_EXPIRES_IN,
+  })
+  return token
+}

backend/src/auth/RIGHTS.ts

@@ -0,0 +1,24 @@
+export enum RIGHTS {
+  LOGIN = 'LOGIN',
+  VERIFY_LOGIN = 'VERIFY_LOGIN',
+  BALANCE = 'BALANCE',
+  GET_COMMUNITY_INFO = 'GET_COMMUNITY_INFO',
+  COMMUNITIES = 'COMMUNITIES',
+  LIST_GDT_ENTRIES = 'LIST_GDT_ENTRIES',
+  EXIST_PID = 'EXIST_PID',
+  GET_KLICKTIPP_USER = 'GET_KLICKTIPP_USER',
+  GET_KLICKTIPP_TAG_MAP = 'GET_KLICKTIPP_TAG_MAP',
+  UNSUBSCRIBE_NEWSLETTER = 'UNSUBSCRIBE_NEWSLETTER',
+  SUBSCRIBE_NEWSLETTER = 'SUBSCRIBE_NEWSLETTER',
+  TRANSACTION_LIST = 'TRANSACTION_LIST',
+  SEND_COINS = 'SEND_COINS',
+  LOGOUT = 'LOGOUT',
+  CREATE_USER = 'CREATE_USER',
+  SEND_RESET_PASSWORD_EMAIL = 'SEND_RESET_PASSWORD_EMAIL',
+  SET_PASSWORD = 'SET_PASSWORD',
+  UPDATE_USER_INFOS = 'UPDATE_USER_INFOS',
+  CHECK_USERNAME = 'CHECK_USERNAME',
+  HAS_ELOPAGE = 'HAS_ELOPAGE',
+  // Admin
+  SEARCH_USERS = 'SEARCH_USERS',
+}

backend/src/auth/ROLES.ts

@@ -0,0 +1,25 @@
+import { INALIENABLE_RIGHTS } from './INALIENABLE_RIGHTS'
+import { RIGHTS } from './RIGHTS'
+import { Role } from './Role'
+
+export const ROLE_UNAUTHORIZED = new Role('unauthorized', INALIENABLE_RIGHTS)
+export const ROLE_USER = new Role('user', [
+  ...INALIENABLE_RIGHTS,
+  RIGHTS.VERIFY_LOGIN,
+  RIGHTS.BALANCE,
+  RIGHTS.LIST_GDT_ENTRIES,
+  RIGHTS.EXIST_PID,
+  RIGHTS.GET_KLICKTIPP_USER,
+  RIGHTS.GET_KLICKTIPP_TAG_MAP,
+  RIGHTS.UNSUBSCRIBE_NEWSLETTER,
+  RIGHTS.SUBSCRIBE_NEWSLETTER,
+  RIGHTS.TRANSACTION_LIST,
+  RIGHTS.SEND_COINS,
+  RIGHTS.LOGOUT,
+  RIGHTS.UPDATE_USER_INFOS,
+  RIGHTS.HAS_ELOPAGE,
+])
+export const ROLE_ADMIN = new Role('admin', Object.values(RIGHTS)) // all rights
+
+// TODO from database
+export const ROLES = [ROLE_UNAUTHORIZED, ROLE_USER, ROLE_ADMIN]

backend/src/auth/Role.ts

@@ -0,0 +1,15 @@
+import { RIGHTS } from './RIGHTS'
+
+export class Role {
+  id: string
+  rights: RIGHTS[]
+
+  constructor(id: string, rights: RIGHTS[]) {
+    this.id = id
+    this.rights = rights
+  }
+
+  hasRight = (right: RIGHTS): boolean => {
+    return this.rights.includes(right)
+  }
+}

backend/src/config/index.ts

@@ -8,8 +8,6 @@ const server = {
   JWT_SECRET: process.env.JWT_SECRET || 'secret123',
   JWT_EXPIRES_IN: process.env.JWT_EXPIRES_IN || '10m',
   GRAPHIQL: process.env.GRAPHIQL === 'true' || false,
-  LOGIN_API_URL: process.env.LOGIN_API_URL || 'http://login-server:1201/',
-  COMMUNITY_API_URL: process.env.COMMUNITY_API_URL || 'http://nginx/api/',
   GDT_API_URL: process.env.GDT_API_URL || 'https://gdt.gradido.net',
   PRODUCTION: process.env.NODE_ENV === 'production' || false,
 }
@@ -44,6 +42,7 @@ const loginServer = {
   LOGIN_SERVER_KEY: process.env.LOGIN_SERVER_KEY || 'a51ef8ac7ef1abf162fb7a65261acd7a',
 }
 
+const resendTime = parseInt(process.env.RESEND_TIME ? process.env.RESEND_TIME : 'null')
 const email = {
   EMAIL: process.env.EMAIL === 'true' || false,
   EMAIL_USERNAME: process.env.EMAIL_USERNAME || 'gradido_email',
@@ -51,14 +50,27 @@ const email = {
   EMAIL_PASSWORD: process.env.EMAIL_PASSWORD || 'xxx',
   EMAIL_SMTP_URL: process.env.EMAIL_SMTP_URL || 'gmail.com',
   EMAIL_SMTP_PORT: process.env.EMAIL_SMTP_PORT || '587',
-
   EMAIL_LINK_VERIFICATION:
     process.env.EMAIL_LINK_VERIFICATION || 'http://localhost/vue/checkEmail/$1',
+  EMAIL_LINK_SETPASSWORD: process.env.EMAIL_LINK_SETPASSWORD || 'http://localhost/vue/reset/$1',
+  RESEND_TIME: isNaN(resendTime) ? 10 : resendTime,
+}
+
+const webhook = {
+  WEBHOOK_ELOPAGE_SECRET: process.env.WEBHOOK_ELOPAGE_SECRET || 'secret',
 }
 
 // This is needed by graphql-directive-auth
 process.env.APP_SECRET = server.JWT_SECRET
 
-const CONFIG = { ...server, ...database, ...klicktipp, ...community, ...email, ...loginServer }
+const CONFIG = {
+  ...server,
+  ...database,
+  ...klicktipp,
+  ...community,
+  ...email,
+  ...loginServer,
+  ...webhook,
+}
 
 export default CONFIG

backend/src/graphql/arg/ChangePasswordArgs.ts

@@ -1,13 +0,0 @@
-import { ArgsType, Field } from 'type-graphql'
-
-@ArgsType()
-export default class ChangePasswordArgs {
-  @Field(() => Number)
-  sessionId: number
-
-  @Field(() => String)
-  email: string
-
-  @Field(() => String)
-  password: string
-}

backend/src/graphql/arg/CreatePendingCreationArgs.ts

@@ -0,0 +1,19 @@
+import { ArgsType, Field, Float, Int } from 'type-graphql'
+
+@ArgsType()
+export default class CreatePendingCreationArgs {
+  @Field(() => String)
+  email: string
+
+  @Field(() => Float)
+  amount: number
+
+  @Field(() => String)
+  memo: string
+
+  @Field(() => String)
+  creationDate: string
+
+  @Field(() => Int)
+  moderator: number
+}

backend/src/graphql/arg/CreateUserArgs.ts

@@ -12,10 +12,7 @@ export default class CreateUserArgs {
   lastName: string
 
   @Field(() => String)
-  password: string
-
-  @Field(() => String)
-  language: string
+  language?: string // Will default to DEFAULT_LANGUAGE
 
   @Field(() => Int, { nullable: true })
   publisherId: number

backend/src/graphql/arg/Paginated.ts

@@ -11,4 +11,10 @@ export default class Paginated {
 
   @Field(() => Order, { nullable: true })
   order?: Order
+
+  @Field(() => Boolean, { nullable: true })
+  onlyCreations?: boolean
+
+  @Field(() => Int, { nullable: true })
+  userId?: number
 }

backend/src/graphql/arg/UpdatePendingCreationArgs.ts

@@ -0,0 +1,22 @@
+import { ArgsType, Field, Float, Int } from 'type-graphql'
+
+@ArgsType()
+export default class CreatePendingCreationArgs {
+  @Field(() => Int)
+  id: number
+
+  @Field(() => String)
+  email: string
+
+  @Field(() => Float)
+  amount: number
+
+  @Field(() => String)
+  memo: string
+
+  @Field(() => String)
+  creationDate: string
+
+  @Field(() => Int)
+  moderator: number
+}

backend/src/graphql/directive/isAuthorized.ts

@@ -2,28 +2,44 @@
 
 import { AuthChecker } from 'type-graphql'
 
-import CONFIG from '../../config'
-import { apiGet } from '../../apis/HttpRequest'
+import { decode, encode } from '../../auth/JWT'
+import { ROLE_UNAUTHORIZED, ROLE_USER, ROLE_ADMIN } from '../../auth/ROLES'
+import { RIGHTS } from '../../auth/RIGHTS'
+import { ServerUserRepository } from '../../typeorm/repository/ServerUser'
+import { getCustomRepository } from 'typeorm'
+import { UserRepository } from '../../typeorm/repository/User'
 
-import decode from '../../jwt/decode'
-import encode from '../../jwt/encode'
+const isAuthorized: AuthChecker<any> = async ({ context }, rights) => {
+  context.role = ROLE_UNAUTHORIZED // unauthorized user
 
-const isAuthorized: AuthChecker<any> = async (
-  { /* root, args, */ context /*, info */ } /*, roles */,
-) => {
+  // Do we have a token?
   if (context.token) {
     const decoded = decode(context.token)
-    if (decoded.sessionId && decoded.sessionId !== 0) {
-      const result = await apiGet(
-        `${CONFIG.LOGIN_API_URL}checkSessionState?session_id=${decoded.sessionId}`,
-      )
-      context.sessionId = decoded.sessionId
-      context.pubKey = decoded.pubKey
-      context.setHeaders.push({ key: 'token', value: encode(decoded.sessionId, decoded.pubKey) })
-      return result.success
+    if (!decoded) {
+      // we always throw on an invalid token
+      throw new Error('403.13 - Client certificate revoked')
     }
+    // Set context pubKey
+    context.pubKey = Buffer.from(decoded.pubKey).toString('hex')
+    // set new header token
+    // TODO - load from database dynamically & admin - maybe encode this in the token to prevent many database requests
+    // TODO this implementation is bullshit - two database queries cause our user identifiers are not aligned and vary between email, id and pubKey
+    const userRepository = await getCustomRepository(UserRepository)
+    const user = await userRepository.findByPubkeyHex(context.pubKey)
+    const serverUserRepository = await getCustomRepository(ServerUserRepository)
+    const countServerUsers = await serverUserRepository.count({ email: user.email })
+    context.role = countServerUsers > 0 ? ROLE_ADMIN : ROLE_USER
+
+    context.setHeaders.push({ key: 'token', value: encode(decoded.pubKey) })
   }
-  throw new Error('401 Unauthorized')
+
+  // check for correct rights
+  const missingRights = (<RIGHTS[]>rights).filter((right) => !context.role.hasRight(right))
+  if (missingRights.length !== 0) {
+    throw new Error('401 Unauthorized')
+  }
+
+  return true
 }
 
 export default isAuthorized

backend/src/graphql/model/CheckEmailResponse.ts

@@ -1,29 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { ObjectType, Field } from 'type-graphql'
-
-@ObjectType()
-export class CheckEmailResponse {
-  constructor(json: any) {
-    this.sessionId = json.session_id
-    this.email = json.user.email
-    this.language = json.user.language
-    this.firstName = json.user.first_name
-    this.lastName = json.user.last_name
-  }
-
-  @Field(() => Number)
-  sessionId: number
-
-  @Field(() => String)
-  email: string
-
-  @Field(() => String)
-  firstName: string
-
-  @Field(() => String)
-  lastName: string
-
-  @Field(() => String)
-  language: string
-}

backend/src/graphql/model/LoginViaVerificationCode.ts

@@ -1,17 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { ObjectType, Field } from 'type-graphql'
-
-@ObjectType()
-export class LoginViaVerificationCode {
-  constructor(json: any) {
-    this.sessionId = json.session_id
-    this.email = json.user.email
-  }
-
-  @Field(() => Number)
-  sessionId: number
-
-  @Field(() => String)
-  email: string
-}