refactor: use vuetify form controls

frontend/src/features/organizations/views/OrganizationSettingsView.vue

@@ -207,18 +207,20 @@
                             size="lg"
                         />
                     </button>
-                    <form
+                    <v-form
                         v-if="organization && isEditingName"
                         class="title-edit-form"
                         @submit.prevent="submitProfile"
                     >
-                        <input
+                        <v-text-field
                             v-model="profileForm.name"
-                            type="text"
-                            maxlength="256"
-                            autocomplete="organization"
                             :aria-label="t('organizationSettings.fields.name')"
-                        >
+                            autocomplete="organization"
+                            density="compact"
+                            hide-details
+                            maxlength="256"
+                            variant="outlined"
+                        />
                         <button
                             class="icon-action"
                             type="submit"
@@ -238,7 +240,7 @@
                         >
                             <v-icon :icon="mdiClose" />
                         </button>
-                    </form>
+                    </v-form>
                     <div
                         v-else
                         class="title-row"
@@ -335,31 +337,26 @@
                         v-if="activeSection.key === 'members'"
                         class="table-list"
                     >
-                        <form
+                        <v-form
                             class="settings-form invite-form"
                             @submit.prevent="submitMember"
                         >
-                            <label>
-                                <span>{{ t('organizationSettings.fields.memberEmail') }}</span>
-                                <input
-                                    v-model="memberForm.email"
-                                    type="email"
-                                    maxlength="256"
-                                    autocomplete="email"
-                                >
-                            </label>
-                            <label>
-                                <span>{{ t('organizationSettings.fields.memberRole') }}</span>
-                                <select v-model="memberForm.role">
-                                    <option
-                                        v-for="role in memberRoleOptions"
-                                        :key="role"
-                                        :value="role"
-                                    >
-                                        {{ t(`organizationSettings.roles.${role}`, role) }}
-                                    </option>
-                                </select>
-                            </label>
+                            <v-text-field
+                                v-model="memberForm.email"
+                                :label="t('organizationSettings.fields.memberEmail')"
+                                autocomplete="email"
+                                maxlength="256"
+                                type="email"
+                                variant="outlined"
+                                hide-details
+                            />
+                            <v-select
+                                v-model="memberForm.role"
+                                :items="memberRoleOptions.map(role => ({ title: t(`organizationSettings.roles.${role}`, role), value: role }))"
+                                :label="t('organizationSettings.fields.memberRole')"
+                                variant="outlined"
+                                hide-details
+                            />
                             <div class="form-actions">
                                 <button
                                     class="primary-action"
@@ -369,7 +366,7 @@
                                     {{ organizationStore.isAddingMember ? t('organizationSettings.addingMember') : t('organizationSettings.addMember') }}
                                 </button>
                             </div>
-                        </form>
+                        </v-form>
                         <div
                             v-for="member in organization.members"
                             :key="member.userId"