From 11161441eef9a44d15d059c9320f9e9cce8c4bfe Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Mar 2023 10:57:54 +0100
Subject: [PATCH] add submit disable logic over validation

---
 frontend/src/pages/Login.vue         | 11 ++++++--
 frontend/src/pages/ResetPassword.vue | 38 +++++++++++++++++++---------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index c177049ef..c02ee0e45 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -2,7 +2,7 @@
   <div class="login-form">
     <b-container v-if="enterData">
       <div class="pb-5" align="center">{{ $t('gdd_per_link.isFree') }}</div>
-      <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row>
             <b-col sm="12" md="12" lg="6">
@@ -31,7 +31,14 @@
           </b-row>
           <b-row>
             <b-col cols="12" lg="6">
-              <b-button type="submit" variant="gradido" block>{{ $t('login') }}</b-button>
+              <b-button
+                type="submit"
+                :variant="valid ? 'gradido' : 'gradido-disable'"
+                block
+                :disabled="!valid"
+              >
+                {{ $t('login') }}
+              </b-button>
             </b-col>
           </b-row>
         </b-form>
diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index 5c791ac61..6fa76d994 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -1,20 +1,24 @@
 <template>
   <div v-if="enterData" class="resetpwd-form">
     <div class="pb-5">{{ $t('site.resetPassword.heading') }}</div>
-    <validation-observer ref="observer" v-slot="{ handleSubmit }">
+    <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
       <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
         <input-password-confirmation v-model="form" />
-        <div class="text-center">
-          <b-button
-            type="submit"
-            variant="gradido"
-            class="mt-4"
-            data-test="submit-new-password-btn"
-          >
-            <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-            {{ $t(displaySetup.button) }}
-          </b-button>
-        </div>
+        <b-row>
+          <b-col cols="12" lg="6">
+            <b-button
+              block
+              type="submit"
+              :variant="valid ? 'gradido' : 'gradido-disable'"
+              class="mt-4"
+              data-test="submit-new-password-btn"
+              :disabled="!valid"
+            >
+              <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+              {{ $t(displaySetup.button) }}
+            </b-button>
+          </b-col>
+        </b-row>
       </b-form>
     </validation-observer>
   </div>
@@ -149,3 +153,13 @@ export default {
   },
 }
 </script>
+<style scoped>
+.btn-gradido {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+.btn-gradido-disable {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+</style>