Merge pull request #834 from Human-Connection/801_reset_password

801 reset password

backend/.env.template

@@ -5,6 +5,11 @@ GRAPHQL_PORT=4000
 GRAPHQL_URI=http://localhost:4000
 CLIENT_URI=http://localhost:3000
 MOCKS=false
+SMTP_HOST=
+SMTP_PORT=
+SMTP_IGNORE_TLS=true
+SMTP_USERNAME=
+SMTP_PASSWORD=
 
 JWT_SECRET="b/&&7b78BF&fv/Vd"
 MAPBOX_TOKEN="pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ"

backend/README.md

@@ -44,6 +44,9 @@ or start the backend in production environment with:
 yarn run start
 ```
 
+For e-mail delivery, please configure at least `SMTP_HOST` and `SMTP_PORT` in
+your `.env` configuration file.
+
 Your backend is up and running at [http://localhost:4000/](http://localhost:4000/)
 This will start the GraphQL service \(by default on localhost:4000\) where you
 can issue GraphQL requests or access GraphQL Playground in the browser.

backend/package.json

@@ -72,6 +72,7 @@
     "neo4j-driver": "~1.7.4",
     "neo4j-graphql-js": "git+https://github.com/Human-Connection/neo4j-graphql-js.git#temporary_fixes",
     "node-fetch": "~2.6.0",
+    "nodemailer": "^6.2.1",
     "npm-run-all": "~4.1.5",
     "request": "~2.88.0",
     "sanitize-html": "~1.20.1",

backend/src/config/index.js

@@ -2,23 +2,33 @@ import dotenv from 'dotenv'
 
 dotenv.config()
 
-export const requiredConfigs = {
-  MAPBOX_TOKEN: process.env.MAPBOX_TOKEN,
-  JWT_SECRET: process.env.JWT_SECRET,
-  PRIVATE_KEY_PASSPHRASE: process.env.PRIVATE_KEY_PASSPHRASE,
-}
+const {
+  MAPBOX_TOKEN,
+  JWT_SECRET,
+  PRIVATE_KEY_PASSPHRASE,
+  SMTP_IGNORE_TLS = true,
+  SMTP_HOST,
+  SMTP_PORT,
+  SMTP_USERNAME,
+  SMTP_PASSWORD,
+  NEO4J_URI = 'bolt://localhost:7687',
+  NEO4J_USERNAME = 'neo4j',
+  NEO4J_PASSWORD = 'neo4j',
+  GRAPHQL_PORT = 4000,
+  CLIENT_URI = 'http://localhost:3000',
+  GRAPHQL_URI = 'http://localhost:4000',
+} = process.env
 
-export const neo4jConfigs = {
-  NEO4J_URI: process.env.NEO4J_URI || 'bolt://localhost:7687',
-  NEO4J_USERNAME: process.env.NEO4J_USERNAME || 'neo4j',
-  NEO4J_PASSWORD: process.env.NEO4J_PASSWORD || 'neo4j',
-}
-
-export const serverConfigs = {
-  GRAPHQL_PORT: process.env.GRAPHQL_PORT || 4000,
-  CLIENT_URI: process.env.CLIENT_URI || 'http://localhost:3000',
-  GRAPHQL_URI: process.env.GRAPHQL_URI || 'http://localhost:4000',
+export const requiredConfigs = { MAPBOX_TOKEN, JWT_SECRET, PRIVATE_KEY_PASSPHRASE }
+export const smtpConfigs = {
+  SMTP_HOST,
+  SMTP_PORT,
+  SMTP_IGNORE_TLS,
+  SMTP_USERNAME,
+  SMTP_PASSWORD,
 }
+export const neo4jConfigs = { NEO4J_URI, NEO4J_USERNAME, NEO4J_PASSWORD }
+export const serverConfigs = { GRAPHQL_PORT, CLIENT_URI, GRAPHQL_URI }
 
 export const developmentConfigs = {
   DEBUG: process.env.NODE_ENV !== 'production' && process.env.DEBUG === 'true',
@@ -29,6 +39,7 @@ export const developmentConfigs = {
 
 export default {
   ...requiredConfigs,
+  ...smtpConfigs,
   ...neo4jConfigs,
   ...serverConfigs,
   ...developmentConfigs,

backend/src/middleware/permissionsMiddleware.js

@@ -147,6 +147,8 @@ const permissions = shield(
       CreateComment: isAuthenticated,
       DeleteComment: isAuthor,
       DeleteUser: isDeletingOwnAccount,
+      requestPasswordReset: allow,
+      resetPassword: allow,
     },
     User: {
       email: isMyOwn,

backend/src/schema/resolvers/passwordReset.js

@@ -0,0 +1,72 @@
+import uuid from 'uuid/v4'
+import bcrypt from 'bcryptjs'
+import CONFIG from '../../config'
+import nodemailer from 'nodemailer'
+import { resetPasswordMail, wrongAccountMail } from './passwordReset/emailTemplates'
+
+const transporter = () => {
+  const configs = {
+    host: CONFIG.SMTP_HOST,
+    port: CONFIG.SMTP_PORT,
+    ignoreTLS: CONFIG.SMTP_IGNORE_TLS,
+    secure: false, // true for 465, false for other ports
+  }
+  const { SMTP_USERNAME: user, SMTP_PASSWORD: pass } = CONFIG
+  if (user && pass) {
+    configs.auth = { user, pass }
+  }
+  return nodemailer.createTransport(configs)
+}
+
+export async function createPasswordReset(options) {
+  const { driver, code, email, issuedAt = new Date() } = options
+  const session = driver.session()
+  const cypher = `
+      MATCH (u:User) WHERE u.email = $email
+      CREATE(pr:PasswordReset {code: $code, issuedAt: datetime($issuedAt), usedAt: NULL})
+      MERGE (u)-[:REQUESTED]->(pr)
+      RETURN u
+      `
+  const transactionRes = await session.run(cypher, {
+    issuedAt: issuedAt.toISOString(),
+    code,
+    email,
+  })
+  const users = transactionRes.records.map(record => record.get('u'))
+  session.close()
+  return users
+}
+
+export default {
+  Mutation: {
+    requestPasswordReset: async (_, { email }, { driver }) => {
+      const code = uuid().substring(0, 6)
+      const [user] = await createPasswordReset({ driver, code, email })
+      if (CONFIG.SMTP_HOST && CONFIG.SMTP_PORT) {
+        const name = (user && user.name) || ''
+        const mailTemplate = user ? resetPasswordMail : wrongAccountMail
+        await transporter().sendMail(mailTemplate({ email, code, name }))
+      }
+      return true
+    },
+    resetPassword: async (_, { email, code, newPassword }, { driver }) => {
+      const session = driver.session()
+      const stillValid = new Date()
+      stillValid.setDate(stillValid.getDate() - 1)
+      const newHashedPassword = await bcrypt.hashSync(newPassword, 10)
+      const cypher = `
+      MATCH (pr:PasswordReset {code: $code})
+      MATCH (u:User {email: $email})-[:REQUESTED]->(pr)
+      WHERE duration.between(pr.issuedAt, datetime()).days <= 0 AND pr.usedAt IS NULL
+      SET pr.usedAt = datetime()
+      SET u.password = $newHashedPassword
+      RETURN pr
+      `
+      let transactionRes = await session.run(cypher, { stillValid, email, code, newHashedPassword })
+      const [reset] = transactionRes.records.map(record => record.get('pr'))
+      const result = !!(reset && reset.properties.usedAt)
+      session.close()
+      return result
+    },
+  },
+}

backend/src/schema/resolvers/passwordReset.spec.js

@@ -0,0 +1,180 @@
+import { GraphQLClient } from 'graphql-request'
+import Factory from '../../seed/factories'
+import { host } from '../../jest/helpers'
+import { getDriver } from '../../bootstrap/neo4j'
+import { createPasswordReset } from './passwordReset'
+
+const factory = Factory()
+let client
+const driver = getDriver()
+
+const getAllPasswordResets = async () => {
+  const session = driver.session()
+  let transactionRes = await session.run('MATCH (r:PasswordReset) RETURN r')
+  const resets = transactionRes.records.map(record => record.get('r'))
+  session.close()
+  return resets
+}
+
+describe('passwordReset', () => {
+  beforeEach(async () => {
+    client = new GraphQLClient(host)
+    await factory.create('User', {
+      email: 'user@example.org',
+      role: 'user',
+      password: '1234',
+    })
+  })
+
+  afterEach(async () => {
+    await factory.cleanDatabase()
+  })
+
+  describe('requestPasswordReset', () => {
+    const mutation = `mutation($email: String!) { requestPasswordReset(email: $email) }`
+
+    describe('with invalid email', () => {
+      const variables = { email: 'non-existent@example.org' }
+
+      it('resolves anyways', async () => {
+        await expect(client.request(mutation, variables)).resolves.toEqual({
+          requestPasswordReset: true,
+        })
+      })
+
+      it('creates no node', async () => {
+        await client.request(mutation, variables)
+        const resets = await getAllPasswordResets()
+        expect(resets).toHaveLength(0)
+      })
+    })
+
+    describe('with a valid email', () => {
+      const variables = { email: 'user@example.org' }
+
+      it('resolves', async () => {
+        await expect(client.request(mutation, variables)).resolves.toEqual({
+          requestPasswordReset: true,
+        })
+      })
+
+      it('creates node with label `PasswordReset`', async () => {
+        await client.request(mutation, variables)
+        const resets = await getAllPasswordResets()
+        expect(resets).toHaveLength(1)
+      })
+
+      it('creates a reset code', async () => {
+        await client.request(mutation, variables)
+        const resets = await getAllPasswordResets()
+        const [reset] = resets
+        const { code } = reset.properties
+        expect(code).toHaveLength(6)
+      })
+    })
+  })
+
+  describe('resetPassword', () => {
+    const setup = async (options = {}) => {
+      const { email = 'user@example.org', issuedAt = new Date(), code = 'abcdef' } = options
+
+      const session = driver.session()
+      await createPasswordReset({ driver, email, issuedAt, code })
+      session.close()
+    }
+
+    const mutation = `mutation($code: String!, $email: String!, $newPassword: String!) { resetPassword(code: $code, email: $email, newPassword: $newPassword) }`
+    let email = 'user@example.org'
+    let code = 'abcdef'
+    let newPassword = 'supersecret'
+    let variables
+
+    describe('invalid email', () => {
+      it('resolves to false', async () => {
+        await setup()
+        variables = { newPassword, email: 'non-existent@example.org', code }
+        await expect(client.request(mutation, variables)).resolves.toEqual({ resetPassword: false })
+      })
+    })
+
+    describe('valid email', () => {
+      describe('but invalid code', () => {
+        it('resolves to false', async () => {
+          await setup()
+          variables = { newPassword, email, code: 'slkdjf' }
+          await expect(client.request(mutation, variables)).resolves.toEqual({
+            resetPassword: false,
+          })
+        })
+      })
+
+      describe('and valid code', () => {
+        beforeEach(() => {
+          variables = {
+            newPassword,
+            email: 'user@example.org',
+            code: 'abcdef',
+          }
+        })
+
+        describe('and code not expired', () => {
+          beforeEach(async () => {
+            await setup()
+          })
+
+          it('resolves to true', async () => {
+            await expect(client.request(mutation, variables)).resolves.toEqual({
+              resetPassword: true,
+            })
+          })
+
+          it('updates PasswordReset `usedAt` property', async () => {
+            await client.request(mutation, variables)
+            const requests = await getAllPasswordResets()
+            const [request] = requests
+            const { usedAt } = request.properties
+            expect(usedAt).not.toBeFalsy()
+          })
+
+          it('updates password of the user', async () => {
+            await client.request(mutation, variables)
+            const checkLoginMutation = `
+            mutation($email: String!, $password: String!) {
+              login(email: $email, password: $password)
+            }
+            `
+            const expected = expect.objectContaining({ login: expect.any(String) })
+            await expect(
+              client.request(checkLoginMutation, {
+                email: 'user@example.org',
+                password: 'supersecret',
+              }),
+            ).resolves.toEqual(expected)
+          })
+        })
+
+        describe('but expired code', () => {
+          beforeEach(async () => {
+            const issuedAt = new Date()
+            issuedAt.setDate(issuedAt.getDate() - 1)
+            await setup({ issuedAt })
+          })
+
+          it('resolves to false', async () => {
+            await expect(client.request(mutation, variables)).resolves.toEqual({
+              resetPassword: false,
+            })
+          })
+
+          it('does not update PasswordReset `usedAt` property', async () => {
+            await client.request(mutation, variables)
+            const requests = await getAllPasswordResets()
+            const [request] = requests
+            const { usedAt } = request.properties
+            expect(usedAt).toBeUndefined()
+          })
+        })
+      })
+    })
+  })
+})

backend/src/schema/resolvers/passwordReset/emailTemplates.js

@@ -0,0 +1,85 @@
+import CONFIG from '../../../config'
+
+export const from = '"Human Connection" <info@human-connection.org>'
+
+export const resetPasswordMail = options => {
+  const {
+    name,
+    email,
+    code,
+    subject = 'Use this link to reset your password. The link is only valid for 24 hours.',
+    supportUrl = 'https://human-connection.org/en/contact/',
+  } = options
+  const actionUrl = new URL('/password-reset/change-password', CONFIG.CLIENT_URI)
+  actionUrl.searchParams.set('code', code)
+  actionUrl.searchParams.set('email', email)
+
+  return {
+    to: email,
+    subject,
+    text: `
+Hi ${name}!
+
+You recently requested to reset your password for your Human Connection account.
+Use the link below to reset it. This password reset is only valid for the next
+24 hours.
+
+${actionUrl}
+
+If you did not request a password reset, please ignore this email or contact
+support if you have questions:
+
+${supportUrl}
+
+Thanks,
+The Human Connection Team
+
+If you're having trouble with the link above, you can manually copy and
+paste the following code into your browser window:
+
+${code}
+
+Human Connection gemeinnützige GmbH
+Bahnhofstr. 11
+73235 Weilheim / Teck
+Deutschland
+    `,
+  }
+}
+
+export const wrongAccountMail = options => {
+  const {
+    email,
+    subject = `We received a request to reset your password with this email address (${email})`,
+    supportUrl = 'https://human-connection.org/en/contact/',
+  } = options
+  const actionUrl = new URL('/password-reset/request', CONFIG.CLIENT_URI)
+  return {
+    to: email,
+    subject,
+    text: `
+We received a request to reset the password to access Human Connection with your
+email address, but we were unable to find an account associated with this
+address.
+
+If you use Human Connection and were expecting this email, consider trying to
+request a password reset using the email address associated with your account.
+Try a different email:
+
+${actionUrl}
+
+If you do not use Human Connection or did not request a password reset, please
+ignore this email. Feel free to contact support if you have further questions:
+
+${supportUrl}
+
+Thanks,
+The Human Connection Team
+
+Human Connection gemeinnützige GmbH
+Bahnhofstr. 11
+73235 Weilheim / Teck
+Deutschland
+  `,
+  }
+}

backend/src/schema/resolvers/user_management.js

@@ -59,7 +59,7 @@ export default {
     changePassword: async (_, { oldPassword, newPassword }, { driver, user }) => {
       const session = driver.session()
       let result = await session.run(
-        `MATCH (user:User {email: $userEmail}) 
+        `MATCH (user:User {email: $userEmail})
          RETURN user {.id, .email, .password}`,
         {
           userEmail: user.email,

backend/src/schema/types/schema.gql

@@ -25,6 +25,8 @@ type Mutation {
   login(email: String!, password: String!): String!
   signup(email: String!, password: String!): Boolean!
   changePassword(oldPassword: String!, newPassword: String!): String!
+  requestPasswordReset(email: String!): Boolean!
+  resetPassword(email: String!, code: String!, newPassword: String!): Boolean!
   report(id: ID!, description: String): Report
   disable(id: ID!): ID
   enable(id: ID!): ID

backend/yarn.lock

@@ -5711,6 +5711,11 @@ node-releases@^1.1.19:
   dependencies:
     semver "^5.3.0"
 
+nodemailer@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.2.1.tgz#20d773925eb8f7a06166a0b62c751dc8290429f3"
+  integrity sha512-TagB7iuIi9uyNgHExo8lUDq3VK5/B0BpbkcjIgNvxbtVrjNqq0DwAOTuzALPVkK76kMhTSzIgHqg8X1uklVs6g==
+
 nodemon@~1.19.1:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.19.1.tgz#576f0aad0f863aabf8c48517f6192ff987cd5071"

deployment/human-connection/templates/secrets.template.yaml

@@ -5,6 +5,11 @@ data:
   MONGODB_PASSWORD: "TU9OR09EQl9QQVNTV09SRA=="
   PRIVATE_KEY_PASSPHRASE: "YTdkc2Y3OHNhZGc4N2FkODdzZmFnc2FkZzc4"
   MAPBOX_TOKEN: "cGsuZXlKMUlqb2lhSFZ0WVc0dFkyOXVibVZqZEdsdmJpSXNJbUVpT2lKamFqbDBjbkJ1Ykdvd2VUVmxNM1Z3WjJsek5UTnVkM1p0SW4wLktaOEtLOWw3MG9talhiRWtrYkhHc1EK"
+  SMTP_HOST:
+  SMTP_PORT: 587
+  SMTP_USERNAME:
+  SMTP_PASSWORD:
+  SMTP_IGNORE_TLS:
 metadata:
   name: human-connection
   namespace: human-connection

docker-compose.override.yml

@@ -1,6 +1,12 @@
 version: "3.4"
 
 services:
+  mailserver:
+    image: djfarrelly/maildev
+    ports:
+      - 1080:80
+    networks:
+      - hc-network
   webapp:
     build:
       context: webapp
@@ -20,6 +26,10 @@ services:
       - backend_node_modules:/nitro-backend/node_modules
       - uploads:/nitro-backend/public/uploads
     command: yarn run dev
+    environment:
+      - SMTP_HOST=mailserver
+      - SMTP_PORT=25
+      - SMTP_IGNORE_TLS=true
   neo4j:
     environment:
       - NEO4J_AUTH=none

webapp/components/FilterMenu/FilterMenu.spec.js

@@ -1,10 +1,12 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import FilterMenu from './FilterMenu.vue'
 import Styleguide from '@human-connection/styleguide'
+import VTooltip from 'v-tooltip'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
+localVue.use(VTooltip)
 
 describe('FilterMenu.vue', () => {
   let wrapper

webapp/components/Password/Change.vue

@@ -11,18 +11,21 @@
         id="oldPassword"
         model="oldPassword"
         type="password"
+        autocomplete="off"
         :label="$t('settings.security.change-password.label-old-password')"
       />
       <ds-input
         id="newPassword"
         model="newPassword"
         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.newPassword" />

webapp/components/PasswordReset/ChangePassword.spec.js

@@ -0,0 +1,83 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import ChangePassword from './ChangePassword'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('ChangePassword ', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+  let propsData
+
+  beforeEach(() => {
+    propsData = {}
+    mocks = {
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $t: jest.fn(),
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue({ data: { resetPassword: true } }),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    beforeEach(jest.useFakeTimers)
+
+    Wrapper = () => {
+      return mount(ChangePassword, {
+        mocks,
+        propsData,
+        localVue,
+      })
+    }
+
+    describe('given email and verification code', () => {
+      beforeEach(() => {
+        propsData.email = 'mail@example.org'
+        propsData.code = '123456'
+      })
+
+      describe('submitting new password', () => {
+        beforeEach(() => {
+          wrapper = Wrapper()
+          wrapper.find('input#newPassword').setValue('supersecret')
+          wrapper.find('input#confirmPassword').setValue('supersecret')
+          wrapper.find('form').trigger('submit')
+        })
+
+        it('calls resetPassword graphql mutation', () => {
+          expect(mocks.$apollo.mutate).toHaveBeenCalled()
+        })
+
+        it('delivers new password to backend', () => {
+          const expected = expect.objectContaining({
+            variables: { code: '123456', email: 'mail@example.org', newPassword: 'supersecret' },
+          })
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
+        })
+
+        describe('password reset successful', () => {
+          it('displays success message', () => {
+            const expected = 'verify-code.form.change-password.success'
+            expect(mocks.$t).toHaveBeenCalledWith(expected)
+          })
+
+          describe('after animation', () => {
+            beforeEach(jest.runAllTimers)
+
+            it('emits `change-password-sucess`', () => {
+              expect(wrapper.emitted('passwordResetResponse')).toEqual([['success']])
+            })
+          })
+        })
+      })
+    })
+  })
+})

webapp/components/PasswordReset/ChangePassword.vue

@@ -0,0 +1,140 @@
+<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-input
+            id="newPassword"
+            model="newPassword"
+            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.newPassword" />
+          <ds-space margin-top="base">
+            <ds-button :loading="$apollo.loading" :disabled="disabled" 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>
+    </ds-space>
+  </ds-card>
+</template>
+
+<script>
+import PasswordStrength from '../Password/Strength'
+import gql from 'graphql-tag'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export default {
+  components: {
+    SweetalertIcon,
+    PasswordStrength,
+  },
+  props: {
+    email: { type: String, required: true },
+    code: { type: String, required: true },
+  },
+  data() {
+    return {
+      formData: {
+        newPassword: '',
+        confirmPassword: '',
+      },
+      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',
+            ),
+          },
+        ],
+      },
+      disabled: true,
+      changePasswordResult: null,
+    }
+  },
+  methods: {
+    async handleInput() {
+      this.disabled = true
+    },
+    async handleInputValid() {
+      this.disabled = false
+    },
+    async handleSubmitPassword() {
+      const mutation = gql`
+        mutation($code: String!, $email: String!, $newPassword: String!) {
+          resetPassword(code: $code, email: $email, newPassword: $newPassword)
+        }
+      `
+      const { newPassword } = this.formData
+      const { email, code } = this
+      const variables = { newPassword, email, code }
+      try {
+        const {
+          data: { resetPassword },
+        } = await this.$apollo.mutate({ mutation, variables })
+        this.changePasswordResult = resetPassword ? 'success' : 'error'
+        setTimeout(() => {
+          this.$emit('passwordResetResponse', this.changePasswordResult)
+        }, 3000)
+        this.formData = {
+          newPassword: '',
+          confirmPassword: '',
+        }
+      } 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>

webapp/components/PasswordReset/Request.spec.js

@@ -0,0 +1,77 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Request from './Request'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('Request', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $toast: {
+        success: jest.fn(),
+        error: jest.fn(),
+      },
+      $t: jest.fn(),
+      $apollo: {
+        loading: false,
+        mutate: jest.fn().mockResolvedValue({ data: { reqestPasswordReset: true } }),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    beforeEach(jest.useFakeTimers)
+
+    Wrapper = () => {
+      return mount(Request, {
+        mocks,
+        localVue,
+      })
+    }
+
+    it('renders a password reset form', () => {
+      wrapper = Wrapper()
+      expect(wrapper.find('.password-reset').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 requestPasswordReset graphql mutation', () => {
+        expect(mocks.$apollo.mutate).toHaveBeenCalled()
+      })
+
+      it('delivers email to backend', () => {
+        const expected = expect.objectContaining({ variables: { email: 'mail@example.org' } })
+        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 password email was requested', () => {
+        const expected = ['password-reset.form.submitted', { 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' }]])
+        })
+      })
+    })
+  })
+})

webapp/components/PasswordReset/Request.vue

@@ -0,0 +1,107 @@
+<template>
+  <ds-card class="password-reset">
+    <ds-space margin="large">
+      <ds-form
+        v-if="!submitted"
+        @input="handleInput"
+        @input-valid="handleInputValid"
+        v-model="formData"
+        :schema="formSchema"
+        @submit="handleSubmit"
+      >
+        <ds-input
+          :placeholder="$t('login.email')"
+          type="email"
+          id="email"
+          model="email"
+          name="email"
+          icon="envelope"
+        />
+        <ds-space margin-botton="large">
+          <ds-text>
+            {{ $t('password-reset.form.description') }}
+          </ds-text>
+        </ds-space>
+        <ds-button
+          :disabled="disabled"
+          :loading="$apollo.loading"
+          primary
+          fullwidth
+          name="submit"
+          type="submit"
+          icon="envelope"
+        >
+          {{ $t('password-reset.form.submit') }}
+        </ds-button>
+      </ds-form>
+      <div v-else>
+        <transition name="ds-transition-fade">
+          <ds-flex centered>
+            <sweetalert-icon icon="info" />
+          </ds-flex>
+        </transition>
+        <ds-text v-html="submitMessage" />
+      </div>
+    </ds-space>
+  </ds-card>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export default {
+  components: {
+    SweetalertIcon,
+  },
+  data() {
+    return {
+      formData: {
+        email: '',
+      },
+      formSchema: {
+        email: {
+          type: 'email',
+          required: true,
+          message: this.$t('common.validations.email'),
+        },
+      },
+      disabled: true,
+      submitted: false,
+    }
+  },
+  computed: {
+    submitMessage() {
+      const { email } = this.formData
+      return this.$t('password-reset.form.submitted', { email })
+    },
+  },
+  methods: {
+    handleInput() {
+      this.disabled = true
+    },
+    handleInputValid() {
+      this.disabled = false
+    },
+    async handleSubmit() {
+      const mutation = gql`
+        mutation($email: String!) {
+          requestPasswordReset(email: $email)
+        }
+      `
+      const { email } = this.formData
+
+      try {
+        await this.$apollo.mutate({ mutation, variables: { email } })
+        this.submitted = true
+
+        setTimeout(() => {
+          this.$emit('handleSubmitted', { email })
+        }, 3000)
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
+  },
+}
+</script>

webapp/components/PasswordReset/VerifyCode.spec.js

@@ -0,0 +1,53 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import VerifyCode from './VerifyCode'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('VerifyCode ', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+  let propsData
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+    propsData = {
+      email: 'mail@example.org',
+    }
+  })
+
+  describe('mount', () => {
+    beforeEach(jest.useFakeTimers)
+
+    Wrapper = () => {
+      return mount(VerifyCode, {
+        mocks,
+        localVue,
+        propsData,
+      })
+    }
+
+    it('renders a verify code form', () => {
+      wrapper = Wrapper()
+      expect(wrapper.find('.verify-code').exists()).toBe(true)
+    })
+
+    describe('after verification code given', () => {
+      beforeEach(() => {
+        wrapper = Wrapper()
+        wrapper.find('input#code').setValue('123456')
+        wrapper.find('form').trigger('submit')
+      })
+
+      it('emits `verifyCode`', () => {
+        const expected = [[{ code: '123456', email: 'mail@example.org' }]]
+        expect(wrapper.emitted('verification')).toEqual(expected)
+      })
+    })
+  })
+})

webapp/components/PasswordReset/VerifyCode.vue

@@ -0,0 +1,67 @@
+<template>
+  <ds-card class="verify-code">
+    <ds-space margin="large">
+      <ds-form
+        v-model="formData"
+        :schema="formSchema"
+        @submit="handleSubmitVerify"
+        @input="handleInput"
+        @input-valid="handleInputValid"
+      >
+        <ds-input
+          :placeholder="$t('verify-code.form.code')"
+          model="code"
+          name="code"
+          id="code"
+          icon="question-circle"
+        />
+        <ds-space margin-botton="large">
+          <ds-text>
+            {{ $t('verify-code.form.description') }}
+          </ds-text>
+        </ds-space>
+        <ds-button :disabled="disabled" primary fullwidth name="submit" type="submit">
+          {{ $t('verify-code.form.next') }}
+        </ds-button>
+      </ds-form>
+    </ds-space>
+  </ds-card>
+</template>
+
+<script>
+export default {
+  props: {
+    email: { type: String, required: true },
+  },
+  data() {
+    return {
+      formData: {
+        code: '',
+      },
+      formSchema: {
+        code: {
+          type: 'string',
+          min: 6,
+          max: 6,
+          required: true,
+          message: this.$t('common.validations.verification-code'),
+        },
+      },
+      disabled: true,
+    }
+  },
+  methods: {
+    async handleInput() {
+      this.disabled = true
+    },
+    async handleInputValid() {
+      this.disabled = false
+    },
+    handleSubmitVerify() {
+      const { code } = this.formData
+      const email = this.email
+      this.$emit('verification', { email, code })
+    },
+  },
+}
+</script>

webapp/locales/de.json

@@ -8,11 +8,32 @@
     "logout": "Ausloggen",
     "email": "Deine E-Mail",
     "password": "Dein Passwort",
+    "forgotPassword": "Passwort vergessen?",
     "moreInfo": "Was ist Human Connection?",
     "moreInfoURL": "https://human-connection.org",
     "moreInfoHint": "zur Präsentationsseite",
     "hello": "Hallo"
   },
+  "password-reset": {
+    "title": "Passwort zurücksetzen",
+    "form": {
+      "description": "Eine Mail zum Zurücksetzen des Passworts wird an die angegebene E-Mail Adresse geschickt.",
+      "submit": "Email anfordern",
+      "submitted": "Eine E-Mail mit weiteren Instruktionen wurde verschickt an <b>{email}</b>"
+    }
+  },
+  "verify-code": {
+    "form": {
+      "code": "Code eingeben",
+      "description": "Öffne dein E-Mail Postfach und gib den Code ein, den wir geschickt haben.",
+      "next": "Weiter",
+      "change-password":{
+        "success": "Änderung des Passworts war erfolgreich!",
+        "error": "Passwort Änderung fehlgeschlagen. Möglicherweise falscher Sicherheitscode?",
+        "help": "Falls Probleme auftreten, schreib uns gerne eine Mail an:"
+      }
+    }
+  },
   "editor": {
     "placeholder": "Schreib etwas Inspirierendes..."
   },
@@ -193,7 +214,11 @@
     "name": "Name",
     "loadMore": "mehr laden",
     "loading": "wird geladen",
-    "reportContent": "Melden"
+    "reportContent": "Melden",
+    "validations": {
+      "email": "muss eine gültige E-Mail Adresse sein",
+      "verification-code": "muss genau 6 Buchstaben lang sein"
+    }
   },
   "actions": {
     "loading": "lade",

webapp/locales/en.json

@@ -8,11 +8,32 @@
     "logout": "Logout",
     "email": "Your Email",
     "password": "Your Password",
+    "forgotPassword": "Forgot Password?",
     "moreInfo": "What is Human Connection?",
     "moreInfoURL": "https://human-connection.org/en/",
     "moreInfoHint": "to the presentation page",
     "hello": "Hello"
   },
+  "password-reset": {
+    "title": "Reset your password",
+    "form": {
+      "description": "A password reset email will be sent to the given email address.",
+      "submit": "Request email",
+      "submitted": "A mail with further instruction has been sent to <b>{email}</b>"
+    }
+  },
+  "verify-code": {
+    "form": {
+      "code": "Enter your code",
+      "description": "Open your inbox and enter the code that we've sent to you.",
+      "next": "Continue",
+      "change-password": {
+        "success": "Changing your password was successful!",
+        "error": "Changing your password failed. Maybe the security code was not correct?",
+        "help": "In case of problems, feel free to ask for help by sending us a mail to:"
+      }
+    }
+  },
   "editor": {
     "placeholder": "Leave your inspirational thoughts..."
   },
@@ -193,7 +214,11 @@
     "name": "Name",
     "loadMore": "load more",
     "loading": "loading",
-    "reportContent": "Report"
+    "reportContent": "Report",
+    "validations": {
+      "email": "must be a valid email address",
+      "verification-code": "must be 6 characters long"
+    }
   },
   "actions": {
     "loading": "loading",

webapp/nuxt.config.js

@@ -25,7 +25,18 @@ module.exports = {
 
   env: {
     // pages which do NOT require a login
-    publicPages: ['login', 'logout', 'register', 'signup', 'reset', 'reset-token', 'pages-slug'],
+    publicPages: [
+      'login',
+      'logout',
+      'password-reset-request',
+      'password-reset-verify-code',
+      'password-reset-change-password',
+      'register',
+      'signup',
+      'reset',
+      'reset-token',
+      'pages-slug',
+    ],
     // pages to keep alive
     keepAlivePages: ['index'],
     // active locales

webapp/pages/login.vue

@@ -45,6 +45,11 @@
                 name="password"
                 type="password"
               />
+              <ds-space class="password-reset-link" margin-bottom="large">
+                <nuxt-link to="/password-reset/request">
+                  {{ $t('login.forgotPassword') }}
+                </nuxt-link>
+              </ds-space>
               <ds-button
                 :loading="pending"
                 primary

webapp/pages/password-reset.vue

@@ -0,0 +1,22 @@
+<template>
+  <ds-container width="small">
+    <ds-flex>
+      <ds-flex-item :width="{ base: '100%' }" centered>
+        <ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
+          <nuxt-child />
+        </ds-space>
+      </ds-flex-item>
+    </ds-flex>
+  </ds-container>
+</template>
+
+<script>
+export default {
+  layout: 'default',
+  asyncData({ store, redirect }) {
+    if (store.getters['auth/isLoggedIn']) {
+      redirect('/')
+    }
+  },
+}
+</script>

webapp/pages/password-reset/change-password.vue

@@ -0,0 +1,28 @@
+<template>
+  <change-password
+    :email="email"
+    :code="code"
+    @passwordResetResponse="handlePasswordResetResponse"
+  />
+</template>
+
+<script>
+import ChangePassword from '~/components/PasswordReset/ChangePassword'
+
+export default {
+  data() {
+    const { email = '', code = '' } = this.$route.query
+    return { email, code }
+  },
+  components: {
+    ChangePassword,
+  },
+  methods: {
+    handlePasswordResetResponse(response) {
+      if (response === 'success') {
+        this.$router.push('/login')
+      }
+    },
+  },
+}
+</script>

webapp/pages/password-reset/request.vue

@@ -0,0 +1,18 @@
+<template>
+  <request @handleSubmitted="handlePasswordResetRequested" />
+</template>
+
+<script>
+import Request from '~/components/PasswordReset/Request'
+
+export default {
+  components: {
+    Request,
+  },
+  methods: {
+    handlePasswordResetRequested({ email }) {
+      this.$router.push({ path: 'verify-code', query: { email } })
+    },
+  },
+}
+</script>

webapp/pages/password-reset/verify-code.vue

@@ -0,0 +1,22 @@
+<template>
+  <verify-code :email="email" @verification="handleVerification" />
+</template>
+
+<script>
+import VerifyCode from '~/components/PasswordReset/VerifyCode'
+
+export default {
+  components: {
+    VerifyCode,
+  },
+  data() {
+    const { email = '' } = this.$route.query
+    return { email }
+  },
+  methods: {
+    handleVerification({ email, code }) {
+      this.$router.push({ path: 'change-password', query: { email, code } })
+    },
+  },
+}
+</script>