Add reset password page

webapp/locales/de.json

@@ -8,11 +8,15 @@
     "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"
+  },
   "editor": {
     "placeholder": "Schreib etwas Inspirierendes..."
   },

webapp/locales/en.json

@@ -8,11 +8,15 @@
     "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"
+  },
   "editor": {
     "placeholder": "Leave your inspirational thoughts..."
   },

webapp/nuxt.config.js

@@ -25,7 +25,16 @@ 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',
+      '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">
+                  {{ $t('login.forgotPassword') }}
+                </nuxt-link>
+              </ds-space>
               <ds-button
                 :loading="pending"
                 primary

webapp/pages/password-reset.vue

@@ -0,0 +1,19 @@
+<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>
+          <ds-heading tag="h3">
+            {{ $t('password-reset.title') }}
+          </ds-heading>
+        </ds-space>
+      </ds-flex-item>
+    </ds-flex>
+  </ds-container>
+</template>
+
+<script>
+export default {
+  layout: 'default',
+}
+</script>