tethys.backend/resources/js/Components/SimplePasswordMeter/password-meter.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>