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

merge-requests/622/head
Eliot Berriot 2019-01-26 18:06:19 +01:00
rodzic ca433fd90e
commit 4256d554e3
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: DD6965E2476E5C27
24 zmienionych plików z 29 dodań i 20 usunięć

Wyświetl plik

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

Wyświetl plik

@ -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;
}

Wyświetl plik

@ -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>

Wyświetl plik

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

Wyświetl plik

@ -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>

Wyświetl plik

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

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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">

Wyświetl plik

@ -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>

Wyświetl plik

@ -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">

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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">

Wyświetl plik

@ -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>

Wyświetl plik

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

Wyświetl plik

@ -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">

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>