kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
				
				
				
			Fix #686: Added name attributes on all inputs to improve UX, especially with password managers
							rodzic
							
								
									ca433fd90e
								
							
						
					
					
						commit
						4256d554e3
					
				| 
						 | 
				
			
			@ -0,0 +1 @@
 | 
			
		|||
Added name attributes on all inputs to improve UX, especially with password managers (#686)
 | 
			
		||||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -22,6 +22,7 @@
 | 
			
		|||
            ref="username"
 | 
			
		||||
            tabindex="1"
 | 
			
		||||
            required
 | 
			
		||||
            name="username"
 | 
			
		||||
            type="text"
 | 
			
		||||
            autofocus
 | 
			
		||||
            :placeholder="labels.usernamePlaceholder"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -2,6 +2,7 @@
 | 
			
		|||
  <div class="ui action input">
 | 
			
		||||
    <input
 | 
			
		||||
    required
 | 
			
		||||
    name="password"
 | 
			
		||||
    :tabindex="index"
 | 
			
		||||
    :type="passwordInputType"
 | 
			
		||||
    @input="$emit('input', $event.target.value)"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -17,6 +17,7 @@
 | 
			
		|||
              required
 | 
			
		||||
              ref="email"
 | 
			
		||||
              type="email"
 | 
			
		||||
              name="email"
 | 
			
		||||
              autofocus
 | 
			
		||||
              :placeholder="labels.placeholder"
 | 
			
		||||
              v-model="email">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Ładowanie…
	
		Reference in New Issue