Display nice success message on password reset

webapp/locales/de.json

@@ -19,7 +19,7 @@
     "form": {
       "description": "Eine Mail zum Zurücksetzen des Passworts wird an die angegebene E-Mail Adresse geschickt.",
       "submit": "Email anfordern",
-      "submitted": "Eine E-Mail zum Zurücksetzen wurde angefordert"
+      "submitted": "E-Mail verschickt an <b>{email}</b>"
     }
   },
   "editor": {

webapp/locales/en.json

@@ -19,7 +19,7 @@
     "form": {
       "description": "A password reset email will be sent to the given email address.",
       "submit": "Request email",
-      "submitted": "Reset email was requested"
+      "submitted": "Email sent to <b>{email}</b>"
     }
   },
   "editor": {

webapp/pages/password-reset.spec.js

@@ -20,7 +20,7 @@ describe('ProfileSlug', () => {
       $t: jest.fn(),
       $apollo: {
         loading: false,
-        mutate: jest.fn().mockResolvedValue(),
+        mutate: jest.fn().mockResolvedValue({ data: { reqestPasswordReset: true } }),
       },
     }
   })
@@ -49,9 +49,19 @@ describe('ProfileSlug', () => {
         expect(mocks.$apollo.mutate).toHaveBeenCalled()
       })
 
-      it.todo('delivers email to backend')
+      it('delivers email to backend', () => {
-      it.todo('disables form to avoid re-submission')
+        const expected = expect.objectContaining({ variables: { email: 'mail@example.org' } })
-      it.todo('displays a message that a password email was requested')
+        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('given password reset token as URL param', () => {

webapp/pages/password-reset.vue

@@ -6,11 +6,13 @@
           <ds-card class="password-reset-card">
             <ds-space margin="large">
               <ds-form
+                v-if="!submitted"
                 @input="handleInput"
                 @input-valid="handleInputValid"
                 v-model="formData"
                 :schema="formSchema"
-                @submit="handleSubmit">
+                @submit="handleSubmit"
+              >
                 <ds-input
                   :placeholder="$t('login.email')"
                   type="email"
@@ -26,10 +28,24 @@
                 </ds-space>
                 <ds-button
                   :disabled="disabled"
-                  :loading="$apollo.loading" primary fullwidth name="submit" type="submit" icon="envelope">
+                  :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="success" />
+                  </ds-flex>
+                </transition>
+                <ds-text v-html="submitMessage" />
+              </div>
             </ds-space>
           </ds-card>
         </ds-space>
@@ -40,33 +56,43 @@
 
 <script>
 import gql from 'graphql-tag'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
 
 export default {
   layout: 'default',
+  components: {
+    SweetalertIcon,
+  },
   data() {
     return {
       formData: {
-        email: ''
+        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(data) {
+    handleInput() {
       this.disabled = true
     },
-    handleInputValid(data) {
+    handleInputValid() {
       this.disabled = false
     },
     async handleSubmit() {
-      console.log('handleSubmit')
       const mutation = gql`
         mutation($email: String!) {
           requestPasswordReset(email: $email)
@@ -75,15 +101,12 @@ export default {
       const variables = this.formData
 
       try {
-        const { data } = await this.$apollo.mutate({ mutation, variables })
+        await this.$apollo.mutate({ mutation, variables })
-        this.$toast.success(this.$t('password-reset.form.submitted'))
+        this.submitted = true
-        this.formData = {
-          email: '',
-        }
       } catch (err) {
         this.$toast.error(err.message)
       }
-    }
+    },
   },
 }
 </script>