1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-23 07:16:30 +00:00
homebox/frontend/components/global/PasswordScore.vue
Hayden 2e82398e5c
chore: cleanup ()
* implement password score UI and functions

* update strings tests to use `test`instead of `it`

* update typing

* refactor login/register UI+Logic

* fix width on switches to properly display

* fetch and store self in store

* (WIP) unify card styles

* update labels page

* bump nuxt

* use form area

* use text area for description

* unify confirm API

* unify UI around pages

* change header background height
2022-09-25 14:33:13 -08:00

40 lines
821 B
Vue

<template>
<div class="py-4">
<p class="text-sm">Password Strength: {{ message }}</p>
<progress
class="progress w-full progress-bar"
:value="score"
max="100"
:class="{
'progress-success': score > 50,
'progress-warning': score > 25 && score < 50,
'progress-error': score < 25,
}"
/>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
password: {
type: String,
required: true,
},
valid: {
type: Boolean,
required: false,
},
});
const emits = defineEmits(["update:valid"]);
const { password } = toRefs(props);
const { score, message, isValid } = usePasswordScore(password);
watchEffect(() => {
emits("update:valid", isValid.value);
});
</script>
<style scoped></style>