mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
54c4f19a5c
* 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
39 lines
843 B
Vue
39 lines
843 B
Vue
<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>
|