Merge pull request #548 from gradido/541-Userprofile-Button-icons

change userdata button disable rules

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -85,7 +85,7 @@ export default {
       default: 'img/brand/green.png',
       description: 'Gradido Sidebar app logo',
     },
-    value: { type: Array },
+    value: { type: String },
     autoClose: {
       type: Boolean,
       default: true,

frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue

@@ -68,7 +68,7 @@
             <b-col>
               <div class="text-right" ref="submitButton">
                 <b-button
-                  variant="info"
+                  :variant="loading ? 'default' : 'success'"
                   @click="onSubmit"
                   type="submit"
                   class="mt-4"

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue

@@ -20,7 +20,7 @@
         </b-row>
 
         <div v-if="!edit_pwd">
-          <b-row class="mb-3">
+          <b-row class="mb-5">
             <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
               <small>{{ $t('form.password_old') }}</small>
             </b-col>
@@ -43,6 +43,7 @@
               </b-input-group>
             </b-col>
           </b-row>
+
           <b-row class="mb-3">
             <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
               <small>{{ $t('form.password_new') }}</small>
@@ -89,10 +90,31 @@
               </b-input-group>
             </b-col>
           </b-row>
+          <b-row>
+            <b-col></b-col>
+            <b-col>
+              <transition name="hint" appear>
+                <div v-if="passwordValidation.errors.length > 0" class="hints">
+                  <ul>
+                    <li v-for="error in passwordValidation.errors" :key="error">
+                      <small>{{ error }}</small>
+                    </li>
+                  </ul>
+                </div>
+              </transition>
+            </b-col>
+          </b-row>
+
           <b-row class="text-right" v-if="!edit_pwd">
             <b-col>
               <div class="text-right" ref="submitButton">
-                <b-button variant="info" @click="onSubmit" class="mt-4">
+                <b-button
+                  :variant="loading ? 'default' : 'success'"
+                  @click="onSubmit"
+                  type="submit"
+                  class="mt-4"
+                  :disabled="loading"
+                >
                   {{ $t('form.save') }}
                 </b-button>
               </div>
@@ -132,7 +154,12 @@ export default {
       this.passwordVisibleOldPwd = !this.passwordVisibleOldPwd
     },
     loadSubmitButton() {
-      if (this.passwordVisibleNewPwd === this.passwordVisibleNewPwdRepeat) {
+      if (
+        this.password !== '' &&
+        this.passwordNew !== '' &&
+        this.passwordNewRepeat !== '' &&
+        this.passwordNew === this.passwordNewRepeat
+      ) {
         this.loading = false
       } else {
         this.loading = true
@@ -153,6 +180,31 @@ export default {
       }
     },
   },
+  computed: {
+    samePasswords() {
+      return this.password === this.passwordNew
+    },
+    rules() {
+      return [
+        { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
+        { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
+        { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
+        { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
+      ]
+    },
+    passwordValidation() {
+      const errors = []
+      for (const condition of this.rules) {
+        if (!condition.regex.test(this.passwordNew)) {
+          errors.push(condition.message)
+        }
+      }
+      if (errors.length === 0) {
+        return { valid: true, errors }
+      }
+      return { valid: false, errors }
+    },
+  },
 }
 </script>
 <style></style>