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 00000000..c346a9ab
--- /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 c732213e..85bb9eea 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 25a3b182..534ac0ac 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 3bfba25e..09a9c6c2 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 35bb2f6e..815f0253 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 377b2d3e..26454048 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 93312ec2..ca7e2a5a 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 7c462851..e385384b 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 6b8051cd..7aec1d61 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 0a869586..77a63b86 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 430291a2..23f33d0f 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 d8050ecb..1e97ebaf 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 835b04db..28698ba6 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 8ee5d052..02cfba5a 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 2fb767ad..ee9eb503 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 f44ae89a..d76634a3 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 34c75eb9..1fe97406 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 259d05f0..8872c2cd 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 6389b453..fd509272 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 e7759113..7940c170 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 6d076193..d63ad6ce 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 96d28829..d197e4d5 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 44cb19cf..dc1b2b78 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 be639530..15cc94be 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>
--
GitLab