From 4256d554e359cd5ee69e3224dd5e1bd2d95e6029 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 26 Jan 2019 18:06:19 +0100
Subject: [PATCH] Fix #686: Added name attributes on all inputs to improve UX,
 especially with password managers

---
 changes/changelog.d/686.enhancement                      | 1 +
 front/src/components/admin/SettingsGroup.vue             | 5 ++++-
 front/src/components/audio/SearchBar.vue                 | 3 +--
 front/src/components/auth/Login.vue                      | 1 +
 front/src/components/auth/Signup.vue                     | 3 +++
 front/src/components/forms/PasswordInput.vue             | 1 +
 front/src/components/library/Artists.vue                 | 2 +-
 front/src/components/library/FileUpload.vue              | 2 +-
 front/src/components/library/Radios.vue                  | 2 +-
 front/src/components/library/radios/Builder.vue          | 2 +-
 front/src/components/manage/library/FilesTable.vue       | 2 +-
 front/src/components/manage/moderation/AccountsTable.vue | 2 +-
 front/src/components/manage/moderation/DomainsTable.vue  | 2 +-
 front/src/components/manage/users/InvitationForm.vue     | 2 +-
 front/src/components/manage/users/InvitationsTable.vue   | 2 +-
 front/src/components/manage/users/UsersTable.vue         | 2 +-
 front/src/components/playlists/Form.vue                  | 2 +-
 front/src/views/admin/moderation/DomainsList.vue         | 2 +-
 front/src/views/auth/EmailConfirm.vue                    | 2 +-
 front/src/views/auth/PasswordReset.vue                   | 1 +
 front/src/views/content/libraries/FilesTable.vue         | 2 +-
 front/src/views/content/libraries/Form.vue               | 2 +-
 front/src/views/content/remote/ScanForm.vue              | 2 +-
 front/src/views/playlists/List.vue                       | 2 +-
 24 files changed, 29 insertions(+), 20 deletions(-)
 create mode 100644 changes/changelog.d/686.enhancement

diff --git a/changes/changelog.d/686.enhancement b/changes/changelog.d/686.enhancement
new file mode 100644
index 000000000..c346a9ab4
--- /dev/null
+++ b/changes/changelog.d/686.enhancement
@@ -0,0 +1 @@
+Added name attributes on all inputs to improve UX, especially with password managers (#686)
diff --git a/front/src/components/admin/SettingsGroup.vue b/front/src/components/admin/SettingsGroup.vue
index c732213e2..85bb9eeae 100644
--- a/front/src/components/admin/SettingsGroup.vue
+++ b/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;
 }
diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue
index 25a3b1823..534ac0ac4 100644
--- a/front/src/components/audio/SearchBar.vue
+++ b/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>
diff --git a/front/src/components/auth/Login.vue b/front/src/components/auth/Login.vue
index 3bfba25e5..09a9c6c29 100644
--- a/front/src/components/auth/Login.vue
+++ b/front/src/components/auth/Login.vue
@@ -22,6 +22,7 @@
             ref="username"
             tabindex="1"
             required
+            name="username"
             type="text"
             autofocus
             :placeholder="labels.usernamePlaceholder"
diff --git a/front/src/components/auth/Signup.vue b/front/src/components/auth/Signup.vue
index 35bb2f6eb..815f0253a 100644
--- a/front/src/components/auth/Signup.vue
+++ b/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>
diff --git a/front/src/components/forms/PasswordInput.vue b/front/src/components/forms/PasswordInput.vue
index 377b2d3e4..26454048e 100644
--- a/front/src/components/forms/PasswordInput.vue
+++ b/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)"
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 93312ec2e..ca7e2a5a0 100644
--- a/front/src/components/library/Artists.vue
+++ b/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>
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 7c4628511..e385384b4 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/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>
 
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 6b8051cd9..7aec1d61b 100644
--- a/front/src/components/library/Radios.vue
+++ b/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>
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 0a8695863..77a63b86d 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/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>
diff --git a/front/src/components/manage/library/FilesTable.vue b/front/src/components/manage/library/FilesTable.vue
index 430291a21..23f33d0f3 100644
--- a/front/src/components/manage/library/FilesTable.vue
+++ b/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>
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index d8050ecb5..1e97ebaf7 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/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">
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index 835b04db5..28698ba62 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/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>
diff --git a/front/src/components/manage/users/InvitationForm.vue b/front/src/components/manage/users/InvitationForm.vue
index 8ee5d0525..02cfba5a9 100644
--- a/front/src/components/manage/users/InvitationForm.vue
+++ b/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">
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index 2fb767ad0..ee9eb5035 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/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>
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index f44ae89a0..d76634a33 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/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>
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 34c75eb97..1fe974065 100644
--- a/front/src/components/playlists/Form.vue
+++ b/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>
diff --git a/front/src/views/admin/moderation/DomainsList.vue b/front/src/views/admin/moderation/DomainsList.vue
index 259d05f0c..8872c2cdc 100644
--- a/front/src/views/admin/moderation/DomainsList.vue
+++ b/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">
diff --git a/front/src/views/auth/EmailConfirm.vue b/front/src/views/auth/EmailConfirm.vue
index 6389b4535..fd509272d 100644
--- a/front/src/views/auth/EmailConfirm.vue
+++ b/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>
diff --git a/front/src/views/auth/PasswordReset.vue b/front/src/views/auth/PasswordReset.vue
index e7759113c..7940c170f 100644
--- a/front/src/views/auth/PasswordReset.vue
+++ b/front/src/views/auth/PasswordReset.vue
@@ -17,6 +17,7 @@
               required
               ref="email"
               type="email"
+              name="email"
               autofocus
               :placeholder="labels.placeholder"
               v-model="email">
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index 6d076193b..d63ad6cee 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/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">
diff --git a/front/src/views/content/libraries/Form.vue b/front/src/views/content/libraries/Form.vue
index 96d28829a..d197e4d5b 100644
--- a/front/src/views/content/libraries/Form.vue
+++ b/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>
diff --git a/front/src/views/content/remote/ScanForm.vue b/front/src/views/content/remote/ScanForm.vue
index 44cb19cf8..dc1b2b78b 100644
--- a/front/src/views/content/remote/ScanForm.vue
+++ b/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>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index be6395306..15cc94be4 100644
--- a/front/src/views/playlists/List.vue
+++ b/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>