mirror of
https://github.com/mealie-recipes/mealie.git
synced 2024-12-26 05:51:21 -08:00
40 lines
896 B
Vue
40 lines
896 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, useContext } 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 { i18n } = useContext();
|
|
|
|
const pwStrength = usePasswordStrength(asRef, i18n);
|
|
|
|
return {
|
|
pwStrength,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|