- add password strength meter for creating or editing user passwords

- add public opensearch api host

resources/js/Pages/Auth/AccountInfo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 // import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
+import { ref } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 // import { ref } from 'vue';
 // import { reactive } from 'vue';
@@ -24,7 +25,7 @@ import NotificationBar from '@/Components/NotificationBar.vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
-// import { Inertia } from '@inertiajs/inertia';
+import passwordMeter from '@/Components/SimplePasswordMeter/password-meter.vue';
 import { computed, Ref } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import FormValidationErrors from '@/Components/FormValidationErrors.vue';
@@ -35,6 +36,17 @@ import PersonalTotpSettings from '@/Components/PersonalTotpSettings.vue';
 
 const emit = defineEmits(['confirm', 'update:confirmation'])
 
+const enabled  = ref(false); 
+const handleScore = (score: number) => {
+    if (score == 4){
+        enabled.value = true;
+    } else {
+        enabled.value = false;
+    }
+//   strengthLabel.value = scoreLabel;
+//   score.value = scoreValue;
+};
+
 defineProps({
     // user will be returned from controller action
     user: {
@@ -183,6 +195,8 @@ const flash: Ref<any> = computed(() => {
                             </div>
                         </FormControl>
                     </FormField>
+                    <password-meter :password="passwordForm.new_password" @score="handleScore" />
+
 
                     <FormField label="Confirm password" help="Required. New password one more time"
                         :class="{ 'text-red-400': passwordForm.errors.confirm_password }">
@@ -205,7 +219,7 @@ const flash: Ref<any> = computed(() => {
 
                     <template #footer>
                         <BaseButtons>
-                            <BaseButton type="submit" color="info" label="Change password" />
+                            <BaseButton type="submit" color="info" label="Change password" :disabled="passwordForm.processing == true || enabled == false" />
                         </BaseButtons>
                     </template>
                 </CardBox>