2019/kw15/change password strength

[Tirokk]

Authored by ulfgebhardt
May 6, 2019
Merged May 10, 2019

---

Pullrequest

Issues

• requires DS-Form @input not emmitted Human-Connection/Nitro-Styleguide#46
• fixes 🚀 [Feature] UserSettings - Security - Password Strength Human-Connection/Human-Connection#410
• fixes [User Profile >> Settings >> Security] Change Password Cross-validations Human-Connection/Human-Connection#247

Todo

• There is console errors since i updated the styleguide on unrelated components (avatar) - those components are also displayed in a strange way. Please someone find out whats the Problem there
• Is this the fault of this PR? Please confirm on current staging

[Tirokk]

Authored by ulfgebhardt
May 8, 2019

---

The strange error messages occur on master aswell - therefor not the fault of this pr / styleguide-update

[Tirokk]

Authored by mattwr18
May 9, 2019

---

Outdated (history rewrite) - original diff

---

@@ -0,0 +1,139 @@
+<template>
+  <div class="field">
+    <div class="password-strength-meter">
+      <div
+        class="password-strength-meter-inner"
+        :class="strengthClass"
+      />
+    </div>
+    <p class="help">
+      <span
+        v-if="pass"
+        :class="{ insecure: (passwordStrength < 3) }"
+      >
+        {{ $t('settings.security.change-password.passwordSecurity') }}:
+        <strong>{{ $t(`settings.security.change-password.passwordStrength${passwordStrength}`) }}</strong>
+      </span>
+      <span v-else>&nbsp;</span>
+    </p>
+  </div>
+</template>
+
+<script>
+import zxcvbn from 'zxcvbn'
+import { isEmpty } from 'lodash'
+
+export default {
+  name: 'PasswordMeter',
+  props: {
+    password: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      lastScore: 0,
+      pass: this.password || null
+    }
+  },
+  computed: {
+    strengthClass() {
+      return `strength-${this.passwordStrength}`
+    }
+  },
+  watch: {
+    /**
+     * passwordStrength is the score calculated by zxcvbn
+     * @return {Number} Password Strength Score
+     */
+    passwordStrength() {

I moved this @ulfgebhardt because it was failing the linting
please see my commit message with a link to the SO post where I found the suggestion to move it to watch

[Tirokk]

Authored by ulfgebhardt
May 9, 2019

---

I Agree 100% - thanks for fixing this. As you can see i am still new to vue <3

[Tirokk]

Authored by ulfgebhardt
May 9, 2019

---

this is great @ulfgebhardt
do you think there is any place for cypress tests?
I'm unsure how I feel about it

thanks @mattwr18 for doing this - much appreciated!
If you remove the same-password-test and its still green feel free to merge it. Else I will make sure to have more coverage.

[Tirokk]

Authored by ulfgebhardt
May 9, 2019

---

@mattwr18 I removed the test case - but there is still problems with the UI. visible as console errors in the tests

It might be due to my updating the styleguide library - but i did not change anything regarding the component ds-avatar

[Tirokk]

Authored by mattwr18
May 9, 2019

---

@ulfgebhardt, I have added an issue for this, as it is not part of the scope of this PR
and have found(?) the source of the issue and put in a PR
Human-Connection/Human-Connection#587

[Tirokk]

Authored by codecov[bot]
May 10, 2019

---

Codecov Report

Merging #551 into master will increase coverage by 1.2%.
The diff coverage is 89.66%.

@@            Coverage Diff            @@
##           master     #551     +/-   ##
=========================================
+ Coverage   17.57%   18.77%   +1.2%     
=========================================
  Files         154      156      +2     
  Lines        2157     2200     +43     
  Branches       98      107      +9     
=========================================
+ Hits          379      413     +34     
- Misses       1756     1764      +8     
- Partials       22       23      +1

Impacted Files	Coverage Δ
webapp/pages/settings/security.vue	0% <0%> (ø)	⬆️
webapp/components/Password/Strength.vue	90% <90%> (ø)
webapp/components/Password/Change.vue	94.44% <94.44%> (ø)
webapp/components/Empty.vue	100% <0%> (ø)	⬆️
webapp/components/Badges.vue	100% <0%> (ø)	⬆️
webapp/pages/logout.vue	0% <0%> (ø)	⬆️
webapp/components/Image/index.vue	100% <0%> (ø)
webapp/pages/settings/my-social-media.vue	67.65% <0%> (+7.65%)	⬆️

[Mogge]

great job @ulfgebhardt!!
really excited about this feature!!! I love it when I see that someone has implemented a password strength feature!!

And awesome you were able to learn more about vue, I too learned having put in a commit!