Merge branch 'master' into apollo_listTransactions

.github/workflows/test.yml

@@ -1,6 +1,5 @@
 name: gradido test CI
 
-
 on: [push]
 
 jobs:

backend/src/graphql/resolvers/BalanceResolver.ts

@@ -5,8 +5,8 @@ import { Resolver, Query, Ctx, Authorized } from 'type-graphql'
 import CONFIG from '../../config'
 import { Balance } from '../models/Balance'
 import { apiGet } from '../../apis/HttpRequest'
-import { User as tUser } from '../../typeorm/entity/User'
+import { User as dbUser } from '../../typeorm/entity/User'
-import { Balance as tBalance } from '../../typeorm/entity/Balance'
+import { Balance as dbBalance } from '../../typeorm/entity/Balance'
 import calculateDecay from '../../util/decay'
 import { roundFloorFrom4 } from '../../util/round'
 
@@ -20,8 +20,8 @@ export class BalanceResolver {
     if (!result.success) throw new Error(result.data)
 
     // load user and balance
-    const userEntity = await tUser.findByPubkeyHex(result.data.user.public_hex)
+    const userEntity = await dbUser.findByPubkeyHex(result.data.user.public_hex)
-    const balanceEntity = await tBalance.findByUser(userEntity.id)
+    const balanceEntity = await dbBalance.findByUser(userEntity.id)
     const now = new Date()
     const balance = new Balance({
       balance: roundFloorFrom4(balanceEntity.amount),

backend/src/graphql/resolvers/GdtResolver.ts

@@ -6,6 +6,7 @@ import CONFIG from '../../config'
 import { GdtEntryList } from '../models/GdtEntryList'
 import { GdtTransactionSessionIdInput } from '../inputs/GdtInputs'
 import { apiGet } from '../../apis/HttpRequest'
+import { User as dbUser } from '../../typeorm/entity/User'
 
 @Resolver()
 export class GdtResolver {
@@ -17,13 +18,20 @@ export class GdtResolver {
     { currentPage = 1, pageSize = 5, order = 'DESC' }: GdtTransactionSessionIdInput,
     @Ctx() context: any,
   ): Promise<GdtEntryList> {
-    const result = await apiGet(
+    // get public key for current logged in user
-      `${CONFIG.COMMUNITY_API_URL}listGDTTransactions/${currentPage}/${pageSize}/${order}/${context.sessionId}`,
+    const result = await apiGet(CONFIG.LOGIN_API_URL + 'login?session_id=' + context.sessionId)
+    if (!result.success) throw new Error(result.data)
+
+    // load user
+    const userEntity = await dbUser.findByPubkeyHex(result.data.user.public_hex)
+
+    const resultGDT = await apiGet(
+      `${CONFIG.GDT_API_URL}/GdtEntries/listPerEmailApi/${userEntity.email}/${currentPage}/${pageSize}/${order}`,
     )
-    if (!result.success) {
+    if (!resultGDT.success) {
       throw new Error(result.data)
     }
 
-    return new GdtEntryList(result.data)
+    return new GdtEntryList(resultGDT.data)
   }
 }

backend/src/graphql/resolvers/TransactionResolver.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
-import { Resolver, Query, Args, Authorized, Ctx } from 'type-graphql'
+import { Resolver, Query, Args, Authorized, Ctx, Mutation } from 'type-graphql'
 import CONFIG from '../../config'
 import { TransactionList } from '../models/Transaction'
 import { TransactionListInput, TransactionSendArgs } from '../inputs/TransactionInput'
@@ -49,7 +49,7 @@ export class TransactionResolver {
   }
 
   @Authorized()
-  @Query(() => String)
+  @Mutation(() => String)
   async sendCoins(
     @Args() { email, amount, memo }: TransactionSendArgs,
     @Ctx() context: any,

backend/src/graphql/resolvers/UserResolver.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
-import { Resolver, Query, Args, Arg, Authorized, Ctx, UseMiddleware } from 'type-graphql'
+import { Resolver, Query, Args, Arg, Authorized, Ctx, UseMiddleware, Mutation } from 'type-graphql'
 import CONFIG from '../../config'
 import { CheckUsernameResponse } from '../models/CheckUsernameResponse'
 import { LoginViaVerificationCode } from '../models/LoginViaVerificationCode'
@@ -66,8 +66,8 @@ export class UserResolver {
     return 'success'
   }
 
-  @Query(() => String)
+  @Mutation(() => String)
-  async create(
+  async createUser(
     @Args() { email, firstName, lastName, password, language }: CreateUserArgs,
   ): Promise<string> {
     const payload = {
@@ -104,7 +104,7 @@ export class UserResolver {
     return new SendPasswordResetEmailResponse(response.data)
   }
 
-  @Query(() => String)
+  @Mutation(() => String)
   async resetPassword(
     @Args()
     { sessionId, email, password }: ChangePasswordArgs,
@@ -122,7 +122,7 @@ export class UserResolver {
   }
 
   @Authorized()
-  @Query(() => UpdateUserInfosResponse)
+  @Mutation(() => UpdateUserInfosResponse)
   async updateUserInfos(
     @Args()
     {

backend/src/jwt/decode.ts

@@ -5,7 +5,7 @@ import jwt from 'jsonwebtoken'
 import CONFIG from '../config/'
 
 export default (token: string): any => {
-  if (!token) return null
+  if (!token) return new Error('401 Unauthorized')
   let sessionId = null
   try {
     const decoded = jwt.verify(token, CONFIG.JWT_SECRET)
@@ -15,6 +15,6 @@ export default (token: string): any => {
       sessionId,
     }
   } catch (err) {
-    return null
+    throw new Error('403.13 - Client certificate revoked')
   }
 }

frontend/src/components/DecayInformation.vue

@@ -19,11 +19,11 @@
             </div>
           </div>
 
-          <div class="d-flex">
+          <b-row>
-            <div style="width: 40%" class="text-right pr-3 mr-2">
+            <b-col col="6" class="text-right">
               <div v-if="!decay.decayStartBlock">{{ $t('decay.last_transaction') }}</div>
-            </div>
+            </b-col>
-            <div style="width: 60%">
+            <b-col col="6">
               <div v-if="decay.decayStartBlock > 0">
                 <div class="display-4">{{ $t('decay.Starting_block_decay') }}</div>
                 <div>
@@ -32,19 +32,18 @@
                 </div>
               </div>
               <div>
-                <span v-if="!decay.decayStart">
+                <span v-if="decay.decayStart">
                   {{ $d($moment.unix(decay.decayStart), 'long') }}
                   {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
                 </span>
               </div>
-            </div>
+            </b-col>
-          </div>
+          </b-row>
-
+          <b-row>
-          <div class="d-flex">
+            <b-col col="6" class="text-right">
-            <div style="width: 40%" class="text-right pr-3 mr-2">
               <div v-if="!decay.decayStartBlock">{{ $t('decay.past_time') }}</div>
-            </div>
+            </b-col>
-            <div style="width: 60%">
+            <b-col col="6">
               <div v-if="decay.decayStartBlock > 0">{{ $t('decay.since_introduction') }}</div>
               <span v-if="duration">
                 <span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
@@ -60,7 +59,59 @@
                   {{ duration.seconds }} {{ $t('decay.seconds') }}
                 </span>
               </span>
-            </div>
+            </b-col>
+          </b-row>
+
+          <div v-if="decay.balance > 0">
+            <!-- Decay-->
+            <b-row>
+              <b-col col="6" class="text-right">
+                <div>{{ $t('decay.decay') }}</div>
+              </b-col>
+              <b-col col="6">
+                <div>- {{ decay.balance }}</div>
+              </b-col>
+            </b-row>
+            <hr class="mt-2 mb-2" />
+            <b-row>
+              <b-col class="text-center pt-3 pb-2">
+                <b>{{ $t('decay.calculation_total') }}</b>
+              </b-col>
+            </b-row>
+            <!-- Type-->
+            <b-row>
+              <b-col col="6" class="text-right">
+                <div v-if="type === 'send'">{{ $t('decay.sent') }}</div>
+                <div v-if="type === 'receive'">{{ $t('decay.received') }}</div>
+              </b-col>
+              <b-col col="6">
+                <div v-if="type === 'send'">- {{ balance }}</div>
+                <div v-if="type === 'receive'">+ {{ balance }}</div>
+              </b-col>
+            </b-row>
+            <!-- Decay-->
+            <b-row>
+              <b-col col="6" class="text-right">
+                <div>{{ $t('decay.decay') }}</div>
+              </b-col>
+              <b-col col="6">
+                <div>- {{ decay.balance }}</div>
+              </b-col>
+            </b-row>
+            <!-- Total-->
+            <b-row>
+              <b-col col="6" class="text-right">
+                <div>{{ $t('decay.total') }}</div>
+              </b-col>
+              <b-col col="6">
+                <div v-if="type === 'send'">
+                  <b>- {{ parseInt(balance) + decay.balance }}</b>
+                </div>
+                <div v-if="type === 'receive'">
+                  <b>{{ parseInt(balance) - decay.balance }}</b>
+                </div>
+              </b-col>
+            </b-row>
           </div>
         </b-list-group-item>
       </b-list-group>
@@ -71,6 +122,8 @@
 export default {
   name: 'DecayInformation',
   props: {
+    balance: { type: Number },
+    type: { type: String, default: '' },
     decay: {
       balance: '',
       decayDuration: '',

frontend/src/components/LanguageSwitch.spec.js

@@ -3,7 +3,7 @@ import LanguageSwitch from './LanguageSwitch'
 
 const localVue = global.localVue
 
-const updateUserInfosQueryMock = jest.fn().mockResolvedValue({
+const updateUserInfosMutationMock = jest.fn().mockResolvedValue({
   data: {
     updateUserInfos: {
       validValues: 1,
@@ -28,7 +28,7 @@ describe('LanguageSwitch', () => {
       locale: 'en',
     },
     $apollo: {
-      query: updateUserInfosQueryMock,
+      mutate: updateUserInfosMutationMock,
     },
   }
 
@@ -119,7 +119,7 @@ describe('LanguageSwitch', () => {
     describe('calls the API', () => {
       it("with locale 'en'", () => {
         wrapper.findAll('li').at(0).find('a').trigger('click')
-        expect(updateUserInfosQueryMock).toBeCalledWith(
+        expect(updateUserInfosMutationMock).toBeCalledWith(
           expect.objectContaining({
             variables: {
               email: 'he@ho.he',
@@ -131,7 +131,7 @@ describe('LanguageSwitch', () => {
 
       it("with locale 'de'", () => {
         wrapper.findAll('li').at(1).find('a').trigger('click')
-        expect(updateUserInfosQueryMock).toBeCalledWith(
+        expect(updateUserInfosMutationMock).toBeCalledWith(
           expect.objectContaining({
             variables: {
               email: 'he@ho.he',

frontend/src/components/LanguageSwitch.vue

@@ -14,7 +14,7 @@
 <script>
 import { localeChanged } from 'vee-validate'
 import locales from '../locales/'
-import { updateUserInfos } from '../graphql/queries'
+import { updateUserInfos } from '../graphql/mutations'
 
 export default {
   name: 'LanguageSwitch',
@@ -36,8 +36,8 @@ export default {
       this.setLocale(locale)
       if (this.$store.state.email) {
         this.$apollo
-          .query({
+          .mutate({
-            query: updateUserInfos,
+            mutation: updateUserInfos,
             variables: {
               email: this.$store.state.email,
               locale: locale,

frontend/src/components/Transaction.vue

@@ -19,54 +19,54 @@
 
         <!-- type  -->
         <b-row>
-          <div class="col-6 text-right">
+          <b-col col="6" class="text-right">
             {{ getLinesByType(gdtEntryType).description }}
-          </div>
+          </b-col>
-          <div class="col-6">
+          <b-col col="6">
             {{ getLinesByType(gdtEntryType).descriptiontext }}
-          </div>
+          </b-col>
         </b-row>
 
         <!-- credit -->
         <b-row>
-          <div class="col-6 text-right">
+          <b-col col="6" class="text-right">
             {{ $t('gdt.credit') }}
-          </div>
+          </b-col>
-          <div class="col-6">
+          <b-col col="6">
             {{ getLinesByType(gdtEntryType).credittext }}
-          </div>
+          </b-col>
         </b-row>
 
         <!-- Message-->
         <b-row v-if="comment && gdtEntryType !== 7">
-          <div class="col-6 text-right">
+          <b-col col="6" class="text-right">
             {{ $t('form.memo') }}
-          </div>
+          </b-col>
-          <div class="col-6">
+          <b-col col="6">
             {{ comment }}
-          </div>
+          </b-col>
         </b-row>
 
         <!-- date-->
         <b-row class="gdt-list-row text-header">
-          <div class="col-6 text-right">
+          <b-col col="6" class="text-right">
             {{ $t('form.date') }}
-          </div>
+          </b-col>
-          <div class="col-6">
+          <b-col col="6">
             {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-          </div>
+          </b-col>
         </b-row>
-      </div>
 
-      <!-- collaps trancaction info-->
+        <!-- collaps trancaction info-->
-      <b-collapse :id="'a' + date + ''" class="pb-4">
+        <b-collapse :id="'a' + date + ''" class="mt-2 pb-4">
-        <transaction-collapse
+          <transaction-collapse
-          :amount="amount"
+            :amount="amount"
-          :gdtEntryType="gdtEntryType"
+            :gdtEntryType="gdtEntryType"
-          :factor="factor"
+            :factor="factor"
-          :gdt="gdt"
+            :gdt="gdt"
-        ></transaction-collapse>
+          ></transaction-collapse>
-      </b-collapse>
+        </b-collapse>
+      </div>
     </div>
   </div>
 </template>

frontend/src/components/TransactionCollapse.vue

@@ -1,8 +1,11 @@
 <template>
-  <div class="gdt-transaction-collapse">
+  <div
+    class="gdt-transaction-collapse p-2 pt-4 pb-4 mb-4"
+    style="border: 0px; background-color: #f1f1f1"
+  >
     <b-row class="gdt-list-collapse-header-text text-center pb-3">
-      <div id="collapse-headline" class="col h4">
+      <div id="collapse-headline" class="col">
-        {{ getLinesByType(gdtEntryType).headline }}
+        <b>{{ getLinesByType(gdtEntryType).headline }}</b>
       </div>
     </b-row>
     <b-row class="gdt-list-collapse-box--all">

frontend/src/graphql/mutations.js

@@ -11,3 +11,59 @@ export const unsubscribeNewsletter = gql`
     unsubscribeNewsletter(email: $email)
   }
 `
+
+export const resetPassword = gql`
+  mutation($sessionId: Float!, $email: String!, $password: String!) {
+    resetPassword(sessionId: $sessionId, email: $email, password: $password)
+  }
+`
+
+export const updateUserInfos = gql`
+  mutation(
+    $email: String!
+    $firstName: String
+    $lastName: String
+    $description: String
+    $username: String
+    $password: String
+    $passwordNew: String
+    $locale: String
+  ) {
+    updateUserInfos(
+      email: $email
+      firstName: $firstName
+      lastName: $lastName
+      description: $description
+      username: $username
+      password: $password
+      passwordNew: $passwordNew
+      language: $locale
+    ) {
+      validValues
+    }
+  }
+`
+
+export const registerUser = gql`
+  mutation(
+    $firstName: String!
+    $lastName: String!
+    $email: String!
+    $password: String!
+    $language: String!
+  ) {
+    createUser(
+      email: $email
+      firstName: $firstName
+      lastName: $lastName
+      password: $password
+      language: $language
+    )
+  }
+`
+
+export const sendCoins = gql`
+  mutation($email: String!, $amount: Float!, $memo: String!) {
+    sendCoins(email: $email, amount: $amount, memo: $memo)
+  }
+`

frontend/src/graphql/queries.js

@@ -22,12 +22,6 @@ export const logout = gql`
   }
 `
 
-export const resetPassword = gql`
-  query($sessionId: Float!, $email: String!, $password: String!) {
-    resetPassword(sessionId: $sessionId, email: $email, password: $password)
-  }
-`
-
 export const loginViaEmailVerificationCode = gql`
   query($optin: String!) {
     loginViaEmailVerificationCode(optin: $optin) {
@@ -37,32 +31,6 @@ export const loginViaEmailVerificationCode = gql`
   }
 `
 
-export const updateUserInfos = gql`
-  query(
-    $email: String!
-    $firstName: String
-    $lastName: String
-    $description: String
-    $username: String
-    $password: String
-    $passwordNew: String
-    $locale: String
-  ) {
-    updateUserInfos(
-      email: $email
-      firstName: $firstName
-      lastName: $lastName
-      description: $description
-      username: $username
-      password: $password
-      passwordNew: $passwordNew
-      language: $locale
-    ) {
-      validValues
-    }
-  }
-`
-
 export const transactionsQuery = gql`
   query($firstPage: Int = 1, $items: Int = 25, $order: String = "DESC") {
     transactionList(firstPage: $firstPage, items: $items, order: $order) {
@@ -94,30 +62,6 @@ export const transactionsQuery = gql`
   }
 `
 
-export const resgisterUserQuery = gql`
-  query(
-    $firstName: String!
-    $lastName: String!
-    $email: String!
-    $password: String!
-    $language: String!
-  ) {
-    create(
-      email: $email
-      firstName: $firstName
-      lastName: $lastName
-      password: $password
-      language: $language
-    )
-  }
-`
-
-export const sendCoins = gql`
-  query($email: String!, $amount: Float!, $memo: String!) {
-    sendCoins(email: $email, amount: $amount, memo: $memo)
-  }
-`
-
 export const sendResetPasswordEmail = gql`
   query($email: String!) {
     sendResetPasswordEmail(email: $email) {

frontend/src/locales/de.json

@@ -12,6 +12,7 @@
   },
   "decay": {
     "calculation_decay": "Berechnung der Vergänglichkeit",
+    "calculation_total": "Berechnung der Gesamtsumme",
     "created": "Geschöpft",
     "days": "Tage",
     "decay": "Vergänglichkeit",
@@ -31,12 +32,14 @@
     "since_introduction": "seit Einführung der Vergänglichkeit",
     "Starting_block_decay": "Startblock Vergänglichkeit",
     "toCommunity": "An die Gemeinschaft",
+    "total": "Gesamt",
     "year": "Jahre"
   },
   "error": {
     "change-password": "Fehler beim Ändern des Passworts",
     "error": "Fehler",
-    "no-account": "Leider konnten wir keinen Account finden mit diesen Daten!"
+    "no-account": "Leider konnten wir keinen Account finden mit diesen Daten!",
+    "session-expired": "Sitzung abgelaufen!"
   },
   "form": {
     "amount": "Betrag",

frontend/src/locales/en.json

@@ -12,6 +12,7 @@
   },
   "decay": {
     "calculation_decay": "Calculation of Decay",
+    "calculation_total": "Calculation of the grand total",
     "created": "Created",
     "days": "Days",
     "decay": "Decay",
@@ -31,12 +32,14 @@
     "since_introduction": "Since the introduction of Decay",
     "Starting_block_decay": "Starting Block Decay",
     "toCommunity": "To the community",
+    "total": "Total",
     "year": "Years"
   },
   "error": {
     "change-password": "Error while changing password",
     "error": "Error",
-    "no-account": "Unfortunately we could not find an account to the given data!"
+    "no-account": "Unfortunately we could not find an account to the given data!",
+    "session-expired": "The session expired"
   },
   "form": {
     "amount": "Amount",

frontend/src/main.js

@@ -21,6 +21,12 @@ const authLink = new ApolloLink((operation, forward) => {
     },
   })
   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 !== '/login') router.push('/login')
+      return response
+    }
     const newToken = operation.getContext().response.headers.get('token')
     if (newToken) store.commit('token', newToken)
     return response

frontend/src/views/Pages/AccountOverview.spec.js

@@ -25,7 +25,7 @@ describe('AccountOverview', () => {
       },
     },
     $apollo: {
-      query: sendMock,
+      mutate: sendMock,
     },
   }
 

frontend/src/views/Pages/AccountOverview.vue

@@ -51,7 +51,7 @@ import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter
 import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
 import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
 import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
-import { sendCoins } from '../../graphql/queries.js'
+import { sendCoins } from '../../graphql/mutations.js'
 
 const EMPTY_TRANSACTION_DATA = {
   email: '',
@@ -105,8 +105,8 @@ export default {
     async sendTransaction() {
       this.loading = true
       this.$apollo
-        .query({
+        .mutate({
-          query: sendCoins,
+          mutation: sendCoins,
           variables: this.transactionData,
         })
         .then(() => {

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -76,7 +76,13 @@
 
           <b-collapse v-if="type != 'decay'" class="pb-4" :id="'a' + date + ''">
             <div style="border: 0px; background-color: #f1f1f1" class="p-2 pb-4 mb-4">
-              <decay-information v-if="decay" decaytyp="new" :decay="decay" />
+              <decay-information
+                v-if="decay"
+                decaytyp="new"
+                :balance="balance"
+                :decay="decay"
+                :type="type"
+              />
             </div>
           </b-collapse>
 

frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="gdt-transaction-list">
-    <div class="list-group">
+    <div class="list-group" style="background-color: #fff">
       <div v-if="transactionGdtCount === 0">
         {{ $t('gdt.no-transactions') }}
       </div>

frontend/src/views/Pages/Register.spec.js

@@ -5,7 +5,7 @@ import Register from './Register'
 
 const localVue = global.localVue
 
-const resgisterUserQueryMock = jest.fn()
+const registerUserMutationMock = jest.fn()
 const routerPushMock = jest.fn()
 
 describe('Register', () => {
@@ -20,10 +20,11 @@ describe('Register', () => {
       push: routerPushMock,
     },
     $apollo: {
-      query: resgisterUserQueryMock,
+      mutate: registerUserMutationMock,
     },
     $store: {
       state: {
+        email: 'peter@lustig.de',
         language: null,
       },
     },
@@ -192,7 +193,7 @@ describe('Register', () => {
 
       describe('server sends back error', () => {
         beforeEach(async () => {
-          resgisterUserQueryMock.mockRejectedValue({ message: 'Ouch!' })
+          registerUserMutationMock.mockRejectedValue({ message: 'Ouch!' })
           await wrapper.find('form').trigger('submit')
           await flushPromises()
         })
@@ -217,7 +218,7 @@ describe('Register', () => {
 
       describe('server sends back success', () => {
         beforeEach(() => {
-          resgisterUserQueryMock.mockResolvedValue({
+          registerUserMutationMock.mockResolvedValue({
             data: {
               create: 'success',
             },
@@ -227,7 +228,7 @@ describe('Register', () => {
         it('routes to "/thx/register"', async () => {
           await wrapper.find('form').trigger('submit')
           await flushPromises()
-          expect(resgisterUserQueryMock).toBeCalledWith(
+          expect(registerUserMutationMock).toBeCalledWith(
             expect.objectContaining({
               variables: {
                 email: 'max.mustermann@gradido.net',

frontend/src/views/Pages/Register.vue

@@ -141,7 +141,7 @@
 import InputEmail from '../../components/Inputs/InputEmail.vue'
 import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation.vue'
 import LanguageSwitchSelect from '../../components/LanguageSwitchSelect.vue'
-import { resgisterUserQuery } from '../../graphql/queries'
+import { registerUser } from '../../graphql/mutations'
 
 export default {
   components: { InputPasswordConfirmation, InputEmail, LanguageSwitchSelect },
@@ -190,8 +190,8 @@ export default {
     },
     async onSubmit() {
       this.$apollo
-        .query({
+        .mutate({
-          query: resgisterUserQuery,
+          mutation: registerUser,
           variables: {
             email: this.form.email,
             firstName: this.form.firstname,

frontend/src/views/Pages/ResetPassword.spec.js

@@ -7,6 +7,7 @@ import flushPromises from 'flush-promises'
 const localVue = global.localVue
 
 const apolloQueryMock = jest.fn().mockRejectedValue({ message: 'error' })
+const apolloMutationMock = jest.fn()
 
 const toasterMock = jest.fn()
 const routerPushMock = jest.fn()
@@ -36,6 +37,7 @@ describe('ResetPassword', () => {
       }),
     },
     $apollo: {
+      mutate: apolloMutationMock,
       query: apolloQueryMock,
     },
   }
@@ -146,7 +148,7 @@ describe('ResetPassword', () => {
 
         describe('server response with error', () => {
           beforeEach(() => {
-            apolloQueryMock.mockRejectedValue({ message: 'error' })
+            apolloMutationMock.mockRejectedValue({ message: 'error' })
           })
           it('toasts an error message', () => {
             expect(toasterMock).toHaveBeenCalledWith('error')
@@ -155,14 +157,14 @@ describe('ResetPassword', () => {
 
         describe('server response with success', () => {
           beforeEach(() => {
-            apolloQueryMock.mockResolvedValue({
+            apolloMutationMock.mockResolvedValue({
               data: {
                 resetPassword: 'success',
               },
             })
           })
           it('calls the API', () => {
-            expect(apolloQueryMock).toBeCalledWith(
+            expect(apolloMutationMock).toBeCalledWith(
               expect.objectContaining({
                 variables: {
                   sessionId: 1,

frontend/src/views/Pages/ResetPassword.vue

@@ -48,7 +48,8 @@
 </template>
 <script>
 import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation'
-import { resetPassword, loginViaEmailVerificationCode } from '../../graphql/queries'
+import { loginViaEmailVerificationCode } from '../../graphql/queries'
+import { resetPassword } from '../../graphql/mutations'
 
 export default {
   name: 'ResetPassword',
@@ -71,8 +72,8 @@ export default {
   methods: {
     async onSubmit() {
       this.$apollo
-        .query({
+        .mutate({
-          query: resetPassword,
+          mutation: resetPassword,
           variables: {
             sessionId: this.sessionId,
             email: this.email,

frontend/src/views/Pages/UserProfile/UserCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-card class="bg-transparent">
+  <b-card class="bg-transparent border-0">
     <div class="w-100 text-center">
       <vue-qrcode
         v-if="$store.state.email"

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js

@@ -29,7 +29,7 @@ describe('UserCard_FormUserData', () => {
       error: toastErrorMock,
     },
     $apollo: {
-      query: mockAPIcall,
+      mutate: mockAPIcall,
     },
   }
 

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-card id="userdata_form" class="bg-transparent" style="background-color: #ebebeba3 !important">
+  <b-card id="userdata_form" class="card-border-radius card-background-gray">
     <div>
       <b-row class="mb-4 text-right">
         <b-col class="text-right">
@@ -72,7 +72,7 @@
   </b-card>
 </template>
 <script>
-import { updateUserInfos } from '../../../graphql/queries'
+import { updateUserInfos } from '../../../graphql/mutations'
 
 export default {
   name: 'FormUserData',
@@ -108,8 +108,8 @@ export default {
     async onSubmit(event) {
       event.preventDefault()
       this.$apollo
-        .query({
+        .mutate({
-          query: updateUserInfos,
+          mutation: updateUserInfos,
           variables: {
             email: this.$store.state.email,
             firstName: this.form.firstName,

frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.spec.js

@@ -21,7 +21,7 @@ describe('UserCard_FormUserMail', () => {
       },
     },
     $apollo: {
-      query: mockAPIcall,
+      mutate: mockAPIcall,
     },
   }
 

frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue

@@ -32,7 +32,7 @@
   </b-card>
 </template>
 <script>
-import { updateUserInfos } from '../../../graphql/queries'
+import { updateUserInfos } from '../../../graphql/mutations'
 
 export default {
   name: 'FormUserMail',
@@ -45,8 +45,8 @@ export default {
   methods: {
     async onSubmit() {
       this.$apollo
-        .query({
+        .mutate({
-          query: updateUserInfos,
+          mutation: updateUserInfos,
           variables: {
             email: this.$store.state.email,
             newEmail: this.newEmail,

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js

@@ -25,7 +25,7 @@ describe('UserCard_FormUserPasswort', () => {
       error: toastErrorMock,
     },
     $apollo: {
-      query: changePasswordProfileMock,
+      mutate: changePasswordProfileMock,
     },
   }
 

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-card id="change_pwd" class="bg-transparent" style="background-color: #ebebeba3 !important">
+  <b-card id="change_pwd" class="card-border-radius card-background-gray">
     <div>
       <b-row class="mb-4 text-right">
         <b-col class="text-right">
@@ -42,7 +42,7 @@
 <script>
 import InputPassword from '../../../components/Inputs/InputPassword'
 import InputPasswordConfirmation from '../../../components/Inputs/InputPasswordConfirmation'
-import { updateUserInfos } from '../../../graphql/queries'
+import { updateUserInfos } from '../../../graphql/mutations'
 
 export default {
   name: 'FormUserPasswort',
@@ -73,8 +73,8 @@ export default {
     },
     async onSubmit() {
       this.$apollo
-        .query({
+        .mutate({
-          query: updateUserInfos,
+          mutation: updateUserInfos,
           variables: {
             email: this.$store.state.email,
             password: this.form.password,

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js

@@ -35,7 +35,7 @@ describe('UserCard_FormUsername', () => {
       error: toastErrorMock,
     },
     $apollo: {
-      query: mockAPIcall,
+      mutate: mockAPIcall,
     },
   }
 

frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue

@@ -67,7 +67,7 @@
   </b-card>
 </template>
 <script>
-import { updateUserInfos } from '../../../graphql/queries'
+import { updateUserInfos } from '../../../graphql/mutations'
 
 export default {
   name: 'FormUsername',
@@ -87,8 +87,8 @@ export default {
     },
     async onSubmit() {
       this.$apollo
-        .query({
+        .mutate({
-          query: updateUserInfos,
+          mutation: updateUserInfos,
           variables: {
             email: this.$store.state.email,
             username: this.form.username,

frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js

@@ -25,7 +25,7 @@ describe('UserCard_Language', () => {
       error: toastErrorMock,
     },
     $apollo: {
-      query: mockAPIcall,
+      mutate: mockAPIcall,
     },
   }
 

frontend/src/views/Pages/UserProfile/UserCard_Language.vue

@@ -1,9 +1,5 @@
 <template>
-  <b-card
+  <b-card id="formuserlanguage" class="card-border-radius card-background-gray">
-    id="formuserlanguage"
-    class="bg-transparent"
-    style="background-color: #ebebeba3 !important"
-  >
     <div>
       <b-row class="mb-4 text-right">
         <b-col class="text-right">
@@ -46,7 +42,6 @@
               <div class="text-right" ref="submitButton">
                 <b-button
                   :variant="loading ? 'default' : 'success'"
-                  @click="onSubmit"
                   type="submit"
                   class="mt-4"
                   :disabled="loading"
@@ -64,7 +59,7 @@
 <script>
 import { localeChanged } from 'vee-validate'
 import LanguageSwitchSelect from '../../../components/LanguageSwitchSelect.vue'
-import { updateUserInfos } from '../../../graphql/queries'
+import { updateUserInfos } from '../../../graphql/mutations'
 
 export default {
   name: 'FormUserLanguage',
@@ -88,24 +83,24 @@ export default {
     cancelEdit() {
       this.showLanguage = true
     },
-
     async onSubmit() {
       this.$apollo
-        .query({
+        .mutate({
-          query: updateUserInfos,
+          mutation: updateUserInfos,
           variables: {
             email: this.$store.state.email,
             locale: this.language,
           },
         })
         .then(() => {
+          this.$store.commit('language', this.language)
           this.$i18n.locale = this.language
-          this.$store.commit('language', this.$i18n.locale)
+          localeChanged(this.language)
-          localeChanged(this.$i18n.locale)
           this.cancelEdit()
           this.$toasted.success(this.$t('languages.success'))
         })
         .catch((error) => {
+          this.language = this.$store.state.language
           this.$toasted.error(error.message)
         })
     },

frontend/src/views/Pages/UserProfile/UserCard_Newsletter.vue

@@ -1,9 +1,5 @@
 <template>
-  <b-card
+  <b-card id="formusernewsletter" class="card-border-radius card-background-gray">
-    id="formusernewsletter"
-    class="bg-transparent"
-    style="background-color: #ebebeba3 !important"
-  >
     <div>
       <b-row class="mb-3">
         <b-col class="mb-2 col-12">

frontend/src/views/Pages/UserProfileOverview.vue

@@ -31,4 +31,16 @@ export default {
   },
 }
 </script>
-<style></style>
+<style>
+.card-border-radius {
+  border-radius: 0px 5px 5px 0px !important;
+}
+@media screen and (max-width: 1235px) {
+  .card-border-radius {
+    border-radius: 0px !important;
+  }
+}
+.card-background-gray {
+  background-color: #ebebeba3 !important;
+}
+</style>