From 7228d68149e10517be360f1f6db3a08285ffd633 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 17 Jun 2019 12:30:39 +0200
Subject: [PATCH] Write a nice form to reset your password

---
 webapp/locales/de.json          |  6 +++++-
 webapp/locales/en.json          |  6 +++++-
 webapp/pages/password-reset.vue | 23 ++++++++++++++++++++---
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index d783f9e37..14ab9d906 100644
--- a/webapp/locales/de.json
+++ b/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..."
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 3a5405eec..3c2b7c8d8 100644
--- a/webapp/locales/en.json
+++ b/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..."
diff --git a/webapp/pages/password-reset.vue b/webapp/pages/password-reset.vue
index 0205ea4f4..bd7da49be 100644
--- a/webapp/pages/password-reset.vue
+++ b/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>