forked from mirrors/homebox
2e82398e5c
* 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
40 lines
821 B
Vue
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>
|