From 90aa1822b5ed9757b7047a86a518782c8c51c78b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 8 Jul 2019 18:13:24 +0200
Subject: [PATCH] Disable the form button with a slot scope

---
 webapp/components/Password/Change.vue         |  12 +-
 .../PasswordReset/ChangePassword.vue          |  62 +++++-----
 .../Registration/CreateUserAccount.vue        | 108 +++++++++---------
 3 files changed, 80 insertions(+), 102 deletions(-)

diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index 63c797157..ab9a89cbc 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -3,10 +3,8 @@
     v-model="formData"
     :schema="formSchema"
     @submit="handleSubmit"
-    @input="handleInput"
-    @input-valid="handleInputValid"
   >
-    <template>
+    <template slot-scope="{ errors }">
       <ds-input
         id="oldPassword"
         model="oldPassword"
@@ -30,7 +28,7 @@
       />
       <password-strength :password="formData.newPassword" />
       <ds-space margin-top="base">
-        <ds-button :loading="loading" :disabled="disabled" primary>
+        <ds-button :loading="loading" :disabled="errors" primary>
           {{ $t('settings.security.change-password.button') }}
         </ds-button>
       </ds-space>
@@ -81,12 +79,6 @@ export default {
     }
   },
   methods: {
-    async handleInput(data) {
-      this.disabled = true
-    },
-    async handleInputValid(data) {
-      this.disabled = false
-    },
     async handleSubmit(data) {
       this.loading = true
       const mutation = gql`
diff --git a/webapp/components/PasswordReset/ChangePassword.vue b/webapp/components/PasswordReset/ChangePassword.vue
index 5a12f9938..4353cbc88 100644
--- a/webapp/components/PasswordReset/ChangePassword.vue
+++ b/webapp/components/PasswordReset/ChangePassword.vue
@@ -1,16 +1,14 @@
 <template>
   <ds-card class="verify-code">
     <ds-space margin="large">
-      <template>
-        <ds-form
-          v-if="!changePasswordResult"
-          v-model="formData"
-          :schema="formSchema"
-          @submit="handleSubmitPassword"
-          @input="handleInput"
-          @input-valid="handleInputValid"
-          class="change-password"
-        >
+      <ds-form
+        v-if="!changePasswordResult"
+        v-model="formData"
+        :schema="formSchema"
+        @submit="handleSubmitPassword"
+        class="change-password"
+      >
+        <template slot-scope="{ errors }">
           <ds-input
             id="newPassword"
             model="newPassword"
@@ -27,28 +25,28 @@
           />
           <password-strength :password="formData.newPassword" />
           <ds-space margin-top="base">
-            <ds-button :loading="$apollo.loading" :disabled="disabled" primary>
+            <ds-button :loading="$apollo.loading" :disabled="errors" primary>
               {{ $t('settings.security.change-password.button') }}
             </ds-button>
           </ds-space>
-        </ds-form>
-        <ds-text v-else>
-          <template v-if="changePasswordResult === 'success'">
-            <sweetalert-icon icon="success" />
-            <ds-text>
-              {{ $t(`verify-code.form.change-password.success`) }}
-            </ds-text>
-          </template>
-          <template v-else>
-            <sweetalert-icon icon="error" />
-            <ds-text align="left">
-              {{ $t(`verify-code.form.change-password.error`) }}
-              {{ $t('verify-code.form.change-password.help') }}
-            </ds-text>
-            <a href="mailto:support@human-connection.org">support@human-connection.org</a>
-          </template>
-        </ds-text>
-      </template>
+        </template>
+      </ds-form>
+      <ds-text v-else>
+        <template v-if="changePasswordResult === 'success'">
+          <sweetalert-icon icon="success" />
+          <ds-text>
+            {{ $t(`verify-code.form.change-password.success`) }}
+          </ds-text>
+        </template>
+        <template v-else>
+          <sweetalert-icon icon="error" />
+          <ds-text align="left">
+            {{ $t(`verify-code.form.change-password.error`) }}
+            {{ $t('verify-code.form.change-password.help') }}
+          </ds-text>
+          <a href="mailto:support@human-connection.org">support@human-connection.org</a>
+        </template>
+      </ds-text>
     </ds-space>
   </ds-card>
 </template>
@@ -95,12 +93,6 @@ export default {
     }
   },
   methods: {
-    async handleInput() {
-      this.disabled = true
-    },
-    async handleInputValid() {
-      this.disabled = false
-    },
     async handleSubmitPassword() {
       const mutation = gql`
         mutation($code: String!, $email: String!, $newPassword: String!) {
diff --git a/webapp/components/Registration/CreateUserAccount.vue b/webapp/components/Registration/CreateUserAccount.vue
index 4b91ab216..d7041ce26 100644
--- a/webapp/components/Registration/CreateUserAccount.vue
+++ b/webapp/components/Registration/CreateUserAccount.vue
@@ -10,61 +10,61 @@
   <ds-form
     v-else
     class="create-user-account"
-    @input="handleInput"
-    @input-valid="handleInputValid"
     v-model="formData"
     :schema="formSchema"
     @submit="submit"
   >
-    <ds-card :header="$t('registration.create-user-account.title')">
-      <ds-input
-        id="name"
-        model="name"
-        icon="user"
-        :label="$t('settings.data.labelName')"
-        :placeholder="$t('settings.data.namePlaceholder')"
-      />
-      <ds-input
-        id="bio"
-        model="about"
-        type="textarea"
-        rows="3"
-        :label="$t('settings.data.labelBio')"
-        :placeholder="$t('settings.data.labelBio')"
-      />
-      <ds-input
-        id="password"
-        model="password"
-        type="password"
-        autocomplete="off"
-        :label="$t('settings.security.change-password.label-new-password')"
-      />
-      <ds-input
-        id="confirmPassword"
-        model="confirmPassword"
-        type="password"
-        autocomplete="off"
-        :label="$t('settings.security.change-password.label-new-password-confirm')"
-      />
-      <password-strength :password="formData.password" />
-      <template slot="footer">
-        <ds-space class="errors" v-if="errors">
-          <ds-text align="center" bold color="danger">
-            {{ errors.message }}
-          </ds-text>
-        </ds-space>
-        <ds-button
-          style="float: right;"
-          icon="check"
-          type="submit"
-          :loading="$apollo.loading"
-          :disabled="disabled"
-          primary
-        >
-          {{ $t('actions.save') }}
-        </ds-button>
-      </template>
-    </ds-card>
+    <template slot-scope="{ errors }">
+      <ds-card :header="$t('registration.create-user-account.title')">
+        <ds-input
+          id="name"
+          model="name"
+          icon="user"
+          :label="$t('settings.data.labelName')"
+          :placeholder="$t('settings.data.namePlaceholder')"
+        />
+        <ds-input
+          id="bio"
+          model="about"
+          type="textarea"
+          rows="3"
+          :label="$t('settings.data.labelBio')"
+          :placeholder="$t('settings.data.labelBio')"
+        />
+        <ds-input
+          id="password"
+          model="password"
+          type="password"
+          autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password')"
+        />
+        <ds-input
+          id="confirmPassword"
+          model="confirmPassword"
+          type="password"
+          autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password-confirm')"
+        />
+        <password-strength :password="formData.password" />
+        <template slot="footer">
+          <ds-space class="errors" v-if="errors">
+            <ds-text align="center" bold color="danger">
+              {{ errors.message }}
+            </ds-text>
+          </ds-space>
+          <ds-button
+            style="float: right;"
+            icon="check"
+            type="submit"
+            :loading="$apollo.loading"
+            :disabled="errors"
+            primary
+          >
+            {{ $t('actions.save') }}
+          </ds-button>
+        </template>
+      </ds-card>
+    </template>
   </ds-form>
 </template>
 
@@ -131,12 +131,6 @@ export default {
     email: { type: String, required: true },
   },
   methods: {
-    async handleInput() {
-      this.disabled = true
-    },
-    async handleInputValid() {
-      this.disabled = false
-    },
     async submit() {
       const { name, password, about } = this.formData
       const { email, nonce } = this