password-strength: extract from form-group

apps/central/src/components/account/claim.vue

@@ -16,9 +16,8 @@ except according to the terms contained in the LICENSE file.
       <!-- Chrome displays a message in the console indicating that there should
       be a username input (even if it is hidden). However, we do not know the
       user's email address on this page. -->
-      <form-group ref="password" v-model="password" type="password"
-        :placeholder="$t('field.newPassword')" required
-        autocomplete="new-password"/>
+      <new-password-form-group ref="password" v-model="password"
+        :placeholder="$t('field.newPassword')" strengthMeter/>
       <button type="submit" class="btn btn-primary"
         :aria-disabled="awaitingResponse">
         {{ $t('action.set') }} <spinner :state="awaitingResponse"/>
@@ -29,14 +28,15 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import FormGroup from '../form-group.vue';
+import NewPasswordFormGroup from '../new-password-form-group.vue';
 import Spinner from '../spinner.vue';
 
 import useRequest from '../../composables/request';
 import { noop } from '../../util/util';
 
 export default {
   name: 'AccountClaim',
-  components: { FormGroup, Spinner },
+  components: { FormGroup, NewPasswordFormGroup, Spinner },
   inject: ['alert'],
   setup() {
     const { request, awaitingResponse } = useRequest();
@@ -52,11 +52,6 @@ export default {
   },
   methods: {
     submit() {
-      if (this.password.length < 10) {
-        this.alert.danger(this.$t('alert.passwordTooShort'));
-        return;
-      }
-
       const headers = {};
       const { token } = this.$route.query;
       if (typeof token === 'string') headers.Authorization = `Bearer ${token}`;

apps/central/src/components/form-group.vue

@@ -15,8 +15,6 @@ except according to the terms contained in the LICENSE file.
     <input ref="input" v-model="modelValue" v-bind="$attrs" class="form-control"
       :placeholder="requiredLabel(placeholder, required)" :required="required"
       v-tooltip.aria-describedby="tooltip" :autocomplete="autocomplete">
-    <password-strength v-if="autocomplete === 'new-password'"
-      :password="modelValue"/>
     <span class="form-label">{{ requiredLabel(placeholder, required) }}</span>
     <slot name="after"></slot>
   </label>
@@ -25,8 +23,6 @@ except according to the terms contained in the LICENSE file.
 <script setup>
 import { computed, ref } from 'vue';
 
-import PasswordStrength from './password-strength.vue';
-
 import { requiredLabel } from '../util/dom';
 
 defineOptions({
@@ -48,20 +44,10 @@ const props = defineProps({
 });
 
 const htmlClass = computed(() => ({
-  'new-password': props.autocomplete === 'new-password',
   'has-error': props.hasError
 }));
 
 const input = ref(null);
 const focus = () => { input.value.focus(); };
 defineExpose({ focus });
 </script>
-
-<style lang="scss">
-.form-group {
-  // Hide a password strength meter for password confirmation.
-  &.new-password ~ .form-group.new-password .password-strength {
-    display: none;
-  }
-}
-</style>

apps/central/src/components/new-password-form-group.vue

@@ -0,0 +1,52 @@
+<template>
+  <form-group v-model="model" type="password" required
+    :has-error="hasError || tooShort" autocomplete="new-password">
+    <template #after>
+      <password-strength v-if="strengthMeter" :score="passwordStrength"/>
+    </template>
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../../form-group.vue';
+import PasswordStrength from '../../password-strength.vue';
+
+export default {
+  name: 'NewPaswordFormGroup',
+  components: { FormGroup, PasswordStrength },
+  inject: ['alert', 'config'],
+  setup() {
+  },
+  data() {
+    return {
+      tooShort: false,
+    };
+  },
+  methods: {
+    validate() {
+      // TODO why not trigger this while typing?
+      this.tooShort = false;
+      this.mismatch = false;
+
+      this.passwordStrength = (() => {
+        const { length } = this.model;
+        if (length === 0) return 0;
+        if (length < 8) return 1;
+        if (length < 10) return 2;
+        if (length < 12) return 3;
+        if (length < 14) return 4;
+        return 5;
+      })();
+
+      if (this.model.length < 10) {
+        // TODO allow for passphraseTooShort as well (or just use a more generic message, like "too short")
+        this.alert.danger(this.$t('alert.passwordTooShort'));
+        this.tooShort = true;
+        return false;
+      }
+
+      return true;
+    },
+  }
+};
+</script>

apps/central/src/components/password-strength.vue

@@ -23,21 +23,11 @@ https://github.com/apertureless/vue-password-strength-meter -->
 import { computed } from 'vue';
 
 const props = defineProps({
-  password: {
-    type: String,
+  score: {
+    type: Number,
     required: true
   }
 });
-
-const score = computed(() => {
-  const { length } = props.password;
-  if (length === 0) return 0;
-  if (length < 8) return 1;
-  if (length < 10) return 2;
-  if (length < 12) return 3;
-  if (length < 14) return 4;
-  return 5;
-});
 </script>
 
 <style lang="scss">

apps/central/src/components/project/enable-encryption.vue

@@ -94,9 +94,8 @@ except according to the terms contained in the LICENSE file.
           </i18n-t>
         </div>
         <form @submit.prevent="submit">
-          <form-group ref="passphrase" v-model="passphrase"
-            :placeholder="$t('field.passphrase')" required
-            autocomplete="new-password"/>
+          <new-password-form-group ref="passphrase" v-model="passphrase"
+            :placeholder="$t('field.passphrase')" strengthMeter/>
           <form-group v-model="hint" :placeholder="$t('field.hint')"
             autocomplete="off"/>
           <div class="modal-actions">
@@ -185,11 +184,6 @@ export default {
       });
     },
     submit() {
-      if (this.passphrase.length < 10) {
-        this.redAlert.show(this.$t('alert.passphraseTooShort'));
-        return;
-      }
-
       const data = { passphrase: this.passphrase };
       if (this.hint !== '') data.hint = this.hint;
       this.request({

apps/central/src/components/user/edit/password.vue

@@ -22,12 +22,10 @@ except according to the terms contained in the LICENSE file.
         <form-group id="user-edit-password-old-password" v-model="oldPassword"
           type="password" :placeholder="$t('field.oldPassword')" required
           autocomplete="current-password"/>
-        <form-group id="user-edit-password-new-password" v-model="newPassword"
-          type="password" :placeholder="$t('field.newPassword')" required
-          :has-error="tooShort || mismatch" autocomplete="new-password"/>
-        <form-group id="user-edit-password-confirm" v-model="confirm"
-          type="password" :placeholder="$t('field.passwordConfirm')" required
-          :has-error="mismatch" autocomplete="new-password"/>
+        <new-password-form-group id="user-edit-password-new-password" v-model="newPassword"
+          type="password" :placeholder="$t('field.newPassword')" strengthMeter/>
+        <new-password-form-group id="user-edit-password-confirm" v-model="confirm"
+          type="password" :placeholder="$t('field.passwordConfirm')" :has-error="mismatch"/>
         <button type="submit" class="btn btn-primary"
           :aria-disabled="awaitingResponse">
           {{ $t('action.change') }} <spinner :state="awaitingResponse"/>
@@ -40,6 +38,7 @@ except according to the terms contained in the LICENSE file.
 
 <script>
 import FormGroup from '../../form-group.vue';
+import PasswordStrength from '../../password-strength.vue';
 import Spinner from '../../spinner.vue';
 
 import useRequest from '../../../composables/request';
@@ -49,7 +48,7 @@ import { useRequestData } from '../../../request-data';
 
 export default {
   name: 'UserEditPassword',
-  components: { FormGroup, Spinner },
+  components: { FormGroup, PasswordStrength, Spinner },
   inject: ['alert', 'config'],
   setup() {
     const { currentUser, user } = useRequestData();
@@ -62,19 +61,15 @@ export default {
       newPassword: '',
       tooShort: false,
       confirm: '',
-      mismatch: false
+      mismatch: false,
+      passwordStrength: 0,
     };
   },
   methods: {
     validate() {
-      this.tooShort = false;
       this.mismatch = false;
 
-      if (this.newPassword.length < 10) {
-        this.alert.danger(this.$t('alert.passwordTooShort'));
-        this.tooShort = true;
-        return false;
-      }
+      // TODO check newPassword field
 
       if (this.confirm !== this.newPassword) {
         this.alert.danger(this.$t('alert.mismatch'));