Fix #686: Added name attributes on all inputs to improve UX, especially with password managers

changes/changelog.d/686.enhancement

@@ -0,0 +1 @@
+Added name attributes on all inputs to improve UX, especially with password managers (#686)

front/src/components/admin/SettingsGroup.vue

@@ -19,24 +19,28 @@
       </template>
       <input
         :id="setting.identifier"
+        :name="setting.identifier"
         v-if="setting.field.widget.class === 'PasswordInput'"
         type="password"
         class="ui input"
         v-model="values[setting.identifier]" />
       <input
         :id="setting.identifier"
+        :name="setting.identifier"
         v-if="setting.field.widget.class === 'TextInput'"
         type="text"
         class="ui input"
         v-model="values[setting.identifier]" />
       <input
         :id="setting.identifier"
+        :name="setting.identifier"
         v-if="setting.field.class === 'IntegerField'"
         type="number"
         class="ui input"
         v-model.number="values[setting.identifier]" />
       <textarea
         :id="setting.identifier"
+        :name="setting.identifier"
         v-else-if="setting.field.widget.class === 'Textarea'"
         type="text"
         class="ui input"
@@ -120,7 +124,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 .ui.checkbox p {
   margin-top: 1rem;
 }

front/src/components/audio/SearchBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ui fluid category search">
     <slot></slot><div class="ui icon input">
-      <input class="prompt" :placeholder="labels.placeholder" type="text">
+      <input class="prompt" name="search" :placeholder="labels.placeholder" type="text">
       <i class="search icon"></i>
     </div>
     <div class="results"></div>
@@ -110,5 +110,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
 </style>

front/src/components/auth/Login.vue

@@ -22,6 +22,7 @@
             ref="username"
             tabindex="1"
             required
+            name="username"
             type="text"
             autofocus
             :placeholder="labels.usernamePlaceholder"

front/src/components/auth/Signup.vue

@@ -20,6 +20,7 @@
             <label><translate>Username</translate></label>
             <input
             ref="username"
+            name="username"
             required
             type="text"
             autofocus
@@ -30,6 +31,7 @@
             <label><translate>Email</translate></label>
             <input
             ref="email"
+            name="email"
             required
             type="email"
             :placeholder="labels.emailPlaceholder"
@@ -44,6 +46,7 @@
             <input
             required
             type="text"
+            name="invitation"
             :placeholder="labels.placeholder"
             v-model="invitation">
           </div>

front/src/components/forms/PasswordInput.vue

@@ -2,6 +2,7 @@
   <div class="ui action input">
     <input
     required
+    name="password"
     :tabindex="index"
     :type="passwordInputType"
     @input="$emit('input', $event.target.value)"

front/src/components/library/Artists.vue

@@ -10,7 +10,7 @@
             <label>
               <translate>Search</translate>
             </label>
-            <input type="text" v-model="query" :placeholder="labels.searchPlaceholder"/>
+            <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
           </div>
           <div class="field">
             <label><translate>Ordering</translate></label>

front/src/components/library/FileUpload.vue

@@ -51,7 +51,7 @@
           <div class="ui four wide field">
             <label><translate>Import reference</translate></label>
             <p><translate>This reference will be used to group imported files together.</translate></p>
-            <input type="text" v-model="importReference" />
+            <input name="import-ref" type="text" v-model="importReference" />
           </div>
         </div>
 

front/src/components/library/Radios.vue

@@ -28,7 +28,7 @@
         <div class="fields">
           <div class="field">
             <label><translate>Search</translate></label>
-            <input type="text" v-model="query" :placeholder="labels.searchPlaceholder"/>
+            <input name="search" type="text" v-model="query" :placeholder="labels.searchPlaceholder"/>
           </div>
           <div class="field">
             <label><translate>Ordering</translate></label>

front/src/components/library/radios/Builder.vue

@@ -20,7 +20,7 @@
           <div class="">
             <div class="field">
               <label for="name"><translate>Radio name</translate></label>
-              <input id="name" type="text" v-model="radioName" :placeholder="labels.placeholder.name" />
+              <input id="name" name="name" type="text" v-model="radioName" :placeholder="labels.placeholder.name" />
             </div>
             <div class="field">
               <label for="description"><translate>Description</translate></label>

front/src/components/manage/library/FilesTable.vue

@@ -4,7 +4,7 @@
       <div class="fields">
         <div class="ui field">
           <label><translate>Search</translate></label>
-          <input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
+          <input name="search" type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
         </div>
         <div class="field">
           <label><translate>Ordering</translate></label>

front/src/components/manage/moderation/AccountsTable.vue

@@ -5,7 +5,7 @@
         <div class="ui six wide field">
           <label><translate>Search</translate></label>
           <form @submit.prevent="search.query = $refs.search.value">
-            <input ref="search" type="text" :value="search.query" :placeholder="labels.searchPlaceholder" />
+            <input name="search" ref="search" type="text" :value="search.query" :placeholder="labels.searchPlaceholder" />
           </form>
         </div>
         <div class="field">

front/src/components/manage/moderation/DomainsTable.vue

@@ -4,7 +4,7 @@
       <div class="fields">
         <div class="ui field">
           <label><translate>Search</translate></label>
-          <input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
+          <input name="search" type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
         </div>
         <div class="field">
           <label><translate>Ordering</translate></label>

front/src/components/manage/users/InvitationForm.vue

@@ -10,7 +10,7 @@
       <div class="inline fields">
         <div class="ui field">
           <label><translate>Invitation code</translate></label>
-          <input type="text" v-model="code" :placeholder="labels.placeholder" />
+          <input name="code" type="text" v-model="code" :placeholder="labels.placeholder" />
         </div>
         <div class="ui field">
           <button :class="['ui', {loading: isLoading}, 'button']" :disabled="isLoading" type="submit">

front/src/components/manage/users/InvitationsTable.vue

@@ -4,7 +4,7 @@
       <div class="fields">
         <div class="ui field">
           <label><translate>Search</translate></label>
-          <input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
+          <input name="search" type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
         </div>
         <div class="field">
           <label><translate>Ordering</translate></label>

front/src/components/manage/users/UsersTable.vue

@@ -4,7 +4,7 @@
       <div class="fields">
         <div class="ui field">
           <label><translate>Search</translate></label>
-          <input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
+          <input name="search" type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
         </div>
         <div class="field">
           <label><translate>Ordering</translate></label>

front/src/components/playlists/Form.vue

@@ -20,7 +20,7 @@
     <div class="three fields">
       <div class="field">
         <label><translate>Playlist name</translate></label>
-        <input v-model="name" required type="text" :placeholder="labels.placeholder" />
+        <input name="name" v-model="name" required type="text" :placeholder="labels.placeholder" />
       </div>
       <div class="field">
         <label><translate>Playlist visibility</translate></label>

front/src/views/admin/moderation/DomainsList.vue

@@ -12,7 +12,7 @@
         <div class="inline fields">
           <div class="field">
             <label for="domain"><translate>Add a domain</translate></label>
-            <input type="text" id="domain" v-model="domainName">
+            <input type="text" name="domain" id="domain" v-model="domainName">
           </div>
           <div class="field">
             <button :class="['ui', {'loading': isCreating}, 'green', 'button']" type="submit" :disabled="isCreating">

front/src/views/auth/EmailConfirm.vue

@@ -12,7 +12,7 @@
           </div>
           <div class="field">
             <label><translate>Confirmation code</translate></label>
-            <input type="text" required v-model="key" />
+            <input name="confirmation-code" type="text" required v-model="key" />
           </div>
           <router-link :to="{path: '/login'}">
             <translate>Return to login</translate>

front/src/views/auth/PasswordReset.vue

@@ -17,6 +17,7 @@
               required
               ref="email"
               type="email"
+              name="email"
               autofocus
               :placeholder="labels.placeholder"
               v-model="email">

front/src/views/content/libraries/FilesTable.vue

@@ -5,7 +5,7 @@
         <div class="ui six wide field">
           <label><translate>Search</translate></label>
           <form @submit.prevent="search.query = $refs.search.value">
-            <input ref="search" type="text" :value="search.query" :placeholder="labels.searchPlaceholder" />
+            <input name="search" ref="search" type="text" :value="search.query" :placeholder="labels.searchPlaceholder" />
           </form>
         </div>
         <div class="field">

front/src/views/content/libraries/Form.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="required field">
       <label><translate>Name</translate></label>
-      <input v-model="currentName" :placeholder="labels.namePlaceholder" required maxlength="100">
+      <input name="name" v-model="currentName" :placeholder="labels.namePlaceholder" required maxlength="100">
     </div>
     <div class="field">
       <label><translate>Description</translate></label>

front/src/views/content/remote/ScanForm.vue

@@ -9,7 +9,7 @@
     <div class="ui field">
       <label><translate>Search a remote library</translate></label>
       <div :class="['ui', 'action', {loading: isLoading}, 'input']">
-        <input v-model="query" :placeholder="labels.placeholder" type="url">
+        <input name="url" v-model="query" :placeholder="labels.placeholder" type="url">
         <button type="submit" class="ui icon button">
           <i class="search icon"></i>
         </button>

front/src/views/playlists/List.vue

@@ -12,7 +12,7 @@
         <div class="fields">
           <div class="field">
             <label><translate>Search</translate></label>
-            <input type="text" v-model="query" :placeholder="labels.searchPlaceholder"/>
+            <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
           </div>
           <div class="field">
             <label><translate>Ordering</translate></label>