Skip to content
Snippets Groups Projects
Verified Commit 4256d554 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

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

parent ca433fd9
No related branches found
No related tags found
No related merge requests found
Showing
with 25 additions and 16 deletions
Added name attributes on all inputs to improve UX, especially with password managers (#686)
...@@ -19,24 +19,28 @@ ...@@ -19,24 +19,28 @@
</template> </template>
<input <input
:id="setting.identifier" :id="setting.identifier"
:name="setting.identifier"
v-if="setting.field.widget.class === 'PasswordInput'" v-if="setting.field.widget.class === 'PasswordInput'"
type="password" type="password"
class="ui input" class="ui input"
v-model="values[setting.identifier]" /> v-model="values[setting.identifier]" />
<input <input
:id="setting.identifier" :id="setting.identifier"
:name="setting.identifier"
v-if="setting.field.widget.class === 'TextInput'" v-if="setting.field.widget.class === 'TextInput'"
type="text" type="text"
class="ui input" class="ui input"
v-model="values[setting.identifier]" /> v-model="values[setting.identifier]" />
<input <input
:id="setting.identifier" :id="setting.identifier"
:name="setting.identifier"
v-if="setting.field.class === 'IntegerField'" v-if="setting.field.class === 'IntegerField'"
type="number" type="number"
class="ui input" class="ui input"
v-model.number="values[setting.identifier]" /> v-model.number="values[setting.identifier]" />
<textarea <textarea
:id="setting.identifier" :id="setting.identifier"
:name="setting.identifier"
v-else-if="setting.field.widget.class === 'Textarea'" v-else-if="setting.field.widget.class === 'Textarea'"
type="text" type="text"
class="ui input" class="ui input"
...@@ -120,7 +124,6 @@ export default { ...@@ -120,7 +124,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.ui.checkbox p { .ui.checkbox p {
margin-top: 1rem; margin-top: 1rem;
} }
......
<template> <template>
<div class="ui fluid category search"> <div class="ui fluid category search">
<slot></slot><div class="ui icon input"> <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> <i class="search icon"></i>
</div> </div>
<div class="results"></div> <div class="results"></div>
...@@ -110,5 +110,4 @@ export default { ...@@ -110,5 +110,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
</style> </style>
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
ref="username" ref="username"
tabindex="1" tabindex="1"
required required
name="username"
type="text" type="text"
autofocus autofocus
:placeholder="labels.usernamePlaceholder" :placeholder="labels.usernamePlaceholder"
......
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
<label><translate>Username</translate></label> <label><translate>Username</translate></label>
<input <input
ref="username" ref="username"
name="username"
required required
type="text" type="text"
autofocus autofocus
...@@ -30,6 +31,7 @@ ...@@ -30,6 +31,7 @@
<label><translate>Email</translate></label> <label><translate>Email</translate></label>
<input <input
ref="email" ref="email"
name="email"
required required
type="email" type="email"
:placeholder="labels.emailPlaceholder" :placeholder="labels.emailPlaceholder"
...@@ -44,6 +46,7 @@ ...@@ -44,6 +46,7 @@
<input <input
required required
type="text" type="text"
name="invitation"
:placeholder="labels.placeholder" :placeholder="labels.placeholder"
v-model="invitation"> v-model="invitation">
</div> </div>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div class="ui action input"> <div class="ui action input">
<input <input
required required
name="password"
:tabindex="index" :tabindex="index"
:type="passwordInputType" :type="passwordInputType"
@input="$emit('input', $event.target.value)" @input="$emit('input', $event.target.value)"
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<label> <label>
<translate>Search</translate> <translate>Search</translate>
</label> </label>
<input type="text" v-model="query" :placeholder="labels.searchPlaceholder"/> <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
</div> </div>
<div class="field"> <div class="field">
<label><translate>Ordering</translate></label> <label><translate>Ordering</translate></label>
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<div class="ui four wide field"> <div class="ui four wide field">
<label><translate>Import reference</translate></label> <label><translate>Import reference</translate></label>
<p><translate>This reference will be used to group imported files together.</translate></p> <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>
</div> </div>
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label><translate>Search</translate></label> <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>
<div class="field"> <div class="field">
<label><translate>Ordering</translate></label> <label><translate>Ordering</translate></label>
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class=""> <div class="">
<div class="field"> <div class="field">
<label for="name"><translate>Radio name</translate></label> <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>
<div class="field"> <div class="field">
<label for="description"><translate>Description</translate></label> <label for="description"><translate>Description</translate></label>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label><translate>Search</translate></label> <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>
<div class="field"> <div class="field">
<label><translate>Ordering</translate></label> <label><translate>Ordering</translate></label>
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="ui six wide field"> <div class="ui six wide field">
<label><translate>Search</translate></label> <label><translate>Search</translate></label>
<form @submit.prevent="search.query = $refs.search.value"> <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> </form>
</div> </div>
<div class="field"> <div class="field">
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label><translate>Search</translate></label> <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>
<div class="field"> <div class="field">
<label><translate>Ordering</translate></label> <label><translate>Ordering</translate></label>
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<div class="inline fields"> <div class="inline fields">
<div class="ui field"> <div class="ui field">
<label><translate>Invitation code</translate></label> <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>
<div class="ui field"> <div class="ui field">
<button :class="['ui', {loading: isLoading}, 'button']" :disabled="isLoading" type="submit"> <button :class="['ui', {loading: isLoading}, 'button']" :disabled="isLoading" type="submit">
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label><translate>Search</translate></label> <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>
<div class="field"> <div class="field">
<label><translate>Ordering</translate></label> <label><translate>Ordering</translate></label>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label><translate>Search</translate></label> <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>
<div class="field"> <div class="field">
<label><translate>Ordering</translate></label> <label><translate>Ordering</translate></label>
......
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class="three fields"> <div class="three fields">
<div class="field"> <div class="field">
<label><translate>Playlist name</translate></label> <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>
<div class="field"> <div class="field">
<label><translate>Playlist visibility</translate></label> <label><translate>Playlist visibility</translate></label>
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="inline fields"> <div class="inline fields">
<div class="field"> <div class="field">
<label for="domain"><translate>Add a domain</translate></label> <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>
<div class="field"> <div class="field">
<button :class="['ui', {'loading': isCreating}, 'green', 'button']" type="submit" :disabled="isCreating"> <button :class="['ui', {'loading': isCreating}, 'green', 'button']" type="submit" :disabled="isCreating">
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<div class="field"> <div class="field">
<label><translate>Confirmation code</translate></label> <label><translate>Confirmation code</translate></label>
<input type="text" required v-model="key" /> <input name="confirmation-code" type="text" required v-model="key" />
</div> </div>
<router-link :to="{path: '/login'}"> <router-link :to="{path: '/login'}">
<translate>Return to login</translate> <translate>Return to login</translate>
......
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
required required
ref="email" ref="email"
type="email" type="email"
name="email"
autofocus autofocus
:placeholder="labels.placeholder" :placeholder="labels.placeholder"
v-model="email"> v-model="email">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment