Write a nice form to reset your password

webapp/locales/de.json

@@ -15,7 +15,11 @@
     "hello": "Hallo"
   },
   "password-reset": {
-    "title": "Passwort zurücksetzen"
+    "title": "Passwort zurücksetzen",
+    "form": {
+      "description": "Eine Mail zum Zurücksetzen des Passworts wird an die angegebene E-Mail Adresse geschickt.",
+      "submit": "Email anfordern"
+    }
   },
   "editor": {
     "placeholder": "Schreib etwas Inspirierendes..."

webapp/locales/en.json

@@ -15,7 +15,11 @@
     "hello": "Hello"
   },
   "password-reset": {
-    "title": "Reset your password"
+    "title": "Reset your password",
+    "form": {
+      "description": "A password reset email will be sent to the given email address.",
+      "submit": "Request email"
+    }
   },
   "editor": {
     "placeholder": "Leave your inspirational thoughts..."

webapp/pages/password-reset.vue

@@ -3,9 +3,26 @@
     <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-card class="password-reset-card">
+            <ds-space margin="large">
+              <form>
+                <ds-input
+                  :placeholder="$t('login.email')"
+                  type="email"
+                  name="email"
+                  icon="envelope"
+                />
+                <ds-space margin-botton="large">
+                  <ds-text>
+                    {{ $t('password-reset.form.description') }}
+                  </ds-text>
+                </ds-space>
+                <ds-button primary fullwidth name="submit" type="submit" icon="sign-in">
+                  {{ $t('password-reset.form.submit') }}
+                </ds-button>
+              </form>
+            </ds-space>
+          </ds-card>
         </ds-space>
       </ds-flex-item>
     </ds-flex>