diff --git a/changes/changelog.d/686.enhancement b/changes/changelog.d/686.enhancement
new file mode 100644
index 0000000000000000000000000000000000000000..c346a9ab4622de6359dd9057cb8a1dad5dd9e7c7
--- /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 c732213e2ce4833837e3df2652bc4c076c31f7be..85bb9eeaee5243a60d4841c264ea8947f9918fce 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 25a3b1823054ee1701598490b3b325047e8549f2..534ac0ac4f3862170a9b2a649a1746bba783cb0e 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 3bfba25e5bc78f0c6941f5aae3728249d54b42f0..09a9c6c29d5bb690b5c6eac3cbabd24883295b3d 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 35bb2f6eb5531464fb75eabe5d5241952fa6838c..815f0253a72b697ea663801dff4ba43f5909988d 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 377b2d3e4b111b38ea242e9e729dc29eb326499b..26454048e41ff328bf26e9288af6091fe9c8e050 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 93312ec2ef0830edede9498617805d7a3628211f..ca7e2a5a03cdbc3df968f2043d133a6e1a107e82 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 7c4628511e2172a06d344d13881f0ad72db2aa51..e385384b4e8d205d8c66a52e3f5003bcd367c042 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 6b8051cd9bc0db1a76e16c8887f3c8c6ecfffc78..7aec1d61b01ea1da0203861b1450d829fc3d01f8 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 0a86958634b71c794fe44242b26b918fcaf4f13a..77a63b86d8af952cf6eb01db8a43622ac9cd8d6e 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 430291a21c2587bf7cac5712fb61b287762608e0..23f33d0f350922d450a56944f976f077a0063648 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 d8050ecb5f1ddda804df94860fedccca5619dcf6..1e97ebaf7eeed4e24ef8a42d0a5782d5e5930842 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 835b04db585427dc66904bccb870366ca2f1e98c..28698ba625c9f54089b0b97e97b74279b7c76e37 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 8ee5d0525e5894547f54cd0aa9c3ca07b7282fb9..02cfba5a949734d7dd0c5f88dd54a58a10fe5f55 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 2fb767ad0a0011570ad0705772e2f213f8124d13..ee9eb503501cee9541c6c9bf2d32cdaf1625ec10 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 f44ae89a07e541431f8c859d769d55b190a87f76..d76634a331d186677db00c943e23483890739196 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 34c75eb97747d822470ffc10a336af126071b455..1fe9740654192adcdbbc22872dbae38217d976d7 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 259d05f0cecbdb1019d59201d38d374cbe155447..8872c2cdcc1372f5348dd1ae95d2d96dc177ee52 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 6389b4535bf987f7801a9b6d8e84ace2932ac226..fd509272d813594fa153c6d0f25856dd94191a28 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 e7759113c33b80676983ce64d51acfbaf519855e..7940c170f0fcd427e3edcdbcc69c9d6b013696ed 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 6d076193b69fe31b09a7fe43e64d86879645bd14..d63ad6cee88a3814c1baa915f6a62f5101e9293a 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 96d28829ab2b16dc1953f28f748ebfa9fb2d7c6d..d197e4d5b9c11ef0c699649d0ae8d517fe5a6d98 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 44cb19cf8edd9039bd3d60d403a761f9ed54b3d7..dc1b2b78b730a98ed8a7940e69c135a863390389 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 be63953064576a86c744be44f727f53d326f3d2d..15cc94be431efd6fe67336718b7423c3628d1c67 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>