feat: Integrate official drive_provider, update user profile features & UI improvements

- adonisrc.ts: Load official drive_provider and unload custom driver_provider.
- packages.json: Add @headlessui/vue dependency for tab components.
- AvatarController.ts: Rewrite avatar generation logic to always return the same avatar per user.
- auth/UserController.ts: Add profile and profileUpdate methods to support user profile editing.
- Submitter/datasetController.ts & app/models/file.ts: Adapt code to use the official drive_provider.
- app/models/user.ts: Introduce “isAdmin” getter.
- config/drive.ts: Create new configuration for the official drive_provider.
- providers/vinejs_provider.ts: Adapt allowedExtensions control to use provided options or database enabled extensions.
- resource/js/app.ts: Load default Head and Link components.
- resources/js/menu.ts: Add settings-profile.edit menu point.
- resources/js/Components/action-message.vue: Add new component for improved user feedback after form submissions.
- New avatar-input.vue component: Enable profile picture selection.
- Components/CardBox.vue: Alter layout to optionally show HeaderIcon in title bar.
- FormControl.vue: Define a readonly prop for textareas.
- Improve overall UI with updates to NavBar.vue, UserAvatar.vue, UserAvatarCurrentUser.vue, and add v-model support to password-meter.vue.
- Remove profile editing logic from AccountInfo.vue and introduce new profile components (show.vue, update-password-form.vue, update-profile-information.vue).
- app.edge: Modify page (add @inertiaHead tag) for better meta management.
- routes.ts: Add new routes for editing user profiles.
- General npm updates.

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import { checkStrength } from './logic/index';
 import { mdiFormTextboxPassword } from '@mdi/js';
 import FormField from '@/Components/FormField.vue';
@@ -7,17 +7,25 @@ import FormControl from '@/Components/FormControl.vue';
 
 // Define props
 const props = defineProps<{
-    password: string;
+    modelValue: string;
     errors: Partial<Record<"new_password" | "old_password" | "confirm_password", string>>;
 }>();
 
-const emit = defineEmits(['update:password', 'score']);
+const emit = defineEmits(['update:modelValue', 'score']);
 
-// A local reactive variable for password input
-const localPassword = ref(props.password);
-// Watch localPassword and emit changes back to the parent
-watch(localPassword, (newValue) => {
-    emit('update:password', newValue);
+// // A local reactive variable for password input
+// const localPassword = ref(props.modelValue);
+// // Watch localPassword and emit changes back to the parent
+// watch(localPassword, (newValue) => {
+//     emit('update:modelValue', newValue);
+// });
+const localPassword = computed({
+    get: () => props.modelValue,
+    set: (value) => {
+        emit('update:modelValue', value);
+        // const { score } = checkStrength(localPassword.value);
+        // emit('score', score);
+    },
 });
 
 type PasswordMetrics = {
@@ -53,7 +61,7 @@ const passwordMetrics = computed<PasswordMetrics>(() => {
 
 <template>
     <!-- Password input Form -->
-    <FormField label="New password" help="Required. New password" :class="{ 'text-red-400': errors.new_password }">
+    <FormField label="New password" help="Required. New password" :class="{'text-red-400': errors.new_password }">
         <FormControl v-model="localPassword" :icon="mdiFormTextboxPassword" name="new_password" type="password" required
             :error="errors.new_password">
             <!-- Secure Icon -->
@@ -72,6 +80,10 @@ const passwordMetrics = computed<PasswordMetrics>(() => {
                 {{ errors.new_password }}
             </div>
         </FormControl>
+        <!-- Score Display -->
+    <div class="text-gray-700 text-sm">
+        {{ passwordMetrics.score }} / 6 points max
+    </div>
     </FormField>
 
     <!-- Password Strength Bar -->
@@ -93,9 +105,9 @@ const passwordMetrics = computed<PasswordMetrics>(() => {
         </ul>
     </div>
     <!-- Score Display -->
-    <div class="text-gray-700 text-sm">
+    <!-- <div class="text-gray-700 text-sm">
         {{ passwordMetrics.score }} / 6 points max
-    </div>
+    </div> -->
 </template>
 
 <style lang="css" scoped>