updated styleguide to 0.5.17, fixed password cross validation & display passwordstrength on passwordchange

webapp/components/Password/Change.vue

@@ -1,5 +1,11 @@
 <template>
-  <ds-form v-model="formData" :schema="formSchema" @submit="handleSubmit" @input="handleInput">
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @submit="handleSubmit"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+  >
     <template>
       <ds-input
         id="oldPassword"
@@ -19,7 +25,7 @@
         type="password"
         :label="$t('settings.security.change-password.label-new-password-confirm')"
       />
-      <password-strength :password="formData.newPassword" @change="handlePasswordStrength"/>
+      <password-strength :password="formData.newPassword"/>
       <ds-space margin-top="base">
         <ds-button
           :loading="loading"
@@ -49,23 +55,29 @@ export default {
       },
       formSchema: {
         oldPassword: {
+          type: 'string',
           required: true,
           message: this.$t(
             'settings.security.change-password.message-old-password-required'
           )
         },
         newPassword: {
+          type: 'string',
           required: true,
           message: this.$t(
             'settings.security.change-password.message-new-password-required'
           )
         },
-        confirmPassword: {
-          required: true,
-          message: this.$t(
-            'settings.security.change-password.message-new-password-confirm-required'
-          )
-        }
+        confirmPassword: [
+          { validator: this.matchPassword },
+          {
+            type: 'string',
+            required: true,
+            message: this.$t(
+              'settings.security.change-password.message-new-password-confirm-required'
+            )
+          }
+        ]
       },
       loading: false,
       disabled: true
@@ -73,13 +85,10 @@ export default {
   },
   methods: {
     async handleInput(data) {
-      console.log('validation')
-      console.log(data)
-      if (data.newPassword && data.newPassword === data.confirmPassword) {
-        this.disabled = false
-      } else {
-        this.disabled = true
-      }
+      this.disabled = true
+    },
+    async handleInputValid(data) {
+      this.disabled = false
     },
     async handleSubmit(data) {
       this.loading = true
@@ -102,8 +111,18 @@ export default {
         this.loading = false
       }
     },
-    handlePasswordStrength(e) {
-      console.log(e.isSecure)
+    matchPassword(rule, value, callback, source, options) {
+      var errors = []
+      if (this.formData.newPassword !== value) {
+        errors.push(
+          new Error(
+            this.$t(
+              'settings.security.change-password.message-new-password-missmatch'
+            )
+          )
+        )
+      }
+      callback(errors)
     }
   }
 }

webapp/components/Password/Strength.vue

@@ -3,12 +3,10 @@
     <div class="password-strength-meter">
       <div class="password-strength-meter-inner" :class="strengthClass"></div>
     </div>
-    {{ pass }}
-    {{ password }}
     <p class="help">
       <span v-if="this.pass" :class="{ insecure: (passwordStrength < 3) }">
-        {{ $t('auth.register.passwordSecurity') }}:
-        <strong>{{ $t(`auth.register.passwordStrength${passwordStrength}`) }}</strong>
+        {{ $t('settings.security.change-password.passwordSecurity') }}:
+        <strong>{{ $t(`settings.security.change-password.passwordStrength${passwordStrength}`) }}</strong>
       </span>
       <span v-else>&nbsp;</span>
     </p>

webapp/locales/de.json

@@ -49,7 +49,14 @@
         "label-new-password-confirm": "Bestätige Dein neues Passwort",
         "message-old-password-required": "Gebe dein altes Passwort ein",
         "message-new-password-required": "Gebe ein neues Passwort ein",
-        "message-new-password-confirm-required": "Bestätige dein neues Passwort"
+        "message-new-password-confirm-required": "Bestätige dein neues Passwort",
+        "message-new-password-missmatch": "Gebe das gleiche Passwort nochmals ein",
+        "passwordSecurity": "Passwortsicherheit",
+        "passwordStrength0": "Sehr unsicheres Passwort",
+        "passwordStrength1": "Unsicheres Passwort",
+        "passwordStrength2": "Mittelmäßiges Passwort",
+        "passwordStrength3": "Sicheres Passwort",
+        "passwordStrength4": "Sehr sicheres Passwort"
       }
     },
     "invites": {

webapp/locales/en.json

@@ -49,7 +49,14 @@
         "label-new-password-confirm": "Confirm new password",
         "message-old-password-required": "Enter your old password",
         "message-new-password-required": "Enter a new password",
-        "message-new-password-confirm-required": "Confirm your new password"
+        "message-new-password-confirm-required": "Confirm your new password",
+        "message-new-password-missmatch": "Type the same password again",
+        "passwordSecurity": "Password security",
+        "passwordStrength0": "Very insecure password",
+        "passwordStrength1": "Insecure password",
+        "passwordStrength2": "Mediocre password",
+        "passwordStrength3": "Strong password",
+        "passwordStrength4": "Very strong password"
       }
     },
     "invites": {

webapp/package.json

@@ -1,9 +1,13 @@
 {
   "name": "hc-webapp-next",
   "version": "1.0.0",
-  "description": "Human Connection GraphQL UI Prototype",
-  "author": "Grzegorz Leoniec",
-  "private": true,
+  "description": "Human Connection Frontend",
+  "authors": [
+    "Grzegorz Leoniec (appinteractive)",
+    "ulfgebhardt"
+  ],
+  "author": "",
+  "private": false,
   "scripts": {
     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
     "dev:styleguide": "cross-env STYLEGUIDE_DEV=true yarn dev",
@@ -32,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@human-connection/styleguide": "0.5.16",
+    "@human-connection/styleguide": "0.5.17",
     "@nuxtjs/apollo": "4.0.0-rc4",
     "@nuxtjs/axios": "~5.4.1",
     "@nuxtjs/dotenv": "~1.3.0",

webapp/yarn.lock

@@ -763,10 +763,10 @@
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
-"@human-connection/styleguide@0.5.16":
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.16.tgz#442e89280b1a3c51c3ed5904d90b4eced957a40b"
-  integrity sha512-pER3I1BABX9rC25EUiDPSDNNF40dIQBVPBbbgLHzGBURv43LUSoX/5GHzIpy7a6qnX0LDOop3v7CPF1IfqCt+Q==
+"@human-connection/styleguide@0.5.17":
+  version "0.5.17"
+  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.17.tgz#99816579616c8d5be6c66ee86c39cb6c4e694878"
+  integrity sha512-Qlo29eOi97lHls40Ms1hbGC29Aoz/W6BLoX/no5TQgHlP4qm+OK7Ra75g0sbj3a2x1Q4mZthUDWcqtjTYf6brw==
   dependencies:
     vue "^2.6.6"