Handle backenderrors in frontend

client/src/components/PasswordReset.vue

@@ -6,20 +6,24 @@
         <input id="old-pw"
                name="oldPassword"
                type="text"
+               v-model="oldPassword"
                v-validate="'required'"
                :class="{ 'sbform-input__input--error': errors.has('oldPassword') }"
                class="reset-form__old skillbox-input sbform-input__input">
         <small v-if="errors.has('oldPassword') && submitted" class="sbform-input__error">{{ errors.first('oldPassword') }}</small>
+        <small v-for="error in oldPasswordErrors" :key="error" class=" sbform-input__error">{{ error }}</small>
       </div>
       <div class="reset-form__field sbform-input">
         <label for="new-pw" class="sbform-input__label">Neues Passwort</label>
         <input id="new-pw"
                name="newPassword"
                type="text"
+               v-model="newPassword"
                v-validate="'required|min:8|strongPassword'"
                :class="{ 'sbform-input__input--error': errors.has('newPassword') }"
                class="reset-form__new skillbox-input sbform-input__input">
         <small v-if="errors.has('newPassword') && submitted" class=" sbform-input__error">{{ errors.first('newPassword') }}</small>
+        <small v-for="error in newPasswordErrors" :key="error" class=" sbform-input__error">{{ error }}</small>
       </div>
       <button class="button button--primary reset-form__submit">Zurücksetzen</button>
     </form>
@@ -28,9 +32,7 @@
 
 <script>
   export default {
-    components: {
+    props: ['newPasswordErrors', 'oldPasswordErrors'],
-
-    },
     data: () => ({
       oldPassword: '',
       newPassword: '',
@@ -40,7 +42,12 @@
       validateBeforeSubmit () {
         this.$validator.validate().then((result) => {
           this.submitted = true;
-          console.log(this)
+          if (result) {
+            this.$emit('passwordSubmited', {
+              oldPassword: this.oldPassword,
+              newPassword: this.newPassword
+            });
+          }
         })
       }
     }

client/src/graphql/gql/mutations/updatePassword.gql

@@ -0,0 +1,11 @@
+mutation UpdatePassword($input: UpdatePasswordInput!) {
+  updatePassword(input: $input) {
+    success
+    errors {
+      field
+      errors {
+        code
+      }
+    }
+  }
+}

client/src/pages/passwordReset.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="password-reset">
     <h1 class="password-reset__header">Passwort Zurücksetzen</h1>
-    <password-reset />
+    <password-reset
+      @passwordSubmited="resetPassword"
+      :oldPasswordErrors="oldPasswordErrors"
+      :newPasswordErrors="newPasswordErrors" />
   </div>
 </template>
 
 <script>
 
+  import UPDATE_PASSWORD_MUTATION from '@/graphql/gql/mutations/updatePassword.gql';
   import PasswordReset from '@/components/PasswordReset'
 
   export default {
@@ -16,7 +20,51 @@
 
     data() {
       return {
-        me: []
+        oldPasswordErrors: [],
+        newPasswordErrors: []
+      }
+    },
+    methods: {
+      resetPassword (passwords) {
+        this.$apollo.mutate({
+          mutation: UPDATE_PASSWORD_MUTATION,
+          variables: {
+            input: {
+              passwordInput: passwords
+            }
+          }
+        }).then(({ data }) => {
+          if (data.updatePassword.success) {
+            this.oldPasswordErrors = [];
+            this.newPasswordErrors = [];
+          } else {
+            // currently we just have one error per field
+            const error = data.updatePassword.errors[0]
+            if (error.field === 'old_password') {
+              this.handleOldPasswordError(error);
+            } else {
+              this.handleNewPasswordError(error)
+            }
+          }
+        }).catch((error) => {
+          console.log('fail', error)
+        });
+      },
+      handleOldPasswordError (error) {
+        this.oldPasswordErrors = error.errors.map((fieldError) => {
+          if (fieldError.code === 'invalid') {
+            return 'Die Eingabe ist falsch'
+          }
+        });
+      },
+      handleNewPasswordError (error) {
+        this.newPasswordErrors = error.errors.map((fieldError) => {
+          if (fieldError.code === 'invalid') {
+            return 'Das Passwort muss Grossbuchstaben, Zahlen und Sonderzeichen beinhalten'
+          } else if (fieldError.code === 'min_length') {
+            return 'Das Passwort muss mindestens 8 Zeichen lang sein.'
+          }
+        });
       }
     }
   }

server/users/tests/__init__.py

@@ -0,0 +1,10 @@
+# -*- coding: utf-8 -*-
+#
+# ITerativ GmbH
+# http://www.iterativ.ch/
+#
+# Copyright (c) 2019 ITerativ GmbH. All rights reserved.
+#
+# Created on 2019-04-04
+# @author: chrigu <christian.cueni@iterativ.ch>
+from django.conf import settings