security: enforce min length for user password (#1555)

* fix typing on auth context

* extract user password strength meter

* fix broken useToggle method

* extend form to accept arguments for validators

* enforce password length on update

* fix user password change form

frontend/components/Domain/User/UserPasswordStrength.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="d-flex justify-center pb-6 mt-n1">
+    <div style="flex-basis: 500px">
+      <strong> {{ $t("user.password-strength", { strength: pwStrength.strength.value }) }}</strong>
+      <v-progress-linear
+        :value="pwStrength.score.value"
+        class="rounded-lg"
+        :color="pwStrength.color.value"
+        height="15"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRef } from "@nuxtjs/composition-api";
+import { usePasswordStrength } from "~/composables/use-passwords";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props) {
+    const asRef = toRef(props, "value");
+
+    const pwStrength = usePasswordStrength(asRef);
+
+    return {
+      pwStrength,
+    };
+  },
+});
+</script>
+
+<style scoped></style>

frontend/components/global/AutoForm.vue

@@ -187,9 +187,16 @@ export default defineComponent({
 
       const list = [] as ((v: string) => boolean | string)[];
       keys.forEach((key) => {
-        if (key in validators) {
-          // @ts-ignore TODO: fix this
-          list.push(validators[key]);
+        const split = key.split(":");
+        const validatorKey = split[0] as ValidatorKey;
+        if (validatorKey in validators) {
+          if (split.length === 1) {
+            // @ts-ignore- validators[validatorKey] is a function
+            list.push(validators[validatorKey]);
+          } else {
+            // @ts-ignore - validators[validatorKey] is a function
+            list.push(validators[validatorKey](split[1]));
+          }
         }
       });
       return list;

frontend/components/global/ToggleState.vue

@@ -6,8 +6,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch } from "@nuxtjs/composition-api";
-import { useToggle } from "@vueuse/core";
+import { defineComponent, ref, watch } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   props: {
@@ -21,7 +20,11 @@ export default defineComponent({
     },
   },
   setup(_, context) {
-    const [state, toggle] = useToggle();
+    const state = ref(false);
+
+    const toggle = () => {
+      state.value = !state.value;
+    };
 
     watch(state, () => {
       context.emit("input", state);