- add password strength meter for creating or editing user passwords

- add public opensearch api host

resources/js/Components/SimplePasswordMeter/password-meter.vue

@@ -0,0 +1,95 @@
+<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>