feat(front): autocomplete for different input fields

front/src/components/auth/LoginForm.vue

@@ -105,6 +105,7 @@ const submit = async () => {
         <Input
           id="username-field"
           ref="username"
+          autocomplete="username"
           v-model="credentials.username"
           required
           name="username"
@@ -123,6 +124,8 @@ const submit = async () => {
           </template>
         </Input>
         <Input password
+          name="password-field"
+          autocomplete="current-password"
           v-model="credentials.password"
           field-id="password-field"
           required

front/src/components/auth/SignupForm.vue

@@ -158,6 +158,7 @@ fetchInstanceSettings()
       <Input
         :label="t('components.auth.SignupForm.label.email')"
         id="email-field"
+        autocomplete="email"
         ref="email"
         v-model="payload.email"
         name="email"
@@ -166,6 +167,7 @@ fetchInstanceSettings()
         :placeholder="labels.emailPlaceholder"
       />
       <Input password
+        autocomplete="new-password"
         :label="t('components.auth.SignupForm.label.password')"
         v-model="payload.password1"
         field-id="password-field"

front/src/ui/components/Sidebar.vue

@@ -95,15 +95,17 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
       </Layout>
     </Layout>
     <Layout no-gap stack :class="[$style['menu-links'], isCollapsed && 'hide-on-mobile']">
-      <div :class="$style.search">
+      <form :class="$style.search">
         <Input
+          name="search"
           v-model="searchQuery"
           raised
+          autocomplete="search"
           type="search"
           icon="bi-search"
           :placeholder="t('components.audio.SearchBar.placeholder.search')"
         />
-      </div>
+      </form>
 
 <!-- Sign up, Log in -->
       <div style="display:contents;" v-if="!store.state.auth.authenticated">