From d76923c47171202eb2b961bb8bda709685265970 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 8 Jul 2019 16:56:06 +0200
Subject: [PATCH 01/16] Copy all relevant files changed from branch `signup`

---
 .../Registration/CreateUserAccount.spec.js    | 125 +++++++++++++
 .../Registration/CreateUserAccount.vue        | 169 ++++++++++++++++++
 webapp/components/Registration/Signup.spec.js | 145 +++++++++++++++
 webapp/components/Registration/Signup.vue     | 141 +++++++++++++++
 webapp/locales/de.json                        |  26 ++-
 webapp/locales/en.json                        |  27 ++-
 webapp/nuxt.config.js                         |   8 +-
 webapp/pages/admin.vue                        |   4 +
 webapp/pages/admin/invite.vue                 |  23 +++
 webapp/pages/login.vue                        |   2 +-
 .../registration/create-user-account.vue      |  27 +++
 11 files changed, 690 insertions(+), 7 deletions(-)
 create mode 100644 webapp/components/Registration/CreateUserAccount.spec.js
 create mode 100644 webapp/components/Registration/CreateUserAccount.vue
 create mode 100644 webapp/components/Registration/Signup.spec.js
 create mode 100644 webapp/components/Registration/Signup.vue
 create mode 100644 webapp/pages/admin/invite.vue
 create mode 100644 webapp/pages/registration/create-user-account.vue

diff --git a/webapp/components/Registration/CreateUserAccount.spec.js b/webapp/components/Registration/CreateUserAccount.spec.js
new file mode 100644
index 000000000..f8364ca0d
--- /dev/null
+++ b/webapp/components/Registration/CreateUserAccount.spec.js
@@ -0,0 +1,125 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import CreateUserAccount, { SignupVerificationMutation } from './CreateUserAccount'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('CreateUserAccount', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+  let propsData
+
+  beforeEach(() => {
+    mocks = {
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $t: jest.fn(),
+      $apollo: {
+        loading: false,
+        mutate: jest.fn(),
+      },
+    }
+    propsData = {}
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(CreateUserAccount, {
+        mocks,
+        propsData,
+        localVue,
+      })
+    }
+
+    describe('given email and nonce', () => {
+      beforeEach(() => {
+        propsData.nonce = '666777'
+        propsData.email = 'sixseven@example.org'
+      })
+
+      it('renders a form to create a new user', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('.create-user-account').exists()).toBe(true)
+      })
+
+      describe('submit', () => {
+        let action
+        beforeEach(() => {
+          action = async () => {
+            wrapper = Wrapper()
+            wrapper.find('input#name').setValue('John Doe')
+            wrapper.find('input#password').setValue('hellopassword')
+            wrapper.find('input#confirmPassword').setValue('hellopassword')
+            await wrapper.find('form').trigger('submit')
+          }
+        })
+
+        it('calls CreateUserAccount graphql mutation', async () => {
+          await action()
+          const expected = expect.objectContaining({ mutation: SignupVerificationMutation })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
+
+        it('delivers data to backend', async () => {
+          await action()
+          const expected = expect.objectContaining({
+            variables: {
+              about: '',
+              name: 'John Doe',
+              email: 'sixseven@example.org',
+              nonce: '666777',
+              password: 'hellopassword',
+            },
+          })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
+
+        describe('in case mutation resolves', () => {
+          beforeEach(() => {
+            mocks.$apollo.mutate = jest.fn().mockResolvedValue({
+              data: {
+                SignupVerification: {
+                  id: 'u1',
+                  name: 'John Doe',
+                  slug: 'john-doe',
+                },
+              },
+            })
+          })
+
+          it('displays success', async () => {
+            await action()
+            expect(mocks.$t).toHaveBeenCalledWith('registration.create-user-account.success')
+          })
+
+          describe('after timeout', () => {
+            beforeEach(jest.useFakeTimers)
+
+            it('emits `userCreated` with user', async () => {
+              await action()
+              jest.runAllTimers()
+              expect(wrapper.emitted('userCreated')).toBeTruthy()
+            })
+          })
+        })
+
+        describe('in case mutation rejects', () => {
+          beforeEach(() => {
+            mocks.$apollo.mutate.mockRejectedValue(new Error('Invalid nonce'))
+          })
+
+          it('displays form errors', async () => {
+            await action()
+            jest.runAllTimers()
+            expect(wrapper.find('.errors').text()).toContain('Invalid nonce')
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/components/Registration/CreateUserAccount.vue b/webapp/components/Registration/CreateUserAccount.vue
new file mode 100644
index 000000000..f38ebe509
--- /dev/null
+++ b/webapp/components/Registration/CreateUserAccount.vue
@@ -0,0 +1,169 @@
+<template>
+  <ds-card v-if="success" class="success">
+    <ds-space>
+      <sweetalert-icon icon="success" />
+      <ds-text align="center" bold color="success">
+        {{ $t('registration.create-user-account.success') }}
+      </ds-text>
+    </ds-space>
+  </ds-card>
+  <ds-form
+    v-else
+    class="create-user-account"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+    v-model="formData"
+    :schema="formSchema"
+    @submit="submit"
+  >
+    <ds-card :header="$t('registration.create-user-account.title')">
+      <ds-input
+        id="name"
+        model="name"
+        icon="user"
+        :label="$t('settings.data.labelName')"
+        :placeholder="$t('settings.data.namePlaceholder')"
+      />
+      <ds-input
+        id="bio"
+        model="about"
+        type="textarea"
+        rows="3"
+        :label="$t('settings.data.labelBio')"
+        :placeholder="$t('settings.data.labelBio')"
+      />
+      <ds-input
+        id="password"
+        model="password"
+        type="password"
+        autocomplete="off"
+        :label="$t('settings.security.change-password.label-new-password')"
+      />
+      <ds-input
+        id="confirmPassword"
+        model="confirmPassword"
+        type="password"
+        autocomplete="off"
+        :label="$t('settings.security.change-password.label-new-password-confirm')"
+      />
+      <password-strength :password="formData.password" />
+      <template slot="footer">
+        <ds-space class="errors" v-if="errors">
+          <ds-text align="center" bold color="danger">
+            {{ errors.message }}
+          </ds-text>
+        </ds-space>
+        <ds-button
+          style="float: right;"
+          icon="check"
+          type="submit"
+          :loading="$apollo.loading"
+          :disabled="disabled"
+          primary
+        >
+          {{ $t('actions.save') }}
+        </ds-button>
+      </template>
+    </ds-card>
+  </ds-form>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import PasswordStrength from '../Password/Strength'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export const SignupVerificationMutation = gql`
+  mutation($nonce: String!, $name: String!, $email: String!, $password: String!) {
+    SignupVerification(nonce: $nonce, email: $email, name: $name, password: $password) {
+      id
+      name
+      slug
+    }
+  }
+`
+export default {
+  components: {
+    PasswordStrength,
+    SweetalertIcon,
+  },
+  data() {
+    return {
+      formData: {
+        name: '',
+        about: '',
+        password: '',
+        confirmPassword: '',
+      },
+      formSchema: {
+        name: {
+          type: 'string',
+          required: true,
+          min: 3,
+        },
+        about: {
+          type: 'string',
+          required: false,
+        },
+        password: {
+          type: 'string',
+          required: true,
+          message: this.$t('settings.security.change-password.message-new-password-required'),
+        },
+        confirmPassword: [
+          { validator: this.matchPassword },
+          {
+            type: 'string',
+            required: true,
+            message: this.$t(
+              'settings.security.change-password.message-new-password-confirm-required',
+            ),
+          },
+        ],
+      },
+      disabled: true,
+      success: null,
+      errors: null,
+    }
+  },
+  props: {
+    nonce: { type: String, required: true },
+    email: { type: String, required: true },
+  },
+  methods: {
+    async handleInput() {
+      this.disabled = true
+    },
+    async handleInputValid() {
+      this.disabled = false
+    },
+    async submit() {
+      const { name, password, about } = this.formData
+      const { email, nonce } = this
+      try {
+        await this.$apollo.mutate({
+          mutation: SignupVerificationMutation,
+          variables: { name, password, about, email, nonce }
+        })
+        this.success = true
+        setTimeout(() => {
+          this.$emit('userCreated', {
+            email, password
+          })
+        }, 3000)
+      } catch (err) {
+        this.errors = err
+      }
+    },
+    matchPassword(rule, value, callback, source, options) {
+      var errors = []
+      if (this.formData.password !== value) {
+        errors.push(
+          new Error(this.$t('settings.security.change-password.message-new-password-missmatch')),
+        )
+      }
+      callback(errors)
+    },
+  },
+}
+</script>
diff --git a/webapp/components/Registration/Signup.spec.js b/webapp/components/Registration/Signup.spec.js
new file mode 100644
index 000000000..eb0d65d42
--- /dev/null
+++ b/webapp/components/Registration/Signup.spec.js
@@ -0,0 +1,145 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Signup, { SignupMutation, SignupByInvitationMutation } from './Signup'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('Signup', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+  let propsData
+
+  beforeEach(() => {
+    mocks = {
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $t: jest.fn(),
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue({ data: { Signup: { email: 'mail@example.org' } } }),
+      },
+    }
+    propsData = {}
+  })
+
+  describe('mount', () => {
+    beforeEach(jest.useFakeTimers)
+
+    Wrapper = () => {
+      return mount(Signup, {
+        mocks,
+        propsData,
+        localVue,
+      })
+    }
+
+    describe('without invitation code', () => {
+      it('renders signup form', () => {
+        wrapper = Wrapper()
+        expect(wrapper.find('.signup').exists()).toBe(true)
+      })
+
+      describe('submit', () => {
+        beforeEach(async () => {
+          wrapper = Wrapper()
+          wrapper.find('input#email').setValue('mail@example.org')
+          await wrapper.find('form').trigger('submit')
+        })
+
+        it('calls Signup graphql mutation', () => {
+          const expected = expect.objectContaining({ mutation: SignupMutation })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
+
+        it('delivers email to backend', () => {
+          const expected = expect.objectContaining({
+            variables: { email: 'mail@example.org', token: null },
+          })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
+
+        it('hides form to avoid re-submission', () => {
+          expect(wrapper.find('form').exists()).not.toBeTruthy()
+        })
+
+        it('displays a message that a mail for email verification was sent', () => {
+          const expected = ['registration.signup.form.success', { email: 'mail@example.org' }]
+          expect(mocks.$t).toHaveBeenCalledWith(...expected)
+        })
+
+        describe('after animation', () => {
+          beforeEach(jest.runAllTimers)
+
+          it('emits `handleSubmitted`', () => {
+            expect(wrapper.emitted('handleSubmitted')).toEqual([[{ email: 'mail@example.org' }]])
+          })
+        })
+      })
+    })
+
+    describe('with invitation code', () => {
+      let action
+      beforeEach(() => {
+        propsData.token = '666777'
+        action = async () => {
+          wrapper = Wrapper()
+          wrapper.find('input#email').setValue('mail@example.org')
+          await wrapper.find('form').trigger('submit')
+        }
+      })
+
+      describe('submit', () => {
+        it('calls SignupByInvitation graphql mutation', async () => {
+          await action()
+          const expected = expect.objectContaining({ mutation: SignupByInvitationMutation })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
+
+        it('delivers invitation token to backend', async () => {
+          await action()
+          const expected = expect.objectContaining({
+            variables: { email: 'mail@example.org', token: '666777' },
+          })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
+
+        describe('in case a user account with the email already exists', () => {
+          beforeEach(() => {
+            mocks.$apollo.mutate = jest
+              .fn()
+              .mockRejectedValue(
+                new Error('UserInputError: User account with this email already exists.'),
+              )
+          })
+
+          it.skip('explains the error', async () => {
+            await action()
+            expect(mocks.$t).toHaveBeenCalledWith('registration.signup.form.errors.email-exists')
+          })
+        })
+
+        describe('in case the invitation code was incorrect', () => {
+          beforeEach(() => {
+            mocks.$apollo.mutate = jest
+              .fn()
+              .mockRejectedValue(
+                new Error('UserInputError: Invitation code already used or does not exist.'),
+              )
+          })
+
+          it.skip('explains the error', async () => {
+            await action()
+            expect(mocks.$t).toHaveBeenCalledWith(
+              'registration.signup.form.errors.invalid-invitation-token',
+            )
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
new file mode 100644
index 000000000..3324b51c5
--- /dev/null
+++ b/webapp/components/Registration/Signup.vue
@@ -0,0 +1,141 @@
+<template>
+  <ds-card class="signup">
+    <ds-space margin="large">
+      <ds-form
+        v-if="!success && !error"
+        @input="handleInput"
+        @input-valid="handleInputValid"
+        v-model="formData"
+        :schema="formSchema"
+        @submit="handleSubmit"
+      >
+        <h1>{{ $t('registration.signup.title') }}</h1>
+        <ds-space v-if="token" margin-botton="large">
+          <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
+        </ds-space>
+        <ds-space margin-botton="large">
+          <ds-text>
+            {{ $t('registration.signup.form.description') }}
+          </ds-text>
+        </ds-space>
+        <ds-input
+          :placeholder="$t('login.email')"
+          type="email"
+          id="email"
+          model="email"
+          name="email"
+          icon="envelope"
+        />
+        <ds-button
+          :disabled="disabled"
+          :loading="$apollo.loading"
+          primary
+          fullwidth
+          name="submit"
+          type="submit"
+          icon="envelope"
+        >
+          {{ $t('registration.signup.form.submit') }}
+        </ds-button>
+      </ds-form>
+      <div v-else>
+        <template v-if="!error">
+          <sweetalert-icon icon="success" />
+          <ds-text align="center" v-html="submitMessage" />
+        </template>
+        <template v-else>
+          <sweetalert-icon icon="error" />
+          <ds-text align="center">
+            {{ error.message }}
+          </ds-text>
+        </template>
+      </div>
+    </ds-space>
+  </ds-card>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export const SignupMutation = gql`
+  mutation($email: String!) {
+    Signup(email: $email) {
+      email
+    }
+  }
+`
+export const SignupByInvitationMutation = gql`
+  mutation($email: String!, $token: String!) {
+    SignupByInvitation(email: $email, token: $token) {
+      email
+    }
+  }
+`
+export default {
+  components: {
+    SweetalertIcon,
+  },
+  props: {
+    token: { type: String, default: null },
+  },
+  data() {
+    return {
+      formData: {
+        email: '',
+      },
+      formSchema: {
+        email: {
+          type: 'email',
+          required: true,
+          message: this.$t('common.validations.email'),
+        },
+      },
+      disabled: true,
+      success: false,
+      error: null,
+    }
+  },
+  computed: {
+    submitMessage() {
+      const { email } = this.formData
+      return this.$t('registration.signup.form.success', { email })
+    },
+  },
+  methods: {
+    handleInput() {
+      this.disabled = true
+    },
+    handleInputValid() {
+      this.disabled = false
+    },
+    async handleSubmit() {
+      const mutation = this.token ? SignupByInvitationMutation : SignupMutation
+      const { email } = this.formData
+      const { token } = this
+
+      try {
+        await this.$apollo.mutate({ mutation, variables: { email, token } })
+        this.success = true
+
+        setTimeout(() => {
+          this.$emit('handleSubmitted', { email })
+        }, 3000)
+      } catch (err) {
+        const { message } = err
+        const mapping = {
+          'User account with this email already exists': 'email-exists',
+          'Invitation code already used or does not exist': 'invalid-invitation-token',
+        }
+        for (const [pattern, key] of Object.entries(mapping)) {
+          if (message.includes(pattern))
+            this.error = { key, message: this.$t(`registration.signup.form.errors.${key}`) }
+        }
+        if (!this.error) {
+          this.$toast.error(message)
+        }
+      }
+    },
+  },
+}
+</script>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1df329fe1..4a6b0955e 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -14,7 +14,8 @@
     "moreInfo": "Was ist Human Connection?",
     "moreInfoURL": "https://human-connection.org",
     "moreInfoHint": "zur Präsentationsseite",
-    "hello": "Hallo"
+    "hello": "Hallo",
+    "success": "Du bist eingeloggt!"
   },
   "password-reset": {
     "title": "Passwort zurücksetzen",
@@ -24,6 +25,24 @@
       "submitted": "Eine E-Mail mit weiteren Instruktionen wurde verschickt an <b>{email}</b>"
     }
   },
+  "registration": {
+    "signup": {
+      "title": "Mach mit bei Human Connection!",
+      "form": {
+        "description": "Um loszulegen, gib deine E-Mail Adresse ein:",
+        "errors": {
+          "email-exists": "Es gibt schon ein Benutzerkonto mit dieser E-Mail Adresse!",
+          "invalid-invitation-token": "Es sieht so aus, als ob der Einladungscode schon eingelöst wurde. Jeder Code kann nur einmalig benutzt werden."
+        },
+      "submit": "Konto erstellen",
+      "success": "Eine Mail mit einem Bestätigungslink für die Registrierung wurde an <b>{email}</b> geschickt"
+      }
+    },
+    "create-user-account": {
+      "title": "Benutzerkonto anlegen",
+      "success": "Dein Benutzerkonto wurde erstellt!"
+    }
+  },
   "verify-code": {
     "form": {
       "code": "Code eingeben",
@@ -174,6 +193,11 @@
     },
     "settings": {
       "name": "Einstellungen"
+    },
+    "invites": {
+      "name": "Benutzer einladen",
+      "title": "Benutzer als Admin anmelden",
+      "description": "Dieses Anmeldeformular ist zu sehen sobald die Anmeldung öffentlich zugänglich ist."
     }
   },
   "post": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index bdf6f85fb..2919a38ca 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -14,7 +14,8 @@
     "moreInfo": "What is Human Connection?",
     "moreInfoURL": "https://human-connection.org/en/",
     "moreInfoHint": "to the presentation page",
-    "hello": "Hello"
+    "hello": "Hello",
+    "success": "You are logged in!"
   },
   "password-reset": {
     "title": "Reset your password",
@@ -24,6 +25,25 @@
       "submitted": "A mail with further instruction has been sent to <b>{email}</b>"
     }
   },
+  "registration": {
+    "signup": {
+      "title": "Join Human Connection!",
+      "form": {
+        "description": "To get started, enter your email address:",
+        "invitation-code": "Your invitation code is: <b>{code}</b>",
+        "errors": {
+          "email-exists": "There is already a user account with this email address!",
+          "invalid-invitation-token": "It looks like as if the invitation has been used already. Invitation links can only be used once."
+        },
+      "submit": "Create an account",
+      "success": "A mail with a link to complete your registration has been sent to <b>{email}</b>"
+      }
+    },
+    "create-user-account": {
+      "title": "Create user account",
+      "success": "Your account has been created!"
+    }
+  },
   "verify-code": {
     "form": {
       "code": "Enter your code",
@@ -174,6 +194,11 @@
     },
     "settings": {
       "name": "Settings"
+    },
+    "invites": {
+      "name": "Invite users",
+      "title": "Signup users as admin",
+      "description": "This registration form will be visible as soon as the registration is open to the public."
     }
   },
   "post": {
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 7383f408a..cb3a3c643 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -31,10 +31,10 @@ module.exports = {
       'password-reset-request',
       'password-reset-verify-code',
       'password-reset-change-password',
-      'register',
-      'signup',
-      'reset',
-      'reset-token',
+      // 'registration-signup', TODO: uncomment to open public registration
+      'registration-signup-by-invitation-code',
+      'registration-verify-code',
+      'registration-create-user-account',
       'pages-slug',
     ],
     // pages to keep alive
diff --git a/webapp/pages/admin.vue b/webapp/pages/admin.vue
index 0cbee05d5..1cf503808 100644
--- a/webapp/pages/admin.vue
+++ b/webapp/pages/admin.vue
@@ -54,6 +54,10 @@ export default {
           name: this.$t('admin.tags.name'),
           path: `/admin/tags`,
         },
+        {
+          name: this.$t('admin.invites.name'),
+          path: `/admin/invite`,
+        },
         // TODO implement
         /* {
           name: this.$t('admin.settings.name'),
diff --git a/webapp/pages/admin/invite.vue b/webapp/pages/admin/invite.vue
new file mode 100644
index 000000000..36e679112
--- /dev/null
+++ b/webapp/pages/admin/invite.vue
@@ -0,0 +1,23 @@
+<template>
+  <ds-section>
+    <ds-space>
+      <ds-heading size="h3">
+        {{ $t('admin.invites.title') }}
+      </ds-heading>
+      <ds-text>
+        {{ $t('admin.invites.description') }}
+      </ds-text>
+    </ds-space>
+    <signup />
+  </ds-section>
+</template>
+
+<script>
+import Signup from '~/components/Registration/Signup'
+
+export default {
+  components: {
+    Signup,
+  },
+}
+</script>
diff --git a/webapp/pages/login.vue b/webapp/pages/login.vue
index 2679b2e99..e659d8448 100644
--- a/webapp/pages/login.vue
+++ b/webapp/pages/login.vue
@@ -115,7 +115,7 @@ export default {
     async onSubmit() {
       try {
         await this.$store.dispatch('auth/login', { ...this.form })
-        this.$toast.success('You are logged in!')
+        this.$toast.success(this.$t('login.success'))
         this.$router.replace(this.$route.query.path || '/')
       } catch (err) {
         this.$toast.error(err.message)
diff --git a/webapp/pages/registration/create-user-account.vue b/webapp/pages/registration/create-user-account.vue
new file mode 100644
index 000000000..812e4ec60
--- /dev/null
+++ b/webapp/pages/registration/create-user-account.vue
@@ -0,0 +1,27 @@
+<template>
+  <create-user-account @userCreated="handleUserCreated" :email="email" :nonce="nonce" />
+</template>
+
+<script>
+import CreateUserAccount from '~/components/Registration/CreateUserAccount'
+export default {
+  data() {
+    const { nonce = '', email = '' } = this.$route.query
+    return { nonce, email }
+  },
+  components: {
+    CreateUserAccount,
+  },
+  methods: {
+    async handleUserCreated({email, password}) {
+      try {
+        await this.$store.dispatch('auth/login', { email, password })
+        this.$toast.success('You are logged in!')
+        this.$router.push('/')
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
+  },
+}
+</script>

From 29bbeaa0fae4cd4d85dc0c64cdc8b847c6a192eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 8 Jul 2019 17:42:53 +0200
Subject: [PATCH 02/16] Fix tests by calling `wrapper.html()` once more

I really don't understand why, but apparently `wrapper.html()` does some
re-rendering which in our cases fixes the tests, because we reach the
new sub component in the DOM tree.
---
 .../Registration/CreateUserAccount.spec.js        | 15 +++++++++++----
 .../components/Registration/CreateUserAccount.vue |  5 +++--
 webapp/components/Registration/Signup.spec.js     |  5 +++--
 webapp/pages/registration/create-user-account.vue |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/webapp/components/Registration/CreateUserAccount.spec.js b/webapp/components/Registration/CreateUserAccount.spec.js
index f8364ca0d..05a11bc33 100644
--- a/webapp/components/Registration/CreateUserAccount.spec.js
+++ b/webapp/components/Registration/CreateUserAccount.spec.js
@@ -56,6 +56,7 @@ describe('CreateUserAccount', () => {
             wrapper.find('input#password').setValue('hellopassword')
             wrapper.find('input#confirmPassword').setValue('hellopassword')
             await wrapper.find('form').trigger('submit')
+            await wrapper.html()
           }
         })
 
@@ -100,22 +101,28 @@ describe('CreateUserAccount', () => {
           describe('after timeout', () => {
             beforeEach(jest.useFakeTimers)
 
-            it('emits `userCreated` with user', async () => {
+            it('emits `userCreated` with { password, email }', async () => {
               await action()
               jest.runAllTimers()
-              expect(wrapper.emitted('userCreated')).toBeTruthy()
+              expect(wrapper.emitted('userCreated')).toEqual([
+                [
+                  {
+                    email: 'sixseven@example.org',
+                    password: 'hellopassword',
+                  },
+                ],
+              ])
             })
           })
         })
 
         describe('in case mutation rejects', () => {
           beforeEach(() => {
-            mocks.$apollo.mutate.mockRejectedValue(new Error('Invalid nonce'))
+            mocks.$apollo.mutate = jest.fn().mockRejectedValue(new Error('Invalid nonce'))
           })
 
           it('displays form errors', async () => {
             await action()
-            jest.runAllTimers()
             expect(wrapper.find('.errors').text()).toContain('Invalid nonce')
           })
         })
diff --git a/webapp/components/Registration/CreateUserAccount.vue b/webapp/components/Registration/CreateUserAccount.vue
index f38ebe509..4b91ab216 100644
--- a/webapp/components/Registration/CreateUserAccount.vue
+++ b/webapp/components/Registration/CreateUserAccount.vue
@@ -143,12 +143,13 @@ export default {
       try {
         await this.$apollo.mutate({
           mutation: SignupVerificationMutation,
-          variables: { name, password, about, email, nonce }
+          variables: { name, password, about, email, nonce },
         })
         this.success = true
         setTimeout(() => {
           this.$emit('userCreated', {
-            email, password
+            email,
+            password,
           })
         }, 3000)
       } catch (err) {
diff --git a/webapp/components/Registration/Signup.spec.js b/webapp/components/Registration/Signup.spec.js
index eb0d65d42..e66b39bb7 100644
--- a/webapp/components/Registration/Signup.spec.js
+++ b/webapp/components/Registration/Signup.spec.js
@@ -90,6 +90,7 @@ describe('Signup', () => {
           wrapper = Wrapper()
           wrapper.find('input#email').setValue('mail@example.org')
           await wrapper.find('form').trigger('submit')
+          await wrapper.html()
         }
       })
 
@@ -117,7 +118,7 @@ describe('Signup', () => {
               )
           })
 
-          it.skip('explains the error', async () => {
+          it('explains the error', async () => {
             await action()
             expect(mocks.$t).toHaveBeenCalledWith('registration.signup.form.errors.email-exists')
           })
@@ -132,7 +133,7 @@ describe('Signup', () => {
               )
           })
 
-          it.skip('explains the error', async () => {
+          it('explains the error', async () => {
             await action()
             expect(mocks.$t).toHaveBeenCalledWith(
               'registration.signup.form.errors.invalid-invitation-token',
diff --git a/webapp/pages/registration/create-user-account.vue b/webapp/pages/registration/create-user-account.vue
index 812e4ec60..677aea5eb 100644
--- a/webapp/pages/registration/create-user-account.vue
+++ b/webapp/pages/registration/create-user-account.vue
@@ -13,7 +13,7 @@ export default {
     CreateUserAccount,
   },
   methods: {
-    async handleUserCreated({email, password}) {
+    async handleUserCreated({ email, password }) {
       try {
         await this.$store.dispatch('auth/login', { email, password })
         this.$toast.success('You are logged in!')

From 813a6b5c50e9b3ea39d6816d9026c809990bd72d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 8 Jul 2019 17:55:50 +0200
Subject: [PATCH 03/16] Subpages of registration/ must be unauthenticated

---
 webapp/pages/registration.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 webapp/pages/registration.vue

diff --git a/webapp/pages/registration.vue b/webapp/pages/registration.vue
new file mode 100644
index 000000000..e75ec03e1
--- /dev/null
+++ b/webapp/pages/registration.vue
@@ -0,0 +1,14 @@
+<template>
+  <nuxt-child />
+</template>
+
+<script>
+export default {
+  layout: 'default',
+  asyncData({ store, redirect }) {
+    if (store.getters['auth/isLoggedIn']) {
+      redirect('/')
+    }
+  },
+}
+</script>

From 90aa1822b5ed9757b7047a86a518782c8c51c78b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 8 Jul 2019 18:13:24 +0200
Subject: [PATCH 04/16] Disable the form button with a slot scope

---
 webapp/components/Password/Change.vue         |  12 +-
 .../PasswordReset/ChangePassword.vue          |  62 +++++-----
 .../Registration/CreateUserAccount.vue        | 108 +++++++++---------
 3 files changed, 80 insertions(+), 102 deletions(-)

diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index 63c797157..ab9a89cbc 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -3,10 +3,8 @@
     v-model="formData"
     :schema="formSchema"
     @submit="handleSubmit"
-    @input="handleInput"
-    @input-valid="handleInputValid"
   >
-    <template>
+    <template slot-scope="{ errors }">
       <ds-input
         id="oldPassword"
         model="oldPassword"
@@ -30,7 +28,7 @@
       />
       <password-strength :password="formData.newPassword" />
       <ds-space margin-top="base">
-        <ds-button :loading="loading" :disabled="disabled" primary>
+        <ds-button :loading="loading" :disabled="errors" primary>
           {{ $t('settings.security.change-password.button') }}
         </ds-button>
       </ds-space>
@@ -81,12 +79,6 @@ export default {
     }
   },
   methods: {
-    async handleInput(data) {
-      this.disabled = true
-    },
-    async handleInputValid(data) {
-      this.disabled = false
-    },
     async handleSubmit(data) {
       this.loading = true
       const mutation = gql`
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index 5a12f9938..4353cbc88 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -1,16 +1,14 @@
 <template>
   <ds-card class="verify-code">
     <ds-space margin="large">
-      <template>
-        <ds-form
-          v-if="!changePasswordResult"
-          v-model="formData"
-          :schema="formSchema"
-          @submit="handleSubmitPassword"
-          @input="handleInput"
-          @input-valid="handleInputValid"
-          class="change-password"
-        >
+      <ds-form
+        v-if="!changePasswordResult"
+        v-model="formData"
+        :schema="formSchema"
+        @submit="handleSubmitPassword"
+        class="change-password"
+      >
+        <template slot-scope="{ errors }">
           <ds-input
             id="newPassword"
             model="newPassword"
@@ -27,28 +25,28 @@
           />
           <password-strength :password="formData.newPassword" />
           <ds-space margin-top="base">
-            <ds-button :loading="$apollo.loading" :disabled="disabled" primary>
+            <ds-button :loading="$apollo.loading" :disabled="errors" primary>
               {{ $t('settings.security.change-password.button') }}
             </ds-button>
           </ds-space>
-        </ds-form>
-        <ds-text v-else>
-          <template v-if="changePasswordResult === 'success'">
-            <sweetalert-icon icon="success" />
-            <ds-text>
-              {{ $t(`verify-code.form.change-password.success`) }}
-            </ds-text>
-          </template>
-          <template v-else>
-            <sweetalert-icon icon="error" />
-            <ds-text align="left">
-              {{ $t(`verify-code.form.change-password.error`) }}
-              {{ $t('verify-code.form.change-password.help') }}
-            </ds-text>
-            <a href="mailto:support@human-connection.org">support@human-connection.org</a>
-          </template>
-        </ds-text>
-      </template>
+        </template>
+      </ds-form>
+      <ds-text v-else>
+        <template v-if="changePasswordResult === 'success'">
+          <sweetalert-icon icon="success" />
+          <ds-text>
+            {{ $t(`verify-code.form.change-password.success`) }}
+          </ds-text>
+        </template>
+        <template v-else>
+          <sweetalert-icon icon="error" />
+          <ds-text align="left">
+            {{ $t(`verify-code.form.change-password.error`) }}
+            {{ $t('verify-code.form.change-password.help') }}
+          </ds-text>
+          <a href="mailto:support@human-connection.org">support@human-connection.org</a>
+        </template>
+      </ds-text>
     </ds-space>
   </ds-card>
 </template>
@@ -95,12 +93,6 @@ export default {
     }
   },
   methods: {
-    async handleInput() {
-      this.disabled = true
-    },
-    async handleInputValid() {
-      this.disabled = false
-    },
     async handleSubmitPassword() {
       const mutation = gql`
         mutation($code: String!, $email: String!, $newPassword: String!) {
diff --git a/webapp/components/Registration/CreateUserAccount.vue b/webapp/components/Registration/CreateUserAccount.vue
index 4b91ab216..d7041ce26 100644
--- a/webapp/components/Registration/CreateUserAccount.vue
+++ b/webapp/components/Registration/CreateUserAccount.vue
@@ -10,61 +10,61 @@
   <ds-form
     v-else
     class="create-user-account"
-    @input="handleInput"
-    @input-valid="handleInputValid"
     v-model="formData"
     :schema="formSchema"
     @submit="submit"
   >
-    <ds-card :header="$t('registration.create-user-account.title')">
-      <ds-input
-        id="name"
-        model="name"
-        icon="user"
-        :label="$t('settings.data.labelName')"
-        :placeholder="$t('settings.data.namePlaceholder')"
-      />
-      <ds-input
-        id="bio"
-        model="about"
-        type="textarea"
-        rows="3"
-        :label="$t('settings.data.labelBio')"
-        :placeholder="$t('settings.data.labelBio')"
-      />
-      <ds-input
-        id="password"
-        model="password"
-        type="password"
-        autocomplete="off"
-        :label="$t('settings.security.change-password.label-new-password')"
-      />
-      <ds-input
-        id="confirmPassword"
-        model="confirmPassword"
-        type="password"
-        autocomplete="off"
-        :label="$t('settings.security.change-password.label-new-password-confirm')"
-      />
-      <password-strength :password="formData.password" />
-      <template slot="footer">
-        <ds-space class="errors" v-if="errors">
-          <ds-text align="center" bold color="danger">
-            {{ errors.message }}
-          </ds-text>
-        </ds-space>
-        <ds-button
-          style="float: right;"
-          icon="check"
-          type="submit"
-          :loading="$apollo.loading"
-          :disabled="disabled"
-          primary
-        >
-          {{ $t('actions.save') }}
-        </ds-button>
-      </template>
-    </ds-card>
+    <template slot-scope="{ errors }">
+      <ds-card :header="$t('registration.create-user-account.title')">
+        <ds-input
+          id="name"
+          model="name"
+          icon="user"
+          :label="$t('settings.data.labelName')"
+          :placeholder="$t('settings.data.namePlaceholder')"
+        />
+        <ds-input
+          id="bio"
+          model="about"
+          type="textarea"
+          rows="3"
+          :label="$t('settings.data.labelBio')"
+          :placeholder="$t('settings.data.labelBio')"
+        />
+        <ds-input
+          id="password"
+          model="password"
+          type="password"
+          autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password')"
+        />
+        <ds-input
+          id="confirmPassword"
+          model="confirmPassword"
+          type="password"
+          autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password-confirm')"
+        />
+        <password-strength :password="formData.password" />
+        <template slot="footer">
+          <ds-space class="errors" v-if="errors">
+            <ds-text align="center" bold color="danger">
+              {{ errors.message }}
+            </ds-text>
+          </ds-space>
+          <ds-button
+            style="float: right;"
+            icon="check"
+            type="submit"
+            :loading="$apollo.loading"
+            :disabled="errors"
+            primary
+          >
+            {{ $t('actions.save') }}
+          </ds-button>
+        </template>
+      </ds-card>
+    </template>
   </ds-form>
 </template>
 
@@ -131,12 +131,6 @@ export default {
     email: { type: String, required: true },
   },
   methods: {
-    async handleInput() {
-      this.disabled = true
-    },
-    async handleInputValid() {
-      this.disabled = false
-    },
     async submit() {
       const { name, password, about } = this.formData
       const { email, nonce } = this

From 47a9d38790bffd15e98ac66a7bdd5d3da54d0303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 8 Jul 2019 18:15:46 +0200
Subject: [PATCH 05/16] Consistency for email success messages

---
 webapp/components/Registration/Signup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index 3324b51c5..175db1fd6 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -40,7 +40,7 @@
       </ds-form>
       <div v-else>
         <template v-if="!error">
-          <sweetalert-icon icon="success" />
+          <sweetalert-icon icon="info" />
           <ds-text align="center" v-html="submitMessage" />
         </template>
         <template v-else>

From 4207aee09d095e26600ac816b2a37bafd4b2919c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 8 Jul 2019 18:57:57 +0200
Subject: [PATCH 06/16] DRY up password validations

---
 cypress/integration/common/steps.js           |  2 +-
 webapp/components/Password/Change.spec.js     | 14 ++---
 webapp/components/Password/Change.vue         | 54 +++++--------------
 .../PasswordReset/ChangePassword.spec.js      |  6 +--
 .../PasswordReset/ChangePassword.vue          | 52 ++++++------------
 .../Registration/CreateUserAccount.spec.js    |  4 +-
 .../Registration/CreateUserAccount.vue        | 42 ++++-----------
 webapp/components/utils/PasswordFormHelper.js | 36 +++++++++++++
 8 files changed, 88 insertions(+), 122 deletions(-)
 create mode 100644 webapp/components/utils/PasswordFormHelper.js

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index f8d18baa0..61d46b5df 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -278,7 +278,7 @@ When("I fill the password form with:", table => {
     .type(table["Your old password"])
     .get("input[id=newPassword]")
     .type(table["Your new passsword"])
-    .get("input[id=confirmPassword]")
+    .get("input[id=passwordConfirmation]")
     .type(table["Confirm new password"]);
 });
 
diff --git a/webapp/components/Password/Change.spec.js b/webapp/components/Password/Change.spec.js
index a15695a55..ef89c34f7 100644
--- a/webapp/components/Password/Change.spec.js
+++ b/webapp/components/Password/Change.spec.js
@@ -54,7 +54,7 @@ describe('ChangePassword.vue', () => {
         describe('match', () => {
           beforeEach(() => {
             wrapper.find('input#oldPassword').setValue('some secret')
-            wrapper.find('input#newPassword').setValue('some secret')
+            wrapper.find('input#password').setValue('some secret')
           })
 
           it('invalid', () => {
@@ -90,8 +90,8 @@ describe('ChangePassword.vue', () => {
     describe('given valid input', () => {
       beforeEach(() => {
         wrapper.find('input#oldPassword').setValue('supersecret')
-        wrapper.find('input#newPassword').setValue('superdupersecret')
-        wrapper.find('input#confirmPassword').setValue('superdupersecret')
+        wrapper.find('input#password').setValue('superdupersecret')
+        wrapper.find('input#passwordConfirmation').setValue('superdupersecret')
       })
 
       describe('submit form', () => {
@@ -109,8 +109,8 @@ describe('ChangePassword.vue', () => {
             expect.objectContaining({
               variables: {
                 oldPassword: 'supersecret',
-                newPassword: 'superdupersecret',
-                confirmPassword: 'superdupersecret',
+                password: 'superdupersecret',
+                passwordConfirmation: 'superdupersecret',
               },
             }),
           )
@@ -135,8 +135,8 @@ describe('ChangePassword.vue', () => {
         /* describe('mutation rejects', () => {
           beforeEach(async () => {
             await wrapper.find('input#oldPassword').setValue('supersecret')
-            await wrapper.find('input#newPassword').setValue('supersecret')
-            await wrapper.find('input#confirmPassword').setValue('supersecret')
+            await wrapper.find('input#password').setValue('supersecret')
+            await wrapper.find('input#passwordConfirmation').setValue('supersecret')
           })
 
           it('displays error message', async () => {
diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index ab9a89cbc..dabc53d6f 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -1,9 +1,5 @@
 <template>
-  <ds-form
-    v-model="formData"
-    :schema="formSchema"
-    @submit="handleSubmit"
-  >
+  <ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit">
     <template slot-scope="{ errors }">
       <ds-input
         id="oldPassword"
@@ -13,20 +9,20 @@
         :label="$t('settings.security.change-password.label-old-password')"
       />
       <ds-input
-        id="newPassword"
-        model="newPassword"
+        id="password"
+        model="password"
         type="password"
         autocomplete="off"
         :label="$t('settings.security.change-password.label-new-password')"
       />
       <ds-input
-        id="confirmPassword"
-        model="confirmPassword"
+        id="passwordConfirmation"
+        model="passwordConfirmation"
         type="password"
         autocomplete="off"
         :label="$t('settings.security.change-password.label-new-password-confirm')"
       />
-      <password-strength :password="formData.newPassword" />
+      <password-strength :password="formData.password" />
       <ds-space margin-top="base">
         <ds-button :loading="loading" :disabled="errors" primary>
           {{ $t('settings.security.change-password.button') }}
@@ -39,6 +35,7 @@
 <script>
 import gql from 'graphql-tag'
 import PasswordStrength from './Strength'
+import PasswordForm from '~/components/utils/PasswordFormHelper'
 
 export default {
   name: 'ChangePassword',
@@ -46,11 +43,11 @@ export default {
     PasswordStrength,
   },
   data() {
+    const passwordForm = PasswordForm({ translate: this.$t })
     return {
       formData: {
         oldPassword: '',
-        newPassword: '',
-        confirmPassword: '',
+        ...passwordForm.formData,
       },
       formSchema: {
         oldPassword: {
@@ -58,21 +55,7 @@ export default {
           required: true,
           message: this.$t('settings.security.change-password.message-old-password-required'),
         },
-        newPassword: {
-          type: 'string',
-          required: true,
-          message: this.$t('settings.security.change-password.message-new-password-required'),
-        },
-        confirmPassword: [
-          { validator: this.matchPassword },
-          {
-            type: 'string',
-            required: true,
-            message: this.$t(
-              'settings.security.change-password.message-new-password-confirm-required',
-            ),
-          },
-        ],
+        ...passwordForm.formSchema,
       },
       loading: false,
       disabled: true,
@@ -82,8 +65,8 @@ export default {
     async handleSubmit(data) {
       this.loading = true
       const mutation = gql`
-        mutation($oldPassword: String!, $newPassword: String!) {
-          changePassword(oldPassword: $oldPassword, newPassword: $newPassword)
+        mutation($oldPassword: String!, $password: String!) {
+          changePassword(oldPassword: $oldPassword, newPassword: $password)
         }
       `
       const variables = this.formData
@@ -94,8 +77,8 @@ export default {
         this.$toast.success(this.$t('settings.security.change-password.success'))
         this.formData = {
           oldPassword: '',
-          newPassword: '',
-          confirmPassword: '',
+          password: '',
+          passwordConfirmation: '',
         }
       } catch (err) {
         this.$toast.error(err.message)
@@ -103,15 +86,6 @@ export default {
         this.loading = false
       }
     },
-    matchPassword(rule, value, callback, source, options) {
-      var errors = []
-      if (this.formData.newPassword !== value) {
-        errors.push(
-          new Error(this.$t('settings.security.change-password.message-new-password-missmatch')),
-        )
-      }
-      callback(errors)
-    },
   },
 }
 </script>
diff --git a/webapp/components/PasswordReset/ChangePassword.spec.js b/webapp/components/PasswordReset/ChangePassword.spec.js
index 88caa6c6d..62488c916 100644
--- a/webapp/components/PasswordReset/ChangePassword.spec.js
+++ b/webapp/components/PasswordReset/ChangePassword.spec.js
@@ -47,8 +47,8 @@ describe('ChangePassword ', () => {
       describe('submitting new password', () => {
         beforeEach(() => {
           wrapper = Wrapper()
-          wrapper.find('input#newPassword').setValue('supersecret')
-          wrapper.find('input#confirmPassword').setValue('supersecret')
+          wrapper.find('input#password').setValue('supersecret')
+          wrapper.find('input#passwordConfirmation').setValue('supersecret')
           wrapper.find('form').trigger('submit')
         })
 
@@ -58,7 +58,7 @@ describe('ChangePassword ', () => {
 
         it('delivers new password to backend', () => {
           const expected = expect.objectContaining({
-            variables: { code: '123456', email: 'mail@example.org', newPassword: 'supersecret' },
+            variables: { code: '123456', email: 'mail@example.org', password: 'supersecret' },
           })
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
         })
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index 4353cbc88..f59edffa1 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -10,20 +10,20 @@
       >
         <template slot-scope="{ errors }">
           <ds-input
-            id="newPassword"
-            model="newPassword"
+            id="password"
+            model="password"
             type="password"
             autocomplete="off"
             :label="$t('settings.security.change-password.label-new-password')"
           />
           <ds-input
-            id="confirmPassword"
-            model="confirmPassword"
+            id="passwordConfirmation"
+            model="passwordConfirmation"
             type="password"
             autocomplete="off"
             :label="$t('settings.security.change-password.label-new-password-confirm')"
           />
-          <password-strength :password="formData.newPassword" />
+          <password-strength :password="formData.password" />
           <ds-space margin-top="base">
             <ds-button :loading="$apollo.loading" :disabled="errors" primary>
               {{ $t('settings.security.change-password.button') }}
@@ -55,6 +55,7 @@
 import PasswordStrength from '../Password/Strength'
 import gql from 'graphql-tag'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
+import PasswordForm from '~/components/utils/PasswordFormHelper'
 
 export default {
   components: {
@@ -66,27 +67,13 @@ export default {
     code: { type: String, required: true },
   },
   data() {
+    const passwordForm = PasswordForm({ translate: this.$t })
     return {
       formData: {
-        newPassword: '',
-        confirmPassword: '',
+        ...passwordForm.formData,
       },
       formSchema: {
-        newPassword: {
-          type: 'string',
-          required: true,
-          message: this.$t('settings.security.change-password.message-new-password-required'),
-        },
-        confirmPassword: [
-          { validator: this.matchPassword },
-          {
-            type: 'string',
-            required: true,
-            message: this.$t(
-              'settings.security.change-password.message-new-password-confirm-required',
-            ),
-          },
-        ],
+        ...passwordForm.formSchema,
       },
       disabled: true,
       changePasswordResult: null,
@@ -95,13 +82,13 @@ export default {
   methods: {
     async handleSubmitPassword() {
       const mutation = gql`
-        mutation($code: String!, $email: String!, $newPassword: String!) {
-          resetPassword(code: $code, email: $email, newPassword: $newPassword)
+        mutation($code: String!, $email: String!, $password: String!) {
+          resetPassword(code: $code, email: $email, newPassword: $password)
         }
       `
-      const { newPassword } = this.formData
+      const { password } = this.formData
       const { email, code } = this
-      const variables = { newPassword, email, code }
+      const variables = { password, email, code }
       try {
         const {
           data: { resetPassword },
@@ -111,22 +98,13 @@ export default {
           this.$emit('passwordResetResponse', this.changePasswordResult)
         }, 3000)
         this.formData = {
-          newPassword: '',
-          confirmPassword: '',
+          password: '',
+          passwordConfirmation: '',
         }
       } catch (err) {
         this.$toast.error(err.message)
       }
     },
-    matchPassword(rule, value, callback, source, options) {
-      var errors = []
-      if (this.formData.newPassword !== value) {
-        errors.push(
-          new Error(this.$t('settings.security.change-password.message-new-password-missmatch')),
-        )
-      }
-      callback(errors)
-    },
   },
 }
 </script>
diff --git a/webapp/components/Registration/CreateUserAccount.spec.js b/webapp/components/Registration/CreateUserAccount.spec.js
index 05a11bc33..ca1335e0b 100644
--- a/webapp/components/Registration/CreateUserAccount.spec.js
+++ b/webapp/components/Registration/CreateUserAccount.spec.js
@@ -54,7 +54,7 @@ describe('CreateUserAccount', () => {
             wrapper = Wrapper()
             wrapper.find('input#name').setValue('John Doe')
             wrapper.find('input#password').setValue('hellopassword')
-            wrapper.find('input#confirmPassword').setValue('hellopassword')
+            wrapper.find('input#passwordConfirmation').setValue('hellopassword')
             await wrapper.find('form').trigger('submit')
             await wrapper.html()
           }
@@ -123,7 +123,7 @@ describe('CreateUserAccount', () => {
 
           it('displays form errors', async () => {
             await action()
-            expect(wrapper.find('.errors').text()).toContain('Invalid nonce')
+            expect(wrapper.find('.backendErrors').text()).toContain('Invalid nonce')
           })
         })
       })
diff --git a/webapp/components/Registration/CreateUserAccount.vue b/webapp/components/Registration/CreateUserAccount.vue
index d7041ce26..86267594b 100644
--- a/webapp/components/Registration/CreateUserAccount.vue
+++ b/webapp/components/Registration/CreateUserAccount.vue
@@ -39,17 +39,17 @@
           :label="$t('settings.security.change-password.label-new-password')"
         />
         <ds-input
-          id="confirmPassword"
-          model="confirmPassword"
+          id="passwordConfirmation"
+          model="passwordConfirmation"
           type="password"
           autocomplete="off"
           :label="$t('settings.security.change-password.label-new-password-confirm')"
         />
         <password-strength :password="formData.password" />
         <template slot="footer">
-          <ds-space class="errors" v-if="errors">
+          <ds-space class="backendErrors" v-if="backendErrors">
             <ds-text align="center" bold color="danger">
-              {{ errors.message }}
+              {{ backendErrors.message }}
             </ds-text>
           </ds-space>
           <ds-button
@@ -72,6 +72,7 @@
 import gql from 'graphql-tag'
 import PasswordStrength from '../Password/Strength'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
+import PasswordForm from '~/components/utils/PasswordFormHelper'
 
 export const SignupVerificationMutation = gql`
   mutation($nonce: String!, $name: String!, $email: String!, $password: String!) {
@@ -88,12 +89,12 @@ export default {
     SweetalertIcon,
   },
   data() {
+    const passwordForm = PasswordForm({ translate: this.$t })
     return {
       formData: {
         name: '',
         about: '',
-        password: '',
-        confirmPassword: '',
+        ...passwordForm.formData,
       },
       formSchema: {
         name: {
@@ -105,25 +106,11 @@ export default {
           type: 'string',
           required: false,
         },
-        password: {
-          type: 'string',
-          required: true,
-          message: this.$t('settings.security.change-password.message-new-password-required'),
-        },
-        confirmPassword: [
-          { validator: this.matchPassword },
-          {
-            type: 'string',
-            required: true,
-            message: this.$t(
-              'settings.security.change-password.message-new-password-confirm-required',
-            ),
-          },
-        ],
+        ...passwordForm.formSchema,
       },
       disabled: true,
       success: null,
-      errors: null,
+      backendErrors: null,
     }
   },
   props: {
@@ -147,18 +134,9 @@ export default {
           })
         }, 3000)
       } catch (err) {
-        this.errors = err
+        this.backendErrors = err
       }
     },
-    matchPassword(rule, value, callback, source, options) {
-      var errors = []
-      if (this.formData.password !== value) {
-        errors.push(
-          new Error(this.$t('settings.security.change-password.message-new-password-missmatch')),
-        )
-      }
-      callback(errors)
-    },
   },
 }
 </script>
diff --git a/webapp/components/utils/PasswordFormHelper.js b/webapp/components/utils/PasswordFormHelper.js
new file mode 100644
index 000000000..578238aca
--- /dev/null
+++ b/webapp/components/utils/PasswordFormHelper.js
@@ -0,0 +1,36 @@
+export default function PasswordForm({ translate }) {
+  const passwordMismatchMessage = translate(
+    'settings.security.change-password.message-new-password-missmatch',
+  )
+  return {
+    formData: {
+      password: '',
+      passwordConfirmation: '',
+    },
+    formSchema: {
+      password: {
+        type: 'string',
+        required: true,
+        message: translate('settings.security.change-password.message-new-password-required'),
+      },
+      passwordConfirmation: [
+        {
+          validator(rule, value, callback, source, options) {
+            var errors = []
+            if (source.password !== value) {
+              errors.push(new Error(passwordMismatchMessage))
+            }
+            callback(errors)
+          },
+        },
+        {
+          type: 'string',
+          required: true,
+          message: translate(
+            'settings.security.change-password.message-new-password-confirm-required',
+          ),
+        },
+      ],
+    },
+  }
+}

From d90bb90d0c8a79fcd95208b965610a77bdf2f7b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 10 Jul 2019 02:11:12 +0200
Subject: [PATCH 07/16] Follow up of #958

I think I deleted the styling by using bot `:width` and `style`
property. I'm not quite sure if this resolves our problem. Anyways
I don't see a reason for having a right padding so I just removed it.
---
 webapp/layouts/default.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index a981c6515..e92e20b5f 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -87,7 +87,7 @@
       </ds-container>
     </div>
     <ds-container style="word-break: break-all">
-      <div style="padding: 6rem 2rem 5rem;" :width="{ base: '100%', md: '96%' }">
+      <div class="main-container" :width="{ base: '100%', md: '96%' }">
         <nuxt />
       </div>
     </ds-container>
@@ -216,6 +216,11 @@ export default {
   display: inline-flex;
 }
 
+.main-container {
+  padding-top: 6rem;
+  padding-botton: 5rem;
+}
+
 .main-navigation {
   a {
     color: $text-color-soft;

From ede3d7bc72213cb193eababbd4c7eb66d3d36b9f Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Wed, 10 Jul 2019 06:50:33 +0000
Subject: [PATCH 08/16] Bump @babel/preset-env from 7.5.2 to 7.5.4 in /backend

Bumps [@babel/preset-env](https://github.com/babel/babel) from 7.5.2 to 7.5.4.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/master/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/compare/v7.5.2...v7.5.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
---
 backend/package.json |  2 +-
 backend/yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/backend/package.json b/backend/package.json
index 913538d06..9bd5003fd 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -88,7 +88,7 @@
     "@babel/core": "~7.5.0",
     "@babel/node": "~7.5.0",
     "@babel/plugin-proposal-throw-expressions": "^7.2.0",
-    "@babel/preset-env": "~7.5.2",
+    "@babel/preset-env": "~7.5.4",
     "@babel/register": "~7.4.4",
     "apollo-server-testing": "~2.6.8",
     "babel-core": "~7.0.0-0",
diff --git a/backend/yarn.lock b/backend/yarn.lock
index efcb06833..3cc2e9188 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -320,10 +320,10 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-json-strings" "^7.2.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.5.2":
-  version "7.5.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.2.tgz#ec92b0c6419074ea7af77c78b7c5d42041f2f5a9"
-  integrity sha512-C/JU3YOx5J4d9s0GGlJlYXVwsbd5JmqQ0AvB7cIDAx7nN57aDTnlJEsZJPuSskeBtMGFWSWU5Q+piTiDe0s7FQ==
+"@babel/plugin-proposal-object-rest-spread@^7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.4.tgz#250de35d867ce8260a31b1fdac6c4fc1baa99331"
+  integrity sha512-KCx0z3y7y8ipZUMAEEJOyNi11lMb/FOPUjjB113tfowgw0c16EGYos7worCKBcUAh2oG+OBnoUhsnTSoLpV9uA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
@@ -649,17 +649,17 @@
     core-js "^2.5.7"
     regenerator-runtime "^0.12.0"
 
-"@babel/preset-env@~7.5.2":
-  version "7.5.2"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.2.tgz#34a46f01aed617b174b8dbaf8fed9239300343d0"
-  integrity sha512-7rRJLaUqJhQ+8xGrWtMROAgOi/+udIzyK2ES9NHhDIUvR2zfx/ON5lRR8ACUGehIYst8KVbl4vpkgOqn08gBxA==
+"@babel/preset-env@~7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.4.tgz#64bc15041a3cbb0798930319917e70fcca57713d"
+  integrity sha512-hFnFnouyRNiH1rL8YkX1ANCNAUVC8Djwdqfev8i1415tnAG+7hlA5zhZ0Q/3Q5gkop4HioIPbCEWAalqcbxRoQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
     "@babel/plugin-proposal-dynamic-import" "^7.5.0"
     "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.5.2"
+    "@babel/plugin-proposal-object-rest-spread" "^7.5.4"
     "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
     "@babel/plugin-syntax-async-generators" "^7.2.0"

From 7a2eb2a0268379c2eaec452a2f7b7d07aa9b2111 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <27856297+dependabot-preview[bot]@users.noreply.github.com>
Date: Wed, 10 Jul 2019 06:50:37 +0000
Subject: [PATCH 09/16] Bump @babel/preset-env from 7.4.5 to 7.5.4 in /webapp

Bumps [@babel/preset-env](https://github.com/babel/babel) from 7.4.5 to 7.5.4.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/master/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/compare/v7.4.5...v7.5.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
---
 webapp/package.json |   2 +-
 webapp/yarn.lock    | 112 ++++++++++++++++++++++++++++----------------
 2 files changed, 72 insertions(+), 42 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index b46ae23af..edad9509d 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -82,7 +82,7 @@
   "devDependencies": {
     "@babel/core": "~7.5.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "~7.4.5",
+    "@babel/preset-env": "~7.5.4",
     "@vue/cli-shared-utils": "~3.9.0",
     "@vue/eslint-config-prettier": "~4.0.1",
     "@vue/server-test-utils": "~1.0.0-beta.29",
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index dca3b5e9c..1456371d2 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -268,6 +268,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-decorators" "^7.2.0"
 
+"@babel/plugin-proposal-dynamic-import@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.5.0.tgz#e532202db4838723691b10a67b8ce509e397c506"
+  integrity sha512-x/iMjggsKTFHYC6g11PL7Qy58IK8H5zqfm9e6hu4z1iH2IRyAp9u9dL80zA6R76yFovETFLKz2VJIC2iIPBuFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+
 "@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -276,10 +284,10 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-json-strings" "^7.2.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.4.tgz#1ef173fcf24b3e2df92a678f027673b55e7e3005"
-  integrity sha512-dMBG6cSPBbHeEBdFXeQ2QLc5gUpg4Vkaz8octD4aoW/ISO+jBOcsuxYL7bsb5WSu8RLP6boxrBIALEHgoHtO9g==
+"@babel/plugin-proposal-object-rest-spread@^7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.4.tgz#250de35d867ce8260a31b1fdac6c4fc1baa99331"
+  integrity sha512-KCx0z3y7y8ipZUMAEEJOyNi11lMb/FOPUjjB113tfowgw0c16EGYos7worCKBcUAh2oG+OBnoUhsnTSoLpV9uA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
@@ -357,10 +365,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-async-to-generator@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.4.4.tgz#a3f1d01f2f21cadab20b33a82133116f14fb5894"
-  integrity sha512-YiqW2Li8TXmzgbXw+STsSqPBPFnGviiaSp6CYOq55X8GQ2SGVLrXB6pNid8HkqkZAzOH6knbai3snhP7v0fNwA==
+"@babel/plugin-transform-async-to-generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.5.0.tgz#89a3848a0166623b5bc481164b5936ab947e887e"
+  integrity sha512-mqvkzwIGkq0bEF1zLRRiTdjfomZJDV33AH3oQzHVGkI2VzEmXLpKKOBvEVaFZBJdN0XTyH38s9j/Kiqr68dggg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -402,10 +410,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-destructuring@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.4.4.tgz#9d964717829cc9e4b601fc82a26a71a4d8faf20f"
-  integrity sha512-/aOx+nW0w8eHiEHm+BTERB2oJn5D127iye/SUQl7NjHy0lf+j7h4MKMMSOwdazGq9OxgiNADncE+SRJkCxjZpQ==
+"@babel/plugin-transform-destructuring@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.0.tgz#f6c09fdfe3f94516ff074fe877db7bc9ef05855a"
+  integrity sha512-YbYgbd3TryYYLGyC7ZR+Tq8H/+bCmwoaxHfJHupom5ECstzbRLTch6gOQbhEY9Z4hiCNHEURgq06ykFv9JZ/QQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
@@ -418,10 +426,10 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.5.4"
 
-"@babel/plugin-transform-duplicate-keys@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.2.0.tgz#d952c4930f312a4dbfff18f0b2914e60c35530b3"
-  integrity sha512-q+yuxW4DsTjNceUiTzK0L+AfQ0zD9rWaTLiUqHA8p0gxx7lu1EylenfzjeIWNkPy6e/0VG/Wjw9uf9LueQwLOw==
+"@babel/plugin-transform-duplicate-keys@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.5.0.tgz#c5dbf5106bf84cdf691222c0974c12b1df931853"
+  integrity sha512-igcziksHizyQPlX9gfSjHkE2wmoCH3evvD2qR5w29/Dk0SMKE/eOI7f1HhBdNhR/zxJDqrgpoDTq5YSLH/XMsQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
@@ -462,30 +470,33 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-amd@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.2.0.tgz#82a9bce45b95441f617a24011dc89d12da7f4ee6"
-  integrity sha512-mK2A8ucqz1qhrdqjS9VMIDfIvvT2thrEsIQzbaTdc5QFzhDjQv2CkJJ5f6BXIkgbmaoax3zBr2RyvV/8zeoUZw==
+"@babel/plugin-transform-modules-amd@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.5.0.tgz#ef00435d46da0a5961aa728a1d2ecff063e4fb91"
+  integrity sha512-n20UsQMKnWrltocZZm24cRURxQnWIvsABPJlw/fvoy9c6AgHZzoelAIzajDHAQrDpuKFFPPcFGd7ChsYuIUMpg==
   dependencies:
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
 
-"@babel/plugin-transform-modules-commonjs@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.4.4.tgz#0bef4713d30f1d78c2e59b3d6db40e60192cac1e"
-  integrity sha512-4sfBOJt58sEo9a2BQXnZq+Q3ZTSAUXyK3E30o36BOGnJ+tvJ6YSxF0PG6kERvbeISgProodWuI9UVG3/FMY6iw==
+"@babel/plugin-transform-modules-commonjs@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.5.0.tgz#425127e6045231360858eeaa47a71d75eded7a74"
+  integrity sha512-xmHq0B+ytyrWJvQTc5OWAC4ii6Dhr0s22STOoydokG51JjWhyYo5mRPXoi+ZmtHQhZZwuXNN+GG5jy5UZZJxIQ==
   dependencies:
     "@babel/helper-module-transforms" "^7.4.4"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-simple-access" "^7.1.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
 
-"@babel/plugin-transform-modules-systemjs@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.4.4.tgz#dc83c5665b07d6c2a7b224c00ac63659ea36a405"
-  integrity sha512-MSiModfILQc3/oqnG7NrP1jHaSPryO6tA2kOMmAQApz5dayPxWiHqmq4sWH2xF5LcQK56LlbKByCd8Aah/OIkQ==
+"@babel/plugin-transform-modules-systemjs@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.5.0.tgz#e75266a13ef94202db2a0620977756f51d52d249"
+  integrity sha512-Q2m56tyoQWmuNGxEtUyeEkm6qJYFqs4c+XyXH5RAuYxObRNz9Zgj/1g2GMnjYp2EUyEy7YTrxliGCXzecl/vJg==
   dependencies:
     "@babel/helper-hoist-variables" "^7.4.4"
     "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
 
 "@babel/plugin-transform-modules-umd@^7.2.0":
   version "7.2.0"
@@ -603,39 +614,41 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.5.4"
 
-"@babel/preset-env@^7.4.5", "@babel/preset-env@~7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.4.5.tgz#2fad7f62983d5af563b5f3139242755884998a58"
-  integrity sha512-f2yNVXM+FsR5V8UwcFeIHzHWgnhXg3NpRmy0ADvALpnhB0SLbCvrCRr4BLOUYbQNLS+Z0Yer46x9dJXpXewI7w==
+"@babel/preset-env@^7.4.5", "@babel/preset-env@~7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.4.tgz#64bc15041a3cbb0798930319917e70fcca57713d"
+  integrity sha512-hFnFnouyRNiH1rL8YkX1ANCNAUVC8Djwdqfev8i1415tnAG+7hlA5zhZ0Q/3Q5gkop4HioIPbCEWAalqcbxRoQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
     "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.4.4"
+    "@babel/plugin-proposal-object-rest-spread" "^7.5.4"
     "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
     "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
     "@babel/plugin-syntax-json-strings" "^7.2.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
     "@babel/plugin-transform-arrow-functions" "^7.2.0"
-    "@babel/plugin-transform-async-to-generator" "^7.4.4"
+    "@babel/plugin-transform-async-to-generator" "^7.5.0"
     "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
     "@babel/plugin-transform-block-scoping" "^7.4.4"
     "@babel/plugin-transform-classes" "^7.4.4"
     "@babel/plugin-transform-computed-properties" "^7.2.0"
-    "@babel/plugin-transform-destructuring" "^7.4.4"
+    "@babel/plugin-transform-destructuring" "^7.5.0"
     "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/plugin-transform-duplicate-keys" "^7.2.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
     "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
     "@babel/plugin-transform-for-of" "^7.4.4"
     "@babel/plugin-transform-function-name" "^7.4.4"
     "@babel/plugin-transform-literals" "^7.2.0"
     "@babel/plugin-transform-member-expression-literals" "^7.2.0"
-    "@babel/plugin-transform-modules-amd" "^7.2.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.4.4"
-    "@babel/plugin-transform-modules-systemjs" "^7.4.4"
+    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.5.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
     "@babel/plugin-transform-modules-umd" "^7.2.0"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.4.5"
     "@babel/plugin-transform-new-target" "^7.4.4"
@@ -650,7 +663,7 @@
     "@babel/plugin-transform-template-literals" "^7.4.4"
     "@babel/plugin-transform-typeof-symbol" "^7.2.0"
     "@babel/plugin-transform-unicode-regex" "^7.4.4"
-    "@babel/types" "^7.4.4"
+    "@babel/types" "^7.5.0"
     browserslist "^4.6.0"
     core-js-compat "^3.1.1"
     invariant "^2.2.2"
@@ -2352,6 +2365,13 @@ babel-messages@^6.23.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-dynamic-import-node@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
+  integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
+  dependencies:
+    object.assign "^4.1.0"
+
 babel-plugin-istanbul@^5.1.0:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.4.tgz#841d16b9a58eeb407a0ddce622ba02fe87a752ba"
@@ -7710,7 +7730,7 @@ object-hash@^1.1.4:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
   integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
-object-keys@^1.0.12:
+object-keys@^1.0.11, object-keys@^1.0.12:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
@@ -7727,6 +7747,16 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
+object.assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"

From 6f4e1b6f305a8304904710d806d8b041aaf33335 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 10 Jul 2019 09:01:57 +0200
Subject: [PATCH 10/16] Fix cypress

---
 cypress/integration/common/steps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 61d46b5df..f996db992 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -276,7 +276,7 @@ When("I fill the password form with:", table => {
   table = table.rowsHash();
   cy.get("input[id=oldPassword]")
     .type(table["Your old password"])
-    .get("input[id=newPassword]")
+    .get("input[id=password]")
     .type(table["Your new passsword"])
     .get("input[id=passwordConfirmation]")
     .type(table["Confirm new password"]);

From f057205158efd42634afc7e1653197d16b80c6e6 Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Thu, 4 Jul 2019 16:53:56 +0200
Subject: [PATCH 11/16] HcContributionForm submit is disabled by default

---
 webapp/components/ContributionForm/ContributionForm.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 593ff2dc6..f424f45ca 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -98,7 +98,7 @@ export default {
       },
       id: null,
       loading: false,
-      disabled: false,
+      disabled: true,
       slug: null,
       users: [],
       hashtags: [],
@@ -176,6 +176,11 @@ export default {
     },
     updateEditorContent(value) {
       // this.form.content = value
+      this.disabled = true
+      if (value.replace(/<p>|<\/p>|<h3>|<\/h3>|<h4>|<\/h4>/gm, '').length > 3) {
+        this.disabled = false
+      }
+
       this.$refs.contributionForm.update('content', value)
     },
     availableLocales() {

From 55ce9c1afbc924acff644a5abf187f64b1686340 Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Thu, 4 Jul 2019 17:14:02 +0200
Subject: [PATCH 12/16] HcContributionForm submit is disabled by default
 replace all editor html tags

---
 webapp/components/ContributionForm/ContributionForm.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index f424f45ca..9f7ffa7e4 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -177,7 +177,12 @@ export default {
     updateEditorContent(value) {
       // this.form.content = value
       this.disabled = true
-      if (value.replace(/<p>|<\/p>|<h3>|<\/h3>|<h4>|<\/h4>/gm, '').length > 3) {
+      if (
+        value.replace(
+          /<p>|<\/p>|<h3>|<\/h3>|<h4>|<\/h4>|<ul>|<\/ul>|<ol>|<\/ol>|<li>|<\/li>|<blockquote>|<\/blockquote>|<strong>|<\/strong>|<em>|<\/em>|<a.*>|<\/a>/gm,
+          '',
+        ).length > 3
+      ) {
         this.disabled = false
       }
 

From a5d76c26aeea173084b6419d5005483b6f25767b Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Thu, 4 Jul 2019 18:02:06 +0200
Subject: [PATCH 13/16] fixed specs, test ok

---
 .../ContributionForm/ContributionForm.spec.js      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 3d136ff4b..3efc7dd6d 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -26,7 +26,10 @@ describe('ContributionForm.vue', () => {
   const postTitle = 'this is a title for a post'
   const postContent = 'this is a post'
   const imageUpload = {
-    file: { filename: 'avataar.svg', previewElement: '' },
+    file: {
+      filename: 'avataar.svg',
+      previewElement: '',
+    },
     url: 'someUrlToImage',
   }
   const image = '/uploads/1562010976466-avataaars'
@@ -184,7 +187,7 @@ describe('ContributionForm.vue', () => {
         it('calls $router.back() when cancel button clicked', () => {
           cancelBtn = wrapper.find('.cancel-button')
           cancelBtn.trigger('click')
-          expect(mocks.$router.back).toHaveBeenCalledTimes(1)
+          expect(mocks.$router.back).toHaveBeenCalledTimes(0)
         })
       })
 
@@ -217,7 +220,12 @@ describe('ContributionForm.vue', () => {
             content: 'auf Deutsch geschrieben',
             language: 'de',
             image,
-            categories: [{ id: 'cat12', name: 'Democracy & Politics' }],
+            categories: [
+              {
+                id: 'cat12',
+                name: 'Democracy & Politics',
+              },
+            ],
           },
         }
         wrapper = Wrapper()

From 0dd600746af178086f9f34e106fc35199615a5e9 Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Wed, 10 Jul 2019 09:18:47 +0200
Subject: [PATCH 14/16] maximum number of characters in content without html
 tags is 2000, characters are counted and number is displayed. regex is
 strongly shortened.

---
 .../ContributionForm/ContributionForm.vue     | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 9f7ffa7e4..8b4aa6b9e 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -10,6 +10,7 @@
           />
         </hc-teaser-image>
         <ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
+        <small style="width:100%;position:relative;left:90%">{{ form.title.length }}/64</small>
         <no-ssr>
           <hc-editor
             :users="users"
@@ -17,6 +18,7 @@
             :value="form.content"
             @input="updateEditorContent"
           />
+          <small style="width:100%;position:relative;left:90%">{{ form.contentLength }}/2000</small>
         </no-ssr>
         <ds-space margin-bottom="xxx-large" />
         <hc-categories-select
@@ -44,18 +46,14 @@
             :disabled="loading || disabled"
             ghost
             @click.prevent="$router.back()"
-          >
-            {{ $t('actions.cancel') }}
-          </ds-button>
+          >{{ $t('actions.cancel') }}</ds-button>
           <ds-button
             type="submit"
             icon="check"
             :loading="loading"
             :disabled="disabled || errors"
             primary
-          >
-            {{ $t('actions.save') }}
-          </ds-button>
+          >{{ $t('actions.save') }}</ds-button>
         </div>
         <ds-space margin-bottom="large" />
       </ds-card>
@@ -86,6 +84,7 @@ export default {
       form: {
         title: '',
         content: '',
+        contentLength: 0,
         teaserImage: null,
         image: null,
         language: null,
@@ -94,14 +93,18 @@ export default {
       },
       formSchema: {
         title: { required: true, min: 3, max: 64 },
-        content: { required: true, min: 3 },
+        content: { required: true, min: 3, max: 2000 },
       },
       id: null,
       loading: false,
       disabled: true,
       slug: null,
       users: [],
+<<<<<<< HEAD
       hashtags: [],
+=======
+      n: 0,
+>>>>>>> maximum number of characters in content without html tags is 2000, characters are counted and number is displayed. regex is strongly shortened.
     }
   },
   watch: {
@@ -176,17 +179,15 @@ export default {
     },
     updateEditorContent(value) {
       // this.form.content = value
+      this.$refs.contributionForm.update('content', value)
+
       this.disabled = true
-      if (
-        value.replace(
-          /<p>|<\/p>|<h3>|<\/h3>|<h4>|<\/h4>|<ul>|<\/ul>|<ol>|<\/ol>|<li>|<\/li>|<blockquote>|<\/blockquote>|<strong>|<\/strong>|<em>|<\/em>|<a.*>|<\/a>/gm,
-          '',
-        ).length > 3
-      ) {
+      this.n = value.replace(/<\/?[^>]+(>|$)/gm, '').length
+      this.form.contentLength = this.n
+
+      if (this.n > 3 && this.n < 2000) {
         this.disabled = false
       }
-
-      this.$refs.contributionForm.update('content', value)
     },
     availableLocales() {
       orderBy(locales, 'name').map(locale => {

From 0fbf43af538835fa88fb00a361f6de3b5db53e3a Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Wed, 10 Jul 2019 13:30:05 +0200
Subject: [PATCH 15/16] lint ok, specs for too long and too short content and
 title

---
 .../ContributionForm/ContributionForm.spec.js | 55 +++++++++++++++++--
 .../ContributionForm/ContributionForm.vue     |  7 +--
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 3efc7dd6d..c3a50c883 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -24,7 +24,17 @@ describe('ContributionForm.vue', () => {
   let mocks
   let propsData
   const postTitle = 'this is a title for a post'
+  const postTitleTooShort = '12'
+  let postTitleTooLong = ''
+  for (let i = 0; i < 100; i++) {
+    postTitleTooLong += 'x'
+  }
   const postContent = 'this is a post'
+  const postContentTooShort = '12'
+  let postContentTooLong = ''
+  for (let i = 0; i < 2001; i++) {
+    postContentTooLong += 'x'
+  }
   const imageUpload = {
     file: {
       filename: 'avataar.svg',
@@ -109,15 +119,52 @@ describe('ContributionForm.vue', () => {
       })
 
       describe('invalid form submission', () => {
-        it('title required for form submission', async () => {
+        it('title and content should not be empty ', async () => {
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        })
+
+        it('title should not be empty', async () => {
+          wrapper.vm.updateEditorContent(postContent)
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        })
+
+        it('title should not be too long', async () => {
+          postTitleInput = wrapper.find('.ds-input')
+          postTitleInput.setValue(postTitleTooLong)
+          wrapper.vm.updateEditorContent(postContent)
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        })
+
+        it('title should not be too short', async () => {
+          postTitleInput = wrapper.find('.ds-input')
+          postTitleInput.setValue(postTitleTooShort)
+          wrapper.vm.updateEditorContent(postContent)
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        })
+
+        it('content should not be empty', async () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
-        it('content required for form submission', async () => {
-          wrapper.vm.updateEditorContent(postContent)
+        it('content should not be too long', async () => {
+          postTitleInput = wrapper.find('.ds-input')
+          postTitleInput.setValue(postTitle)
+          wrapper.vm.updateEditorContent(postContentTooLong)
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        })
+
+        it('content should not be too short', async () => {
+          postTitleInput = wrapper.find('.ds-input')
+          postTitleInput.setValue(postTitle)
+          wrapper.vm.updateEditorContent(postContentTooShort)
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
@@ -187,7 +234,7 @@ describe('ContributionForm.vue', () => {
         it('calls $router.back() when cancel button clicked', () => {
           cancelBtn = wrapper.find('.cancel-button')
           cancelBtn.trigger('click')
-          expect(mocks.$router.back).toHaveBeenCalledTimes(0)
+          expect(mocks.$router.back).toHaveBeenCalledTimes(1)
         })
       })
 
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 8b4aa6b9e..7fe9d6e55 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -43,7 +43,7 @@
         <div slot="footer" style="text-align: right">
           <ds-button
             class="cancel-button"
-            :disabled="loading || disabled"
+            :disabled="loading"
             ghost
             @click.prevent="$router.back()"
           >{{ $t('actions.cancel') }}</ds-button>
@@ -100,11 +100,8 @@ export default {
       disabled: true,
       slug: null,
       users: [],
-<<<<<<< HEAD
       hashtags: [],
-=======
       n: 0,
->>>>>>> maximum number of characters in content without html tags is 2000, characters are counted and number is displayed. regex is strongly shortened.
     }
   },
   watch: {
@@ -185,7 +182,7 @@ export default {
       this.n = value.replace(/<\/?[^>]+(>|$)/gm, '').length
       this.form.contentLength = this.n
 
-      if (this.n > 3 && this.n < 2000) {
+      if (this.n > this.formSchema.content.min && this.n < this.formSchema.content.max) {
         this.disabled = false
       }
     },

From 4dfb16cb7cda8291370749a058ce85750364abfd Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Wed, 10 Jul 2019 13:58:11 +0200
Subject: [PATCH 16/16] merge master

---
 webapp/components/ContributionForm/ContributionForm.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 7fe9d6e55..515b48047 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -102,6 +102,7 @@ export default {
       users: [],
       hashtags: [],
       n: 0,
+      hashtags: [],
     }
   },
   watch: {