96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { checkStrength } from './logic/index';
|
||
|
|
|
||
|
|
// Define props
|
||
|
|
const props = defineProps<{
|
||
|
|
password: string;
|
||
|
|
}>();
|
||
|
|
|
||
|
|
// Define emits
|
||
|
|
// const emit = defineEmits<{
|
||
|
|
// (event: 'score', payload: { score: number; strength: string }): void;
|
||
|
|
// }>();
|
||
|
|
|
||
|
|
const emit = defineEmits(['score']);
|
||
|
|
|
||
|
|
// const score = (event) => {
|
||
|
|
// emit('score', event, payload: { score; strength: string });
|
||
|
|
// };
|
||
|
|
|
||
|
|
// Computed property for password class
|
||
|
|
const passwordClass = computed(() => {
|
||
|
|
if (!props.password) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
// const scoreLabel = checkStrength(props.password);
|
||
|
|
// const score = scorePassword(props.password);
|
||
|
|
const { score, scoreLabel } = checkStrength(props.password);
|
||
|
|
emit('score', score);
|
||
|
|
return {
|
||
|
|
[scoreLabel]: true,
|
||
|
|
// scored: true,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
// export default {
|
||
|
|
// name: 'PasswordMeter',
|
||
|
|
// props: {
|
||
|
|
// password: String,
|
||
|
|
// },
|
||
|
|
// emits: ['score'],
|
||
|
|
// computed: {
|
||
|
|
// passwordClass(): object | null {
|
||
|
|
// if (!this.password) {
|
||
|
|
// return null;
|
||
|
|
// }
|
||
|
|
// const strength = checkStrength(this.password);
|
||
|
|
// const score = scorePassword(this.password);
|
||
|
|
// this.$emit('score', { score, strength });
|
||
|
|
// return {
|
||
|
|
// [strength]: true,
|
||
|
|
// scored: true,
|
||
|
|
// };
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
// };
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="po-password-strength-bar" :class="passwordClass" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="css" scoped>
|
||
|
|
.po-password-strength-bar {
|
||
|
|
border-radius: 2px;
|
||
|
|
transition: all 0.2s linear;
|
||
|
|
height: 10px;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.po-password-strength-bar.risky {
|
||
|
|
background-color: #f95e68;
|
||
|
|
width: 10%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.po-password-strength-bar.guessable {
|
||
|
|
background-color: #fb964d;
|
||
|
|
width: 32.5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.po-password-strength-bar.weak {
|
||
|
|
background-color: #fdd244;
|
||
|
|
width: 55%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.po-password-strength-bar.safe {
|
||
|
|
background-color: #b0dc53;
|
||
|
|
width: 77.5%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.po-password-strength-bar.secure {
|
||
|
|
background-color: #35cc62;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|