Commit 0a93aec8 authored by Agate's avatar Agate 💬

Merge branch 'accessibility-audit-work' into 'develop'

Contrast and labelling fixes

Closes #1124 and #1122

See merge request !1186
parents abcac3ff 33ba92a0
Pipeline #11664 canceled with stages
in 35 seconds
......@@ -20,9 +20,9 @@
<div class="ui mobile reversed stackable grid">
<div class="ten wide column">
<div class="ui text container">
<h3 class="ui header" id="description">
<h2 class="ui header" id="description">
<translate translate-context="Content/About/Header">About this pod</translate>
</h3>
</h2>
<div v-html="markdown.makeHtml(longDescription)" v-if="longDescription"></div>
<p v-else>
<translate translate-context="Content/Home/Paragraph">No description available.</translate>
......
......@@ -10,20 +10,26 @@
<span v-translate="{instanceUrl: instanceHostname}" translate-context="Footer/About/Title">About %{instanceUrl}</span>
</h4>
<div class="ui list">
<router-link class="link item" to="/about">
<router-link v-if="this.$route.path != '/about'" class="link item" to="/about">
<translate translate-context="Footer/About/List item.Link">About page</translate>
</router-link>
<router-link v-else-if="this.$route.path == '/about' && $store.state.auth.authenticated" class="link item" to="/library">
<translate translate-context="Footer/*/List item.Link">Go to Library</translate>
</router-link>
<router-link v-else class="link item" to="/">
<translate translate-context="Footer/*/List item.Link">Home Page</translate>
</router-link>
<a v-if="version" class="link item" href="https://docs.funkwhale.audio/changelog.html" target="_blank">
<translate translate-context="Footer/*/List item" :translate-params="{version: version}" >Version %{version}</translate>
</a>
<a href="" class="link item" @click.prevent="$emit('show:set-instance-modal')" >
<a role="button" href="" class="link item" @click.prevent="$emit('show:set-instance-modal')" >
<translate translate-context="Footer/*/List item.Link">Use another instance</translate>
</a>
</div>
<div class="ui form">
<div class="ui field">
<label><translate translate-context="Footer/Settings/Dropdown.Label/Short, Verb">Change language</translate></label>
<select class="ui dropdown" :value="$language.current" @change="$store.dispatch('ui/currentLanguage', $event.target.value)">
<label for="language-select"><translate translate-context="Footer/Settings/Dropdown.Label/Short, Verb">Change language</translate></label>
<select id="language-select" class="ui dropdown" :value="$language.current" @change="$store.dispatch('ui/currentLanguage', $event.target.value)">
<option v-for="(language, key) in $language.available" :key="key" :value="key">{{ language }}</option>
</select>
</div>
......@@ -38,8 +44,8 @@
</div>
<div class="ui form">
<div class="ui field">
<label><translate translate-context="Footer/Settings/Dropdown.Label/Short, Verb">Change theme</translate></label>
<select class="ui dropdown" :value="$store.state.ui.theme" @change="$store.dispatch('ui/theme', $event.target.value)">
<label for="theme-select"><translate translate-context="Footer/Settings/Dropdown.Label/Short, Verb">Change theme</translate></label>
<select id="theme-select" class="ui dropdown" :value="$store.state.ui.theme" @change="$store.dispatch('ui/theme', $event.target.value)">
<option v-for="theme in themes" :key="theme.key" :value="theme.key">{{ theme.name }}</option>
</select>
</div>
......
......@@ -18,9 +18,9 @@
<section class="ui vertical stripe segment">
<div class="ui stackable grid">
<div class="ten wide column">
<h3 class="header">
<h2 class="header">
<translate translate-context="Content/Home/Header">About this Funkwhale pod</translate>
</h3>
</h2>
<div class="ui raised segment" id="pod">
<div class="ui stackable grid">
<div class="eight wide column">
......@@ -77,7 +77,7 @@
</div>
<div class="six wide column">
<img class="ui image" src="../assets/network.png" />
<img class="ui image" src="../assets/network.png" alt=""/>
</div>
</div>
<div class="ui hidden divider"></div>
......@@ -98,7 +98,7 @@
<h3 class="header">
<translate translate-context="Head/Login/Title">Log In</translate>
</h3>
<login-form button-classes="basic success" :show-signup="false"></login-form>
<login-form button-classes="success" :show-signup="false"></login-form>
<div class="ui hidden clearing divider"></div>
</div>
<div class="four wide column">
......@@ -112,7 +112,7 @@
<p v-if="defaultUploadQuota">
<translate translate-context="Content/Home/Paragraph" :translate-params="{quota: humanSize(defaultUploadQuota * 1000 * 1000)}">Users on this pod also get %{ quota } of free storage to upload their own content!</translate>
</p>
<signup-form button-classes="basic success" :show-login="false"></signup-form>
<signup-form button-classes="success" :show-login="false"></signup-form>
</template>
<div v-else>
<p translate-context="Content/Home/Paragraph">Registrations are closed on this pod. You can signup on another pod using the link below.</p>
......
......@@ -2,7 +2,8 @@
<div v-if='maxPage > 1' class="ui pagination menu component-pagination" role="navigation" :aria-label="labels.pagination">
<a href
:disabled="current - 1 < 1"
:title="labels.previousPage"
role="button"
:aria-label="labels.previousPage"
@click.prevent.stop="selectPage(current - 1)"
:class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></a>
<template v-if="!compact">
......@@ -19,7 +20,8 @@
</template>
<a href
:disabled="current + 1 > maxPage"
:title="labels.nextPage"
role="button"
:aria-label="labels.nextPage"
@click.prevent.stop="selectPage(current + 1)"
:class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></a>
</div>
......
......@@ -180,7 +180,7 @@
<template v-if="$store.getters['favorites/isFavorite'](track.id)">
<i class="pink heart icon"></i>
</template>
<button :title="labels.removeFromQueue" @click.stop="cleanTrack(index)" :class="['ui', 'really', 'tiny', 'basic', 'circular', 'icon', 'button']">
<button :aria-label="labels.removeFromQueue" :title="labels.removeFromQueue" @click.stop="cleanTrack(index)" :class="['ui', 'really', 'tiny', 'basic', 'circular', 'icon', 'button']">
<i class="x icon"></i>
</button>
</td>
......@@ -272,6 +272,7 @@ export default {
return {
queue: this.$pgettext('*/*/*', 'Queue'),
duration: this.$pgettext('*/*/*', 'Duration'),
addArtistContentFilter: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
}
},
timeLeft () {
......
......@@ -17,9 +17,9 @@
<translate translate-context="Popup/Instance/Paragraph">To continue, please select the Funkwhale instance you want to connect to. Enter the address directly, or select one of the suggested choices.</translate>
</p>
<div class="field">
<label><translate translate-context="Popup/Instance/Input.Label/Noun">Instance URL</translate></label>
<label for="instance-picker"><translate translate-context="Popup/Instance/Input.Label/Noun">Instance URL</translate></label>
<div class="ui action input">
<input type="text" v-model="instanceUrl" placeholder="https://funkwhale.server">
<input id ="instance-picker" type="text" v-model="instanceUrl" placeholder="https://funkwhale.server">
<button type="submit" :class="['ui', 'icon', {loading: isLoading}, 'button']">
<translate translate-context="*/*/Button.Label/Verb">Submit</translate>
</button>
......@@ -29,7 +29,7 @@
<div class="ui hidden divider"></div>
<form class="ui form" @submit.prevent="">
<div class="field">
<label><translate translate-context="Popup/Instance/List.Label">Suggested choices</translate></label>
<h4><translate translate-context="Popup/Instance/List.Label">Suggested choices</translate></h4>
<button v-for="url in suggestedInstances" @click="checkAndSwitch(url)" class="ui basic button">{{ url }}</button>
</div>
</form>
......
......@@ -4,6 +4,7 @@
<router-link :title="'Funkwhale'" :to="{name: logoUrl}">
<i class="logo bordered inverted vibrant big icon">
<logo class="logo"></logo>
<span class="visually-hidden">Home</span>
</i>
</router-link>
<router-link v-if="!$store.state.auth.authenticated" class="logo-wrapper" :to="{name: logoUrl}" :title="'Funkwhale'">
......@@ -64,13 +65,16 @@
<router-link
class="item"
v-if="$store.state.auth.authenticated"
:title="labels.addContent"
:to="{name: 'content.index'}"><i class="upload icon"></i></router-link>
<router-link class="item" v-if="$store.state.auth.authenticated" :title="labels.notifications" :to="{name: 'notifications'}">
<i class="bell icon"></i><div
v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0"
:class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">{{ $store.state.ui.notifications.inbox + additionalNotifications }}</div>
:to="{name: 'content.index'}">
<i class="upload icon"></i>
<span class="visually-hidden">{{ labels.addContent }}</span>
</router-link>
<router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'notifications'}">
<i class="bell icon"></i>
<div v-if="$store.state.ui.notifications.inbox + additionalNotifications > 0" :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']">
{{ $store.state.ui.notifications.inbox + additionalNotifications }}
</div>
<span v-else class="visually-hidden">{{ labels.notifications }}</span>
</router-link>
<div class="item">
<div class="ui user-dropdown dropdown" >
......@@ -108,10 +112,10 @@
<section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu">
<nav class="ui vertical large fluid inverted menu" role="navigation" :aria-label="labels.mainMenu">
<div :class="[{collapsed: !exploreExpanded}, 'collaspable item']">
<h3 class="header" @click="exploreExpanded = true" tabindex="0" @focus="exploreExpanded = true">
<h2 class="header" @click="exploreExpanded = true" tabindex="0" @focus="exploreExpanded = true">
<translate translate-context="*/*/*/Verb">Explore</translate>
<i class="angle right icon" v-if="!exploreExpanded"></i>
</h3>
</h2>
<div class="menu">
<router-link class="item" :exact="true" :to="{name: 'library.index'}"><i class="music icon"></i><translate translate-context="Sidebar/Navigation/List item.Link/Verb">Browse</translate></router-link>
<router-link class="item" :to="{name: 'library.albums.browse'}"><i class="compact disc icon"></i><translate translate-context="*/*/*">Albums</translate></router-link>
......
......@@ -61,6 +61,7 @@
<p v-if="setting.help_text">{{ setting.help_text }}</p>
</div>
<select
:id="setting.identifier"
v-else-if="setting.field.class === 'MultipleChoiceField'"
v-model="values[setting.identifier]"
multiple
......@@ -68,7 +69,7 @@
<option v-for="v in setting.additional_data.choices" :value="v[0]">{{ v[1] }}</option>
</select>
<div v-else-if="setting.field.widget.class === 'ImageWidget'">
<input type="file" :ref="setting.identifier">
<input :id="setting.identifier" type="file" :ref="setting.identifier">
<div v-if="values[setting.identifier]">
<div class="ui hidden divider"></div>
<h3 class="ui header"><translate translate-context="Content/Settings/Title/Noun">Current image</translate></h3>
......
......@@ -49,7 +49,7 @@
<th>
<translate translate-context="*/*/Form-builder,Help">Required</translate>
</th>
<th></th>
<th><span class="visually-hidden"><translate translate-context="*/*/Form-builder,Help">Actions</translate></span></th>
</tr>
</thead>
<tbody>
......@@ -86,7 +86,7 @@
<i
:disabled="idx >= local.fields.length - 1"
@click="move(idx, 1)" rel="button"
:title="labels.up"
:title="labels.down"
:class="['down', 'arrow', {disabled: idx >= local.fields.length - 1}, 'icon']"></i>
<i @click="remove(idx)" rel="button" :title="labels.delete" class="x icon"></i>
</td>
......
......@@ -7,10 +7,10 @@
</ul>
</div>
<template v-if="metadataChoices">
<div v-if="creating && step === 1" class="ui grouped channel-type required field">
<label>
<fieldset v-if="creating && step === 1" class="ui grouped channel-type required field">
<legend>
<translate translate-context="Content/Channel/Paragraph">What this channel will be used for?</translate>
</label>
</legend>
<div class="ui hidden divider"></div>
<div class="field">
<div :class="['ui', 'radio', 'checkbox', {selected: choice.value == newValues.content_category}]" v-for="choice in categoryChoices">
......@@ -23,7 +23,7 @@
</label>
</div>
</div>
</div>
</fieldset>
<template v-if="!creating || step === 2">
<div class="ui required field">
<label for="channel-name">
......
......@@ -2,9 +2,9 @@
<span :title="title" :class="['ui', {'tiny': discrete}, {'icon': !discrete}, {'buttons': !dropdownOnly && !iconOnly}, 'play-button component-play-button']">
<button
v-if="!dropdownOnly"
:title="labels.replacePlay"
@click.stop.prevent="replacePlay"
:disabled="!playable"
:aria-label="labels.replacePlay"
:class="buttonClasses.concat(['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}])">
<i :class="[playIconClass, 'icon']"></i>
<template v-if="!discrete && !iconOnly">&nbsp;<slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
......
......@@ -158,7 +158,7 @@
</div>
<div class="group">
<div class="fake-dropdown">
<span class="position control desktop-and-up" role="button" @click.stop="toggleMobilePlayer">
<span class="position control desktop-and-up" role="button" @click.stop="toggleMobilePlayer" aria-expanded="true">
<i class="stream icon"></i>
<translate translate-context="Sidebar/Queue/Text" :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}">
%{ index } of %{ length }
......
<template>
<div class="ui fluid category search">
<slot></slot><div class="ui icon input">
<input ref="search" type="search" class="prompt" name="search" :placeholder="labels.placeholder" @keydown.esc="$event.target.blur()">
<input :aria-label="labels.searchContent" ref="search" type="search" class="prompt" name="search" :placeholder="labels.placeholder" @keydown.esc="$event.target.blur()">
<i class="search icon"></i>
</div>
<div class="results"></div>
......@@ -25,7 +25,8 @@ export default {
computed: {
labels () {
return {
placeholder: this.$pgettext('Sidebar/Search/Input.Placeholder', 'Search for artists, albums, tracks…')
placeholder: this.$pgettext('Sidebar/Search/Input.Placeholder', 'Search for artists, albums, tracks…'),
searchContent: this.$pgettext('Sidebar/Search/Input.Label', 'Search for content')
}
}
},
......
......@@ -25,7 +25,9 @@
<i class="volume up icon"></i>
</span>
<div class="popup">
<label for="volume-slider" class="visually-hidden">{{ labels.slider }}</label>
<input
id="volume-slider"
type="range"
step="0.05"
min="0"
......@@ -57,7 +59,7 @@ export default {
return {
unmute: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Unmute"),
mute: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Mute"),
slider: this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Adjust volume")
}
}
},
......
<template>
<div class="wrapper">
<h3 class="ui header">
<h3 v-if="!!this.$slots.title" class="ui header">
<slot name="title"></slot>
<span v-if="showCount" class="ui tiny circular label">{{ count }}</span>
</h3>
......
......@@ -7,13 +7,13 @@
<table v-else :class="['ui', 'compact', 'very', 'basic', {loading: isLoading}, 'unstackable', 'table']">
<thead>
<tr>
<th></th>
<th></th>
<th><span class="visually-hidden"><translate translate-context="*/*/*/Noun">Play</translate></span></th>
<th><span class="visually-hidden"><translate translate-context="*/*/*/Noun">Track Art</translate></span></th>
<th colspan="6"><translate translate-context="*/*/*/Noun">Title</translate></th>
<th colspan="4"><translate translate-context="*/*/*/Noun">Artist</translate></th>
<th colspan="4"><translate translate-context="*/*/*">Album</translate></th>
<th colspan="4"><translate translate-context="Content/*/*">Duration</translate></th>
<th colspan="2" v-if="displayActions"></th>
<th colspan="2" v-if="displayActions"><span class="visually hidden"><translate translate-context="*/*/*/Noun">Actions</translate></span></th>
</tr>
</thead>
<tbody>
......
<template>
<div class="component-track-widget">
<h3 class="ui header">
<h3 v-if="!!this.$slots.title">
<slot name="title"></slot>
<span v-if="showCount" class="ui tiny circular label">{{ count }}</span>
</h3>
......
......@@ -19,12 +19,12 @@
</translate>
</p>
<div class="field">
<label><translate translate-context="Content/Applications/Label">Application ID</translate></label>
<copy-input :value="application.client_id" />
<label for="copy-id"><translate translate-context="Content/Applications/Label">Application ID</translate></label>
<copy-input id="copy-id" :value="application.client_id" />
</div>
<div class="field">
<label><translate translate-context="Content/Applications/Label">Application secret</translate></label>
<copy-input :value="application.client_secret" />
<label for="copy-secret"><translate translate-context="Content/Applications/Label">Application secret</translate></label>
<copy-input id="copy-secret" :value="application.client_secret" />
</div>
</div>
<h2 class="ui header">
......
......@@ -8,12 +8,12 @@
</ul>
</div>
<div class="ui field">
<label><translate translate-context="*/*/*/Noun">Name</translate></label>
<input name="name" required type="text" v-model="fields.name" />
<label for="application-name"><translate translate-context="*/*/*/Noun">Name</translate></label>
<input id="application-name" name="name" required type="text" v-model="fields.name" />
</div>
<div class="ui field">
<label><translate translate-context="Content/Applications/Input.Label/Noun">Redirect URI</translate></label>
<input name="redirect_uris" type="text" v-model="fields.redirect_uris" />
<label for="redirect-uris"><translate translate-context="Content/Applications/Input.Label/Noun">Redirect URI</translate></label>
<input id="redirect-uris" name="redirect_uris" type="text" v-model="fields.redirect_uris" />
<p class="help">
<translate translate-context="Content/Applications/Help Text">
Use "urn:ietf:wg:oauth:2.0:oob" as a redirect URI if your application is not served on the web.
......
......@@ -14,7 +14,7 @@
</div>
<template v-if="$store.getters['instance/appDomain'] === $store.getters['instance/domain']" >
<div class="field">
<label>
<label for="username-field">
<translate translate-context="Content/Login/Input.Label/Noun">Username or email</translate>
<template v-if="showSignup">
|
......@@ -28,19 +28,20 @@
required
name="username"
type="text"
id="username-field"
autofocus
:placeholder="labels.usernamePlaceholder"
v-model="credentials.username"
>
</div>
<div class="field">
<label>
<label for="password-field">
<translate translate-context="*/*/*">Password</translate> |
<router-link :to="{name: 'auth.password-reset', query: {email: credentials.username}}">
<translate translate-context="*/Login/*/Verb">Reset your password</translate>
</router-link>
</label>
<password-input required v-model="credentials.password" />
<password-input field-id="password-field" required v-model="credentials.password" />
</div>
</template>
......
......@@ -18,12 +18,12 @@
</ul>
</div>
<div class="field" v-for="f in orderedSettingsFields">
<label>{{ sharedLabels.fields[f.id].label }}</label>
<label :for="f.id">{{ sharedLabels.fields[f.id].label }}</label>
<p v-if="f.help">{{ sharedLabels.fields[f.id].help }}</p>
<select v-if="f.type === 'dropdown'" class="ui dropdown" v-model="f.value">
<select :id="f.id" v-if="f.type === 'dropdown'" class="ui dropdown" v-model="f.value">
<option :value="c" v-for="c in f.choices">{{ sharedLabels.fields[f.id].choices[c] }}</option>
</select>
<content-form v-if="f.type === 'content'" v-model="f.value.text"></content-form>
<content-form :field-id="f.id" v-if="f.type === 'content'" v-model="f.value.text"></content-form>
</div>
<button :class="['ui', {'loading': isLoading}, 'button']" type="submit">
<translate translate-context="Content/Settings/Button.Label/Verb">Update settings</translate>
......@@ -72,13 +72,12 @@
</ul>
</div>
<div class="field">
<label><translate translate-context="Content/Settings/Input.Label">Old password</translate></label>
<password-input required v-model="old_password" />
<label for="old-password-field"><translate translate-context="Content/Settings/Input.Label">Old password</translate></label>
<password-input field-id="old-password-field" required v-model="old_password" />
</div>
<div class="field">
<label><translate translate-context="Content/Settings/Input.Label">New password</translate></label>
<password-input required v-model="new_password" />
<label for="new-password-field"><translate translate-context="Content/Settings/Input.Label">New password</translate></label>
<password-input field-id="new-password-field" required v-model="new_password" />
</div>
<dangerous-button
:class="['ui', {'loading': isLoading}, 'warning', 'button']"
......@@ -111,7 +110,7 @@
<button
@click="$store.dispatch('moderation/fetchContentFilters')"
class="ui basic icon button">
class="ui icon button">
<i class="refresh icon"></i>&nbsp;
<translate translate-context="Content/*/Button.Label/Short, Verb">Refresh</translate>
</button>
......@@ -156,7 +155,7 @@
<p><translate translate-context="Content/Settings/Paragraph">This is the list of applications that have access to your account data.</translate></p>
<button
@click="fetchApps()"
class="ui basic icon button">
class="ui icon button">
<i class="refresh icon"></i>&nbsp;
<translate translate-context="Content/*/Button.Label/Short, Verb">Refresh</translate>
</button>
......@@ -178,7 +177,7 @@
</td>
<td>
<dangerous-button
class="ui tiny basic danger button"
class="ui tiny danger button"
@confirm="revokeApp(app.client_id)">
<translate translate-context="*/*/*/Verb">Revoke</translate>
<p slot="modal-header" v-translate="{application: app.name}" translate-context="Popup/Settings/Title">Revoke access for application "%{ application }"?</p>
......@@ -207,7 +206,7 @@
</div>
</h2>
<p><translate translate-context="Content/Settings/Paragraph">This is the list of applications that you have created.</translate></p>
<router-link class="ui basic success button" :to="{name: 'settings.applications.new'}">
<router-link class="ui success button" :to="{name: 'settings.applications.new'}">
<translate translate-context="Content/Settings/Button.Label">Create a new application</translate>
</router-link>
<table v-if="ownedApps.length > 0" class="ui compact very basic unstackable table">
......@@ -233,11 +232,11 @@
<human-date :date="app.created" />
</td>
<td>
<router-link class="ui basic tiny success button" :to="{name: 'settings.applications.edit', params: {id: app.client_id}}">
<router-link class="ui tiny success button" :to="{name: 'settings.applications.edit', params: {id: app.client_id}}">
<translate translate-context="Content/*/Button.Label/Verb">Edit</translate>
</router-link>
<dangerous-button
class="ui tiny basic danger button"
class="ui tiny danger button"
@confirm="deleteApp(app.client_id)">
<translate translate-context="*/*/*/Verb">Delete</translate>
<p slot="modal-header" v-translate="{application: app.name}" translate-context="Popup/Settings/Title">Delete application "%{ application }"?</p>
......@@ -267,7 +266,7 @@
</div>
</h2>
<p><translate translate-context="Content/Settings/Paragraph">Use plugins to extend Funkwhale and get additional features.</translate></p>
<router-link class="ui basic success button" :to="{name: 'settings.plugins'}">
<router-link class="ui success button" :to="{name: 'settings.plugins'}">
<translate translate-context="Content/Settings/Button.Label">Manage plugins</translate>
</router-link>
</section>
......@@ -293,8 +292,8 @@
</ul>
</div>
<div class="field">
<label><translate translate-context="*/*/*">Password</translate></label>
<password-input required v-model="password" />
<label for="current-password-field"><translate translate-context="*/*/*">Password</translate></label>
<password-input field-id="current-password-field" required v-model="password" />
</div>
<dangerous-button
:class="['ui', {'loading': isDeletingAccount}, {disabled: !password}, 'danger', 'button']"
......
......@@ -32,19 +32,21 @@
</ul>
</div>
<div class="required field">
<label><translate translate-context="Content/*/*">Username</translate></label>
<label for="username-field"><translate translate-context="Content/*/*">Username</translate></label>
<input
ref="username"
name="username"
required
id="username-field"
type="text"
autofocus
:placeholder="labels.usernamePlaceholder"
v-model="username">
</div>
<div class="required field">
<label><translate translate-context="Content/*/*/Noun">Email</translate></label>
<label for="email-field"><translate translate-context="Content/*/*/Noun">Email</translate></label>
<input
id="email-field"
ref="email"
name="email"
required
......@@ -53,12 +55,13 @@
v-model="email">
</div>
<div class="required field">
<label><translate translate-context="*/*/*">Password</translate></label>
<password-input v-model="password" />
<label for="password-field"><translate translate-context="*/*/*">Password</translate></label>
<password-input field-id="password-field" v-model="password" />
</div>
<div class="required field" v-if="!$store.state.instance.settings.users.registration_enabled.value">
<label><translate translate-context="Content/*/Input.Label">Invitation code</translate></label>
<label for="invitation-code"><translate translate-context="Content/*/Input.Label">Invitation code</translate></label>
<input
id="invitation-code"
required
type="text"
name="invitation"
......@@ -70,10 +73,11 @@
<label :for="`custom-field-${idx}`">{{ field.label }}</label>
<textarea
v-if="field.input_type === 'long_text'"
:id="`custom-field-${idx}`"
:value="customFields[field.label]"
:required="field.required"
@input="$set(customFields, field.label, $event.target.value)" rows="5"></textarea>
<input v-else type="text" :value="customFields[field.label]" :required="field.required" @input="$set(customFields, field.label, $event.target.value)">
<input v-else :id="`custom-field-${idx}`" type="text" :value="customFields[field.label]" :required="field.required" @input="$set(customFields, field.label, $event.target.value)">
</div>
</template>
<button :class="['ui', buttonClasses, {'loading': isLoading}, ' right floated button']" type="submit">
......
......@@ -24,7 +24,9 @@
</div>
<template v-if="subsonicEnabled">
<div v-if="token" class="field">
<label for="subsonic-password" class="visually-hidden">{{ labels.subsonicField }}</label>
<password-input
field-id="subsonic-password"
ref="passwordInput"
v-model="token"
:key="token"
......@@ -131,6 +133,9 @@ export default {
computed: {
subsonicEnabled () {
return this.$store.state.instance.settings.subsonic.enabled.value
},
labels () {
subsonicField: this.$pgettext("Content/Password/Input.label", "Your subsonic API password")
}
}
}
......
......@@ -6,7 +6,7 @@
<th colspan="1000">
<div v-if="refreshable" class="right floated">
<span v-if="needsRefresh">
<translate translate-context="Content/*/Button.Help text.Paragraph">Content have been updated, click refresh to see up-to-date content</translate>
<translate translate-context="Content/*/Button.Help text.Paragraph">Content has been updated, click refresh to see up-to-date content</translate>
</span>