bind to sytleguide on password strength component, transalte security settings labels, bind to user input validation function which is not working currently

webapp/components/Password/Change.vue

@@ -1,18 +1,31 @@
 <template>
-  <ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit">
+  <ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit" @input="handleInput">
     <template>
-      <ds-input id="oldPassword" model="oldPassword" type="password" label="Your old password"/>
-      <ds-input id="newPassword" model="newPassword" type="password" label="Your new password"/>
+      <ds-input
+        id="oldPassword"
+        model="oldPassword"
+        type="password"
+        :label="$t('settings.security.change-password.label-old-password')"
+      />
+      <ds-input
+        id="newPassword"
+        model="newPassword"
+        type="password"
+        :label="$t('settings.security.change-password.label-new-password')"
+      />
       <ds-input
         id="confirmPassword"
         model="confirmPassword"
         type="password"
-        label="Confirm new password"
+        :label="$t('settings.security.change-password.label-new-password-confirm')"
       />
-      {{ formData }}
-      <password-strength :password="newPassword" @change="e => passwordSecure = e.isSecure"/>
+      <!--<password-strength :password="newPassword" @change="e => passwordSecure = e.isSecure"/>-->
       <ds-space margin-top="base">
-        <ds-button :loading="loading" primary>{{ $t('settings.security.change-password.button') }}</ds-button>
+        <ds-button
+          :loading="loading"
+          :disabled="disabled"
+          primary
+        >{{ $t('settings.security.change-password.button') }}</ds-button>
       </ds-space>
     </template>
   </ds-form>
@@ -43,12 +56,20 @@ export default {
       disabled: true
     }
   },
-  watch: {
-    newPassword() {
-      return 'abcabc1234567!' // this.formData.newPassword
-    }
-  },
   methods: {
+    async handleInput(data) {
+      //return 'abcabc1234567!' // this.formData.newPassword
+      console.log('validation')
+      console.log(data)
+      if (
+        this.formData.newPassword &&
+        this.formData.newPassword === this.formData.confirmPassword
+      ) {
+        this.disabled = false
+      } else {
+        this.disabled = true
+      }
+    },
     async handleSubmit(data) {
       this.loading = true
       const mutation = gql`

webapp/components/Password/Strength.vue

@@ -64,19 +64,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// TODO export those definitions for reuse?
-// @import 'assets/styles/_variables';
-$grey-lighter: hsl(0, 0%, 86%);
-$red: hsl(12, 51%, 55%);
-$orange: hsl(14, 100%, 53%);
-$yellow: hsl(48, 100%, 67%);
-$green: #4aa41e;
-// @import 'assets/styles/_variables';
-
 .password-strength-meter {
   position: relative;
   height: 3px;
-  background: $grey-lighter;
+  background: $color-neutral-85;
   margin: 10px auto 6px;
   border-radius: 3px;
 
@@ -106,7 +97,7 @@ $green: #4aa41e;
 .help {
   .insecure {
     strong {
-      color: $red;
+      color: $color-danger;
     }
   }
 }
@@ -122,23 +113,23 @@ $green: #4aa41e;
 
 .password-strength-meter-inner {
   &.strength-0 {
-    background: darken($orange, 40%);
+    background: darken($color-warning, 40%);
     width: 20%;
   }
   &.strength-1 {
-    background: darken(mix($orange, $yellow, 50%), 30%);
+    background: darken(mix($color-warning, $color-yellow, 50%), 30%);
     width: 40%;
   }
   &.strength-2 {
-    background: darken($yellow, 20%);
+    background: darken($color-yellow, 20%);
     width: 60%;
   }
   &.strength-3 {
-    background: darken($green, 10%);
+    background: darken($color-success, 10%);
     width: 80%;
   }
   &.strength-4 {
-    background: $green;
+    background: $color-success;
     width: 100%;
   }
 }

webapp/locales/de.json

@@ -23,7 +23,7 @@
   },
   "notifications": {
     "menu": {
-       "mentioned": "hat dich in einem Beitrag erwähnt"
+      "mentioned": "hat dich in einem Beitrag erwähnt"
     }
   },
   "search": {
@@ -43,7 +43,10 @@
       "name": "Sicherheit",
       "change-password": {
         "button": "Passwort ändern",
-        "success": "Passwort erfolgreich geändert!"
+        "success": "Passwort erfolgreich geändert!",
+        "label-old-password": "Dein altes Passwort",
+        "label-new-password": "Dein neues Passwort",
+        "label-new-password-confirm": "Bestätige Dein neues Passwort"
       }
     },
     "invites": {
@@ -220,4 +223,4 @@
   "shoutButton": {
     "shouted": "empfohlen"
   }
-}
+}

webapp/locales/en.json

@@ -43,7 +43,10 @@
       "name": "Security",
       "change-password": {
         "button": "Change password",
-        "success": "Password successfully changed!"
+        "success": "Password successfully changed!",
+        "label-old-password": "Your old password",
+        "label-new-password": "Your new password",
+        "label-new-password-confirm": "Confirm new password"
       }
     },
     "invites": {
@@ -220,4 +223,4 @@
   "shoutButton": {
     "shouted": "shouted"
   }
-}
+}

webapp/yarn.lock

@@ -1398,11 +1398,6 @@
     "@types/express-serve-static-core" "*"
     "@types/mime" "*"
 
-"@types/stack-utils@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
-  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
-
 "@types/strip-bom@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
@@ -9912,7 +9907,7 @@ stack-trace@0.0.10:
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
   integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
 
-stack-utils@^1.0.1, stack-utils@^1.0.2:
+stack-utils@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
   integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==