feat: prevent dialogs from blocking password managers

closes #38

Author: simonwep

src/app/components/base/dialog/Dialog.vue

@@ -41,7 +41,7 @@ watch(
   [toRef(props, 'open'), dialog],
   () => {
     if (props.open) {
-      dialog.value?.showModal();
+      dialog.value?.show();
       requestAnimationFrame(() => (visible.value = true));
     } else {
       visible.value = false;

src/app/components/base/form/TextField.vue

@@ -6,6 +6,7 @@
         :id="inputId"
         ref="input"
         v-model="modelValue"
+        :name="name"
         :minlength="minLength"
         :maxlength="maxLength"
         :required="required"
@@ -43,6 +44,7 @@ const modelValue = defineModel<string>();
 withDefaults(
   defineProps<{
     type?: 'text' | 'password';
+    name?: string;
     minLength?: number;
     maxLength?: number;
     required?: boolean;

src/app/pages/navigation/auth/LoginDialog.vue

@@ -1,8 +1,8 @@
 <template>
   <Dialog :open="open" :title="t('navigation.auth.welcomeBack')" @close="emit('close')">
     <Form :submit-label="t('navigation.auth.signIn')" @submit="signIn">
-      <TextField v-model="username" required :label="t('navigation.auth.username')" type="text" />
-      <TextField v-model="password" required :label="t('navigation.auth.password')" type="password" />
+      <TextField v-model="username" required :label="t('navigation.auth.username')" type="text" name="username" />
+      <TextField v-model="password" required :label="t('navigation.auth.password')" type="password" name="password" />
       <Alert v-if="state === 'errored'" :text="t('navigation.auth.loginFailed')" type="error" />
     </Form>
   </Dialog>