From e3575bcf9799448bae0b1e4a4ac303e48805eb7a Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 4 Apr 2019 15:57:02 +0200
Subject: [PATCH] Handle backenderrors in frontend

---
 client/src/components/PasswordReset.vue       | 15 ++++--
 .../graphql/gql/mutations/updatePassword.gql  | 11 ++++
 client/src/pages/passwordReset.vue            | 52 ++++++++++++++++++-
 server/users/tests/__init__.py                | 10 ++++
 .../tests/test_password_update.py             |  0
 5 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 client/src/graphql/gql/mutations/updatePassword.gql
 create mode 100644 server/users/tests/__init__.py
 rename server/{rooms => users}/tests/test_password_update.py (100%)

diff --git a/client/src/components/PasswordReset.vue b/client/src/components/PasswordReset.vue
index 46893ab3..f3258e27 100644
--- a/client/src/components/PasswordReset.vue
+++ b/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
+            });
+          }
         })
       }
     }
diff --git a/client/src/graphql/gql/mutations/updatePassword.gql b/client/src/graphql/gql/mutations/updatePassword.gql
new file mode 100644
index 00000000..e252e622
--- /dev/null
+++ b/client/src/graphql/gql/mutations/updatePassword.gql
@@ -0,0 +1,11 @@
+mutation UpdatePassword($input: UpdatePasswordInput!) {
+  updatePassword(input: $input) {
+    success
+    errors {
+      field
+      errors {
+        code
+      }
+    }
+  }
+}
diff --git a/client/src/pages/passwordReset.vue b/client/src/pages/passwordReset.vue
index f5498cc8..bdd5e3be 100644
--- a/client/src/pages/passwordReset.vue
+++ b/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.'
+          }
+        });
       }
     }
   }
diff --git a/server/users/tests/__init__.py b/server/users/tests/__init__.py
new file mode 100644
index 00000000..5c234b8e
--- /dev/null
+++ b/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
diff --git a/server/rooms/tests/test_password_update.py b/server/users/tests/test_password_update.py
similarity index 100%
rename from server/rooms/tests/test_password_update.py
rename to server/users/tests/test_password_update.py