MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Clean up everything but views

This commit is contained in:
Ciarán Ainsworth 2022-09-22 23:26:59 +00:00 committed by Kasper Seweryn
parent 9e34fbc47e
commit 3a46cb140d
112 changed files with 3191 additions and 2115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/Queue.vue
View File

@ -415,7 +415,7 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
{{ labels.queue }} {{ labels.queue }}
<div class="sub header"> <div class="sub header">
<div> <div>
{{ $t('components.Queue.display.queuePosition', {index: currentIndex +1, length: queue.length}) }} {{ $t('components.Queue.meta.queuePosition', {index: currentIndex +1, length: queue.length}) }}
<template v-if="!$store.state.radios.running"> <template v-if="!$store.state.radios.running">
<span class="middle ellipses symbol" /> <span class="middle ellipses symbol" />
<span :title="labels.duration"> <span :title="labels.duration">

2
front/src/components/audio/ChannelForm.vue
View File

@ -380,7 +380,7 @@ defineExpose({
class="ui active inverted dimmer" class="ui active inverted dimmer"
> >
<div class="ui text loader"> <div class="ui text loader">
{{ $t('components.audio.ChannelForm.message.loading') }} {{ $t('components.audio.ChannelForm.loader.loading') }}
</div> </div>
</div> </div>
</form> </form>

4
front/src/components/audio/Search.vue
View File

@ -101,7 +101,7 @@ const labels = computed(() => ({
</div> </div>
</div> </div>
<p v-else> <p v-else>
{{ $t('components.audio.Search.message.noArtists') }} {{ $t('components.audio.Search.empty.noArtists') }}
</p> </p>
</template> </template>
<template v-if="query.length > 0"> <template v-if="query.length > 0">
@ -124,7 +124,7 @@ const labels = computed(() => ({
</div> </div>
</div> </div>
<p v-else> <p v-else>
{{ $t('components.audio.Search.message.noAlbums') }} {{ $t('components.audio.Search.empty.noAlbums') }}
</p> </p>
</template> </template>
</div> </div>

26
front/src/components/audio/SearchBar.vue
View File

@ -50,12 +50,12 @@ onKeyboardShortcut(['ctrl', 'k'], () => (focused.value = true), true)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
placeholder: t('components.audio.SearchBar.placeHolderLabel'), placeholder: t('components.audio.SearchBar.placeholder.search'),
searchContent: t('components.audio.SearchBar.searchContentLabel'), searchContent: t('components.audio.SearchBar.label.search'),
artist: t('components.audio.SearchBar.artistLabel'), artist: t('components.audio.SearchBar.label.artist'),
album: t('components.audio.SearchBar.albumLabel'), album: t('components.audio.SearchBar.label.album'),
track: t('components.audio.SearchBar.trackLabel'), track: t('components.audio.SearchBar.label.track'),
tag: t('components.audio.SearchBar.tagLabel') tag: t('components.audio.SearchBar.label.tag')
})) }))
const router = useRouter() const router = useRouter()
@ -77,11 +77,11 @@ const blur = () => {
const categories = computed(() => [ const categories = computed(() => [
{ {
code: 'federation', code: 'federation',
name: t('components.audio.SearchBar.federationCategory') name: t('components.audio.SearchBar.label.category.federation')
}, },
{ {
code: 'podcasts', code: 'podcasts',
name: t('components.audio.SearchBar.podcastsCategory') name: t('components.audio.SearchBar.label.category.podcasts')
}, },
{ {
code: 'artists', code: 'artists',
@ -138,8 +138,8 @@ onMounted(() => {
showNoResults: true, showNoResults: true,
error: { error: {
// @ts-expect-error Semantic is broken // @ts-expect-error Semantic is broken
noResultsHeader: t('components.audio.SearchBar.noResultsHeader'), noResultsHeader: t('components.audio.SearchBar.header.noResults'),
noResults: t('components.audio.SearchBar.noResultsMessage') noResults: t('components.audio.SearchBar.empty.noResults')
}, },
onSelect (result, response) { onSelect (result, response) {
@ -179,7 +179,7 @@ onMounted(() => {
if (category.code === 'federation' && id) { if (category.code === 'federation' && id) {
resultsEmpty = false resultsEmpty = false
results[category.code]?.results.push({ results[category.code]?.results.push({
title: t('components.audio.SearchBar.fediverseSearchLabel'), title: t('components.audio.SearchBar.link.fediverse'),
routerUrl: { routerUrl: {
name: 'search', name: 'search',
query: { id } query: { id }
@ -190,7 +190,7 @@ onMounted(() => {
if (category.code === 'podcasts' && id) { if (category.code === 'podcasts' && id) {
resultsEmpty = false resultsEmpty = false
results[category.code]?.results.push({ results[category.code]?.results.push({
title: t('components.audio.SearchBar.rssSearchLabel'), title: t('components.audio.SearchBar.link.rss'),
routerUrl: { routerUrl: {
name: 'search', name: 'search',
query: { id, type: 'rss' } query: { id, type: 'rss' }
@ -200,7 +200,7 @@ onMounted(() => {
if (category.code === 'more') { if (category.code === 'more') {
results[category.code]?.results.push({ results[category.code]?.results.push({
title: t('components.audio.SearchBar.moreResultsLabel'), title: t('components.audio.SearchBar.link.more'),
routerUrl: { routerUrl: {
name: 'search', name: 'search',
query: { type: 'artists', q: query.value } query: { type: 'artists', q: query.value }

6
front/src/components/audio/VolumeControl.vue
View File

@ -9,9 +9,9 @@ const expanded = ref(false)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
unmute: t('components.audio.VolumeControl.unmuteLabel'), unmute: t('components.audio.VolumeControl.button.unmute'),
mute: t('components.audio.VolumeControl.muteLabel'), mute: t('components.audio.VolumeControl.button.mute'),
slider: t('components.audio.VolumeControl.sliderLabel') slider: t('components.audio.VolumeControl.label.slider')
})) }))
const { start, stop } = useTimeoutFn(() => (expanded.value = false), 500, { immediate: false }) const { start, stop } = useTimeoutFn(() => (expanded.value = false), 500, { immediate: false })

2
front/src/components/audio/album/Card.vue
View File

@ -63,7 +63,7 @@ const imageUrl = computed(() => props.album.cover?.urls.original
<span class="middle middledot symbol" /> <span class="middle middledot symbol" />
</span> </span>
<span> <span>
{{ $t('components.audio.album.Card.trackCount', album.tracks_count) }} {{ $t('components.audio.album.Card.meta.tracks', album.tracks_count) }}
</span> </span>
<play-button <play-button
class="right floated basic icon" class="right floated basic icon"

2
front/src/components/audio/album/Widget.vue
View File

@ -112,7 +112,7 @@ watch(
:class="['ui', 'basic', 'button']" :class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
{{ $t('components.audio.album.Widget.showMore') }} {{ $t('components.audio.album.Widget.button.more') }}
</button> </button>
</template> </template>
</div> </div>

4
front/src/components/audio/artist/Card.vue
View File

@ -65,12 +65,12 @@ const imageUrl = computed(() => cover.value?.urls.original
<span <span
v-if="artist.content_category === 'music'" v-if="artist.content_category === 'music'"
> >
{{ $t('components.audio.artist.Card.trackCount', artist.tracks_count) }} {{ $t('components.audio.artist.Card.meta.tracks', artist.tracks_count) }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.audio.artist.Card.episodeCount', artist.tracks_count) }} {{ $t('components.audio.artist.Card.meta.episodes', artist.tracks_count) }}
</span> </span>
<play-button <play-button
class="right floated basic icon" class="right floated basic icon"

2
front/src/components/audio/artist/Widget.vue
View File

@ -108,7 +108,7 @@ watch(
:class="['ui', 'basic', 'button']" :class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
{{ $t('components.audio.artist.Widget.showMore') }} {{ $t('components.audio.artist.Widget.button.more') }}
</button> </button>
</template> </template>
</div> </div>

2
front/src/components/audio/podcast/MobileRow.vue
View File

@ -53,7 +53,7 @@ const { isPlaying } = usePlayer()
const { activateTrack } = usePlayOptions(props) const { activateTrack } = usePlayOptions(props)
const { t } = useI18n() const { t } = useI18n()
const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.actionsButtonlabel')) const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.button.actions'))
</script> </script>
<template> <template>

26
front/src/components/audio/podcast/Modal.vue
View File

@ -60,31 +60,31 @@ const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.tr
const { t } = useI18n() const { t } = useI18n()
const favoriteButton = computed(() => isFavorite.value const favoriteButton = computed(() => isFavorite.value
? t('components.audio.podcast.Modal.removeFromFavorites') ? t('components.audio.podcast.Modal.button.removeFromFavorites')
: t('components.audio.podcast.Modal.addToFavorites') : t('components.audio.podcast.Modal.button.addToFavorites')
) )
const trackDetailsButton = computed(() => props.track.artist?.content_category === 'podcast' const trackDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
? t('components.audio.podcast.Modal.episodeDetails') ? t('components.audio.podcast.Modal.button.episodeDetails')
: t('components.audio.podcast.Modal.trackDetails') : t('components.audio.podcast.Modal.button.trackDetails')
) )
const albumDetailsButton = computed(() => props.track.artist?.content_category === 'podcast' const albumDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
? t('components.audio.podcast.Modal.seriesDetails') ? t('components.audio.podcast.Modal.button.seriesDetails')
: t('components.audio.podcast.Modal.albumDetails') : t('components.audio.podcast.Modal.button.albumDetails')
) )
const artistDetailsButton = computed(() => props.track.artist?.content_category === 'podcast' const artistDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
? t('components.audio.podcast.Modal.channelDetails') ? t('components.audio.podcast.Modal.button.channelDetails')
: t('components.audio.podcast.Modal.artistDetails') : t('components.audio.podcast.Modal.button.artistDetails')
) )
const labels = computed(() => ({ const labels = computed(() => ({
startRadio: t('components.audio.podcast.Modal.startRadio'), startRadio: t('components.audio.podcast.Modal.button.startRadio'),
playNow: t('components.audio.podcast.Modal.playNow'), playNow: t('components.audio.podcast.Modal.button.playNow'),
addToQueue: t('components.audio.podcast.Modal.addToQueue'), addToQueue: t('components.audio.podcast.Modal.button.addToQueue'),
playNext: t('components.audio.podcast.Modal.playNext'), playNext: t('components.audio.podcast.Modal.button.playNext'),
addToPlaylist: t('components.audio.podcast.Modal.addToPlaylist') addToPlaylist: t('components.audio.podcast.Modal.button.addToPlaylist')
})) }))
</script> </script>

2
front/src/components/audio/track/MobileRow.vue
View File

@ -53,7 +53,7 @@ const { isPlaying } = usePlayer()
const { activateTrack } = usePlayOptions(props) const { activateTrack } = usePlayOptions(props)
const { t } = useI18n() const { t } = useI18n()
const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.actionsButtonlabel')) const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.button.actions'))
</script> </script>
<template> <template>

26
front/src/components/audio/track/Modal.vue
View File

@ -60,31 +60,31 @@ const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.tr
const { t } = useI18n() const { t } = useI18n()
const favoriteButton = computed(() => isFavorite.value const favoriteButton = computed(() => isFavorite.value
? t('components.audio.track.Modal.removeFromFavorites') ? t('components.audio.track.Modal.button.removeFromFavorites')
: t('components.audio.track.Modal.addToFavorites') : t('components.audio.track.Modal.button.addToFavorites')
) )
const trackDetailsButton = computed(() => props.track.artist?.content_category === 'podcast' const trackDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
? t('components.audio.track.Modal.episodeDetails') ? t('components.audio.track.Modal.button.episodeDetails')
: t('components.audio.track.Modal.trackDetails') : t('components.audio.track.Modal.button.trackDetails')
) )
const albumDetailsButton = computed(() => props.track.artist?.content_category === 'podcast' const albumDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
? t('components.audio.track.Modal.seriesDetails') ? t('components.audio.track.Modal.button.seriesDetails')
: t('components.audio.track.Modal.albumDetails') : t('components.audio.track.Modal.button.albumDetails')
) )
const artistDetailsButton = computed(() => props.track.artist?.content_category === 'podcast' const artistDetailsButton = computed(() => props.track.artist?.content_category === 'podcast'
? t('components.audio.track.Modal.channelDetails') ? t('components.audio.track.Modal.button.channelDetails')
: t('components.audio.track.Modal.artistDetails') : t('components.audio.track.Modal.button.artistDetails')
) )
const labels = computed(() => ({ const labels = computed(() => ({
startRadio: t('components.audio.track.Modal.startRadio'), startRadio: t('components.audio.track.Modal.button.startRadio'),
playNow: t('components.audio.track.Modal.playNow'), playNow: t('components.audio.track.Modal.button.playNow'),
addToQueue: t('components.audio.track.Modal.addToQueue'), addToQueue: t('components.audio.track.Modal.button.addToQueue'),
playNext: t('components.audio.track.Modal.playNext'), playNext: t('components.audio.track.Modal.button.playNext'),
addToPlaylist: t('components.audio.track.Modal.addToPlaylist') addToPlaylist: t('components.audio.track.Modal.button.addToPlaylist')
})) }))
</script> </script>

6
front/src/components/audio/track/Table.vue
View File

@ -95,9 +95,9 @@ const allTracks = computed(() => {
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('components.audio.track.Table.titleLabel'), title: t('components.audio.track.Table.table.header.title'),
album: t('components.audio.track.Table.albumLabel'), album: t('components.audio.track.Table.table.header.album'),
artist: t('components.audio.track.Table.albumLabel') artist: t('components.audio.track.Table.table.header.artist')
})) }))
const isLoading = ref(false) const isLoading = ref(false)

4
front/src/components/audio/track/Widget.vue
View File

@ -201,7 +201,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="music icon" /> <i class="music icon" />
{{ $t('components.audio.track.Widget.noResultsMessage') }} {{ $t('components.audio.track.Widget.empty.noResults') }}
</div> </div>
<div <div
v-if="isLoading" v-if="isLoading"
@ -216,7 +216,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
:class="['ui', 'basic', 'button']" :class="['ui', 'basic', 'button']"
@click="fetchData(nextPage as string)" @click="fetchData(nextPage as string)"
> >
{{ $t('components.audio.track.Widget.showMore') }} {{ $t('components.audio.track.Widget.button.more') }}
</button> </button>
</template> </template>
</div> </div>

22
front/src/components/auth/ApplicationEdit.vue
View File

@ -20,7 +20,7 @@ const { t } = useI18n()
const application = ref() const application = ref()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('components.auth.ApplicationEdit.editApplicationLabel') title: t('components.auth.ApplicationEdit.title')
})) }))
const isLoading = ref(false) const isLoading = ref(false)
@ -72,17 +72,17 @@ store.state.auth.applicationSecret = undefined
</div> </div>
<template v-else> <template v-else>
<router-link :to="{name: 'settings'}"> <router-link :to="{name: 'settings'}">
{{ $t('components.auth.ApplicationEdit.backToSettingsLink') }} {{ $t('components.auth.ApplicationEdit.link.settings') }}
</router-link> </router-link>
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.auth.ApplicationEdit.appDetailsHeader') }} {{ $t('components.auth.ApplicationEdit.header.appDetails') }}
</h2> </h2>
<div class="ui form"> <div class="ui form">
<p> <p>
{{ $t('components.auth.ApplicationEdit.appDetailsDescription') }} {{ $t('components.auth.ApplicationEdit.help.appDetails') }}
</p> </p>
<div class="field"> <div class="field">
<label for="copy-id">{{ $t('components.auth.ApplicationEdit.appIdLabel') }}</label> <label for="copy-id">{{ $t('components.auth.ApplicationEdit.label.appId') }}</label>
<copy-input <copy-input
id="copy-id" id="copy-id"
:value="application.client_id" :value="application.client_id"
@ -94,14 +94,14 @@ store.state.auth.applicationSecret = undefined
> >
<div class="ui small warning message"> <div class="ui small warning message">
<h3 class="header"> <h3 class="header">
{{ $t('components.auth.ApplicationEdit.appSecretWarningTitle') }} {{ $t('components.auth.ApplicationEdit.header.appSecretWarning') }}
</h3> </h3>
<p> <p>
{{ $t('components.auth.ApplicationEdit.appSecretWarningMessage') }} {{ $t('components.auth.ApplicationEdit.message.appSecretWarning') }}
</p> </p>
</div> </div>
<label for="copy-secret">{{ $t('components.auth.ApplicationEdit.appSecretLabel') }}</label> <label for="copy-secret">{{ $t('components.auth.ApplicationEdit.label.appSecret') }}</label>
<copy-input <copy-input
id="copy-secret" id="copy-secret"
:value="secret" :value="secret"
@ -111,7 +111,7 @@ store.state.auth.applicationSecret = undefined
v-if="application.token != undefined" v-if="application.token != undefined"
class="field" class="field"
> >
<label for="copy-secret">{{ $t('components.auth.ApplicationEdit.accessTokenLabel') }}</label> <label for="copy-secret">{{ $t('components.auth.ApplicationEdit.label.accessToken') }}</label>
<copy-input <copy-input
id="copy-secret" id="copy-secret"
:value="application.token" :value="application.token"
@ -121,12 +121,12 @@ store.state.auth.applicationSecret = undefined
@click.prevent="refreshToken" @click.prevent="refreshToken"
> >
<i class="refresh icon" /> <i class="refresh icon" />
{{ $t('components.auth.ApplicationEdit.regenerateTokenLink') }} {{ $t('components.auth.ApplicationEdit.button.regenerateToken') }}
</a> </a>
</div> </div>
</div> </div>
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.auth.ApplicationEdit.editAppHeader') }} {{ $t('components.auth.ApplicationEdit.header.editApp') }}
</h2> </h2>
<application-form <application-form
:app="application" :app="application"

24
front/src/components/auth/ApplicationForm.vue
View File

@ -86,14 +86,14 @@ const toggleAllScopes = (parent: typeof allScopes['value'][number]) => {
const scopeParents = computedEager(() => [ const scopeParents = computedEager(() => [
{ {
id: 'read', id: 'read',
label: t('components.auth.ApplicationForm.readScopeLabel'), label: t('components.auth.ApplicationForm.label.scopes.read.label'),
description: t('components.auth.ApplicationForm.readScopeDescription'), description: t('components.auth.ApplicationForm.label.scopes.read.description'),
value: scopeArray.value.includes('read') value: scopeArray.value.includes('read')
}, },
{ {
id: 'write', id: 'write',
label: t('components.auth.ApplicationForm.writeScopeLabel'), label: t('components.auth.ApplicationForm.label.scopes.write.label'),
description: t('components.auth.ApplicationForm.writeScopeDescription'), description: t('components.auth.ApplicationForm.label.scopes.write.description'),
value: scopeArray.value.includes('write') value: scopeArray.value.includes('write')
} }
]) ])
@ -120,7 +120,7 @@ const allScopes = computed(() => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.ApplicationForm.saveFailureMessage') }} {{ $t('components.auth.ApplicationForm.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -132,7 +132,7 @@ const allScopes = computed(() => {
</ul> </ul>
</div> </div>
<div class="ui field"> <div class="ui field">
<label for="application-name">{{ $t('components.auth.ApplicationForm.applicationNameLabel') }}</label> <label for="application-name">{{ $t('components.auth.ApplicationForm.label.name') }}</label>
<input <input
id="application-name" id="application-name"
v-model="fields.name" v-model="fields.name"
@ -142,7 +142,7 @@ const allScopes = computed(() => {
> >
</div> </div>
<div class="ui field"> <div class="ui field">
<label for="redirect-uris">{{ $t('components.auth.ApplicationForm.redirectUrisLabel') }}</label> <label for="redirect-uris">{{ $t('components.auth.ApplicationForm.label.redirectUri') }}</label>
<input <input
id="redirect-uris" id="redirect-uris"
v-model="fields.redirect_uris" v-model="fields.redirect_uris"
@ -150,13 +150,13 @@ const allScopes = computed(() => {
type="text" type="text"
> >
<p class="help"> <p class="help">
{{ $t('components.auth.ApplicationForm.redirectUrisHelp') }} {{ $t('components.auth.ApplicationForm.help.redirectUri') }}
</p> </p>
</div> </div>
<div class="ui field"> <div class="ui field">
<label>{{ $t('components.auth.ApplicationForm.scopesLabel') }}</label> <label>{{ $t('components.auth.ApplicationForm.label.scopes.label') }}</label>
<p> <p>
{{ $t('components.auth.ApplicationForm.scopesDescription') }} {{ $t('components.auth.ApplicationForm.label.scopes.description') }}
</p> </p>
<div class="ui stackable two column grid"> <div class="ui stackable two column grid">
<div <div
@ -205,12 +205,12 @@ const allScopes = computed(() => {
<span <span
v-if="app !== null" v-if="app !== null"
> >
{{ $t('components.auth.ApplicationForm.updateButtonLabel') }} {{ $t('components.auth.ApplicationForm.button.update') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.auth.ApplicationForm.createButtonLabel') }} {{ $t('components.auth.ApplicationForm.button.create') }}
</span> </span>
</button> </button>
</form> </form>

2
front/src/components/auth/ApplicationNew.vue
View File

@ -55,7 +55,7 @@ const created = (application: Application) => {
<div class="ui vertical stripe segment"> <div class="ui vertical stripe segment">
<section class="ui text container"> <section class="ui text container">
<router-link :to="{name: 'settings'}"> <router-link :to="{name: 'settings'}">
{{ $t('components.auth.ApplicationNew.backToSettingsLink') }} {{ $t('components.auth.ApplicationNew.link.settings') }}
</router-link> </router-link>
<h2 class="ui header"> <h2 class="ui header">
{{ title }} {{ title }}

24
front/src/components/auth/Authorize.vue
View File

@ -119,7 +119,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<div class="ui small text container"> <div class="ui small text container">
<h2> <h2>
<i class="lock open icon" />{{ $t('components.auth.Authorize.authorizeThirdPartyAppHeader') }} <i class="lock open icon" />{{ $t('components.auth.Authorize.header.authorize') }}
</h2> </h2>
<div <div
v-if="errors.length > 0" v-if="errors.length > 0"
@ -130,13 +130,13 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
v-if="application" v-if="application"
class="header" class="header"
> >
{{ $t('components.auth.Authorize.authorizeFailureMessage') }} {{ $t('components.auth.Authorize.header.authorizeFailure') }}
</h4> </h4>
<h4 <h4
v-else v-else
class="header" class="header"
> >
{{ $t('components.auth.Authorize.fetchDataFailureMessage') }} {{ $t('components.auth.Authorize.header.fetchFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -159,7 +159,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
@submit.prevent="submit" @submit.prevent="submit"
> >
<h3> <h3>
{{ $t('components.auth.Authorize.appAccessHeader', {app_name: application.name}) }} {{ $t('components.auth.Authorize.header.access', {app_name: application.name}) }}
</h3> </h3>
<h4 <h4
@ -172,20 +172,20 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
:class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']" :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
> >
<i class="pencil icon" /> <i class="pencil icon" />
{{ $t('components.auth.Authorize.writeOnlyScopeHeader') }} {{ $t('components.auth.Authorize.header.writeOnly') }}
</span> </span>
<span <span
v-else-if="!topic.write && topic.read" v-else-if="!topic.write && topic.read"
:class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']" :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
> >
{{ $t('components.auth.Authorize.writeOnlyScopeHeader') }} {{ $t('components.auth.Authorize.header.readOnly') }}
</span> </span>
<span <span
v-else-if="topic.write && topic.read" v-else-if="topic.write && topic.read"
:class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']" :class="['ui', 'basic', 'right floated', 'tiny', 'vertically-spaced component-label label']"
> >
<i class="pencil icon" /> <i class="pencil icon" />
{{ $t('components.auth.Authorize.allScopesHeader') }} {{ $t('components.auth.Authorize.header.allScopes') }}
</span> </span>
<i :class="[topic.icon, 'icon']" /> <i :class="[topic.icon, 'icon']" />
<div class="content"> <div class="content">
@ -196,7 +196,7 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
</div> </div>
</h4> </h4>
<div v-if="unknownRequestedScopes.length > 0"> <div v-if="unknownRequestedScopes.length > 0">
<p><strong>{{ $t('components.auth.Authorize.unknownPermissionsMessage') }}</strong></p> <p><strong>{{ $t('components.auth.Authorize.message.unknownPermissions') }}</strong></p>
<ul <ul
v-for="(unknownscope, key) in unknownRequestedScopes" v-for="(unknownscope, key) in unknownRequestedScopes"
:key="key" :key="key"
@ -209,21 +209,21 @@ whenever(() => props.clientId, fetchApplication, { immediate: true })
type="submit" type="submit"
> >
<i class="lock open icon" /> <i class="lock open icon" />
{{ $t('components.auth.Authorize.authorizeAppButton', { app: application.name }) }} {{ $t('components.auth.Authorize.button.authorize', { app: application.name }) }}
</button> </button>
<p <p
v-if="redirectUri === 'urn:ietf:wg:oauth:2.0:oob'" v-if="redirectUri === 'urn:ietf:wg:oauth:2.0:oob'"
> >
{{ $t('components.auth.Authorize.copyCodeHelp') }} {{ $t('components.auth.Authorize.help.copyCode') }}
</p> </p>
<p <p
v-else v-else
> >
{{ $t('components.auth.Authorize.redirectHelp', {url: redirectUri}) }} {{ $t('components.auth.Authorize.help.redirect', {url: redirectUri}) }}
</p> </p>
</form> </form>
<div v-else-if="code"> <div v-else-if="code">
<p><strong>{{ $t('components.auth.Authorize.copyCodeDescription') }}</strong></p> <p><strong>{{ $t('components.auth.Authorize.help.pasteCode') }}</strong></p>
<copy-input :value="code" /> <copy-input :value="code" />
</div> </div>
</div> </div>

21
front/src/components/auth/LoginForm.vue
View File

@ -30,7 +30,7 @@ const credentials = reactive({
}) })
const labels = computed(() => ({ const labels = computed(() => ({
usernamePlaceholder: t('components.auth.LoginForm.usernamePlaceholder') usernamePlaceholder: t('components.auth.LoginForm.placeholder.username')
})) }))
const username = ref() const username = ref()
@ -75,14 +75,14 @@ const submit = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.LoginForm.loginFailureHeader') }} {{ $t('components.auth.LoginForm.header.loginFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value"> <li v-if="errors[0] == 'invalid_credentials' && $store.state.instance.settings.moderation.signup_approval_enabled.value">
{{ $t('components.auth.LoginForm.approvalRequiredHelp') }} {{ $t('components.auth.LoginForm.help.approvalRequired') }}
</li> </li>
<li v-else-if="errors[0] == 'invalid_credentials'"> <li v-else-if="errors[0] == 'invalid_credentials'">
{{ $t('components.auth.LoginForm.invalidCredentialsHelp') }} {{ $t('components.auth.LoginForm.help.invalidCredentials') }}
</li> </li>
<li v-else> <li v-else>
{{ errors[0] }} {{ errors[0] }}
@ -92,11 +92,11 @@ const submit = async () => {
<template v-if="domain === $store.getters['instance/domain']"> <template v-if="domain === $store.getters['instance/domain']">
<div class="field"> <div class="field">
<label for="username-field"> <label for="username-field">
{{ $t('components.auth.LoginForm.usernameFieldLabel') }} {{ $t('components.auth.LoginForm.label.username') }}
<template v-if="showSignup"> <template v-if="showSignup">
<span class="middle pipe symbol" /> <span class="middle pipe symbol" />
<router-link :to="{path: '/signup'}"> <router-link :to="{path: '/signup'}">
{{ $t('components.auth.LoginForm.createAccountLink') }} {{ $t('components.auth.LoginForm.link.createAccount') }}
</router-link> </router-link>
</template> </template>
</label> </label>
@ -113,12 +113,13 @@ const submit = async () => {
</div> </div>
<div class="field"> <div class="field">
<label for="password-field"> <label for="password-field">
{{ $t('components.auth.LoginForm.passwordFieldLabel') }} {{ $t('components.auth.LoginForm.label.password') }}
<span class="middle pipe symbol" />
<router-link <router-link
tabindex="1" tabindex="1"
:to="{name: 'auth.password-reset', query: {email: credentials.username}}" :to="{name: 'auth.password-reset', query: {email: credentials.username}}"
> >
{{ $t('components.auth.LoginForm.resetPasswordLink') }} {{ $t('components.auth.LoginForm.link.resetPassword') }}
</router-link> </router-link>
</label> </label>
<password-input <password-input
@ -130,14 +131,14 @@ const submit = async () => {
</template> </template>
<template v-else> <template v-else>
<p> <p>
{{ $t('components.auth.LoginForm.redirectMessage', { domain: $store.getters['instance/domain'] }) }} {{ $t('components.auth.LoginForm.message.redirect', { domain: $store.getters['instance/domain'] }) }}
</p> </p>
</template> </template>
<button <button
:class="['ui', {'loading': isLoading}, 'right', 'floated', buttonClasses, 'button']" :class="['ui', {'loading': isLoading}, 'right', 'floated', buttonClasses, 'button']"
type="submit" type="submit"
> >
{{ $t('components.auth.LoginForm.loginButton') }} {{ $t('components.auth.LoginForm.button.login') }}
</button> </button>
</form> </form>
</template> </template>

10
front/src/components/auth/Logout.vue
View File

@ -19,16 +19,16 @@ const labels = computed(() => ({
class="ui small text container" class="ui small text container"
> >
<h2> <h2>
{{ $t('components.auth.Logout.confirmHeader') }} {{ $t('components.auth.Logout.header.confirm') }}
</h2> </h2>
<p> <p>
{{ $t('components.auth.Logout.loggedInUsername', { username: $store.state.auth.username }) }} {{ $t('components.auth.Logout.message.loggedIn', { username: $store.state.auth.username }) }}
</p> </p>
<button <button
class="ui button" class="ui button"
@click="$store.dispatch('auth/logout')" @click="$store.dispatch('auth/logout')"
> >
{{ $t('components.auth.Logout.confirmLogoutButton') }} {{ $t('components.auth.Logout.button.logout') }}
</button> </button>
</div> </div>
<div <div
@ -36,13 +36,13 @@ const labels = computed(() => ({
class="ui small text container" class="ui small text container"
> >
<h2> <h2>
{{ $t('components.auth.Logout.loggedOutHeader') }} {{ $t('components.auth.Logout.header.unauthenticated') }}
</h2> </h2>
<router-link <router-link
to="/login" to="/login"
class="ui button" class="ui button"
> >
{{ $t('components.auth.Logout.logInLink') }} {{ $t('components.auth.Logout.link.login') }}
</router-link> </router-link>
</div> </div>
</section> </section>

14
front/src/components/auth/Plugin.vue
View File

@ -69,7 +69,7 @@ const submitAndScan = async () => {
target="_blank" target="_blank"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.auth.Plugin.documentationLink') }} {{ $t('components.auth.Plugin.link.documentation') }}
</a> </a>
</template> </template>
<div class="ui clearing hidden divider" /> <div class="ui clearing hidden divider" />
@ -79,7 +79,7 @@ const submitAndScan = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.Plugin.saveFailureHeader') }} {{ $t('components.auth.Plugin.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -97,7 +97,7 @@ const submitAndScan = async () => {
v-model="enabled" v-model="enabled"
type="checkbox" type="checkbox"
> >
<label :for="`${plugin.name}-enabled`">{{ $t('components.auth.Plugin.pluginEnabledLabel') }}</label> <label :for="`${plugin.name}-enabled`">{{ $t('components.auth.Plugin.label.pluginEnabled') }}</label>
</div> </div>
</div> </div>
<div class="ui clearing hidden divider" /> <div class="ui clearing hidden divider" />
@ -105,7 +105,7 @@ const submitAndScan = async () => {
v-if="plugin.source" v-if="plugin.source"
class="field" class="field"
> >
<label for="plugin-library">{{ $t('components.auth.Plugin.libraryLabel') }}</label> <label for="plugin-library">{{ $t('components.auth.Plugin.label.library') }}</label>
<select <select
id="plugin-library" id="plugin-library"
v-model="values['library']" v-model="values['library']"
@ -119,7 +119,7 @@ const submitAndScan = async () => {
</option> </option>
</select> </select>
<div> <div>
{{ $t('components.auth.Plugin.libraryDescription') }} {{ $t('components.auth.Plugin.description.library') }}
</div> </div>
</div> </div>
<template v-if="(plugin.conf?.length ?? 0) > 0"> <template v-if="(plugin.conf?.length ?? 0) > 0">
@ -194,14 +194,14 @@ const submitAndScan = async () => {
type="submit" type="submit"
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']" :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
> >
{{ $t('components.auth.Plugin.saveButton') }} {{ $t('components.auth.Plugin.button.save') }}
</button> </button>
<button <button
v-if="plugin.source" v-if="plugin.source"
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']" :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
@click.prevent="submitAndScan" @click.prevent="submitAndScan"
> >
{{ $t('components.auth.Plugin.scanButton') }} {{ $t('components.auth.Plugin.button.scan') }}
</button> </button>
<div class="ui clearing hidden divider" /> <div class="ui clearing hidden divider" />
</form> </form>

140
front/src/components/auth/Settings.vue
View File

@ -224,7 +224,7 @@ const deleteAccount = async () => {
await axios.delete('users/me/', { data: payload }) await axios.delete('users/me/', { data: payload })
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('components.auth.Settings.deletionRequest'), content: t('components.auth.Settings.message.confirmDelete'),
date: new Date() date: new Date()
}) })
@ -276,7 +276,7 @@ fetchOwnedApps()
<div class="ui vertical stripe segment"> <div class="ui vertical stripe segment">
<section class="ui text container"> <section class="ui text container">
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.auth.Settings.accountSettingsHeader') }} {{ $t('components.auth.Settings.header.accountSettings') }}
</h2> </h2>
<form <form
class="ui form" class="ui form"
@ -287,7 +287,7 @@ fetchOwnedApps()
class="ui positive message" class="ui positive message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.Settings.settingsUpdatedHeader') }} {{ $t('components.auth.Settings.header.settingsUpdated') }}
</h4> </h4>
</div> </div>
<div <div
@ -296,7 +296,7 @@ fetchOwnedApps()
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.Settings.settingsUpdateFailureHeader') }} {{ $t('components.auth.Settings.header.updateFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -340,14 +340,14 @@ fetchOwnedApps()
:class="['ui', { loading: isLoading }, 'button']" :class="['ui', { loading: isLoading }, 'button']"
type="submit" type="submit"
> >
{{ $t('components.auth.Settings.updateSettingsButton') }} {{ $t('components.auth.Settings.button.updateSettings') }}
</button> </button>
</form> </form>
</section> </section>
<section class="ui text container"> <section class="ui text container">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.auth.Settings.avatarHeader') }} {{ $t('components.auth.Settings.header.avatar') }}
</h2> </h2>
<div class="ui form"> <div class="ui form">
<div <div
@ -356,7 +356,7 @@ fetchOwnedApps()
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.Settings.avatarSaveFailureHeader') }} {{ $t('components.auth.Settings.header.avatarFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -373,7 +373,7 @@ fetchOwnedApps()
@update:model-value="submitAvatar($event)" @update:model-value="submitAvatar($event)"
@delete="avatar = {uuid: null}" @delete="avatar = {uuid: null}"
> >
{{ $t('components.auth.Settings.avatarInputLabel') }} {{ $t('components.auth.Settings.label.avatar') }}
</attachment-input> </attachment-input>
</div> </div>
</section> </section>
@ -381,10 +381,10 @@ fetchOwnedApps()
<section class="ui text container"> <section class="ui text container">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.auth.Settings.changePasswordHeader') }} {{ $t('components.auth.Settings.header.changePassword') }}
</h2> </h2>
<div class="ui message"> <div class="ui message">
{{ $t('components.auth.Settings.changePasswordMessage') }}&nbsp;{{ $t('components.auth.Settings.changePasswordMessageContinued') }} {{ $t('components.auth.Settings.description.changePassword.paragraph1') }}&nbsp;{{ $t('components.auth.Settings.description.changePassword.paragraph2') }}
</div> </div>
<form <form
class="ui form" class="ui form"
@ -396,16 +396,16 @@ fetchOwnedApps()
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.Settings.changePasswordFailureMessage') }} {{ $t('components.auth.Settings.header.passwordFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li v-if="passwordError == 'invalid_credentials'"> <li v-if="passwordError == 'invalid_credentials'">
{{ $t('components.auth.Settings.changePasswordHelp') }} {{ $t('components.auth.Settings.help.changePassword') }}
</li> </li>
</ul> </ul>
</div> </div>
<div class="field"> <div class="field">
<label for="old-password-field">{{ $t('components.auth.Settings.currentPasswordLabel') }}</label> <label for="old-password-field">{{ $t('components.auth.Settings.label.currentPassword') }}</label>
<password-input <password-input
v-model="credentials.oldPassword" v-model="credentials.oldPassword"
field-id="old-password-field" field-id="old-password-field"
@ -413,7 +413,7 @@ fetchOwnedApps()
/> />
</div> </div>
<div class="field"> <div class="field">
<label for="new-password-field">{{ $t('components.auth.Settings.newPasswordLabel') }}</label> <label for="new-password-field">{{ $t('components.auth.Settings.label.newPassword') }}</label>
<password-input <password-input
v-model="credentials.newPassword" v-model="credentials.newPassword"
field-id="new-password-field" field-id="new-password-field"
@ -424,30 +424,30 @@ fetchOwnedApps()
:class="['ui', {'loading': isLoadingPassword}, {disabled: !credentials.newPassword || !credentials.oldPassword}, 'warning', 'button']" :class="['ui', {'loading': isLoadingPassword}, {disabled: !credentials.newPassword || !credentials.oldPassword}, 'warning', 'button']"
:action="submitPassword" :action="submitPassword"
> >
{{ $t('components.auth.Settings.changePasswordButton') }} {{ $t('components.auth.Settings.button.password') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.auth.Settings.changePasswordModalHeader') }} {{ $t('components.auth.Settings.modal.changePassword.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
{{ $t('components.auth.Settings.changePasswordWarning') }} {{ $t('components.auth.Settings.modal.changePassword.content.warning') }}
</p> </p>
<ul> <ul>
<li> <li>
{{ $t('components.auth.Settings.changePasswordLogout') }} {{ $t('components.auth.Settings.modal.changePassword.content.logout') }}
</li> </li>
<li> <li>
{{ $t('components.auth.Settings.changePasswordSubsonic') }} {{ $t('components.auth.Settings.modal.changePassword.content.subsonic') }}
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
{{ $t('components.auth.Settings.disableSubsonicMessage') }} {{ $t('components.auth.Settings.button.disableSubsonic') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>
@ -464,11 +464,11 @@ fetchOwnedApps()
<h2 class="ui header"> <h2 class="ui header">
<i class="eye slash outline icon" /> <i class="eye slash outline icon" />
<div class="content"> <div class="content">
{{ $t('components.auth.Settings.contentFiltersHeader') }} {{ $t('components.auth.Settings.header.contentFilters') }}
</div> </div>
</h2> </h2>
<p> <p>
{{ $t('components.auth.Settings.contentFiltersDescription') }} {{ $t('components.auth.Settings.description.contentFilters') }}
</p> </p>
<button <button
@ -476,19 +476,19 @@ fetchOwnedApps()
@click="$store.dispatch('moderation/fetchContentFilters')" @click="$store.dispatch('moderation/fetchContentFilters')"
> >
<i class="refresh icon" />&nbsp; <i class="refresh icon" />&nbsp;
{{ $t('components.auth.Settings.refreshButton') }} {{ $t('components.auth.Settings.button.refresh') }}
</button> </button>
<h3 class="ui header"> <h3 class="ui header">
{{ $t('components.auth.Settings.hiddenArtistsHeader') }} {{ $t('components.auth.Settings.header.hiddenArtists') }}
</h3> </h3>
<table class="ui compact very basic unstackable table"> <table class="ui compact very basic unstackable table">
<thead> <thead>
<tr> <tr>
<th> <th>
{{ $t('components.auth.Settings.artistNameTableHeader') }} {{ $t('components.auth.Settings.table.artists.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.auth.Settings.filterCreationDateTableHeader') }} {{ $t('components.auth.Settings.table.artists.header.creationDate') }}
</th> </th>
<th /> <th />
</tr> </tr>
@ -511,7 +511,7 @@ fetchOwnedApps()
class="ui basic tiny button" class="ui basic tiny button"
@click="$store.dispatch('moderation/deleteContentFilter', filter.uuid)" @click="$store.dispatch('moderation/deleteContentFilter', filter.uuid)"
> >
{{ $t('components.auth.Settings.filterDeleteButton') }} {{ $t('components.auth.Settings.button.delete') }}
</button> </button>
</td> </td>
</tr> </tr>
@ -526,18 +526,18 @@ fetchOwnedApps()
<h2 class="ui header"> <h2 class="ui header">
<i class="open lock icon" /> <i class="open lock icon" />
<div class="content"> <div class="content">
{{ $t('components.auth.Settings.authorizedAppsHeader') }} {{ $t('components.auth.Settings.header.authorizedApps') }}
</div> </div>
</h2> </h2>
<p> <p>
{{ $t('components.auth.Settings.authorizedAppsDescription') }} {{ $t('components.auth.Settings.description.authorizedApps') }}
</p> </p>
<button <button
:class="['ui', 'icon', { loading: isLoadingApps }, 'button']" :class="['ui', 'icon', { loading: isLoadingApps }, 'button']"
@click="fetchApps()" @click="fetchApps()"
> >
<i class="refresh icon" />&nbsp; <i class="refresh icon" />&nbsp;
{{ $t('components.auth.Settings.refreshButton') }} {{ $t('components.auth.Settings.button.refresh') }}
</button> </button>
<table <table
v-if="apps.length > 0" v-if="apps.length > 0"
@ -546,10 +546,10 @@ fetchOwnedApps()
<thead> <thead>
<tr> <tr>
<th> <th>
{{ $t('components.auth.Settings.appNameTableHeader') }} {{ $t('components.auth.Settings.table.authorizedApps.header.application') }}
</th> </th>
<th> <th>
{{ $t('components.auth.Settings.appPermissionsTableHeader') }} {{ $t('components.auth.Settings.table.authorizedApps.header.permissions') }}
</th> </th>
<th /> <th />
</tr> </tr>
@ -570,20 +570,20 @@ fetchOwnedApps()
:class="['ui', 'tiny', 'danger', { loading: isRevoking.has(app.client_id) }, 'button']" :class="['ui', 'tiny', 'danger', { loading: isRevoking.has(app.client_id) }, 'button']"
@confirm="revokeApp(app.client_id)" @confirm="revokeApp(app.client_id)"
> >
{{ $t('components.auth.Settings.permissionDeleteButton') }} {{ $t('components.auth.Settings.button.revoke') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.auth.Settings.revokePermissionModalMessage', {app: app.name}) }} {{ $t('components.auth.Settings.modal.revokeApp.header', {app: app.name}) }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<p> <p>
{{ $t('components.auth.Settings.revokePermissionModalWarning') }} {{ $t('components.auth.Settings.modal.revokeApp.content.warning') }}
</p> </p>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
{{ $t('components.auth.Settings.revokeAccessButton') }} {{ $t('components.auth.Settings.button.revokeAccess') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>
@ -593,9 +593,9 @@ fetchOwnedApps()
</table> </table>
<empty-state v-else> <empty-state v-else>
<template #title> <template #title>
{{ $t('components.auth.Settings.emptyAppMessage') }} {{ $t('components.auth.Settings.header.noApps') }}
</template> </template>
{{ $t('components.auth.Settings.emptyAppHelp') }} {{ $t('components.auth.Settings.help.noApps') }}
</empty-state> </empty-state>
</section> </section>
<section <section
@ -606,17 +606,17 @@ fetchOwnedApps()
<h2 class="ui header"> <h2 class="ui header">
<i class="code icon" /> <i class="code icon" />
<div class="content"> <div class="content">
{{ $t('components.auth.Settings.personalAppsHeader') }} {{ $t('components.auth.Settings.header.yourApps') }}
</div> </div>
</h2> </h2>
<p> <p>
{{ $t('components.auth.Settings.personalAppsDescription') }} {{ $t('components.auth.Settings.description.yourApps') }}
</p> </p>
<router-link <router-link
class="ui success button" class="ui success button"
:to="{name: 'settings.applications.new'}" :to="{name: 'settings.applications.new'}"
> >
{{ $t('components.auth.Settings.newAppLink') }} {{ $t('components.auth.Settings.link.newApp') }}
</router-link> </router-link>
<table <table
v-if="ownedApps.length > 0" v-if="ownedApps.length > 0"
@ -625,13 +625,13 @@ fetchOwnedApps()
<thead> <thead>
<tr> <tr>
<th> <th>
{{ $t('components.auth.Settings.personalAppNameTableHeader') }} {{ $t('components.auth.Settings.table.yourApps.header.application') }}
</th> </th>
<th> <th>
{{ $t('components.auth.Settings.personalAppScopesTableHeader') }} {{ $t('components.auth.Settings.table.yourApps.header.scopes') }}
</th> </th>
<th> <th>
{{ $t('components.auth.Settings.personalAppCreationDateTableHeader') }} {{ $t('components.auth.Settings.table.yourApps.header.creationDate') }}
</th> </th>
<th /> <th />
</tr> </tr>
@ -657,25 +657,25 @@ fetchOwnedApps()
class="ui tiny success button" class="ui tiny success button"
:to="{name: 'settings.applications.edit', params: {id: app.client_id}}" :to="{name: 'settings.applications.edit', params: {id: app.client_id}}"
> >
{{ $t('components.auth.Settings.personalAppEditLink') }} {{ $t('components.auth.Settings.button.edit') }}
</router-link> </router-link>
<dangerous-button <dangerous-button
:class="['ui', 'tiny', 'danger', { loading: isDeleting.has(app.client_id) }, 'button']" :class="['ui', 'tiny', 'danger', { loading: isDeleting.has(app.client_id) }, 'button']"
@confirm="deleteApp(app.client_id)" @confirm="deleteApp(app.client_id)"
> >
{{ $t('components.auth.Settings.personalAppDeleteLink') }} {{ $t('components.auth.Settings.button.remove') }}
<template #modal-header> <template #modal-header>
<p /> <p />
{{ $t('components.auth.Settings.deletePersonalAppModalMessage', {app: app.name}) }} {{ $t('components.auth.Settings.modal.deleteApp.header', {app: app.name}) }}
</template> </template>
<template #modal-content> <template #modal-content>
<p> <p>
{{ $t('components.auth.Settings.deletePersonalAppModalWarning') }} {{ $t('components.auth.Settings.modal.deleteApp.content.warning') }}
</p> </p>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
{{ $t('components.auth.Settings.deletePersonalAppButton') }} {{ $t('components.auth.Settings.button.removeApp') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>
@ -685,9 +685,9 @@ fetchOwnedApps()
</table> </table>
<empty-state v-else> <empty-state v-else>
<template #title> <template #title>
{{ $t('components.auth.Settings.emptyPersonalAppMessage') }} {{ $t('components.auth.Settings.header.noPersonalApps') }}
</template> </template>
{{ $t('components.auth.Settings.emptyPersonalAppHelp') }} {{ $t('components.auth.Settings.help.noPersonalApps') }}
</empty-state> </empty-state>
</section> </section>
@ -699,17 +699,17 @@ fetchOwnedApps()
<h2 class="ui header"> <h2 class="ui header">
<i class="code icon" /> <i class="code icon" />
<div class="content"> <div class="content">
{{ $t('components.auth.Settings.pluginsHeader') }} {{ $t('components.auth.Settings.header.plugins') }}
</div> </div>
</h2> </h2>
<p> <p>
{{ $t('components.auth.Settings.pluginsDescription') }} {{ $t('components.auth.Settings.description.plugins') }}
</p> </p>
<router-link <router-link
class="ui success button" class="ui success button"
:to="{name: 'settings.plugins'}" :to="{name: 'settings.plugins'}"
> >
{{ $t('components.auth.Settings.managePluginsLink') }} {{ $t('components.auth.Settings.link.managePlugins') }}
</router-link> </router-link>
</section> </section>
<section class="ui text container"> <section class="ui text container">
@ -717,14 +717,14 @@ fetchOwnedApps()
<h2 class="ui header"> <h2 class="ui header">
<i class="comment icon" /> <i class="comment icon" />
<div class="content"> <div class="content">
{{ $t('components.auth.Settings.changeEmailHeader') }} {{ $t('components.auth.Settings.header.changeEmail') }}
</div> </div>
</h2> </h2>
<p> <p>
{{ $t('components.auth.Settings.changeEmailDescription') }} {{ $t('components.auth.Settings.description.changeEmail') }}
</p> </p>
<p> <p>
{{ $t('components.auth.Settings.currentEmailLabel', { email: email }) }} {{ $t('components.auth.Settings.message.currentEmail', { email: email }) }}
</p> </p>
<form <form
class="ui form" class="ui form"
@ -736,7 +736,7 @@ fetchOwnedApps()
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.Settings.changeEmailFailureMessage') }} {{ $t('components.auth.Settings.header.emailFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -748,7 +748,7 @@ fetchOwnedApps()
</ul> </ul>
</div> </div>
<div class="field"> <div class="field">
<label for="new-email">{{ $t('components.auth.Settings.newEmailLabel') }}</label> <label for="new-email">{{ $t('components.auth.Settings.label.newEmail') }}</label>
<input <input
id="new-email" id="new-email"
v-model="newEmail" v-model="newEmail"
@ -757,7 +757,7 @@ fetchOwnedApps()
> >
</div> </div>
<div class="field"> <div class="field">
<label for="current-password-field-email">{{ $t('components.auth.Settings.currentPasswordLabel') }}</label> <label for="current-password-field-email">{{ $t('components.auth.Settings.label.password') }}</label>
<password-input <password-input
v-model="emailPassword" v-model="emailPassword"
field-id="current-password-field-email" field-id="current-password-field-email"
@ -768,7 +768,7 @@ fetchOwnedApps()
type="submit" type="submit"
class="ui button" class="ui button"
> >
{{ $t('components.auth.Settings.updateEmailButton') }} {{ $t('components.auth.Settings.button.update') }}
</button> </button>
</form> </form>
</section> </section>
@ -777,17 +777,17 @@ fetchOwnedApps()
<h2 class="ui header"> <h2 class="ui header">
<i class="trash icon" /> <i class="trash icon" />
<div class="content"> <div class="content">
{{ $t('components.auth.Settings.deleteAccountHeader') }} {{ $t('components.auth.Settings.header.deleteAccount') }}
</div> </div>
</h2> </h2>
<p> <p>
{{ $t('components.auth.Settings.deleteAccountDescription') }} {{ $t('components.auth.Settings.description.deleteAccount') }}
</p> </p>
<div <div
role="alert" role="alert"
class="ui warning message" class="ui warning message"
> >
{{ $t('components.auth.Settings.deleteAccountWarning') }} {{ $t('components.auth.Settings.warning.deleteAccount') }}
</div> </div>
<div class="ui form"> <div class="ui form">
<div <div
@ -796,7 +796,7 @@ fetchOwnedApps()
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.Settings.deleteAccountFailureMessage') }} {{ $t('components.auth.Settings.header.accountFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -808,7 +808,7 @@ fetchOwnedApps()
</ul> </ul>
</div> </div>
<div class="field"> <div class="field">
<label for="current-password-field">{{ $t('components.auth.Settings.currentPasswordLabel') }}</label> <label for="current-password-field">{{ $t('components.auth.Settings.label.currentPassword') }}</label>
<password-input <password-input
v-model="deleteAccountPassword" v-model="deleteAccountPassword"
field-id="current-password-field" field-id="current-password-field"
@ -819,22 +819,22 @@ fetchOwnedApps()
:class="['ui', {'loading': isDeletingAccount}, {disabled: !deleteAccountPassword}, {danger: deleteAccountPassword}, 'button']" :class="['ui', {'loading': isDeletingAccount}, {disabled: !deleteAccountPassword}, {danger: deleteAccountPassword}, 'button']"
:action="deleteAccount" :action="deleteAccount"
> >
{{ $t('components.auth.Settings.deleteAccountButton') }} {{ $t('components.auth.Settings.button.deleteAccount') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.auth.Settings.deleteAccountConfirmationMessage') }} {{ $t('components.auth.Settings.modal.deleteAccount.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
{{ $t('components.auth.Settings.deleteAccountConfirmationWarning') }} {{ $t('components.auth.Settings.modal.deleteAccount.content.warning') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
{{ $t('components.auth.Settings.deleteAccountConfirmButton') }} {{ $t('components.auth.Settings.button.deleteAccountConfirm') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>

28
front/src/components/auth/SignupForm.vue
View File

@ -35,9 +35,9 @@ const logger = useLogger()
const store = useStore() const store = useStore()
const labels = computed(() => ({ const labels = computed(() => ({
placeholder: t('components.auth.SignupForm.invitationCodePlaceholder'), placeholder: t('components.auth.SignupForm.placeholder.invitation'),
usernamePlaceholder: t('components.auth.SignupForm.usernamePlaceholder'), usernamePlaceholder: t('components.auth.SignupForm.placeholder.username'),
emailPlaceholder: t('components.auth.SignupForm.emailPlaceholder') emailPlaceholder: t('components.auth.SignupForm.placeholder.email')
})) }))
const signupRequiresApproval = computed(() => props.signupApprovalEnabled ?? store.state.instance.settings.moderation.signup_approval_enabled.value) const signupRequiresApproval = computed(() => props.signupApprovalEnabled ?? store.state.instance.settings.moderation.signup_approval_enabled.value)
@ -88,14 +88,14 @@ fetchInstanceSettings()
<div v-if="submitted"> <div v-if="submitted">
<div class="ui success message"> <div class="ui success message">
<p v-if="signupRequiresApproval"> <p v-if="signupRequiresApproval">
{{ $t('components.auth.SignupForm.awaitingReviewMessage') }} {{ $t('components.auth.SignupForm.message.awaitingReview') }}
</p> </p>
<p v-else> <p v-else>
{{ $t('components.auth.SignupForm.accountCreationSuccessMessage') }} {{ $t('components.auth.SignupForm.message.accountCreated') }}
</p> </p>
</div> </div>
<h2> <h2>
{{ $t('components.auth.SignupForm.loginHeader') }} {{ $t('components.auth.SignupForm.header.login') }}
</h2> </h2>
<login-form <login-form
button-classes="basic success" button-classes="basic success"
@ -111,13 +111,13 @@ fetchInstanceSettings()
v-if="!$store.state.instance.settings.users.registration_enabled.value" v-if="!$store.state.instance.settings.users.registration_enabled.value"
class="ui message" class="ui message"
> >
{{ $t('components.auth.SignupForm.registrationClosedMessage') }} {{ $t('components.auth.SignupForm.message.registrationClosed') }}
</p> </p>
<p <p
v-else-if="signupRequiresApproval" v-else-if="signupRequiresApproval"
class="ui message" class="ui message"
> >
{{ $t('components.auth.SignupForm.requiresReviewMessage') }} {{ $t('components.auth.SignupForm.message.requiresReview') }}
</p> </p>
<template v-if="formCustomization?.help_text"> <template v-if="formCustomization?.help_text">
<rendered-description <rendered-description
@ -133,7 +133,7 @@ fetchInstanceSettings()
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.SignupForm.signupFailureMessage') }} {{ $t('components.auth.SignupForm.header.signupFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -145,7 +145,7 @@ fetchInstanceSettings()
</ul> </ul>
</div> </div>
<div class="required field"> <div class="required field">
<label for="username-field">{{ $t('components.auth.SignupForm.usernameFieldLabel') }}</label> <label for="username-field">{{ $t('components.auth.SignupForm.label.username') }}</label>
<input <input
id="username-field" id="username-field"
ref="username" ref="username"
@ -158,7 +158,7 @@ fetchInstanceSettings()
> >
</div> </div>
<div class="required field"> <div class="required field">
<label for="email-field">{{ $t('components.auth.SignupForm.emailFieldLabel') }}</label> <label for="email-field">{{ $t('components.auth.SignupForm.label.email') }}</label>
<input <input
id="email-field" id="email-field"
ref="email" ref="email"
@ -170,7 +170,7 @@ fetchInstanceSettings()
> >
</div> </div>
<div class="required field"> <div class="required field">
<label for="password-field">{{ $t('components.auth.SignupForm.passwordFieldLabel') }}</label> <label for="password-field">{{ $t('components.auth.SignupForm.label.password') }}</label>
<password-input <password-input
v-model="payload.password1" v-model="payload.password1"
field-id="password-field" field-id="password-field"
@ -180,7 +180,7 @@ fetchInstanceSettings()
v-if="!$store.state.instance.settings.users.registration_enabled.value" v-if="!$store.state.instance.settings.users.registration_enabled.value"
class="required field" class="required field"
> >
<label for="invitation-code">{{ $t('components.auth.SignupForm.invitationCodeFieldLabel') }}</label> <label for="invitation-code">{{ $t('components.auth.SignupForm.label.invitation') }}</label>
<input <input
id="invitation-code" id="invitation-code"
v-model="payload.invitation" v-model="payload.invitation"
@ -217,7 +217,7 @@ fetchInstanceSettings()
:class="['ui', buttonClasses, {'loading': isLoading}, ' right floated button']" :class="['ui', buttonClasses, {'loading': isLoading}, ' right floated button']"
type="submit" type="submit"
> >
{{ $t('components.auth.SignupForm.createAccountButton') }} {{ $t('components.auth.SignupForm.button.create') }}
</button> </button>
</form> </form>
</template> </template>

36
front/src/components/auth/SubsonicTokenForm.vue
View File

@ -13,7 +13,7 @@ const store = useStore()
const subsonicEnabled = computed(() => store.state.instance.settings.subsonic.enabled.value) const subsonicEnabled = computed(() => store.state.instance.settings.subsonic.enabled.value)
const labels = computed(() => ({ const labels = computed(() => ({
subsonicField: t('components.auth.SubsonicTokenForm.subsonicFieldLabel') subsonicField: t('components.auth.SubsonicTokenForm.label.subsonicField')
})) }))
const errors = ref([] as string[]) const errors = ref([] as string[])
@ -38,7 +38,7 @@ const fetchToken = async () => {
const showToken = ref(false) const showToken = ref(false)
const successMessage = ref('') const successMessage = ref('')
const requestNewToken = async () => { const requestNewToken = async () => {
successMessage.value = t('components.auth.SubsonicTokenForm.successMessage') successMessage.value = t('components.auth.SubsonicTokenForm.message.passwordUpdated')
success.value = false success.value = false
errors.value = [] errors.value = []
isLoading.value = true isLoading.value = true
@ -56,7 +56,7 @@ const requestNewToken = async () => {
} }
const disable = async () => { const disable = async () => {
successMessage.value = t('components.auth.SubsonicTokenForm.disabledMessage') successMessage.value = t('components.auth.SubsonicTokenForm.message.accessDisabled')
success.value = false success.value = false
errors.value = [] errors.value = []
isLoading.value = true isLoading.value = true
@ -82,26 +82,26 @@ fetchToken()
@submit.prevent="requestNewToken()" @submit.prevent="requestNewToken()"
> >
<h2> <h2>
{{ $t('components.auth.SubsonicTokenForm.subsonicHeader') }} {{ $t('components.auth.SubsonicTokenForm.header.subsonic') }}
</h2> </h2>
<p <p
v-if="!subsonicEnabled" v-if="!subsonicEnabled"
class="ui message" class="ui message"
> >
{{ $t('components.auth.SubsonicTokenForm.unavailableMessage') }} {{ $t('components.auth.SubsonicTokenForm.message.unavailable') }}
</p> </p>
<p> <p>
{{ $t('components.auth.SubsonicTokenForm.subsonicApiDescription') }}&nbsp;{{ $t('components.auth.SubsonicTokenForm.subsonicApiDescriptionContinued') }} {{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph1') }}&nbsp;{{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph2') }}
</p> </p>
<p> <p>
{{ $t('components.auth.SubsonicTokenForm.subsonicPasswordInfo') }} {{ $t('components.auth.SubsonicTokenForm.description.subsonic.paragraph3') }}
</p> </p>
<p> <p>
<a <a
href="https://docs.funkwhale.audio/users/apps.html#subsonic-compatible-clients" href="https://docs.funkwhale.audio/users/apps.html#subsonic-compatible-clients"
target="_blank" target="_blank"
> >
{{ $t('components.auth.SubsonicTokenForm.appsLink') }} {{ $t('components.auth.SubsonicTokenForm.link.apps') }}
</a> </a>
</p> </p>
<div <div
@ -118,7 +118,7 @@ fetchToken()
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.auth.SubsonicTokenForm.errorHeader') }} {{ $t('components.auth.SubsonicTokenForm.header.error') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -152,20 +152,20 @@ fetchToken()
:class="['ui', {'loading': isLoading}, 'button']" :class="['ui', {'loading': isLoading}, 'button']"
:action="requestNewToken" :action="requestNewToken"
> >
{{ $t('components.auth.SubsonicTokenForm.requestNewTokenButton') }} {{ $t('components.auth.SubsonicTokenForm.button.newPassword') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.auth.SubsonicTokenForm.requestNewTokenModalHeader') }} {{ $t('components.auth.SubsonicTokenForm.modal.newPassword.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<p> <p>
{{ $t('components.auth.SubsonicTokenForm.requestNewTokenWarning') }} {{ $t('components.auth.SubsonicTokenForm.modal.newPassword.content.warning') }}
</p> </p>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
{{ $t('components.auth.SubsonicTokenForm.requestNewTokenButton') }} {{ $t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>
@ -175,27 +175,27 @@ fetchToken()
:class="['ui', {'loading': isLoading}, 'button']" :class="['ui', {'loading': isLoading}, 'button']"
@click="requestNewToken" @click="requestNewToken"
> >
{{ $t('components.auth.SubsonicTokenForm.requestTokenButton') }} {{ $t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
</button> </button>
<dangerous-button <dangerous-button
v-if="token" v-if="token"
:class="['ui', {'loading': isLoading}, 'warning', 'button']" :class="['ui', {'loading': isLoading}, 'warning', 'button']"
:action="disable" :action="disable"
> >
{{ $t('components.auth.SubsonicTokenForm.disableSubsonicAccessButton') }} {{ $t('components.auth.SubsonicTokenForm.button.disable') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.auth.SubsonicTokenForm.disableSubsonicAccessModalHeader') }} {{ $t('components.auth.SubsonicTokenForm.modal.disableSubsonic.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<p> <p>
{{ $t('components.auth.SubsonicTokenForm.disableSubsonicAccessWarning') }} {{ $t('components.auth.SubsonicTokenForm.modal.disableSubsonic.content.warning') }}
</p> </p>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
{{ $t('components.auth.SubsonicTokenForm.disableSubsonicAccessConfirm') }} {{ $t('components.auth.SubsonicTokenForm.button.confirmDisable') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>

4
front/src/components/channels/AlbumForm.vue
View File

@ -59,7 +59,7 @@ defineExpose({
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.channels.AlbumForm.errorHeader') }} {{ $t('components.channels.AlbumForm.header.error') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -72,7 +72,7 @@ defineExpose({
</div> </div>
<div class="ui required field"> <div class="ui required field">
<label for="album-title"> <label for="album-title">
{{ $t('components.channels.AlbumForm.titleLabel') }} {{ $t('components.channels.AlbumForm.label.albumTitle') }}
</label> </label>
<input <input
v-model="title" v-model="title"

8
front/src/components/channels/AlbumModal.vue
View File

@ -36,12 +36,12 @@ const albumForm = ref()
<span <span
v-if="channel.content_category === 'podcast'" v-if="channel.content_category === 'podcast'"
> >
{{ $t('components.channels.AlbumModal.newSeriesHeader') }} {{ $t('components.channels.AlbumModal.header.newSeries') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.channels.AlbumModal.newAlbumHeader') }} {{ $t('components.channels.AlbumModal.header.newAlbum') }}
</span> </span>
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
@ -55,14 +55,14 @@ const albumForm = ref()
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
{{ $t('components.channels.AlbumModal.cancelButton') }} {{ $t('components.channels.AlbumModal.button.cancel') }}
</button> </button>
<button <button
:class="['ui', 'primary', {loading: isLoading}, 'button']" :class="['ui', 'primary', {loading: isLoading}, 'button']"
:disabled="!submittable" :disabled="!submittable"
@click.stop.prevent="albumForm.submit()" @click.stop.prevent="albumForm.submit()"
> >
{{ $t('components.channels.AlbumModal.createButton') }} {{ $t('components.channels.AlbumModal.button.create') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

8
front/src/components/channels/AlbumSelect.vue
View File

@ -49,10 +49,10 @@ watch(() => props.channel, fetchData, { immediate: true })
<label for="album-dropdown"> <label for="album-dropdown">
<span <span
v-if="channel && channel.artist && channel.artist.content_category === 'podcast'" v-if="channel && channel.artist && channel.artist.content_category === 'podcast'"
>{{ $t('components.channels.AlbumSelect.seriesLabel') }}</span> >{{ $t('components.channels.AlbumSelect.label.series') }}</span>
<span <span
v-else v-else
>{{ $t('components.channels.AlbumSelect.albumLabel') }}</span> >{{ $t('components.channels.AlbumSelect.label.album') }}</span>
</label> </label>
<select <select
id="album-dropdown" id="album-dropdown"
@ -60,7 +60,7 @@ watch(() => props.channel, fetchData, { immediate: true })
class="ui search normal dropdown" class="ui search normal dropdown"
> >
<option value=""> <option value="">
{{ $t('components.channels.AlbumSelect.noneLabel') }} {{ $t('components.channels.AlbumSelect.option.none') }}
</option> </option>
<option <option
v-for="album in albums" v-for="album in albums"
@ -69,7 +69,7 @@ watch(() => props.channel, fetchData, { immediate: true })
> >
{{ album.title }} {{ album.title }}
<span> <span>
{{ $t('components.channels.AlbumSelect.trackCount', { tracks_count: album.tracks_count }) }} {{ $t('components.channels.AlbumSelect.meta.tracks', { tracks_count: album.tracks_count }) }}
</span> </span>
</option> </option>
</select> </select>

6
front/src/components/channels/LicenseSelect.vue
View File

@ -55,7 +55,7 @@ fetchLicenses()
<template> <template>
<div> <div>
<label for="license-dropdown"> <label for="license-dropdown">
{{ $t('components.channels.LicenseSelect.licenseLabel') }} {{ $t('components.channels.LicenseSelect.label.license') }}
</label> </label>
<select <select
id="license-dropdown" id="license-dropdown"
@ -63,7 +63,7 @@ fetchLicenses()
class="ui search normal dropdown" class="ui search normal dropdown"
> >
<option value=""> <option value="">
{{ $t('components.channels.LicenseSelect.noneLabel') }} {{ $t('components.channels.LicenseSelect.option.none') }}
</option> </option>
<option <option
v-for="l in featuredLicenses" v-for="l in featuredLicenses"
@ -84,7 +84,7 @@ fetchLicenses()
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
{{ $t('components.channels.LicenseSelect.licenseInfo') }} {{ $t('components.channels.LicenseSelect.link.license') }}
</a> </a>
</p> </p>
</div> </div>

6
front/src/components/channels/SubscribeButton.vue
View File

@ -24,12 +24,12 @@ const store = useStore()
const isSubscribed = computed(() => store.getters['channels/isSubscribed'](props.channel.uuid)) const isSubscribed = computed(() => store.getters['channels/isSubscribed'](props.channel.uuid))
const title = computed(() => isSubscribed.value const title = computed(() => isSubscribed.value
? t('components.channels.SubscribeButton.unsubscribeLabel') ? t('components.channels.SubscribeButton.title.unsubscribe')
: t('components.channels.SubscribeButton.subscribeLabel') : t('components.channels.SubscribeButton.title.subscribe')
) )
const message = computed(() => ({ const message = computed(() => ({
authMessage: t('components.channels.SubscribeButton.authMessage') authMessage: t('components.channels.SubscribeButton.help.auth')
})) }))
const toggle = async () => { const toggle = async () => {

32
front/src/components/channels/UploadForm.vue
View File

@ -396,7 +396,7 @@ watchEffect(() => {
}) })
const labels = computed(() => ({ const labels = computed(() => ({
editTitle: t('components.channels.UploadForm.editTitle') editTitle: t('components.channels.UploadForm.button.edit')
})) }))
</script> </script>
@ -411,7 +411,7 @@ const labels = computed(() => ({
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.channels.UploadForm.failureHeader') }} {{ $t('components.channels.UploadForm.header.error') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -424,7 +424,7 @@ const labels = computed(() => ({
</div> </div>
<div :class="['ui', 'required', {hidden: step > 1}, 'field']"> <div :class="['ui', 'required', {hidden: step > 1}, 'field']">
<label for="channel-dropdown"> <label for="channel-dropdown">
{{ $t('components.channels.UploadForm.channelLabel') }} {{ $t('components.channels.UploadForm.label.channel') }}
</label> </label>
<div <div
id="channel-dropdown" id="channel-dropdown"
@ -447,7 +447,7 @@ const labels = computed(() => ({
<div class="content"> <div class="content">
<p> <p>
<i class="copyright icon" /> <i class="copyright icon" />
{{ $t('components.channels.UploadForm.licenseTip') }} {{ $t('components.channels.UploadForm.help.license') }}
</p> </p>
</div> </div>
</div> </div>
@ -460,7 +460,7 @@ const labels = computed(() => ({
<div class="content"> <div class="content">
<p> <p>
<i class="warning icon" /> <i class="warning icon" />
{{ $t('components.channels.UploadForm.noSpaceWarning') }} {{ $t('components.channels.UploadForm.warning.quota') }}
</p> </p>
</div> </div>
</div> </div>
@ -471,19 +471,19 @@ const labels = computed(() => ({
> >
<p> <p>
<i class="redo icon" /> <i class="redo icon" />
{{ $t('components.channels.UploadForm.pendingDraftsMessage') }} {{ $t('components.channels.UploadForm.message.pending') }}
</p> </p>
<button <button
class="ui basic button" class="ui basic button"
@click.stop.prevent="includeDraftUploads = false" @click.stop.prevent="includeDraftUploads = false"
> >
{{ $t('components.channels.UploadForm.ignoreButton') }} {{ $t('components.channels.UploadForm.button.ignore') }}
</button> </button>
<button <button
class="ui basic button" class="ui basic button"
@click.stop.prevent="includeDraftUploads = true" @click.stop.prevent="includeDraftUploads = true"
> >
{{ $t('components.channels.UploadForm.resumeButton') }} {{ $t('components.channels.UploadForm.button.resume') }}
</button> </button>
</div> </div>
<div <div
@ -539,17 +539,17 @@ const labels = computed(() => ({
<span <span
v-if="file.active" v-if="file.active"
> >
{{ $t('components.channels.UploadForm.uploadingStatus') }} {{ $t('components.channels.UploadForm.status.uploading') }}
</span> </span>
<span <span
v-else-if="file.error" v-else-if="file.error"
> >
{{ $t('components.channels.UploadForm.erroredStatus') }} {{ $t('components.channels.UploadForm.status.errored') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.channels.UploadForm.pendingStatus') }} {{ $t('components.channels.UploadForm.status.pending') }}
</span> </span>
<span class="middle middledot symbol" /> <span class="middle middledot symbol" />
{{ humanSize(file.size ?? 0) }} {{ humanSize(file.size ?? 0) }}
@ -559,12 +559,12 @@ const labels = computed(() => ({
</template> </template>
<span class="middle middledot symbol" /> <span class="middle middledot symbol" />
<a @click.stop.prevent="remove(file)"> <a @click.stop.prevent="remove(file)">
{{ $t('components.channels.UploadForm.removeUpload') }} {{ $t('components.channels.UploadForm.button.remove') }}
</a> </a>
<template v-if="file.error"> <template v-if="file.error">
<span class="middle middledot symbol" /> <span class="middle middledot symbol" />
<a @click.stop.prevent="retry(file)"> <a @click.stop.prevent="retry(file)">
{{ $t('components.channels.UploadForm.retryUpload') }} {{ $t('components.channels.UploadForm.button.retry') }}
</a> </a>
</template> </template>
</div> </div>
@ -583,7 +583,7 @@ const labels = computed(() => ({
<div class="content"> <div class="content">
<p> <p>
<i class="info icon" /> <i class="info icon" />
{{ $t('components.channels.UploadForm.supportedExtensions', {extensions: $store.state.ui.supportedExtensions.join(', ')}) }} {{ $t('components.channels.UploadForm.description.extensions', {extensions: $store.state.ui.supportedExtensions.join(', ')}) }}
</p> </p>
</div> </div>
</div> </div>
@ -602,11 +602,11 @@ const labels = computed(() => ({
> >
<div> <div>
<i class="upload icon" />&nbsp; <i class="upload icon" />&nbsp;
{{ $t('components.channels.UploadForm.dragAndDrop') }} {{ $t('components.channels.UploadForm.message.dragAndDrop') }}
</div> </div>
<div class="ui very small divider" /> <div class="ui very small divider" />
<div> <div>
{{ $t('components.channels.UploadForm.openFileBrowser') }} {{ $t('components.channels.UploadForm.label.openBrowser') }}
</div> </div>
</file-upload-widget> </file-upload-widget>
<div class="ui hidden divider" /> <div class="ui hidden divider" />

10
front/src/components/channels/UploadMetadataForm.vue
View File

@ -33,7 +33,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
<div :class="['ui', {loading: isLoading}, 'form']"> <div :class="['ui', {loading: isLoading}, 'form']">
<div class="ui required field"> <div class="ui required field">
<label for="upload-title"> <label for="upload-title">
{{ $t('components.channels.UploadMetadataForm.titleLabel') }} {{ $t('components.channels.UploadMetadataForm.label.title') }}
</label> </label>
<input <input
v-model="newValues.title" v-model="newValues.title"
@ -44,13 +44,13 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
v-model="newValues.cover" v-model="newValues.cover"
@delete="newValues.cover = ''" @delete="newValues.cover = ''"
> >
{{ $t('components.channels.UploadMetadataForm.trackImage') }} {{ $t('components.channels.UploadMetadataForm.label.image') }}
</attachment-input> </attachment-input>
<div class="ui small hidden divider" /> <div class="ui small hidden divider" />
<div class="ui two fields"> <div class="ui two fields">
<div class="ui field"> <div class="ui field">
<label for="upload-tags"> <label for="upload-tags">
{{ $t('components.channels.UploadMetadataForm.tagsLabel') }} {{ $t('components.channels.UploadMetadataForm.label.tags') }}
</label> </label>
<tags-selector <tags-selector
id="upload-tags" id="upload-tags"
@ -60,7 +60,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
</div> </div>
<div class="ui field"> <div class="ui field">
<label for="upload-position"> <label for="upload-position">
{{ $t('components.channels.UploadMetadataForm.uploadPosition') }} {{ $t('components.channels.UploadMetadataForm.label.position') }}
</label> </label>
<input <input
v-model="newValues.position" v-model="newValues.position"
@ -72,7 +72,7 @@ watch(newValues, (values) => emit('update:values', values), { immediate: true })
</div> </div>
<div class="ui field"> <div class="ui field">
<label for="upload-description"> <label for="upload-description">
{{ $t('components.channels.UploadMetadataForm.descriptionLabel') }} {{ $t('components.channels.UploadMetadataForm.label.description') }}
</label> </label>
<content-form <content-form
v-model="newValues.description" v-model="newValues.description"

26
front/src/components/channels/UploadModal.vue
View File

@ -29,7 +29,7 @@ const statusInfo = computed(() => {
} }
if (statusData.value.totalFiles) { if (statusData.value.totalFiles) {
const msg = t('components.channels.UploadModal.fileCount', { count: statusData.value.totalFiles }) const msg = t('components.channels.UploadModal.meta.files', { count: statusData.value.totalFiles })
info.push(msg) info.push(msg)
} }
@ -57,22 +57,22 @@ const isLoading = ref(false)
<span <span
v-if="step === 1" v-if="step === 1"
> >
{{ $t('components.channels.UploadModal.publishStep') }} {{ $t('components.channels.UploadModal.header.publish') }}
</span> </span>
<span <span
v-else-if="step === 2" v-else-if="step === 2"
> >
{{ $t('components.channels.UploadModal.uploadStep') }} {{ $t('components.channels.UploadModal.header.uploadFiles') }}
</span> </span>
<span <span
v-else-if="step === 3" v-else-if="step === 3"
> >
{{ $t('components.channels.UploadModal.uploadDetails') }} {{ $t('components.channels.UploadModal.header.uploadDetails') }}
</span> </span>
<span <span
v-else-if="step === 4" v-else-if="step === 4"
> >
{{ $t('components.channels.UploadModal.processingUploads') }} {{ $t('components.channels.UploadModal.header.processing') }}
</span> </span>
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
@ -91,7 +91,7 @@ const isLoading = ref(false)
</template> </template>
<div class="ui very small hidden divider" /> <div class="ui very small hidden divider" />
<template v-if="statusData && statusData.quotaStatus"> <template v-if="statusData && statusData.quotaStatus">
{{ $t('components.channels.UploadModal.remainingSpace', humanSize((statusData.quotaStatus.remaining - statusData.uploadedSize) * 1000 * 1000)) }} {{ $t('components.channels.UploadModal.meta.quota', humanSize((statusData.quotaStatus.remaining - statusData.uploadedSize) * 1000 * 1000)) }}
</template> </template>
</div> </div>
<div class="ui hidden clearing divider mobile-only" /> <div class="ui hidden clearing divider mobile-only" />
@ -99,28 +99,28 @@ const isLoading = ref(false)
v-if="step === 1" v-if="step === 1"
class="ui basic cancel button" class="ui basic cancel button"
> >
{{ $t('components.channels.UploadModal.cancelButton') }} {{ $t('components.channels.UploadModal.button.cancel') }}
</button> </button>
<button <button
v-else-if="step < 3" v-else-if="step < 3"
class="ui basic button" class="ui basic button"
@click.stop.prevent="uploadForm.step -= 1" @click.stop.prevent="uploadForm.step -= 1"
> >
{{ $t('components.channels.UploadModal.previousButton') }} {{ $t('components.channels.UploadModal.button.previous') }}
</button> </button>
<button <button
v-else-if="step === 3" v-else-if="step === 3"
class="ui basic button" class="ui basic button"
@click.stop.prevent="uploadForm.step -= 1" @click.stop.prevent="uploadForm.step -= 1"
> >
{{ $t('components.channels.UploadModal.updateButton') }} {{ $t('components.channels.UploadModal.button.update') }}
</button> </button>
<button <button
v-if="step === 1" v-if="step === 1"
class="ui primary button" class="ui primary button"
@click.stop.prevent="uploadForm.step += 1" @click.stop.prevent="uploadForm.step += 1"
> >
{{ $t('components.channels.UploadModal.nextButton') }} {{ $t('components.channels.UploadModal.button.next') }}
</button> </button>
<div <div
v-if="step === 2" v-if="step === 2"
@ -132,7 +132,7 @@ const isLoading = ref(false)
:disabled="!statusData?.canSubmit || undefined" :disabled="!statusData?.canSubmit || undefined"
@click.prevent.stop="uploadForm.publish" @click.prevent.stop="uploadForm.publish"
> >
{{ $t('components.channels.UploadModal.publishButton') }} {{ $t('components.channels.UploadModal.button.publish') }}
</button> </button>
<button <button
ref="dropdown" ref="dropdown"
@ -147,7 +147,7 @@ const isLoading = ref(false)
class="basic item" class="basic item"
@click="update(false)" @click="update(false)"
> >
{{ $t('components.channels.UploadModal.finishLaterButton') }} {{ $t('components.channels.UploadModal.button.finishLater') }}
</div> </div>
</div> </div>
</button> </button>
@ -157,7 +157,7 @@ const isLoading = ref(false)
class="ui basic cancel button" class="ui basic cancel button"
@click="update(false)" @click="update(false)"
> >
{{ $t('components.channels.UploadModal.closeButton') }} {{ $t('components.channels.UploadModal.button.close') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

34
front/src/components/common/ActionTable.vue
View File

@ -123,10 +123,10 @@ const toggleCheck = (event: MouseEvent, id: string, index: number) => {
} }
const labels = computed(() => ({ const labels = computed(() => ({
refresh: t('components.common.ActionTable.refreshLabel'), refresh: t('components.common.ActionTable.button.refresh'),
selectAllItems: t('components.common.ActionTable.selectAllLabel'), selectAllItems: t('components.common.ActionTable.button.selectAll'),
performAction: t('components.common.ActionTable.performActionLabel'), performAction: t('components.common.ActionTable.label.performAction'),
selectItem: t('components.common.ActionTable.selectItemLabel') selectItem: t('components.common.ActionTable.button.select')
})) }))
const errors = ref([] as string[]) const errors = ref([] as string[])
@ -167,7 +167,7 @@ const launchAction = async () => {
class="right floated" class="right floated"
> >
<span v-if="needsRefresh"> <span v-if="needsRefresh">
{{ $t('components.common.ActionTable.contentUpdatedMessage') }} {{ $t('components.common.ActionTable.message.needsRefresh') }}
</span> </span>
<button <button
class="ui basic icon button" class="ui basic icon button"
@ -185,7 +185,7 @@ const launchAction = async () => {
> >
<div class="ui inline fields"> <div class="ui inline fields">
<div class="field"> <div class="field">
<label for="actions-select">{{ $t('components.common.ActionTable.actionsLabel') }}</label> <label for="actions-select">{{ $t('components.common.ActionTable.label.actions') }}</label>
<select <select
id="actions-select" id="actions-select"
v-model="currentActionName" v-model="currentActionName"
@ -208,13 +208,13 @@ const launchAction = async () => {
:aria-label="labels.performAction" :aria-label="labels.performAction"
@confirm="launchAction" @confirm="launchAction"
> >
{{ $t('components.common.ActionTable.performActionButton') }} {{ $t('components.common.ActionTable.button.go') }}
<template #modal-header> <template #modal-header>
<p> <p>
<span <span
key="1" key="1"
> >
{{ $t('components.common.ActionTable.performActionConfirmation', {action: currentActionName, count: affectedObjectsCount} ) }} {{ $t('components.common.ActionTable.modal.performAction.header', {action: currentActionName, count: affectedObjectsCount} ) }}
</span> </span>
</p> </p>
</template> </template>
@ -226,13 +226,13 @@ const launchAction = async () => {
<span <span
v-else v-else
> >
{{ $t('components.common.ActionTable.performActionWarning') }} {{ $t('components.common.ActionTable.modal.performAction.content.warning') }}
</span> </span>
</p> </p>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div :aria-label="labels.performAction"> <div :aria-label="labels.performAction">
{{ $t('components.common.ActionTable.launchActionButton') }} {{ $t('components.common.ActionTable.button.launch') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>
@ -243,19 +243,19 @@ const launchAction = async () => {
:class="['ui', {disabled: checked.length === 0}, {'loading': isLoading}, 'button']" :class="['ui', {disabled: checked.length === 0}, {'loading': isLoading}, 'button']"
@click="launchAction" @click="launchAction"
> >
{{ $t('components.common.ActionTable.performActionButton') }} {{ $t('components.common.ActionTable.button.go') }}
</button> </button>
</div> </div>
<div class="count field"> <div class="count field">
<span <span
v-if="selectAll" v-if="selectAll"
> >
{{ $t('components.common.ActionTable.allElementsSelectedMessage', {count: objectsData.count}) }} {{ $t('components.common.ActionTable.button.allSelected', {count: objectsData.count}) }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.common.ActionTable.elementsSelectedMessage', {count: checked.length, total: objectsData.count}) }} {{ $t('components.common.ActionTable.button.selected', {count: checked.length, total: objectsData.count}) }}
</span> </span>
<template v-if="currentAction?.allowAll && checkable.length > 0 && checkable.length === checked.length"> <template v-if="currentAction?.allowAll && checkable.length > 0 && checkable.length === checked.length">
<a <a
@ -266,7 +266,7 @@ const launchAction = async () => {
<span <span
key="3" key="3"
> >
{{ $t('components.common.ActionTable.selectElementsMessage', {total: objectsData.count}) }} {{ $t('components.common.ActionTable.button.selectElement', {total: objectsData.count}) }}
</span> </span>
</a> </a>
<a <a
@ -276,7 +276,7 @@ const launchAction = async () => {
> >
<span <span
key="4" key="4"
>{{ $t('components.common.ActionTable.selectCurrentPage') }}</span> >{{ $t('components.common.ActionTable.button.selectCurrentPage') }}</span>
</a> </a>
</template> </template>
</div> </div>
@ -287,7 +287,7 @@ const launchAction = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.common.ActionTable.actionErrorMessage') }} {{ $t('components.common.ActionTable.header.error') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -304,7 +304,7 @@ const launchAction = async () => {
> >
<p> <p>
<span> <span>
{{ $t('components.common.ActionTable.actionSuccessMessage', {action: result.action, count: result.updated}) }} {{ $t('components.common.ActionTable.message.success', {action: result.action, count: result.updated}) }}
</span> </span>
</p> </p>

10
front/src/components/common/AttachmentInput.vue
View File

@ -107,7 +107,7 @@ const getAttachmentUrl = (uuid: string) => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.common.AttachmentInput.saveFailureMessage') }} {{ $t('components.common.AttachmentInput.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -144,7 +144,7 @@ const getAttachmentUrl = (uuid: string) => {
<div class="eleven wide column"> <div class="eleven wide column">
<div class="file-input"> <div class="file-input">
<label :for="attachmentId"> <label :for="attachmentId">
{{ $t('components.common.AttachmentInput.uploadLabel') }} {{ $t('components.common.AttachmentInput.label.upload') }}
</label> </label>
<input <input
:id="attachmentId" :id="attachmentId"
@ -159,21 +159,21 @@ const getAttachmentUrl = (uuid: string) => {
</div> </div>
<div class="ui very small hidden divider" /> <div class="ui very small hidden divider" />
<p> <p>
{{ $t('components.common.AttachmentInput.uploadHelp') }} {{ $t('components.common.AttachmentInput.help.upload') }}
</p> </p>
<button <button
v-if="value" v-if="value"
class="ui basic tiny button" class="ui basic tiny button"
@click.stop.prevent="remove(value as string)" @click.stop.prevent="remove(value as string)"
> >
{{ $t('components.common.AttachmentInput.removeButton') }} {{ $t('components.common.AttachmentInput.button.remove') }}
</button> </button>
<div <div
v-if="isLoading" v-if="isLoading"
class="ui active inverted dimmer" class="ui active inverted dimmer"
> >
<div class="ui indeterminate text loader"> <div class="ui indeterminate text loader">
{{ $t('components.common.AttachmentInput.uploadingMessage') }} {{ $t('components.common.AttachmentInput.loader.uploading') }}
</div> </div>
</div> </div>
</div> </div>

4
front/src/components/common/CollapseLink.vue
View File

@ -23,12 +23,12 @@ const value = useVModel(props, 'modelValue', emit)
<span <span
v-if="value" v-if="value"
> >
{{ $t('components.common.CollapseLink.expandLabel') }} {{ $t('components.common.CollapseLink.button.expand') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.common.CollapseLink.collapseLabel') }} {{ $t('components.common.CollapseLink.button.collapse') }}
</span> </span>
<i :class="[{ down: !value, right: value }, 'angle', 'icon']" /> <i :class="[{ down: !value, right: value }, 'angle', 'icon']" />
</a> </a>

10
front/src/components/common/ContentForm.vue
View File

@ -36,7 +36,7 @@ const preview = ref()
const isLoadingPreview = ref(false) const isLoadingPreview = ref(false)
const labels = computed(() => ({ const labels = computed(() => ({
placeholder: props.placeholder ?? t('components.common.ContentForm.placeHolderLabel') placeholder: props.placeholder ?? t('components.common.ContentForm.placeholder.input')
})) }))
const remainingChars = computed(() => props.charLimit - props.modelValue.length) const remainingChars = computed(() => props.charLimit - props.modelValue.length)
@ -86,13 +86,13 @@ onMounted(async () => {
:class="[{active: !isPreviewing}, 'item']" :class="[{active: !isPreviewing}, 'item']"
@click.prevent="isPreviewing = false" @click.prevent="isPreviewing = false"
> >
{{ $t('components.common.ContentForm.writeButton') }} {{ $t('components.common.ContentForm.button.write') }}
</button> </button>
<button <button
:class="[{active: isPreviewing}, 'item']" :class="[{active: isPreviewing}, 'item']"
@click.prevent="isPreviewing = true" @click.prevent="isPreviewing = true"
> >
{{ $t('components.common.ContentForm.previewButton') }} {{ $t('components.common.ContentForm.button.preview') }}
</button> </button>
</div> </div>
<template v-if="isPreviewing"> <template v-if="isPreviewing">
@ -108,7 +108,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
<p v-else-if="!preview"> <p v-else-if="!preview">
{{ $t('components.common.ContentForm.noContentMessage') }} {{ $t('components.common.ContentForm.empty.noContent') }}
</p> </p>
<sanitized-html <sanitized-html
v-else v-else
@ -135,7 +135,7 @@ onMounted(async () => {
{{ remainingChars }} {{ remainingChars }}
</span> </span>
<p> <p>
{{ $t('components.common.ContentForm.markdownMessage') }} {{ $t('components.common.ContentForm.help.markdown') }}
</p> </p>
</div> </div>
</div> </div>

4
front/src/components/common/CopyInput.vue
View File

@ -22,7 +22,7 @@ const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, cop
v-if="copied" v-if="copied"
class="message" class="message"
> >
{{ $t('components.common.CopyInput.copySuccessMessage') }} {{ $t('components.common.CopyInput.message.success') }}
</p> </p>
<input <input
:id="id" :id="id"
@ -37,7 +37,7 @@ const { copy, isSupported: canCopy, copied } = useClipboard({ source: value, cop
@click="copy()" @click="copy()"
> >
<i class="copy icon" /> <i class="copy icon" />
{{ $t('components.common.CopyInput.copyButton') }} {{ $t('components.common.CopyInput.button.copy') }}
</button> </button>
</div> </div>
</template> </template>

6
front/src/components/common/DangerousButton.vue
View File

@ -42,7 +42,7 @@ const confirm = () => {
> >
<h4 class="header"> <h4 class="header">
<slot name="modal-header"> <slot name="modal-header">
{{ $t('components.common.DangerousButton.confirmAction') }} {{ $t('components.common.DangerousButton.header.confirm') }}
</slot> </slot>
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
@ -52,14 +52,14 @@ const confirm = () => {
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
{{ $t('components.common.DangerousButton.cancelButton') }} {{ $t('components.common.DangerousButton.button.cancel') }}
</button> </button>
<button <button
:class="['ui', 'confirm', confirmColor, 'button']" :class="['ui', 'confirm', confirmColor, 'button']"
@click="confirm" @click="confirm"
> >
<slot name="modal-confirm"> <slot name="modal-confirm">
{{ $t('components.common.DangerousButton.confirmButton') }} {{ $t('components.common.DangerousButton.button.confirm') }}
</slot> </slot>
</button> </button>
</div> </div>

4
front/src/components/common/Duration.vue
View File

@ -20,9 +20,9 @@ const duration = computed(() => {
<span> <span>
<span <span
v-if="duration.hours > 0" v-if="duration.hours > 0"
>{{ $t('components.common.Duration.hoursFormat', {hours: duration.hours, minutes: duration.minutes}) }}</span> >{{ $t('components.common.Duration.meta.hours', {hours: duration.hours, minutes: duration.minutes}) }}</span>
<span <span
v-else v-else
>{{ $t('components.common.Duration.minutesFormat', {minutes: duration.minutes}) }}</span> >{{ $t('components.common.Duration.meta.minutes', {minutes: duration.minutes}) }}</span>
</span> </span>
</template> </template>

4
front/src/components/common/EmptyState.vue
View File

@ -19,7 +19,7 @@ withDefaults(defineProps<Props>(), {
<div class="content"> <div class="content">
<slot name="title"> <slot name="title">
<i class="search icon" /> <i class="search icon" />
{{ $t('components.common.EmptyState.emptyState') }} {{ $t('components.common.EmptyState.header.noResults') }}
</slot> </slot>
</div> </div>
</h4> </h4>
@ -30,7 +30,7 @@ withDefaults(defineProps<Props>(), {
class="ui button" class="ui button"
@click="emit('refresh')" @click="emit('refresh')"
> >
{{ $t('components.common.EmptyState.refreshButton') }} {{ $t('components.common.EmptyState.button.refresh') }}
</button> </button>
</div> </div>
</div> </div>

4
front/src/components/common/ExpandableDiv.vue
View File

@ -28,10 +28,10 @@ const truncated = computed(() => props.content.slice(0, props.length))
<br> <br>
<span <span
v-if="expanded" v-if="expanded"
>{{ $t('components.common.ExpandableDiv.showLess') }}</span> >{{ $t('components.common.ExpandableDiv.button.less') }}</span>
<span <span
v-else v-else
>{{ $t('components.common.ExpandableDiv.showMore') }}</span> >{{ $t('components.common.ExpandableDiv.button.more') }}</span>
</a> </a>
</div> </div>
</template> </template>

6
front/src/components/common/InlineSearchBar.vue
View File

@ -22,8 +22,8 @@ const value = useVModel(props, 'modelValue', emit)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.common.InlineSearchBar.searchPlaceholder'), searchPlaceholder: t('components.common.InlineSearchBar.placeholder.search'),
clear: t('components.common.InlineSearchBar.clearLabel') clear: t('components.common.InlineSearchBar.button.clear')
})) }))
const search = () => { const search = () => {
@ -42,7 +42,7 @@ const search = () => {
for="search-query" for="search-query"
class="hidden" class="hidden"
> >
{{ $t('components.common.InlineSearchBar.searchLabel') }} {{ $t('components.common.InlineSearchBar.label.search') }}
</label> </label>
<input <input
id="search-query" id="search-query"

8
front/src/components/common/LoginModal.vue
View File

@ -18,10 +18,10 @@ const show = ref(false)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
header: t('components.common.LoginModal.header'), header: t('components.common.LoginModal.header.unauthenticated'),
login: t('components.common.LoginModal.loginLabel'), login: t('components.common.LoginModal.link.login'),
signup: t('components.common.LoginModal.signupLabel'), signup: t('components.common.LoginModal.link.signup'),
description: t('components.common.LoginModal.noAccessDescription') description: t('components.common.LoginModal.description.noAccess')
})) }))
</script> </script>

14
front/src/components/common/RenderedDescription.vue
View File

@ -91,19 +91,19 @@ const submit = async () => {
href="" href=""
@click.stop.prevent="showMore = true" @click.stop.prevent="showMore = true"
> >
{{ $t('components.common.RenderedDescription.showMore') }} {{ $t('components.common.RenderedDescription.button.more') }}
</a> </a>
<a <a
v-else v-else
href="" href=""
@click.stop.prevent="showMore = false" @click.stop.prevent="showMore = false"
> >
{{ $t('components.common.RenderedDescription.showLess') }} {{ $t('components.common.RenderedDescription.button.less') }}
</a> </a>
</template> </template>
</template> </template>
<p v-else-if="!isUpdating"> <p v-else-if="!isUpdating">
{{ $t('components.common.RenderedDescription.noDescription') }} {{ $t('components.common.RenderedDescription.empty.noDescription') }}
</p> </p>
<template v-if="!isUpdating && canUpdate && updateUrl"> <template v-if="!isUpdating && canUpdate && updateUrl">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -112,7 +112,7 @@ const submit = async () => {
@click="isUpdating = true" @click="isUpdating = true"
> >
<i class="pencil icon" /> <i class="pencil icon" />
{{ $t('components.common.RenderedDescription.editButton') }} {{ $t('components.common.RenderedDescription.button.edit') }}
</span> </span>
</template> </template>
<form <form
@ -126,7 +126,7 @@ const submit = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.common.RenderedDescription.updateFailureHeader') }} {{ $t('components.common.RenderedDescription.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -145,14 +145,14 @@ const submit = async () => {
class="left floated" class="left floated"
@click.prevent="isUpdating = false" @click.prevent="isUpdating = false"
> >
{{ $t('components.common.RenderedDescription.cancelButton') }} {{ $t('components.common.RenderedDescription.button.cancel') }}
</a> </a>
<button <button
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']" :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
type="submit" type="submit"
:disabled="isLoading" :disabled="isLoading"
> >
{{ $t('components.common.RenderedDescription.updateButton') }} {{ $t('components.common.RenderedDescription.button.update') }}
</button> </button>
<div class="ui clearing hidden divider" /> <div class="ui clearing hidden divider" />
</form> </form>

2
front/src/components/common/UserLink.vue
View File

@ -33,6 +33,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
>{{ user.username[0] }}</span> >{{ user.username[0] }}</span>
&nbsp; &nbsp;
</template> </template>
{{ $t('components.common.UserLink.username', {username: user.username}) }} {{ $t('components.common.UserLink.link.username', {username: user.username}) }}
</span> </span>
</template> </template>

30
front/src/components/common/UserMenu.vue
View File

@ -17,21 +17,21 @@ const themes = useThemeList()
const { theme } = useTheme() const { theme } = useTheme()
const labels = computed(() => ({ const labels = computed(() => ({
profile: t('components.common.UserMenu.profileLabel'), profile: t('components.common.UserMenu.link.profile'),
settings: t('components.common.UserMenu.settingsLabel'), settings: t('components.common.UserMenu.link.settings'),
logout: t('components.common.UserMenu.logoutLabel'), logout: t('components.common.UserMenu.link.logout'),
about: t('components.common.UserMenu.aboutLabel'), about: t('components.common.UserMenu.link.about'),
shortcuts: t('components.common.UserMenu.shortcutsLabel'), shortcuts: t('components.common.UserMenu.label.shortcuts'),
support: t('components.common.UserMenu.supportLabel'), support: t('components.common.UserMenu.link.support'),
forum: t('components.common.UserMenu.forumLabel'), forum: t('components.common.UserMenu.link.forum'),
docs: t('components.common.UserMenu.docsLabel'), docs: t('components.common.UserMenu.link.docs'),
language: t('components.common.UserMenu.languageLabel'), language: t('components.common.UserMenu.label.language'),
theme: t('components.common.UserMenu.themeLabel'), theme: t('components.common.UserMenu.label.theme'),
chat: t('components.common.UserMenu.chatLabel'), chat: t('components.common.UserMenu.link.chat'),
git: t('components.common.UserMenu.gitLabel'), git: t('components.common.UserMenu.link.git'),
login: t('components.common.UserMenu.loginLabel'), login: t('components.common.UserMenu.link.login'),
signup: t('components.common.UserMenu.signupLabel'), signup: t('components.common.UserMenu.link.signup'),
notifications: t('components.common.UserMenu.notificationsLabel') notifications: t('components.common.UserMenu.link.notifications')
})) }))
</script> </script>

36
front/src/components/common/UserModal.vue
View File

@ -26,24 +26,24 @@ const themes = useThemeList()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
header: t('components.common.UserModal.optionsLabel'), header: t('components.common.UserModal.header.options'),
profile: t('components.common.UserModal.profileLabel'), profile: t('components.common.UserModal.link.profile'),
settings: t('components.common.UserModal.settingsLabel'), settings: t('components.common.UserModal.link.settings'),
logout: t('components.common.UserModal.logoutLabel'), logout: t('components.common.UserModal.link.logout'),
about: t('components.common.UserModal.aboutLabel'), about: t('components.common.UserModal.link.about'),
shortcuts: t('components.common.UserModal.shortcutsLabel'), shortcuts: t('components.common.UserModal.label.shortcuts'),
support: t('components.common.UserModal.supportLabel'), support: t('components.common.UserModal.link.support'),
forum: t('components.common.UserModal.forumLabel'), forum: t('components.common.UserModal.link.forum'),
docs: t('components.common.UserModal.docsLabel'), docs: t('components.common.UserModal.link.docs'),
help: t('components.common.UserModal.supportLabel'), help: t('components.common.UserModal.link.support'),
language: t('components.common.UserModal.languageLabel'), language: t('components.common.UserModal.label.language'),
theme: t('components.common.UserModal.themeLabel'), theme: t('components.common.UserModal.label.theme'),
chat: t('components.common.UserModal.chatLabel'), chat: t('components.common.UserModal.link.chat'),
git: t('components.common.UserModal.gitLabel'), git: t('components.common.UserModal.link.git'),
login: t('components.common.UserModal.loginLabel'), login: t('components.common.UserModal.link.login'),
signup: t('components.common.UserModal.signupLabel'), signup: t('components.common.UserModal.link.signup'),
notifications: t('components.common.UserModal.notificationsLabel'), notifications: t('components.common.UserModal.link.notifications'),
useOtherInstance: t('components.common.UserModal.useOtherInstanceLabel') useOtherInstance: t('components.common.UserModal.button.switchInstance')
})) }))
</script> </script>

18
front/src/components/favorites/List.vue
View File

@ -112,7 +112,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<section class="ui vertical center aligned stripe segment"> <section class="ui vertical center aligned stripe segment">
<div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']"> <div :class="['ui', { 'active': isLoading }, 'inverted', 'dimmer']">
<div class="ui text loader"> <div class="ui text loader">
{{ $t('components.favorites.List.loadingMessage') }} {{ $t('components.favorites.List.loader.loading') }}
</div> </div>
</div> </div>
<h2 <h2
@ -120,7 +120,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
class="ui center aligned icon header" class="ui center aligned icon header"
> >
<i class="circular inverted heart pink icon" /> <i class="circular inverted heart pink icon" />
{{ $t('components.favorites.List.favoritesCount', {count: $store.state.favorites.count}) }} {{ $t('components.favorites.List.header.favorites', {count: $store.state.favorites.count}) }}
</h2> </h2>
<radio-button <radio-button
v-if="$store.state.favorites.count > 0" v-if="$store.state.favorites.count > 0"
@ -135,7 +135,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="favorites-ordering"> <label for="favorites-ordering">
{{ $t('components.favorites.List.favoritesOrderingLabel') }} {{ $t('components.favorites.List.ordering.label') }}
</label> </label>
<select <select
id="favorites-ordering" id="favorites-ordering"
@ -153,7 +153,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</div> </div>
<div class="field"> <div class="field">
<label for="favorites-ordering-direction"> <label for="favorites-ordering-direction">
{{ $t('components.favorites.List.favoritesOrderingDirectionLabel') }} {{ $t('components.favorites.List.ordering.direction.label') }}
</label> </label>
<select <select
id="favorites-ordering-direction" id="favorites-ordering-direction"
@ -161,16 +161,16 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.favorites.List.orderingDirectionAscending') }} {{ $t('components.favorites.List.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.favorites.List.orderingDirectionDescending') }} {{ $t('components.favorites.List.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="favorites-results"> <label for="favorites-results">
{{ $t('components.favorites.List.favoritesResultsPerPageLabel') }} {{ $t('components.favorites.List.pagination.results') }}
</label> </label>
<select <select
id="favorites-results" id="favorites-results"
@ -209,14 +209,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="broken heart icon" /> <i class="broken heart icon" />
{{ $t('components.favorites.List.emptyState') }} {{ $t('components.favorites.List.empty.noFavorites') }}
</div> </div>
<router-link <router-link
:to="'/library'" :to="'/library'"
class="ui success labeled icon button" class="ui success labeled icon button"
> >
<i class="headphones icon" /> <i class="headphones icon" />
{{ $t('components.favorites.List.libraryLink') }} {{ $t('components.favorites.List.link.library') }}
</router-link> </router-link>
</div> </div>
</main> </main>

8
front/src/components/favorites/TrackFavoriteIcon.vue
View File

@ -23,8 +23,8 @@ const store = useStore()
const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id)) const isFavorite = computed(() => store.getters['favorites/isFavorite'](props.track.id))
const title = computed(() => isFavorite.value const title = computed(() => isFavorite.value
? t('components.favorites.TrackFavoriteIcon.removeFromFavorites') ? t('components.favorites.TrackFavoriteIcon.button.remove')
: t('components.favorites.TrackFavoriteIcon.addToFavorites') : t('components.favorites.TrackFavoriteIcon.button.add')
) )
</script> </script>
@ -38,12 +38,12 @@ const title = computed(() => isFavorite.value
<span <span
v-if="isFavorite" v-if="isFavorite"
> >
{{ $t('components.favorites.TrackFavoriteIcon.isFavorited') }} {{ $t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.favorites.TrackFavoriteIcon.addToFavorites') }} {{ $t('components.favorites.TrackFavoriteIcon.button.add') }}
</span> </span>
</button> </button>
<button <button

48
front/src/components/federation/FetchButton.vue
View File

@ -80,7 +80,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="small" class="small"
> >
<h3 class="header"> <h3 class="header">
{{ $t('components.federation.FetchButton.remoteRefreshHeader') }} {{ $t('components.federation.FetchButton.header.refresh') }}
</h3> </h3>
<div class="scrolling content"> <div class="scrolling content">
<template v-if="data && data.status != 'pending'"> <template v-if="data && data.status != 'pending'">
@ -89,10 +89,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui message" class="ui message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.federation.FetchButton.refreshSkippedHeader') }} {{ $t('components.federation.FetchButton.header.skipped') }}
</h4> </h4>
<p> <p>
{{ $t('components.federation.FetchButton.unsupportedDataMessage') }} {{ $t('components.federation.FetchButton.description.skipped') }}
</p> </p>
</div> </div>
<div <div
@ -100,10 +100,10 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui success message" class="ui success message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.federation.FetchButton.refreshSuccessHeader') }} {{ $t('components.federation.FetchButton.header.success') }}
</h4> </h4>
<p> <p>
{{ $t('components.federation.FetchButton.refreshSuccessMessage') }} {{ $t('components.federation.FetchButton.description.success') }}
</p> </p>
</div> </div>
<div <div
@ -111,16 +111,16 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui error message" class="ui error message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.federation.FetchButton.refreshFailureHeader') }} {{ $t('components.federation.FetchButton.header.failure') }}
</h4> </h4>
<p> <p>
{{ $t('components.federation.FetchButton.refreshFailureMessage') }} {{ $t('components.federation.FetchButton.description.failure') }}
</p> </p>
<table class="ui very basic collapsing celled table"> <table class="ui very basic collapsing celled table">
<tbody> <tbody>
<tr> <tr>
<td> <td>
{{ $t('components.federation.FetchButton.errorTypeTableHeader') }} {{ $t('components.federation.FetchButton.table.error.label.type') }}
</td> </td>
<td> <td>
{{ data.detail.error_code }} {{ data.detail.error_code }}
@ -128,48 +128,48 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.federation.FetchButton.errorDetailTableRow') }} {{ $t('components.federation.FetchButton.table.error.label.detail') }}
</td> </td>
<td> <td>
<span <span
v-if="data.detail.error_code === 'http' && data.detail.status_code" v-if="data.detail.error_code === 'http' && data.detail.status_code"
> >
{{ $t('components.federation.FetchButton.httpStatusMessage', {status: data.detail.status_code}) }} {{ $t('components.federation.FetchButton.table.error.value.httpStatus', {status: data.detail.status_code}) }}
</span> </span>
<span <span
v-else-if="['http', 'request'].indexOf(data.detail.error_code) > -1" v-else-if="['http', 'request'].indexOf(data.detail.error_code) > -1"
> >
{{ $t('components.federation.FetchButton.httpErrorMessage') }} {{ $t('components.federation.FetchButton.table.error.value.httpError') }}
</span> </span>
<span <span
v-else-if="data.detail.error_code === 'timeout'" v-else-if="data.detail.error_code === 'timeout'"
> >
{{ $t('components.federation.FetchButton.timeoutErrorMessage') }} {{ $t('components.federation.FetchButton.table.error.value.timeoutError') }}
</span> </span>
<span <span
v-else-if="data.detail.error_code === 'connection'" v-else-if="data.detail.error_code === 'connection'"
> >
{{ $t('components.federation.FetchButton.connectionErrorMessage') }} {{ $t('components.federation.FetchButton.table.error.value.connectionError') }}
</span> </span>
<span <span
v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].indexOf(data.detail.error_code) > -1" v-else-if="['invalid_json', 'invalid_jsonld', 'missing_jsonld_type'].indexOf(data.detail.error_code) > -1"
> >
{{ $t('components.federation.FetchButton.invalidJsonErrorMessage') }} {{ $t('components.federation.FetchButton.table.error.value.invalidJsonError') }}
</span> </span>
<span <span
v-else-if="data.detail.error_code === 'validation'" v-else-if="data.detail.error_code === 'validation'"
> >
{{ $t('components.federation.FetchButton.invalidAttributesErrorMessage') }} {{ $t('components.federation.FetchButton.table.error.value.invalidAttributesError') }}
</span> </span>
<span <span
v-else-if="data.detail.error_code === 'unhandled'" v-else-if="data.detail.error_code === 'unhandled'"
> >
{{ $t('components.federation.FetchButton.unknownErrorMessage') }} {{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.federation.FetchButton.unknownErrorMessage') }} {{ $t('components.federation.FetchButton.table.error.value.unknownError') }}
</span> </span>
</td> </td>
</tr> </tr>
@ -182,7 +182,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui active inverted dimmer" class="ui active inverted dimmer"
> >
<div class="ui text loader"> <div class="ui text loader">
{{ $t('components.federation.FetchButton.fetchRequestLoader') }} {{ $t('components.federation.FetchButton.loader.fetchRequest') }}
</div> </div>
</div> </div>
<div <div
@ -190,7 +190,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui active inverted dimmer" class="ui active inverted dimmer"
> >
<div class="ui text loader"> <div class="ui text loader">
{{ $t('components.federation.FetchButton.awaitingResultLoader') }} {{ $t('components.federation.FetchButton.loader.awaitingResult') }}
</div> </div>
</div> </div>
<div <div
@ -199,7 +199,7 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.federation.FetchButton.loadingFailureMessage') }} {{ $t('components.federation.FetchButton.header.saveFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -216,23 +216,23 @@ const { start: startPolling } = useTimeoutFn(poll, 1000, { immediate: false })
class="ui warning message" class="ui warning message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.federation.FetchButton.pendingRefreshHeader') }} {{ $t('components.federation.FetchButton.header.pending') }}
</h4> </h4>
<p> <p>
{{ $t('components.federation.FetchButton.pendingRefreshMessage') }} {{ $t('components.federation.FetchButton.description.pending') }}
</p> </p>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
{{ $t('components.federation.FetchButton.closeButton') }} {{ $t('components.federation.FetchButton.button.close') }}
</button> </button>
<button <button
v-if="data && data.status === 'finished'" v-if="data && data.status === 'finished'"
class="ui confirm success button" class="ui confirm success button"
@click.prevent="showModal = false; emit('refresh')" @click.prevent="showModal = false; emit('refresh')"
> >
{{ $t('components.federation.FetchButton.reloadButton') }} {{ $t('components.federation.FetchButton.button.reload') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

4
front/src/components/federation/LibraryWidget.vue
View File

@ -64,7 +64,7 @@ fetchData()
v-if="!isLoading && libraries.length === 0" v-if="!isLoading && libraries.length === 0"
class="ui subtitle" class="ui subtitle"
> >
{{ $t('components.federation.LibraryWidget.noMatchMessage') }} {{ $t('components.federation.LibraryWidget.empty.noMatch') }}
</p> </p>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui cards"> <div class="ui cards">
@ -90,7 +90,7 @@ fetchData()
:class="['ui', 'basic', 'button']" :class="['ui', 'basic', 'button']"
@click="fetchData(nextPage)" @click="fetchData(nextPage)"
> >
{{ $t('components.federation.LibraryWidget.showMoreButton') }} {{ $t('components.federation.LibraryWidget.button.showMore') }}
</button> </button>
</template> </template>
</div> </div>

6
front/src/components/forms/PasswordInput.vue
View File

@ -27,8 +27,8 @@ const showPassword = ref(props.defaultShow)
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('components.federation.PasswordInput.title'), title: t('components.forms.PasswordInput.title'),
copy: t('components.federation.PasswordInput.copyLabel') copy: t('components.forms.PasswordInput.button.copy')
})) }))
const passwordInputType = computed(() => showPassword.value ? 'text' : 'password') const passwordInputType = computed(() => showPassword.value ? 'text' : 'password')
@ -38,7 +38,7 @@ const { isSupported: canCopy, copy } = useClipboard({ source: value })
const copyPassword = () => { const copyPassword = () => {
copy() copy()
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('components.federation.PasswordInput.copySuccessMessage'), content: t('components.forms.PasswordInput.message.copy'),
date: new Date() date: new Date()
}) })
} }

12
front/src/components/library/AlbumBase.vue
View File

@ -180,12 +180,12 @@ const remove = async () => {
<span <span
v-if="isSerie" v-if="isSerie"
> >
{{ $t('components.library.AlbumBase.episodeCount', {episode_count: totalTracks}) }} {{ $t('components.library.AlbumBase.meta.episodes', {episode_count: totalTracks}) }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.library.AlbumBase.trackCount', {tracks_count: totalTracks}) }} {{ $t('components.library.AlbumBase.meta.tracks', {tracks_count: totalTracks}) }}
</span> </span>
</template> </template>
<div class="ui small hidden divider" /> <div class="ui small hidden divider" />
@ -263,12 +263,12 @@ const remove = async () => {
<span <span
v-if="isSerie" v-if="isSerie"
> >
{{ $t('components.library.AlbumBase.episodeCount', {episode_count: totalTracks}) }} {{ $t('components.library.AlbumBase.meta.episodes', {episode_count: totalTracks}) }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.library.AlbumBase.trackCount', {tracks_count: totalTracks}) }} {{ $t('components.library.AlbumBase.meta.tracks', {tracks_count: totalTracks}) }}
</span> </span>
<span class="middle middledot symbol" /> <span class="middle middledot symbol" />
</template> </template>
@ -311,7 +311,7 @@ const remove = async () => {
:to="{name: 'library.albums.edit', params: {id: object.id }}" :to="{name: 'library.albums.edit', params: {id: object.id }}"
> >
<i class="pencil icon" /> <i class="pencil icon" />
{{ $t('components.library.AlbumBase.addDescription') }} {{ $t('components.library.AlbumBase.link.addDescription') }}
</router-link> </router-link>
</div> </div>
</div> </div>
@ -327,7 +327,7 @@ const remove = async () => {
:to="{name: 'library.albums.edit', params: {id: object.id }}" :to="{name: 'library.albums.edit', params: {id: object.id }}"
> >
<i class="pencil icon" /> <i class="pencil icon" />
{{ $t('components.library.AlbumBase.addDescription') }} {{ $t('components.library.AlbumBase.link.addDescription') }}
</router-link> </router-link>
</template> </template>
</div> </div>

10
front/src/components/library/AlbumDetail.vue
View File

@ -61,10 +61,10 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
<div v-else-if="object"> <div v-else-if="object">
<h2 class="ui header"> <h2 class="ui header">
<span v-if="isSerie"> <span v-if="isSerie">
{{ $t('components.library.AlbumDetail.episodesHeader') }} {{ $t('components.library.AlbumDetail.header.episodes') }}
</span> </span>
<span v-else> <span v-else>
{{ $t('components.library.AlbumDetail.tracksHeader') }} {{ $t('components.library.AlbumDetail.header.tracks') }}
</span> </span>
</h2> </h2>
@ -88,7 +88,7 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
:tracks="discs[index]" :tracks="discs[index]"
/> />
<h3> <h3>
{{ $t('components.library.AlbumDetail.volumeNumber', {number: tracks[0].disc_number}) }} {{ $t('components.library.AlbumDetail.meta.volume', {number: tracks[0].disc_number}) }}
</h3> </h3>
<track-table <track-table
:is-album="true" :is-album="true"
@ -128,13 +128,13 @@ const paginatedDiscs = computed(() => props.object.tracks.slice(props.paginateBy
<template v-if="!artist.channel && !isSerie"> <template v-if="!artist.channel && !isSerie">
<h2> <h2>
{{ $t('components.library.AlbumDetail.userLibraryHeader') }} {{ $t('components.library.AlbumDetail.header.libraries') }}
</h2> </h2>
<library-widget <library-widget
:url="'albums/' + object.id + '/libraries/'" :url="'albums/' + object.id + '/libraries/'"
@loaded="emit('libraries-loaded', $event)" @loaded="emit('libraries-loaded', $event)"
> >
{{ $t('components.library.AlbumDetail.userLibraryDescription') }} {{ $t('components.library.AlbumDetail.description.libraries') }}
</library-widget> </library-widget>
</template> </template>
</div> </div>

28
front/src/components/library/AlbumDropdown.vue
View File

@ -35,7 +35,7 @@ const domain = computed(() => getDomain(props.object.fid))
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
more: t('components.library.AlbumDropdown.moreLabel') more: t('components.library.AlbumDropdown.button.more')
})) }))
const isEmbedable = computed(() => (props.isChannel && props.artist?.channel?.actor) || props.publicLibraries.length) const isEmbedable = computed(() => (props.isChannel && props.artist?.channel?.actor) || props.publicLibraries.length)
@ -53,7 +53,7 @@ const remove = () => emit('remove')
v-model:show="showEmbedModal" v-model:show="showEmbedModal"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.library.AlbumDropdown.embedModalHeader') }} {{ $t('components.library.AlbumDropdown.modal.embed.header') }}
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
<div class="description"> <div class="description">
@ -66,7 +66,7 @@ const remove = () => emit('remove')
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic deny button"> <button class="ui basic deny button">
{{ $t('components.channels.AlbumModal.cancelButton') }} {{ $t('components.library.AlbumDropdown.button.cancel') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>
@ -84,7 +84,7 @@ const remove = () => emit('remove')
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.AlbumDropdown.domainViewLink') }} {{ $t('components.library.AlbumDropdown.link.domain') }}
</a> </a>
<div <div
@ -94,7 +94,7 @@ const remove = () => emit('remove')
@click="showEmbedModal = !showEmbedModal" @click="showEmbedModal = !showEmbedModal"
> >
<i class="code icon" /> <i class="code icon" />
{{ $t('components.audio.EmbedWizard.copyButton') }} {{ $t('components.library.AlbumDropdown.button.embed') }}
</div> </div>
<a <a
v-if="isAlbum && musicbrainzUrl" v-if="isAlbum && musicbrainzUrl"
@ -104,7 +104,7 @@ const remove = () => emit('remove')
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.AlbumDropdown.musicbrainzLink') }} {{ $t('components.library.AlbumDropdown.link.musicbrainz') }}
</a> </a>
<a <a
v-if="!isChannel && isAlbum" v-if="!isChannel && isAlbum"
@ -114,7 +114,7 @@ const remove = () => emit('remove')
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.AlbumDropdown.discogsLink') }} {{ $t('components.library.AlbumDropdown.link.discogs') }}
</a> </a>
<router-link <router-link
v-if="object.is_local" v-if="object.is_local"
@ -122,7 +122,7 @@ const remove = () => emit('remove')
class="basic item" class="basic item"
> >
<i class="edit icon" /> <i class="edit icon" />
{{ $t('components.library.AlbumDropdown.editButton') }} {{ $t('components.library.AlbumDropdown.button.edit') }}
</router-link> </router-link>
<dangerous-button <dangerous-button
v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername" v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername"
@ -130,22 +130,22 @@ const remove = () => emit('remove')
@confirm="remove()" @confirm="remove()"
> >
<i class="ui trash icon" /> <i class="ui trash icon" />
{{ $t('components.library.AlbumDropdown.deleteButton') }} {{ $t('components.library.AlbumDropdown.button.delete') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.library.AlbumDropdown.deleteModalHeader') }} {{ $t('components.library.AlbumDropdown.modal.delete.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
{{ $t('components.library.AlbumDropdown.deleteModalMessage') }} {{ $t('components.library.AlbumDropdown.modal.delete.content.warning') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<p> <p>
{{ $t('components.library.AlbumDropdown.deleteButton') }} {{ $t('components.library.AlbumDropdown.button.delete') }}
</p> </p>
</template> </template>
</dangerous-button> </dangerous-button>
@ -166,7 +166,7 @@ const remove = () => emit('remove')
:to="{name: 'manage.library.albums.detail', params: {id: object.id}}" :to="{name: 'manage.library.albums.detail', params: {id: object.id}}"
> >
<i class="wrench icon" /> <i class="wrench icon" />
{{ $t('components.library.AlbumDropdown.moderationLink') }} {{ $t('components.library.AlbumDropdown.link.moderation') }}
</router-link> </router-link>
<a <a
v-if="$store.state.auth.profile && $store.state.auth.profile?.is_superuser" v-if="$store.state.auth.profile && $store.state.auth.profile?.is_superuser"
@ -176,7 +176,7 @@ const remove = () => emit('remove')
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<i class="wrench icon" /> <i class="wrench icon" />
{{ $t('components.library.AlbumDropdown.djangoLink') }} {{ $t('components.library.AlbumDropdown.link.django') }}
</a> </a>
</div> </div>
</button> </button>

6
front/src/components/library/AlbumEdit.vue
View File

@ -25,19 +25,19 @@ const canEdit = store.state.auth.availablePermissions.library
<span <span
v-if="canEdit" v-if="canEdit"
> >
{{ $t('components.library.AlbumEdit.editAlbumHeader') }} {{ $t('components.library.AlbumEdit.header.edit') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.library.AlbumEdit.suggestEditHeader') }} {{ $t('components.library.AlbumEdit.header.suggest') }}
</span> </span>
</h2> </h2>
<div <div
v-if="!object.is_local" v-if="!object.is_local"
class="ui message" class="ui message"
> >
{{ $t('components.library.AlbumEdit.remoteObjectWarning') }} {{ $t('components.library.AlbumEdit.message.remote') }}
</div> </div>
<edit-form <edit-form
v-else v-else

24
front/src/components/library/Albums.vue
View File

@ -110,7 +110,7 @@ onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.library.Albums.searchPlaceholder'), searchPlaceholder: t('components.library.Albums.placeholder.search'),
title: t('components.library.Albums.title') title: t('components.library.Albums.title')
})) }))
@ -121,7 +121,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<main v-title="labels.title"> <main v-title="labels.title">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.Albums.albumBrowseHeader') }} {{ $t('components.library.Albums.header.browse') }}
</h2> </h2>
<form <form
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@ -130,7 +130,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="albums-search"> <label for="albums-search">
{{ $t('components.library.Albums.searchLabel') }} {{ $t('components.library.Albums.label.search') }}
</label> </label>
<div class="ui action input"> <div class="ui action input">
<input <input
@ -143,18 +143,18 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<button <button
class="ui icon button" class="ui icon button"
type="submit" type="submit"
:aria-label="t('components.library.Albums.searchLabel')" :aria-label="t('components.library.Albums.button.search')"
> >
<i class="search icon" /> <i class="search icon" />
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-search">{{ $t('components.library.Albums.tagsLabel') }}</label> <label for="tags-search">{{ $t('components.library.Albums.label.tags') }}</label>
<tags-selector v-model="tags" /> <tags-selector v-model="tags" />
</div> </div>
<div class="field"> <div class="field">
<label for="album-ordering">{{ $t('components.library.Albums.orderingLabel') }}</label> <label for="album-ordering">{{ $t('components.library.Albums.ordering.label') }}</label>
<select <select
id="album-ordering" id="album-ordering"
v-model="ordering" v-model="ordering"
@ -170,22 +170,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="album-ordering-direction">{{ $t('components.library.Albums.orderingDirectionLabel') }}</label> <label for="album-ordering-direction">{{ $t('components.library.Albums.ordering.direction.label') }}</label>
<select <select
id="album-ordering-direction" id="album-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.library.Albums.ascendingOrdering') }} {{ $t('components.library.Albums.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.library.Albums.descendingOrdering') }} {{ $t('components.library.Albums.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="album-results">{{ $t('components.library.Albums.resultsPerPageLabel') }}</label> <label for="album-results">{{ $t('components.library.Albums.pagination.results') }}</label>
<select <select
id="album-results" id="album-results"
v-model="paginateBy" v-model="paginateBy"
@ -228,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="compact disc icon" /> <i class="compact disc icon" />
{{ $t('components.library.Albums.emptyStateMessage') }} {{ $t('components.library.Albums.empty.noResults') }}
</div> </div>
<router-link <router-link
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -236,7 +236,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
class="ui success button labeled icon" class="ui success button labeled icon"
> >
<i class="upload icon" /> <i class="upload icon" />
{{ $t('components.library.Albums.addMusicLink') }} {{ $t('components.library.Albums.link.addMusic') }}
</router-link> </router-link>
</div> </div>
</div> </div>

26
front/src/components/library/ArtistBase.vue
View File

@ -118,7 +118,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="sub header" class="sub header"
> >
<div> <div>
{{ $t('components.library.ArtistBase.tracksCount', {count: totalTracks, albums: totalAlbums}) }} {{ $t('components.library.ArtistBase.meta.tracks', {count: totalTracks, albums: totalAlbums}) }}
</div> </div>
</div> </div>
</div> </div>
@ -141,7 +141,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="vibrant" class="vibrant"
:artist="object" :artist="object"
> >
{{ $t('components.library.ArtistBase.playAllButton') }} {{ $t('components.library.ArtistBase.button.play') }}
</play-button> </play-button>
</div> </div>
@ -150,7 +150,7 @@ watch(() => props.id, fetchData, { immediate: true })
v-model:show="showEmbedModal" v-model:show="showEmbedModal"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.library.ArtistBase.embedModalHeader') }} {{ $t('components.library.ArtistBase.modal.embed.header') }}
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
<div class="description"> <div class="description">
@ -162,7 +162,7 @@ watch(() => props.id, fetchData, { immediate: true })
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui deny button"> <button class="ui deny button">
{{ $t('components.library.ArtistBase.cancelButton') }} {{ $t('components.library.ArtistBase.button.cancel') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>
@ -171,7 +171,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="ui button" class="ui button"
@click="dropdown.click()" @click="dropdown.click()"
> >
{{ $t('components.library.ArtistBase.moreButton') }} {{ $t('components.library.ArtistBase.button.more') }}
</button> </button>
<button <button
ref="dropdown" ref="dropdown"
@ -187,7 +187,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.ArtistBase.domainViewLink', {domain: domain}) }} {{ $t('components.library.ArtistBase.link.domain', {domain: domain}) }}
</a> </a>
<button <button
@ -197,7 +197,7 @@ watch(() => props.id, fetchData, { immediate: true })
@click.prevent="showEmbedModal = !showEmbedModal" @click.prevent="showEmbedModal = !showEmbedModal"
> >
<i class="code icon" /> <i class="code icon" />
{{ $t('components.library.ArtistBase.embedButton') }} {{ $t('components.library.ArtistBase.button.embed') }}
</button> </button>
<a <a
:href="wikipediaUrl" :href="wikipediaUrl"
@ -206,7 +206,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="wikipedia w icon" /> <i class="wikipedia w icon" />
{{ $t('components.library.ArtistBase.wikipediaLink') }} {{ $t('components.library.ArtistBase.link.wikipedia') }}
</a> </a>
<a <a
v-if="musicbrainzUrl" v-if="musicbrainzUrl"
@ -216,7 +216,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.ArtistBase.musicbrainzLink') }} {{ $t('components.library.ArtistBase.link.musicbrainz') }}
</a> </a>
<a <a
:href="discogsUrl" :href="discogsUrl"
@ -225,7 +225,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.ArtistBase.discogsLink') }} {{ $t('components.library.ArtistBase.link.discogs') }}
</a> </a>
<router-link <router-link
v-if="object.is_local" v-if="object.is_local"
@ -233,7 +233,7 @@ watch(() => props.id, fetchData, { immediate: true })
class="basic item" class="basic item"
> >
<i class="edit icon" /> <i class="edit icon" />
{{ $t('components.library.ArtistBase.editButton') }} {{ $t('components.library.ArtistBase.button.edit') }}
</router-link> </router-link>
<div class="divider" /> <div class="divider" />
<div <div
@ -253,7 +253,7 @@ watch(() => props.id, fetchData, { immediate: true })
:to="{name: 'manage.library.artists.detail', params: {id: object.id}}" :to="{name: 'manage.library.artists.detail', params: {id: object.id}}"
> >
<i class="wrench icon" /> <i class="wrench icon" />
{{ $t('components.library.ArtistBase.moderationLink') }} {{ $t('components.library.ArtistBase.link.moderation') }}
</router-link> </router-link>
<a <a
v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser" v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
@ -263,7 +263,7 @@ watch(() => props.id, fetchData, { immediate: true })
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<i class="wrench icon" /> <i class="wrench icon" />
{{ $t('components.library.ArtistBase.djangoLink') }} {{ $t('components.library.ArtistBase.link.django') }}
</a> </a>
</div> </div>
</button> </button>

16
front/src/components/library/ArtistDetail.vue
View File

@ -65,19 +65,19 @@ const loadMoreAlbums = async () => {
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui message"> <div class="ui message">
<p> <p>
{{ $t('components.library.ArtistDetail.hiddenContentMessage') }} {{ $t('components.library.ArtistDetail.message.filter') }}
</p> </p>
<router-link <router-link
class="right floated" class="right floated"
:to="{name: 'settings'}" :to="{name: 'settings'}"
> >
{{ $t('components.library.ArtistDetail.reviewFiltersLink') }} {{ $t('components.library.ArtistDetail.link.filter') }}
</router-link> </router-link>
<button <button
class="ui basic tiny button" class="ui basic tiny button"
@click="$store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)" @click="$store.dispatch('moderation/deleteContentFilter', contentFilter.uuid)"
> >
{{ $t('components.library.ArtistDetail.removeFilterButton') }} {{ $t('components.library.ArtistDetail.button.filter') }}
</button> </button>
</div> </div>
</div> </div>
@ -92,7 +92,7 @@ const loadMoreAlbums = async () => {
class="ui vertical stripe segment" class="ui vertical stripe segment"
> >
<h2> <h2>
{{ $t('components.library.ArtistDetail.artistAlbumsHeader') }} {{ $t('components.library.ArtistDetail.header.album') }}
</h2> </h2>
<div class="ui cards app-cards"> <div class="ui cards app-cards">
<album-card <album-card
@ -107,7 +107,7 @@ const loadMoreAlbums = async () => {
:class="['ui', {loading: isLoadingMoreAlbums}, 'button']" :class="['ui', {loading: isLoadingMoreAlbums}, 'button']"
@click="loadMoreAlbums()" @click="loadMoreAlbums()"
> >
{{ $t('components.library.ArtistDetail.loadMoreButton') }} {{ $t('components.library.ArtistDetail.button.more') }}
</button> </button>
</section> </section>
<section <section
@ -122,7 +122,7 @@ const loadMoreAlbums = async () => {
> >
<template #header> <template #header>
<h2> <h2>
{{ $t('components.library.ArtistDetail.newTracksHeader') }} {{ $t('components.library.ArtistDetail.header.track') }}
</h2> </h2>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
</template> </template>
@ -130,13 +130,13 @@ const loadMoreAlbums = async () => {
</section> </section>
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2> <h2>
{{ $t('components.library.ArtistDetail.userLibraryHeader') }} {{ $t('components.library.ArtistDetail.header.library') }}
</h2> </h2>
<library-widget <library-widget
:url="'artists/' + object.id + '/libraries/'" :url="'artists/' + object.id + '/libraries/'"
@loaded="emit('libraries-loaded', $event)" @loaded="emit('libraries-loaded', $event)"
> >
{{ $t('components.library.ArtistDetail.userLibraryDescription') }} {{ $t('components.library.ArtistDetail.description.library') }}
</library-widget> </library-widget>
</section> </section>
</div> </div>

6
front/src/components/library/ArtistEdit.vue
View File

@ -25,19 +25,19 @@ const canEdit = store.state.auth.availablePermissions.library
<span <span
v-if="canEdit" v-if="canEdit"
> >
{{ $t('components.library.ArtistEdit.editArtistHeader') }} {{ $t('components.library.ArtistEdit.header.edit') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.library.ArtistEdit.suggestEditHeader') }} {{ $t('components.library.ArtistEdit.header.suggest') }}
</span> </span>
</h2> </h2>
<div <div
v-if="!object.is_local" v-if="!object.is_local"
class="ui message" class="ui message"
> >
{{ $t('components.library.ArtistEdit.remoteObjectWarning') }} {{ $t('components.library.ArtistEdit.message.remote') }}
</div> </div>
<edit-form <edit-form
v-else v-else

28
front/src/components/library/Artists.vue
View File

@ -111,7 +111,7 @@ onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.library.Artists.searchPlaceholder'), searchPlaceholder: t('components.library.Artists.placeholder.search'),
title: t('components.library.Artists.title') title: t('components.library.Artists.title')
})) }))
@ -122,7 +122,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<main v-title="labels.title"> <main v-title="labels.title">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.Artists.artistBrowseHeader') }} {{ $t('components.library.Artists.header.browse') }}
</h2> </h2>
<form <form
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@ -131,7 +131,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="artist-search"> <label for="artist-search">
{{ $t('components.library.Artists.searchLabel') }} {{ $t('components.library.Artists.label.search') }}
</label> </label>
<div class="ui action input"> <div class="ui action input">
<input <input
@ -144,18 +144,18 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<button <button
class="ui icon button" class="ui icon button"
type="submit" type="submit"
:aria-label="t('components.library.Artists.searchButton')" :aria-label="t('components.library.Artists.button.search')"
> >
<i class="search icon" /> <i class="search icon" />
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-search">{{ $t('components.library.Artists.tagsLabel') }}</label> <label for="tags-search">{{ $t('components.library.Artists.label.tags') }}</label>
<tags-selector v-model="tags" /> <tags-selector v-model="tags" />
</div> </div>
<div class="field"> <div class="field">
<label for="artist-ordering">{{ $t('components.library.Artists.orderingLabel') }}</label> <label for="artist-ordering">{{ $t('components.library.Artists.ordering.label') }}</label>
<select <select
id="artist-ordering" id="artist-ordering"
v-model="ordering" v-model="ordering"
@ -171,22 +171,22 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artist-ordering-direction">{{ $t('components.library.Artists.orderingDirectionLabel') }}</label> <label for="artist-ordering-direction">{{ $t('components.library.Artists.ordering.direction.label') }}</label>
<select <select
id="artist-ordering-direction" id="artist-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.library.Artists.ascendingOrdering') }} {{ $t('components.library.Artists.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.library.Artists.descendingOrdering') }} {{ $t('components.library.Artists.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artist-results">{{ $t('components.library.Artists.resultsPerPageLabel') }}</label> <label for="artist-results">{{ $t('components.library.Artists.pagination.results') }}</label>
<select <select
id="artist-results" id="artist-results"
v-model="paginateBy" v-model="paginateBy"
@ -202,7 +202,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<span id="excludeHeader">{{ $t('components.library.Artists.excludeCompilationArtistsLabel') }}</span> <span id="excludeHeader">{{ $t('components.library.Artists.label.excludeCompilation') }}</span>
<div <div
id="excludeCompilation" id="excludeCompilation"
class="ui toggle checkbox" class="ui toggle checkbox"
@ -217,7 +217,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<label <label
for="exclude-compilation" for="exclude-compilation"
class="visually-hidden" class="visually-hidden"
>{{ $t('components.library.Artists.excludeCompilationArtistsLabel') }}</label> >{{ $t('components.library.Artists.label.excludeCompilation') }}</label>
</div> </div>
</div> </div>
</div> </div>
@ -246,7 +246,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="compact disc icon" /> <i class="compact disc icon" />
{{ $t('components.library.Artists.emptyStateMessage') }} {{ $t('components.library.Artists.empty.noResults') }}
</div> </div>
<router-link <router-link
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -254,7 +254,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
class="ui success button labeled icon" class="ui success button labeled icon"
> >
<i class="upload icon" /> <i class="upload icon" />
{{ $t('components.library.Artists.addMusicLink') }} {{ $t('components.library.Artists.button.upload') }}
</router-link> </router-link>
</div> </div>
<div class="ui center aligned basic segment"> <div class="ui center aligned basic segment">

32
front/src/components/library/EditCard.vue
View File

@ -156,7 +156,7 @@ const approve = async (approved: boolean) => {
<div class="content"> <div class="content">
<h4 class="header"> <h4 class="header">
<router-link :to="detailUrl"> <router-link :to="detailUrl">
{{ $t('components.library.EditCard.modificationHeader', {id: obj.uuid.substring(0, 8)}) }} {{ $t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)}) }}
</router-link> </router-link>
</h4> </h4>
<div class="meta"> <div class="meta">
@ -165,7 +165,7 @@ const approve = async (approved: boolean) => {
:to="{name: 'library.tracks.detail', params: {id: obj.target.id }}" :to="{name: 'library.tracks.detail', params: {id: obj.target.id }}"
> >
<i class="music icon" /> <i class="music icon" />
{{ $t('components.library.EditCard.trackLink', {id: obj.target.id, name: obj.target.repr}) }} {{ $t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}
</router-link> </router-link>
<br> <br>
<human-date <human-date
@ -176,19 +176,19 @@ const approve = async (approved: boolean) => {
<span class="right floated"> <span class="right floated">
<span v-if="obj.is_approved && obj.is_applied"> <span v-if="obj.is_approved && obj.is_applied">
<i class="success check icon" /> <i class="success check icon" />
{{ $t('components.library.EditCard.appliedStatus') }} {{ $t('components.library.EditCard.status.applied') }}
</span> </span>
<span v-else-if="obj.is_approved"> <span v-else-if="obj.is_approved">
<i class="success check icon" /> <i class="success check icon" />
{{ $t('components.library.EditCard.approvedStatus') }} {{ $t('components.library.EditCard.status.approved') }}
</span> </span>
<span v-else-if="obj.is_approved === null"> <span v-else-if="obj.is_approved === null">
<i class="warning hourglass icon" /> <i class="warning hourglass icon" />
{{ $t('components.library.EditCard.pendingReviewStatus') }} {{ $t('components.library.EditCard.status.pending') }}
</span> </span>
<span v-else-if="obj.is_approved === false"> <span v-else-if="obj.is_approved === false">
<i class="danger x icon" /> <i class="danger x icon" />
{{ $t('components.library.EditCard.rejectedStatus') }} {{ $t('components.library.EditCard.status.rejected') }}
</span> </span>
</span> </span>
</div> </div>
@ -207,13 +207,13 @@ const approve = async (approved: boolean) => {
<thead> <thead>
<tr> <tr>
<th> <th>
{{ $t('components.library.EditCard.fieldTableHeader') }} {{ $t('components.library.EditCard.table.update.header.field') }}
</th> </th>
<th> <th>
{{ $t('components.library.EditCard.oldValueTableHeader') }} {{ $t('components.library.EditCard.table.update.header.oldValue') }}
</th> </th>
<th> <th>
{{ $t('components.library.EditCard.newValueTableHeader') }} {{ $t('components.library.EditCard.table.update.header.newValue') }}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -243,7 +243,7 @@ const approve = async (approved: boolean) => {
</template> </template>
</td> </td>
<td v-else> <td v-else>
{{ $t('components.library.EditCard.notApplicable') }} {{ $t('components.library.EditCard.table.update.notApplicable') }}
</td> </td>
<td <td
@ -301,36 +301,36 @@ const approve = async (approved: boolean) => {
:class="['ui', {loading: isLoading}, 'success', 'basic', 'button']" :class="['ui', {loading: isLoading}, 'success', 'basic', 'button']"
@click="approve(true)" @click="approve(true)"
> >
{{ $t('components.library.EditCard.approveButton') }} {{ $t('components.library.EditCard.button.approve') }}
</button> </button>
<button <button
v-if="canApprove && obj.is_approved === null" v-if="canApprove && obj.is_approved === null"
:class="['ui', {loading: isLoading}, 'warning', 'basic', 'button']" :class="['ui', {loading: isLoading}, 'warning', 'basic', 'button']"
@click="approve(false)" @click="approve(false)"
> >
{{ $t('components.library.EditCard.rejectButton') }} {{ $t('components.library.EditCard.button.reject') }}
</button> </button>
<dangerous-button <dangerous-button
v-if="canDelete" v-if="canDelete"
:class="['ui', {loading: isLoading}, 'basic danger button']" :class="['ui', {loading: isLoading}, 'basic danger button']"
:action="remove" :action="remove"
> >
{{ $t('components.library.EditCard.deleteButton') }} {{ $t('components.library.EditCard.button.delete') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.library.EditCard.deleteSuggestionModalHeader') }} {{ $t('components.library.EditCard.modal.delete.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
{{ $t('components.library.EditCard.deleteSuggestionModalMessage') }} {{ $t('components.library.EditCard.modal.content.warning') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<p> <p>
{{ $t('components.library.EditCard.deleteButton') }} {{ $t('components.library.EditCard.button.delete') }}
</p> </p>
</template> </template>
</dangerous-button> </dangerous-button>

34
front/src/components/library/EditForm.vue
View File

@ -46,7 +46,7 @@ const canEdit = computed(() => {
}) })
const labels = computed(() => ({ const labels = computed(() => ({
summaryPlaceholder: t('components.library.EditForm.summaryPlaceholder') summaryPlaceholder: t('components.library.EditForm.placeholder.summary')
})) }))
const mutationsUrl = computed(() => props.objectType === 'track' const mutationsUrl = computed(() => props.objectType === 'track'
@ -148,7 +148,7 @@ const resetField = (fieldId: string) => {
<div v-if="submittedMutation"> <div v-if="submittedMutation">
<div class="ui positive message"> <div class="ui positive message">
<h4 class="header"> <h4 class="header">
{{ $t('components.library.EditForm.submissionSuccessHeader') }} {{ $t('components.library.EditForm.header.success') }}
</h4> </h4>
</div> </div>
<edit-card <edit-card
@ -159,7 +159,7 @@ const resetField = (fieldId: string) => {
class="ui button" class="ui button"
@click.prevent="submittedMutation = null" @click.prevent="submittedMutation = null"
> >
{{ $t('components.library.EditForm.newEditButton') }} {{ $t('components.library.EditForm.button.new') }}
</button> </button>
</div> </div>
<div v-else> <div v-else>
@ -171,27 +171,27 @@ const resetField = (fieldId: string) => {
> >
<div> <div>
<template v-if="showPendingReview"> <template v-if="showPendingReview">
{{ $t('components.library.EditForm.editsAwaitingReview') }} {{ $t('components.library.EditForm.header.unreviewed') }}
<button <button
class="ui tiny basic right floated button" class="ui tiny basic right floated button"
@click.prevent="showPendingReview = false" @click.prevent="showPendingReview = false"
> >
{{ $t('components.library.EditForm.showEditsButton') }} {{ $t('components.library.EditForm.button.showAll') }}
</button> </button>
</template> </template>
<template v-else> <template v-else>
{{ $t('components.library.EditForm.recentEdits') }} {{ $t('components.library.EditForm.header.recentEdits') }}
<button <button
class="ui tiny basic right floated button" class="ui tiny basic right floated button"
@click.prevent="showPendingReview = true" @click.prevent="showPendingReview = true"
> >
{{ $t('components.library.EditForm.onlyUnreviewed') }} {{ $t('components.library.EditForm.button.showUnreviewed') }}
</button> </button>
</template> </template>
</div> </div>
<template #empty-state> <template #empty-state>
<empty-state> <empty-state>
{{ $t('components.library.EditForm.emptyStateMessage') }} {{ $t('components.library.EditForm.empty.suggestEdit') }}
</empty-state> </empty-state>
</template> </template>
</edit-list> </edit-list>
@ -206,7 +206,7 @@ const resetField = (fieldId: string) => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.library.EditForm.submissionFailureHeader') }} {{ $t('components.library.EditForm.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -221,7 +221,7 @@ const resetField = (fieldId: string) => {
v-if="!canEdit" v-if="!canEdit"
class="ui message" class="ui message"
> >
{{ $t('components.library.EditForm.noPermissionWarning') }} {{ $t('components.library.EditForm.message.noPermission') }}
</div> </div>
<template v-if="values"> <template v-if="values">
<div <div
@ -266,7 +266,7 @@ const resetField = (fieldId: string) => {
@click.prevent="values[fieldConfig.id] = null" @click.prevent="values[fieldConfig.id] = null"
> >
<i class="x icon" /> <i class="x icon" />
{{ $t('components.library.EditForm.clearButton') }} {{ $t('components.library.EditForm.button.clear') }}
</button> </button>
</template> </template>
<template v-else-if="fieldConfig.type === 'content'"> <template v-else-if="fieldConfig.type === 'content'">
@ -303,7 +303,7 @@ const resetField = (fieldId: string) => {
@click.prevent="values[fieldConfig.id] = []" @click.prevent="values[fieldConfig.id] = []"
> >
<i class="x icon" /> <i class="x icon" />
{{ $t('components.library.EditForm.clearButton') }} {{ $t('components.library.EditForm.button.clear') }}
</button> </button>
</template> </template>
<div v-if="fieldValuesChanged(fieldConfig.id)"> <div v-if="fieldValuesChanged(fieldConfig.id)">
@ -313,13 +313,13 @@ const resetField = (fieldId: string) => {
@click.prevent="resetField(fieldConfig.id)" @click.prevent="resetField(fieldConfig.id)"
> >
<i class="undo icon" /> <i class="undo icon" />
{{ $t('components.library.EditForm.resetButton') }} {{ $t('components.library.EditForm.button.reset') }}
</button> </button>
</div> </div>
</div> </div>
</template> </template>
<div class="field"> <div class="field">
<label for="summary">{{ $t('components.library.EditForm.summaryLabel') }}</label> <label for="summary">{{ $t('components.library.EditForm.label.summary') }}</label>
<textarea <textarea
id="change-summary" id="change-summary"
v-model="summary" v-model="summary"
@ -333,7 +333,7 @@ const resetField = (fieldId: string) => {
class="ui left floated button" class="ui left floated button"
:to="{name: 'library.tracks.detail', params: {id: object.id }}" :to="{name: 'library.tracks.detail', params: {id: object.id }}"
> >
{{ $t('components.library.EditForm.cancelButton') }} {{ $t('components.library.EditForm.button.cancel') }}
</router-link> </router-link>
<button <button
:class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']" :class="['ui', {'loading': isLoading}, 'right', 'floated', 'success', 'button']"
@ -343,12 +343,12 @@ const resetField = (fieldId: string) => {
<span <span
v-if="canEdit" v-if="canEdit"
> >
{{ $t('components.library.EditForm.submitEditButton') }} {{ $t('components.library.EditForm.button.submit') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.library.EditForm.submitSuggestionButton') }} {{ $t('components.library.EditForm.button.suggest') }}
</span> </span>
</button> </button>
</form> </form>

70
front/src/components/library/FileUpload.vue
View File

@ -43,13 +43,13 @@ const supportedExtensions = computed(() => store.state.ui.supportedExtensions)
const labels = computed(() => ({ const labels = computed(() => ({
tooltips: { tooltips: {
denied: t('components.library.FileUpload.deniedTooltip'), denied: t('components.library.FileUpload.tooltip.denied'),
server: t('components.library.FileUpload.serverTooltip'), server: t('components.library.FileUpload.tooltip.size'),
network: t('components.library.FileUpload.networkTooltip'), network: t('components.library.FileUpload.tooltip.network'),
timeout: t('components.library.FileUpload.timeoutTooltip'), timeout: t('components.library.FileUpload.tooltip.timeout'),
retry: t('components.library.FileUpload.retryTooltip'), retry: t('components.library.FileUpload.tooltip.retry'),
extension: t( extension: t(
'components.library.FileUpload.extensionTooltip', 'components.library.FileUpload.tooltip.extension',
{ extensions: supportedExtensions.value.join(', ') } { extensions: supportedExtensions.value.join(', ') }
) )
} as Record<string, string> } as Record<string, string>
@ -282,7 +282,7 @@ const retry = (files: Omit<VueUploadItem, 'xhr'>[]) => {
useEventListener(window, 'beforeunload', (event) => { useEventListener(window, 'beforeunload', (event) => {
if (!hasActiveUploads.value) return null if (!hasActiveUploads.value) return null
event.preventDefault() event.preventDefault()
return (event.returnValue = t('components.library.FileUpload.eventListenerMessage')) return (event.returnValue = t('components.library.FileUpload.message.listener'))
}) })
</script> </script>
@ -294,12 +294,12 @@ useEventListener(window, 'beforeunload', (event) => {
:class="['item', {active: currentTab === 'uploads'}]" :class="['item', {active: currentTab === 'uploads'}]"
@click.prevent="currentTab = 'uploads'" @click.prevent="currentTab = 'uploads'"
> >
{{ $t('components.library.FileUpload.uploadingStatus') }} {{ $t('components.library.FileUpload.link.uploading') }}
<div <div
v-if="files.length === 0" v-if="files.length === 0"
class="ui label" class="ui label"
> >
{{ $t('components.library.FileUpload.noActionableFiles') }} {{ $t('components.library.FileUpload.empty.noFiles') }}
</div> </div>
<div <div
v-else-if="files.length > uploadedFilesCount + erroredFilesCount" v-else-if="files.length > uploadedFilesCount + erroredFilesCount"
@ -323,12 +323,12 @@ useEventListener(window, 'beforeunload', (event) => {
:class="['item', {active: currentTab === 'processing'}]" :class="['item', {active: currentTab === 'processing'}]"
@click.prevent="currentTab = 'processing'" @click.prevent="currentTab = 'processing'"
> >
{{ $t('components.library.FileUpload.processingStatus') }} {{ $t('components.library.FileUpload.link.processing') }}
<div <div
v-if="processableFiles === 0" v-if="processableFiles === 0"
class="ui label" class="ui label"
> >
{{ $t('components.library.FileUpload.noActionableFiles') }} {{ $t('components.library.FileUpload.empty.noFiles') }}
</div> </div>
<div <div
v-else-if="processableFiles > processedFilesCount" v-else-if="processableFiles > processedFilesCount"
@ -352,7 +352,7 @@ useEventListener(window, 'beforeunload', (event) => {
<div :class="['ui', {loading: isLoadingQuota}, 'container']"> <div :class="['ui', {loading: isLoadingQuota}, 'container']">
<div :class="['ui', {red: remainingSpace === 0}, {warning: remainingSpace > 0 && remainingSpace <= 50}, 'small', 'statistic']"> <div :class="['ui', {red: remainingSpace === 0}, {warning: remainingSpace > 0 && remainingSpace <= 50}, 'small', 'statistic']">
<div class="label"> <div class="label">
{{ $t('components.library.FileUpload.storageSpaceLabel') }} {{ $t('components.library.FileUpload.label.remainingSpace') }}
</div> </div>
<div class="value"> <div class="value">
{{ humanSize(remainingSpace * 1000 * 1000) }} {{ humanSize(remainingSpace * 1000 * 1000) }}
@ -360,25 +360,25 @@ useEventListener(window, 'beforeunload', (event) => {
</div> </div>
<div class="ui divider" /> <div class="ui divider" />
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.FileUpload.localUploadHeader') }} {{ $t('components.library.FileUpload.header.local') }}
</h2> </h2>
<div class="ui message"> <div class="ui message">
<p> <p>
{{ $t('components.library.FileUpload.localUploadMessage') }} {{ $t('components.library.FileUpload.message.local.message') }}
</p> </p>
<ul> <ul>
<li v-if="library.privacy_level != 'me'"> <li v-if="library.privacy_level != 'me'">
{{ $t('components.library.FileUpload.localUploadCopyright') }} {{ $t('components.library.FileUpload.message.local.copyright') }}
</li> </li>
<li> <li>
{{ $t('components.library.FileUpload.localUploadTag') }}&nbsp; {{ $t('components.library.FileUpload.message.local.tag') }}&nbsp;
<a <a
href="http://picard.musicbrainz.org/" href="http://picard.musicbrainz.org/"
target="_blank" target="_blank"
>{{ $t('components.library.FileUpload.localUploadPicardLink') }}</a> >{{ $t('components.library.FileUpload.link.picard') }}</a>
</li> </li>
<li> <li>
{{ $t('components.library.FileUpload.localUploadSupportedFormats') }} {{ $t('components.library.FileUpload.message.local.format') }}
</li> </li>
</ul> </ul>
</div> </div>
@ -396,11 +396,11 @@ useEventListener(window, 'beforeunload', (event) => {
@input-file="inputFile" @input-file="inputFile"
> >
<i class="upload icon" />&nbsp; <i class="upload icon" />&nbsp;
{{ $t('components.library.FileUpload.uploadWidgetLabel') }} {{ $t('components.library.FileUpload.label.uploadWidget') }}
<br> <br>
<br> <br>
<i> <i>
{{ $t('components.library.FileUpload.fileUploadSupportedFormats', {extensions: supportedExtensions.join(', ')}) }} {{ $t('components.library.FileUpload.label.extensions', {extensions: supportedExtensions.join(', ')}) }}
</i> </i>
</file-upload-widget> </file-upload-widget>
</div> </div>
@ -413,16 +413,16 @@ useEventListener(window, 'beforeunload', (event) => {
<thead> <thead>
<tr> <tr>
<th class="ten wide"> <th class="ten wide">
{{ $t('components.library.FileUpload.filenameTableHeader') }} {{ $t('components.library.FileUpload.table.upload.header.filename') }}
</th> </th>
<th> <th>
{{ $t('components.library.FileUpload.sizeTableHeader') }} {{ $t('components.library.FileUpload.table.upload.header.size') }}
</th> </th>
<th> <th>
{{ $t('components.library.FileUpload.statusTableHeader') }} {{ $t('components.library.FileUpload.table.upload.header.status') }}
</th> </th>
<th> <th>
{{ $t('components.library.FileUpload.actionsTableHeader') }} {{ $t('components.library.FileUpload.table.upload.header.actions') }}
</th> </th>
</tr> </tr>
<tr v-if="retryableFiles.length > 1"> <tr v-if="retryableFiles.length > 1">
@ -434,7 +434,7 @@ useEventListener(window, 'beforeunload', (event) => {
class="ui right floated small basic button" class="ui right floated small basic button"
@click.prevent="retry(retryableFiles)" @click.prevent="retry(retryableFiles)"
> >
{{ $t('components.library.FileUpload.retryButton') }} {{ $t('components.library.FileUpload.button.retry') }}
</button> </button>
</th> </th>
</tr> </tr>
@ -464,7 +464,7 @@ useEventListener(window, 'beforeunload', (event) => {
> >
<span <span
key="1" key="1"
>{{ $t('components.library.FileUpload.uploadedStatusLabel') }}</span> >{{ $t('components.library.FileUpload.table.upload.status.uploaded') }}</span>
</span> </span>
<span <span
v-else-if="file.active" v-else-if="file.active"
@ -473,9 +473,9 @@ useEventListener(window, 'beforeunload', (event) => {
<span <span
key="2" key="2"
> >
{{ $t('components.library.FileUpload.uploadingStatusLabel') }} {{ $t('components.library.FileUpload.table.upload.status.uploading') }}
</span> </span>
{{ $t('components.library.FileUpload.uploadingProgress', {percent: parseFloat(file.progress ?? '0.00')}) }} {{ $t('components.library.FileUpload.table.upload.progress', {percent: parseFloat(file.progress ?? '0.00')}) }}
</span> </span>
<span <span
v-else v-else
@ -484,7 +484,7 @@ useEventListener(window, 'beforeunload', (event) => {
<span <span
key="3" key="3"
> >
{{ $t('components.library.FileUpload.pendingStatusLabel') }} {{ $t('components.library.FileUpload.table.upload.status.pending') }}
</span> </span>
</span> </span>
</td> </td>
@ -514,7 +514,7 @@ useEventListener(window, 'beforeunload', (event) => {
</div> </div>
<div class="ui divider" /> <div class="ui divider" />
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.FileUpload.serverUploadHeader') }} {{ $t('components.library.FileUpload.header.server') }}
</h2> </h2>
<div <div
v-if="fsErrors.length > 0" v-if="fsErrors.length > 0"
@ -522,7 +522,7 @@ useEventListener(window, 'beforeunload', (event) => {
class="ui negative message" class="ui negative message"
> >
<h3 class="header"> <h3 class="header">
{{ $t('components.library.FileUpload.uploadFailureHeader') }} {{ $t('components.library.FileUpload.header.failure') }}
</h3> </h3>
<ul class="list"> <ul class="list">
<li <li
@ -541,13 +541,13 @@ useEventListener(window, 'beforeunload', (event) => {
/> />
<template v-if="fsStatus && fsStatus.import"> <template v-if="fsStatus && fsStatus.import">
<h3 class="ui header"> <h3 class="ui header">
{{ $t('components.library.FileUpload.importStatusHeader') }} {{ $t('components.library.FileUpload.header.status') }}
</h3> </h3>
<p v-if="fsStatus.import.reference !== importReference"> <p v-if="fsStatus.import.reference !== importReference">
{{ $t('components.library.FileUpload.previousImportStatusMessage') }} {{ $t('components.library.FileUpload.description.previousImport') }}
</p> </p>
<p v-else> <p v-else>
{{ $t('components.library.FileUpload.currentImportStatusMessage') }} {{ $t('components.library.FileUpload.description.import') }}
</p> </p>
<button <button
@ -555,7 +555,7 @@ useEventListener(window, 'beforeunload', (event) => {
class="ui button" class="ui button"
@click="cancelFsScan" @click="cancelFsScan"
> >
{{ $t('components.library.FileUpload.cancelButton') }} {{ $t('components.library.FileUpload.button.cancel') }}
</button> </button>
<fs-logs :data="fsStatus.import" /> <fs-logs :data="fsStatus.import" />
</template> </template>

2
front/src/components/library/FsBrowser.vue
View File

@ -42,7 +42,7 @@ const handleClick = (entry: FSEntry) => {
class="ui button" class="ui button"
@click.prevent="emit('import')" @click.prevent="emit('import')"
> >
{{ $t('components.library.FsBrowser.importButton') }} {{ $t('components.library.FsBrowser.button.import') }}
</button> </button>
</div> </div>
<div class="ui list component-fs-browser"> <div class="ui list component-fs-browser">

2
front/src/components/library/FsLogs.vue
View File

@ -15,7 +15,7 @@ defineProps<Props>()
class="ui active dimmer" class="ui active dimmer"
> >
<div class="ui text loader"> <div class="ui text loader">
{{ $t('components.library.FsLogs.emptyStateMessage') }} {{ $t('components.library.FsLogs.empty.notStarted') }}
</div> </div>
</div> </div>
<template v-else> <template v-else>

10
front/src/components/library/Home.vue
View File

@ -67,7 +67,7 @@ fetchData()
:websocket-handlers="['Listen']" :websocket-handlers="['Listen']"
> >
<template #title> <template #title>
{{ $t('components.library.Home.recentlyListenedLabel') }} {{ $t('components.library.Home.header.recentlyListened') }}
</template> </template>
</track-widget> </track-widget>
</div> </div>
@ -77,7 +77,7 @@ fetchData()
:filters="{scope: scope, ordering: '-creation_date'}" :filters="{scope: scope, ordering: '-creation_date'}"
> >
<template #title> <template #title>
{{ $t('components.library.Home.recentlyFavoritedLabel') }} {{ $t('components.library.Home.header.recentlyFavorited') }}
</template> </template>
</track-widget> </track-widget>
</div> </div>
@ -87,7 +87,7 @@ fetchData()
:filters="{scope: scope, playable: true, ordering: '-modification_date'}" :filters="{scope: scope, playable: true, ordering: '-modification_date'}"
> >
<template #title> <template #title>
{{ $t('components.library.Home.playlistsLabel') }} {{ $t('components.library.Home.header.playlists') }}
</template> </template>
</playlist-widget> </playlist-widget>
</div> </div>
@ -97,14 +97,14 @@ fetchData()
<div class="column"> <div class="column">
<album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}"> <album-widget :filters="{scope: scope, playable: true, ordering: '-creation_date'}">
<template #title> <template #title>
{{ $t('components.library.Home.recentlyAddedLabel') }} {{ $t('components.library.Home.header.recentlyAdded') }}
</template> </template>
</album-widget> </album-widget>
</div> </div>
</div> </div>
<template v-if="scope === 'all'"> <template v-if="scope === 'all'">
<h3 class="ui header"> <h3 class="ui header">
{{ $t('components.library.Home.newChannelsLabel') }} {{ $t('components.library.Home.header.newChannels') }}
</h3> </h3>
<channels-widget <channels-widget
:show-modification-date="true" :show-modification-date="true"

32
front/src/components/library/ImportStatusModal.vue
View File

@ -58,11 +58,11 @@ const getErrorData = (upload: Upload) => {
supportUrl: 'https://forum.funkwhale.audio/t/support', supportUrl: 'https://forum.funkwhale.audio/t/support',
documentationUrl: `https://docs.funkwhale.audio/users/upload.html#${errorCode}`, documentationUrl: `https://docs.funkwhale.audio/users/upload.html#${errorCode}`,
label: errorCode === 'invalid_metadata' label: errorCode === 'invalid_metadata'
? t('components.library.ImportStatusModal.invalidMetadataLabel') ? t('components.library.ImportStatusModal.error.invalidMetadata.label')
: t('components.library.ImportStatusModal.unknownErrorLabel'), : t('components.library.ImportStatusModal.error.unknownError.label'),
detail: errorCode === 'invalid_metadata' detail: errorCode === 'invalid_metadata'
? t('components.library.ImportStatusModal.invalidMetadataMessage') ? t('components.library.ImportStatusModal.error.invalidMetadata.message')
: t('components.library.ImportStatusModal.unknownErrorMessage'), : t('components.library.ImportStatusModal.error.unknownError.message'),
errorRows: errorCode === 'invalid_metadata' errorRows: errorCode === 'invalid_metadata'
? getErrors(payload.detail ?? {}) ? getErrors(payload.detail ?? {})
: [], : [],
@ -77,7 +77,7 @@ const getErrorData = (upload: Upload) => {
<template> <template>
<semantic-modal v-model:show="show"> <semantic-modal v-model:show="show">
<h4 class="header"> <h4 class="header">
{{ $t('components.library.ImportStatusModal.importDetailHeader') }} {{ $t('components.library.ImportStatusModal.header.importDetail') }}
</h4> </h4>
<div <div
v-if="Object.keys(upload).length > 0" v-if="Object.keys(upload).length > 0"
@ -88,33 +88,33 @@ const getErrorData = (upload: Upload) => {
v-if="upload.import_status === 'pending'" v-if="upload.import_status === 'pending'"
class="ui message" class="ui message"
> >
{{ $t('components.library.ImportStatusModal.importDetailMessage') }} {{ $t('components.library.ImportStatusModal.message.importDetail') }}
</div> </div>
<div <div
v-if="upload.import_status === 'finished'" v-if="upload.import_status === 'finished'"
class="ui success message" class="ui success message"
> >
{{ $t('components.library.ImportStatusModal.importSuccessMessage') }} {{ $t('components.library.ImportStatusModal.message.importSuccess') }}
</div> </div>
<div <div
v-if="upload.import_status === 'skipped'" v-if="upload.import_status === 'skipped'"
role="alert" role="alert"
class="ui warning message" class="ui warning message"
> >
{{ $t('components.library.ImportStatusModal.importSkippedWarning') }} {{ $t('components.library.ImportStatusModal.warning.importSkipped') }}
</div> </div>
<div <div
v-if="upload.import_status === 'errored'" v-if="upload.import_status === 'errored'"
class="ui error message" class="ui error message"
> >
{{ $t('components.library.ImportStatusModal.importFailureMessage') }} {{ $t('components.library.ImportStatusModal.error.importFailure') }}
</div> </div>
<template v-if="upload.import_status === 'errored'"> <template v-if="upload.import_status === 'errored'">
<table class="ui very basic collapsing celled table"> <table class="ui very basic collapsing celled table">
<tbody> <tbody>
<tr> <tr>
<td> <td>
{{ $t('components.library.ImportStatusModal.errorType') }} {{ $t('components.library.ImportStatusModal.table.error.errorType') }}
</td> </td>
<td> <td>
{{ getErrorData(upload).label }} {{ getErrorData(upload).label }}
@ -122,7 +122,7 @@ const getErrorData = (upload: Upload) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.ImportStatusModal.errorDetail') }} {{ $t('components.library.ImportStatusModal.table.error.errorDetail') }}
</td> </td>
<td> <td>
{{ getErrorData(upload).detail }} {{ getErrorData(upload).detail }}
@ -140,7 +140,7 @@ const getErrorData = (upload: Upload) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.ImportStatusModal.gettingHelp') }} {{ $t('components.library.ImportStatusModal.table.error.help') }}
</td> </td>
<td> <td>
<ul> <ul>
@ -149,7 +149,7 @@ const getErrorData = (upload: Upload) => {
:href="getErrorData(upload).documentationUrl" :href="getErrorData(upload).documentationUrl"
target="_blank" target="_blank"
> >
{{ $t('components.library.ImportStatusModal.documentationLink') }} {{ $t('components.library.ImportStatusModal.link.documentation') }}
</a> </a>
</li> </li>
<li> <li>
@ -157,7 +157,7 @@ const getErrorData = (upload: Upload) => {
:href="getErrorData(upload).supportUrl" :href="getErrorData(upload).supportUrl"
target="_blank" target="_blank"
> >
{{ $t('components.library.ImportStatusModal.supportLink') }} {{ $t('components.library.ImportStatusModal.link.support') }}
</a> </a>
</li> </li>
</ul> </ul>
@ -165,7 +165,7 @@ const getErrorData = (upload: Upload) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.ImportStatusModal.debugInformation') }} {{ $t('components.library.ImportStatusModal.table.error.debug') }}
</td> </td>
<td> <td>
<div class="ui form"> <div class="ui form">
@ -184,7 +184,7 @@ const getErrorData = (upload: Upload) => {
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui deny button"> <button class="ui deny button">
{{ $t('components.library.ImportStatusModal.closeButton') }} {{ $t('components.library.ImportStatusModal.button.close') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

32
front/src/components/library/Podcasts.vue
View File

@ -112,7 +112,7 @@ onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.library.Podcasts.searchPlaceholder'), searchPlaceholder: t('components.library.Podcasts.placeholder.search'),
title: t('components.library.Podcasts.title') title: t('components.library.Podcasts.title')
})) }))
@ -123,7 +123,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<main v-title="labels.title"> <main v-title="labels.title">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.Podcasts.podcastBrowseHeader') }} {{ $t('components.library.Podcasts.header.browse') }}
</h2> </h2>
<form <form
:class="['ui', {'loading': isLoading}, 'form']" :class="['ui', {'loading': isLoading}, 'form']"
@ -132,7 +132,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="artist-search"> <label for="artist-search">
{{ $t('components.library.Podcasts.searchLabel') }} {{ $t('components.library.Podcasts.label.search') }}
</label> </label>
<div class="ui action input"> <div class="ui action input">
<input <input
@ -145,18 +145,18 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<button <button
class="ui icon button" class="ui icon button"
type="submit" type="submit"
:aria-label="t('components.library.Podcasts.searchButton')" :aria-label="t('components.library.Podcasts.button.search')"
> >
<i class="search icon" /> <i class="search icon" />
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-search">{{ $t('components.library.Podcasts.tagsLabel') }}</label> <label for="tags-search">{{ $t('components.library.Podcasts.label.tags') }}</label>
<tags-selector v-model="tags" /> <tags-selector v-model="tags" />
</div> </div>
<div class="field"> <div class="field">
<label for="artist-ordering">{{ $t('components.library.Podcasts.orderingLabel') }}</label> <label for="artist-ordering">{{ $t('components.library.Podcasts.ordering.label') }}</label>
<select <select
id="artist-ordering" id="artist-ordering"
v-model="ordering" v-model="ordering"
@ -172,22 +172,22 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artist-ordering-direction">{{ $t('components.library.Podcasts.orderingDirectionLabel') }}</label> <label for="artist-ordering-direction">{{ $t('components.library.Podcasts.ordering.direction.label') }}</label>
<select <select
id="artist-ordering-direction" id="artist-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.library.Podcasts.ascendingOrdering') }} {{ $t('components.library.Podcasts.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.library.Podcasts.descendingOrdering') }} {{ $t('components.library.Podcasts.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artist-results">{{ $t('components.library.Podcasts.resultsPerPageLabel') }}</label> <label for="artist-results">{{ $t('components.library.Podcasts.pagination.results') }}</label>
<select <select
id="artist-results" id="artist-results"
v-model="paginateBy" v-model="paginateBy"
@ -228,7 +228,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="podcast icon" /> <i class="podcast icon" />
{{ $t('components.library.Podcasts.emptyStateMessage') }} {{ $t('components.library.Podcasts.empty.noResults') }}
</div> </div>
<router-link <router-link
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -236,7 +236,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
class="ui success button labeled icon" class="ui success button labeled icon"
> >
<i class="upload icon" /> <i class="upload icon" />
{{ $t('components.library.Podcasts.addChannelLink') }} {{ $t('components.library.Podcasts.button.channel') }}
</router-link> </router-link>
<h1 <h1
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -245,7 +245,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<div class="actions"> <div class="actions">
<a @click.stop.prevent="showSubscribeModal = true"> <a @click.stop.prevent="showSubscribeModal = true">
<i class="plus icon" /> <i class="plus icon" />
{{ $t('components.library.Podcasts.subscribeLink') }} {{ $t('components.library.Podcasts.button.feed') }}
</a> </a>
</div> </div>
</h1> </h1>
@ -265,7 +265,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
:fullscreen="false" :fullscreen="false"
> >
<h2 class="header"> <h2 class="header">
{{ $t('components.library.Podcasts.subscriptionModalHeader') }} {{ $t('components.library.Podcasts.modal.subscription.header') }}
</h2> </h2>
<div <div
ref="modalContent" ref="modalContent"
@ -281,7 +281,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic deny button"> <button class="ui basic deny button">
{{ $t('components.library.Podcasts.cancelButton') }} {{ $t('components.library.Podcasts.button.cancel') }}
</button> </button>
<button <button
form="remote-search" form="remote-search"
@ -289,7 +289,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
class="ui primary button" class="ui primary button"
> >
<i class="bookmark icon" /> <i class="bookmark icon" />
{{ $t('components.library.Podcasts.subscribeButton') }} {{ $t('components.library.Podcasts.button.subscribe') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

28
front/src/components/library/Radios.vue
View File

@ -101,7 +101,7 @@ onMounted(() => $('.ui.dropdown').dropdown())
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.library.Radios.searchPlaceholder'), searchPlaceholder: t('components.library.Radios.placeholder.search'),
title: t('components.library.Podcasts.title') title: t('components.library.Podcasts.title')
})) }))
@ -112,12 +112,12 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<main v-title="labels.title"> <main v-title="labels.title">
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.Radios.radioBrowseHeader') }} {{ $t('components.library.Radios.header.browse') }}
</h2> </h2>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui row"> <div class="ui row">
<h3 class="ui header"> <h3 class="ui header">
{{ $t('components.library.Radios.instanceRadioHeader') }} {{ $t('components.library.Radios.header.instance') }}
</h3> </h3>
<div class="ui cards"> <div class="ui cards">
<radio-card <radio-card
@ -140,14 +140,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h3 class="ui header"> <h3 class="ui header">
{{ $t('components.library.Radios.userRadioHeader') }} {{ $t('components.library.Radios.header.user') }}
</h3> </h3>
<router-link <router-link
v-if="isAuthenticated" v-if="isAuthenticated"
class="ui success button" class="ui success button"
to="/library/radios/build" to="/library/radios/build"
> >
{{ $t('components.library.Radios.createRadioLink') }} {{ $t('components.library.Radios.button.create') }}
</router-link> </router-link>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<form <form
@ -156,7 +156,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
> >
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<label for="radios-search">{{ $t('components.library.Radios.searchLabel') }}</label> <label for="radios-search">{{ $t('components.library.Radios.label.search') }}</label>
<div class="ui action input"> <div class="ui action input">
<input <input
id="radios-search" id="radios-search"
@ -168,14 +168,14 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
<button <button
class="ui icon button" class="ui icon button"
type="submit" type="submit"
:aria-label="t('components.library.Radios.searchButton')" :aria-label="t('components.library.Radios.button.search')"
> >
<i class="search icon" /> <i class="search icon" />
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="radios-ordering">{{ $t('components.library.Radios.orderingLabel') }}</label> <label for="radios-ordering">{{ $t('components.library.Radios.ordering.label') }}</label>
<select <select
id="radios-ordering" id="radios-ordering"
v-model="ordering" v-model="ordering"
@ -191,22 +191,22 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="radios-ordering-direction">{{ $t('components.library.Radios.orderingDirectionLabel') }}</label> <label for="radios-ordering-direction">{{ $t('components.library.Radios.ordering.direction.label') }}</label>
<select <select
id="radios-ordering-direction" id="radios-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.library.Radios.ascendingOrdering') }} {{ $t('components.library.Radios.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.library.Radios.descendingOrdering') }} {{ $t('components.library.Radios.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="radios-results">{{ $t('components.library.Radios.resultsPerPageLabel') }}</label> <label for="radios-results">{{ $t('components.library.Radios.pagination.results') }}</label>
<select <select
id="radios-results" id="radios-results"
v-model="paginateBy" v-model="paginateBy"
@ -230,7 +230,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="feed icon" /> <i class="feed icon" />
{{ $t('components.library.Radios.emptyStateMessage') }} {{ $t('components.library.Radios.empty.noResults') }}
</div> </div>
<router-link <router-link
v-if="$store.state.auth.authenticated" v-if="$store.state.auth.authenticated"
@ -238,7 +238,7 @@ const paginateOptions = computed(() => sortedUniq([12, 25, 50, paginateBy.value]
class="ui success button labeled icon" class="ui success button labeled icon"
> >
<i class="rss icon" /> <i class="rss icon" />
{{ $t('components.library.Radios.addRadioLink') }} {{ $t('components.library.Radios.button.add') }}
</router-link> </router-link>
</div> </div>
<div <div

10
front/src/components/library/TagDetail.vue
View File

@ -36,7 +36,7 @@ const labels = computed(() => ({
:to="{name: 'manage.library.tags.detail', params: {id: id}}" :to="{name: 'manage.library.tags.detail', params: {id: id}}"
> >
<i class="wrench icon" /> <i class="wrench icon" />
{{ $t('components.library.TagDetail.moderationLink') }} {{ $t('components.library.TagDetail.link.moderation') }}
</router-link> </router-link>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -48,14 +48,14 @@ const labels = computed(() => ({
> >
<template #title> <template #title>
<router-link :to="{name: 'library.artists.browse', query: {tag: id}}"> <router-link :to="{name: 'library.artists.browse', query: {tag: id}}">
{{ $t('components.library.TagDetail.artistsLabel') }} {{ $t('components.library.TagDetail.link.artists') }}
</router-link> </router-link>
</template> </template>
</artist-widget> </artist-widget>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h3 class="ui header"> <h3 class="ui header">
{{ $t('components.library.TagDetail.channelsLabel') }} {{ $t('components.library.TagDetail.header.channels') }}
</h3> </h3>
<channels-widget <channels-widget
:key="'channels' + id" :key="'channels' + id"
@ -73,7 +73,7 @@ const labels = computed(() => ({
> >
<template #title> <template #title>
<router-link :to="{name: 'library.albums.browse', query: {tag: id}}"> <router-link :to="{name: 'library.albums.browse', query: {tag: id}}">
{{ $t('components.library.TagDetail.albumsLabel') }} {{ $t('components.library.TagDetail.link.albums') }}
</router-link> </router-link>
</template> </template>
</album-widget> </album-widget>
@ -89,7 +89,7 @@ const labels = computed(() => ({
:filters="{playable: true, ordering: '-creation_date', tag: id}" :filters="{playable: true, ordering: '-creation_date', tag: id}"
> >
<template #title> <template #title>
{{ $t('components.library.TagDetail.tracksLabel') }} {{ $t('components.library.TagDetail.header.tracks') }}
</template> </template>
</track-widget> </track-widget>
<div class="ui clearing hidden divider" /> <div class="ui clearing hidden divider" />

2
front/src/components/library/TagsSelector.vue
View File

@ -99,7 +99,7 @@ onMounted(async () => {
class="search" class="search"
> >
<div class="default text"> <div class="default text">
{{ $t('components.library.TagSelector.searchPlaceholder') }} {{ $t('components.library.TagSelector.placeholder.search') }}
</div> </div>
</div> </div>
</template> </template>

32
front/src/components/library/TrackBase.vue
View File

@ -90,8 +90,8 @@ const subtitle = computed(() => {
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('components.library.TrackBase.title'), title: t('components.library.TrackBase.title'),
download: t('components.library.TrackBase.downloadLabel'), download: t('components.library.TrackBase.button.download'),
more: t('components.library.TrackBase.moreLabel') more: t('components.library.TrackBase.button.more')
})) }))
const isLoading = ref(false) const isLoading = ref(false)
@ -155,7 +155,7 @@ const remove = async () => {
class="vibrant" class="vibrant"
:track="track" :track="track"
> >
{{ $t('components.library.TrackBase.playButton') }} {{ $t('components.library.TrackBase.button.play') }}
</play-button> </play-button>
&nbsp; &nbsp;
<track-favorite-icon <track-favorite-icon
@ -185,7 +185,7 @@ const remove = async () => {
v-model:show="showEmbedModal" v-model:show="showEmbedModal"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.library.TrackBase.embedModalHeader') }} {{ $t('components.library.TrackBase.modal.embed.header') }}
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
<div class="description"> <div class="description">
@ -197,7 +197,7 @@ const remove = async () => {
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic deny button"> <button class="ui basic deny button">
{{ $t('components.library.TrackBase.cancelButton') }} {{ $t('components.library.TrackBase.button.cancel') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>
@ -218,7 +218,7 @@ const remove = async () => {
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.TrackBase.domainViewLink', {domain: domain}) }} {{ $t('components.library.TrackBase.link.domain', {domain: domain}) }}
</a> </a>
<div <div
v-if="isEmbedable" v-if="isEmbedable"
@ -227,7 +227,7 @@ const remove = async () => {
@click="showEmbedModal = !showEmbedModal" @click="showEmbedModal = !showEmbedModal"
> >
<i class="code icon" /> <i class="code icon" />
{{ $t('components.library.TrackBase.embedButton') }} {{ $t('components.library.TrackBase.button.embed') }}
</div> </div>
<a <a
:href="wikipediaUrl" :href="wikipediaUrl"
@ -236,7 +236,7 @@ const remove = async () => {
class="basic item" class="basic item"
> >
<i class="wikipedia w icon" /> <i class="wikipedia w icon" />
{{ $t('components.library.TrackBase.wikipediaLink') }} {{ $t('components.library.TrackBase.link.wikipedia') }}
</a> </a>
<a <a
v-if="discogsUrl" v-if="discogsUrl"
@ -246,7 +246,7 @@ const remove = async () => {
class="basic item" class="basic item"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.TrackBase.discogsLink') }} {{ $t('components.library.TrackBase.link.discogs') }}
</a> </a>
<router-link <router-link
v-if="track.is_local" v-if="track.is_local"
@ -254,7 +254,7 @@ const remove = async () => {
class="basic item" class="basic item"
> >
<i class="edit icon" /> <i class="edit icon" />
{{ $t('components.library.TrackBase.editButton') }} {{ $t('components.library.TrackBase.button.edit') }}
</router-link> </router-link>
<dangerous-button <dangerous-button
v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername" v-if="artist && $store.state.auth.authenticated && artist.channel && artist.attributed_to.full_username === $store.state.auth.fullUsername"
@ -262,22 +262,22 @@ const remove = async () => {
@confirm="remove()" @confirm="remove()"
> >
<i class="ui trash icon" /> <i class="ui trash icon" />
{{ $t('components.library.TrackBase.deleteButton') }} {{ $t('components.library.TrackBase.button.delete') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.library.TrackBase.deleteModalHeader') }} {{ $t('components.library.TrackBase.modal.delete.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
{{ $t('components.library.TrackBase.deleteModalMessage') }} {{ $t('components.library.TrackBase.modal.delete.content.warning') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<p> <p>
{{ $t('components.library.TrackBase.deleteButton') }} {{ $t('components.library.TrackBase.button.delete') }}
</p> </p>
</template> </template>
</dangerous-button> </dangerous-button>
@ -298,7 +298,7 @@ const remove = async () => {
:to="{name: 'manage.library.tracks.detail', params: {id: track.id}}" :to="{name: 'manage.library.tracks.detail', params: {id: track.id}}"
> >
<i class="wrench icon" /> <i class="wrench icon" />
{{ $t('components.library.TrackBase.moderationLink') }} {{ $t('components.library.TrackBase.link.moderation') }}
</router-link> </router-link>
<a <a
v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser" v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
@ -308,7 +308,7 @@ const remove = async () => {
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<i class="wrench icon" /> <i class="wrench icon" />
{{ $t('components.library.TrackBase.djangoLink') }} {{ $t('components.library.TrackBase.link.django') }}
</a> </a>
</div> </div>
</button> </button>

40
front/src/components/library/TrackDetail.vue
View File

@ -79,19 +79,19 @@ watchEffect(() => {
<span <span
v-if="track.artist?.content_category === 'music'" v-if="track.artist?.content_category === 'music'"
> >
{{ $t('components.library.TrackDetail.trackDetails') }} {{ $t('components.library.TrackDetail.header.track') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.library.TrackDetail.episodeDetails') }} {{ $t('components.library.TrackDetail.header.episode') }}
</span> </span>
</h3> </h3>
<table class="ui basic table"> <table class="ui basic table">
<tbody> <tbody>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.durationTableHeader') }} {{ $t('components.library.TrackDetail.table.track.duration') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="upload.duration"> <template v-if="upload.duration">
@ -106,7 +106,7 @@ watchEffect(() => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.sizeTableLabel') }} {{ $t('components.library.TrackDetail.table.track.size') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="upload.size"> <template v-if="upload.size">
@ -121,7 +121,7 @@ watchEffect(() => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.codecTableLabel') }} {{ $t('components.library.TrackDetail.table.track.codec') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="upload.extension"> <template v-if="upload.extension">
@ -136,11 +136,11 @@ watchEffect(() => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.bitrateTableLabel') }} {{ $t('components.library.TrackDetail.table.track.bitrate.label') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="upload.bitrate"> <template v-if="upload.bitrate">
{{ $t('components.library.TrackDetail.uploadBitrateTableLabel', {bitrate: humanSize(upload.bitrate)}) }} {{ $t('components.library.TrackDetail.table.track.bitrate.value', {bitrate: humanSize(upload.bitrate)}) }}
</template> </template>
<span <span
v-else v-else
@ -151,7 +151,7 @@ watchEffect(() => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.downloadsTableLabel') }} {{ $t('components.library.TrackDetail.table.track.downloads') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
{{ track.downloads_count }} {{ track.downloads_count }}
@ -172,13 +172,13 @@ watchEffect(() => {
:can-update="false" :can-update="false"
/> />
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.TrackDetail.releaseDetailsHeader') }} {{ $t('components.library.TrackDetail.header.release') }}
</h2> </h2>
<table class="ui basic table ellipsis-rows"> <table class="ui basic table ellipsis-rows">
<tbody> <tbody>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.artistTableLabel') }} {{ $t('components.library.TrackDetail.table.release.artist') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<router-link :to="{name: 'library.artists.detail', params: {id: track.artist?.id}}"> <router-link :to="{name: 'library.artists.detail', params: {id: track.artist?.id}}">
@ -191,12 +191,12 @@ watchEffect(() => {
<span <span
v-if="track.album.artist.content_category === 'music'" v-if="track.album.artist.content_category === 'music'"
> >
{{ $t('components.library.TrackDetail.albumTableLabel') }} {{ $t('components.library.TrackDetail.table.release.album') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.library.TrackDetail.seriesTableLabel') }} {{ $t('components.library.TrackDetail.table.release.series') }}
</span> </span>
</td> </td>
<td class="right aligned"> <td class="right aligned">
@ -207,7 +207,7 @@ watchEffect(() => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.yearTableLabel') }} {{ $t('components.library.TrackDetail.table.release.year') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<template v-if="track.album && track.album.release_date"> <template v-if="track.album && track.album.release_date">
@ -220,7 +220,7 @@ watchEffect(() => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.copyrightTableLabel') }} {{ $t('components.library.TrackDetail.table.release.copyright') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<span <span
@ -234,7 +234,7 @@ watchEffect(() => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.library.TrackDetail.licenseTableLabel') }} {{ $t('components.library.TrackDetail.table.release.license') }}
</td> </td>
<td class="right aligned"> <td class="right aligned">
<a <a
@ -252,7 +252,7 @@ watchEffect(() => {
</tr> </tr>
<tr v-if="!track.is_local"> <tr v-if="!track.is_local">
<td> <td>
{{ $t('components.library.TrackDetail.urlTableLabel') }} {{ $t('components.library.TrackDetail.table.release.url') }}
</td> </td>
<td :title="track.fid"> <td :title="track.fid">
<a <a
@ -273,10 +273,10 @@ watchEffect(() => {
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<i class="external icon" /> <i class="external icon" />
{{ $t('components.library.TrackDetail.musicbrainzLink') }} {{ $t('components.library.TrackDetail.link.musicbrainz') }}
</a> </a>
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.TrackDetail.relatedPlaylistsHeader') }} {{ $t('components.library.TrackDetail.header.playlists') }}
</h2> </h2>
<playlist-widget <playlist-widget
:url="'playlists/'" :url="'playlists/'"
@ -284,13 +284,13 @@ watchEffect(() => {
/> />
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.TrackDetail.userLibraryHeader') }} {{ $t('components.library.TrackDetail.header.library') }}
</h2> </h2>
<library-widget <library-widget
:url="`tracks/${track.id}/libraries/`" :url="`tracks/${track.id}/libraries/`"
@loaded="emit('libraries-loaded', $event)" @loaded="emit('libraries-loaded', $event)"
> >
{{ $t('components.library.TrackDetail.userLibraryDescription') }} {{ $t('components.library.TrackDetail.description.library') }}
</library-widget> </library-widget>
</div> </div>
</div> </div>

6
front/src/components/library/TrackEdit.vue
View File

@ -47,19 +47,19 @@ fetchLicenses()
<span <span
v-if="canEdit" v-if="canEdit"
> >
{{ $t('components.library.TrackEdit.editTrackHeader') }} {{ $t('components.library.TrackEdit.header.edit') }}
</span> </span>
<span <span
key="2" key="2"
> >
{{ $t('components.library.TrackEdit.suggestEditHeader') }} {{ $t('components.library.TrackEdit.header.suggest') }}
</span> </span>
</h2> </h2>
<div <div
v-if="!object.is_local" v-if="!object.is_local"
class="ui message" class="ui message"
> >
{{ $t('components.library.TrackEdit.remoteObjectWarning') }} {{ $t('components.library.TrackEdit.message.remote') }}
</div> </div>
<edit-form <edit-form
v-else-if="!isLoadingLicenses" v-else-if="!isLoadingLicenses"

38
front/src/components/library/radios/Builder.vue
View File

@ -57,8 +57,8 @@ const router = useRouter()
const labels = computed(() => ({ const labels = computed(() => ({
title: t('components.library.radios.Builder.title'), title: t('components.library.radios.Builder.title'),
placeholder: { placeholder: {
description: t('components.library.radios.Builder.descriptionPlaceholder'), description: t('components.library.radios.Builder.placeholder.description'),
name: t('components.library.radios.Builder.namePlaceholder') name: t('components.library.radios.Builder.placeholder.name')
} }
})) }))
@ -203,10 +203,10 @@ onMounted(() => {
<div> <div>
<section> <section>
<h2 class="ui header"> <h2 class="ui header">
{{ $t('components.library.radios.Builder.builderHeader') }} {{ $t('components.library.radios.Builder.header.builder') }}
</h2> </h2>
<p> <p>
{{ $t('components.library.radios.Builder.builderDescription') }} {{ $t('components.library.radios.Builder.description.builder') }}
</p> </p>
<div class="ui form"> <div class="ui form">
<div <div
@ -215,16 +215,16 @@ onMounted(() => {
> >
<h4 class="header"> <h4 class="header">
<template v-if="radioName"> <template v-if="radioName">
{{ $t('components.library.radios.Builder.radioUpdateSuccess') }} {{ $t('components.library.radios.Builder.header.updated') }}
</template> </template>
<template v-else> <template v-else>
{{ $t('components.library.radios.Builder.radioCreateSuccess') }} {{ $t('components.library.radios.Builder.header.created') }}
</template> </template>
</h4> </h4>
</div> </div>
<div class=""> <div class="">
<div class="field"> <div class="field">
<label for="name">{{ $t('components.library.radios.Builder.radioNameLabel') }}</label> <label for="name">{{ $t('components.library.radios.Builder.label.name') }}</label>
<input <input
id="name" id="name"
v-model="radioName" v-model="radioName"
@ -234,7 +234,7 @@ onMounted(() => {
> >
</div> </div>
<div class="field"> <div class="field">
<label for="description">{{ $t('components.library.radios.Builder.radioDescriptionLabel') }}</label> <label for="description">{{ $t('components.library.radios.Builder.label.description') }}</label>
<textarea <textarea
id="description" id="description"
v-model="radioDesc" v-model="radioDesc"
@ -249,7 +249,7 @@ onMounted(() => {
v-model="isPublic" v-model="isPublic"
type="checkbox" type="checkbox"
> >
<label for="public">{{ $t('components.library.radios.Builder.publicLabel') }}</label> <label for="public">{{ $t('components.library.radios.Builder.label.public') }}</label>
</div> </div>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<button <button
@ -257,7 +257,7 @@ onMounted(() => {
:class="['ui', 'success', {loading: isLoading}, 'button']" :class="['ui', 'success', {loading: isLoading}, 'button']"
@click="save" @click="save"
> >
{{ $t('components.library.radios.Builder.saveButton') }} {{ $t('components.library.radios.Builder.button.save') }}
</button> </button>
<radio-button <radio-button
v-if="id" v-if="id"
@ -271,14 +271,14 @@ onMounted(() => {
<label <label
id="radioFilterLabel" id="radioFilterLabel"
for="radio-filters" for="radio-filters"
>{{ $t('components.library.radios.Builder.addFiltersLabel') }}</label> >{{ $t('components.library.radios.Builder.label.filter') }}</label>
<select <select
id="radio-filters" id="radio-filters"
v-model="currentFilterType" v-model="currentFilterType"
class="ui dropdown" class="ui dropdown"
> >
<option value=""> <option value="">
{{ $t('components.library.radios.Builder.selectFilterLabel') }} {{ $t('components.library.radios.Builder.option.filter') }}
</option> </option>
<option <option
v-for="f in availableFilters" v-for="f in availableFilters"
@ -294,7 +294,7 @@ onMounted(() => {
class="ui button" class="ui button"
@click="add" @click="add"
> >
{{ $t('components.library.radios.Builder.addFilterButton') }} {{ $t('components.library.radios.Builder.button.filter') }}
</button> </button>
</div> </div>
<p v-if="currentFilter"> <p v-if="currentFilter">
@ -305,19 +305,19 @@ onMounted(() => {
<thead> <thead>
<tr> <tr>
<th class="two wide"> <th class="two wide">
{{ $t('components.library.radios.Builder.filterNameTableHeader') }} {{ $t('components.library.radios.Builder.table.filter.header.name') }}
</th> </th>
<th class="one wide"> <th class="one wide">
{{ $t('components.library.radios.Builder.excludeTableHeader') }} {{ $t('components.library.radios.Builder.table.filter.header.exclude') }}
</th> </th>
<th class="six wide"> <th class="six wide">
{{ $t('components.library.radios.Builder.configTableHeader') }} {{ $t('components.library.radios.Builder.table.filter.header.config') }}
</th> </th>
<th class="five wide"> <th class="five wide">
{{ $t('components.library.radios.Builder.candidatesTableHeader') }} {{ $t('components.library.radios.Builder.table.filter.header.candidates') }}
</th> </th>
<th class="two wide"> <th class="two wide">
{{ $t('components.library.radios.Builder.actionsTableHeader') }} {{ $t('components.library.radios.Builder.table.filter.header.actions') }}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -337,7 +337,7 @@ onMounted(() => {
<h3 <h3
class="ui header" class="ui header"
> >
{{ $t('components.library.radios.Builder.matchingTracks', {count: checkResult.candidates.count}) }} {{ $t('components.library.radios.Builder.header.matches', {count: checkResult.candidates.count}) }}
</h3> </h3>
<track-table <track-table
v-if="checkResult.candidates.sample" v-if="checkResult.candidates.sample"

34
front/src/components/manage/ChannelsTable.vue
View File

@ -82,8 +82,8 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.ChannelsTable.searchPlaceholder'), searchPlaceholder: t('components.manage.ChannelsTable.placeholder.search'),
openModeration: t('components.manage.ChannelsTable.openModeration') openModeration: t('components.manage.ChannelsTable.link.moderation')
})) }))
</script> </script>
@ -92,7 +92,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="channel-search">{{ $t('components.manage.ChannelsTable.searchLabel') }}</label> <label for="channel-search">{{ $t('components.manage.ChannelsTable.label.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="channel-search" id="channel-search"
@ -105,7 +105,7 @@ const labels = computed(() => ({
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="channel-category">{{ $t('components.manage.ChannelsTable.categoryLabel') }}</label> <label for="channel-category">{{ $t('components.manage.ChannelsTable.label.category') }}</label>
<select <select
id="channel-category" id="channel-category"
class="ui dropdown" class="ui dropdown"
@ -113,7 +113,7 @@ const labels = computed(() => ({
@change="addSearchToken('category', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
{{ $t('components.manage.ChannelsTable.allOption') }} {{ $t('components.manage.ChannelsTable.option.all') }}
</option> </option>
<option value="podcast"> <option value="podcast">
{{ sharedLabels.fields.content_category.choices.podcast }} {{ sharedLabels.fields.content_category.choices.podcast }}
@ -127,7 +127,7 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="channel-ordering">{{ $t('components.manage.ChannelsTable.orderingLabel') }}</label> <label for="channel-ordering">{{ $t('components.manage.ChannelsTable.ordering.label') }}</label>
<select <select
id="channel-ordering" id="channel-ordering"
v-model="ordering" v-model="ordering"
@ -143,17 +143,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="channel-ordering-direction">{{ $t('components.manage.ChannelsTable.orderingDirectionLabel') }}</label> <label for="channel-ordering-direction">{{ $t('components.manage.ChannelsTable.ordering.direction.label') }}</label>
<select <select
id="channel-ordering-direction" id="channel-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.ChannelsTable.ascendingOrdering') }} {{ $t('components.manage.ChannelsTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.ChannelsTable.descendingOrdering') }} {{ $t('components.manage.ChannelsTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -176,22 +176,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.ChannelsTable.nameTableHeader') }} {{ $t('components.manage.ChannelsTable.table.channel.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.manage.ChannelsTable.accountTableHeader') }} {{ $t('components.manage.ChannelsTable.table.channel.header.account') }}
</th> </th>
<th> <th>
{{ $t('components.manage.ChannelsTable.domainTableHeader') }} {{ $t('components.manage.ChannelsTable.table.channel.header.domain') }}
</th> </th>
<th> <th>
{{ $t('components.manage.ChannelsTable.albumsTableHeader') }} {{ $t('components.manage.ChannelsTable.table.channel.header.albums') }}
</th> </th>
<th> <th>
{{ $t('components.manage.ChannelsTable.tracksTableHeader') }} {{ $t('components.manage.ChannelsTable.table.channel.header.tracks') }}
</th> </th>
<th> <th>
{{ $t('components.manage.ChannelsTable.creationDateTableHeader') }} {{ $t('components.manage.ChannelsTable.table.channel.header.creationDate') }}
</th> </th>
</template> </template>
<template <template
@ -232,7 +232,7 @@ const labels = computed(() => ({
@click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)" @click.prevent="addSearchToken('domain', scope.obj.attributed_to.domain)"
> >
<i class="home icon" /> <i class="home icon" />
{{ $t('components.manage.ChannelsTable.localLink') }} {{ $t('components.manage.ChannelsTable.link.local') }}
</a> </a>
</td> </td>
<td> <td>
@ -257,7 +257,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.ChannelsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.ChannelsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

34
front/src/components/manage/library/AlbumsTable.vue
View File

@ -54,8 +54,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('components.manage.library.AlbumsTable.deleteActionLabel'), label: t('components.manage.library.AlbumsTable.action.delete.label'),
confirmationMessage: t('components.manage.library.AlbumsTable.deleteActionConfirmation'), confirmationMessage: t('components.manage.library.AlbumsTable.action.delete.warning'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -94,8 +94,8 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.library.AlbumsTable.searchPlaceholder'), searchPlaceholder: t('components.manage.library.AlbumsTable.placeholder.search'),
openModeration: t('components.manage.library.AlbumsTable.openModeration') openModeration: t('components.manage.library.AlbumsTable.link.moderation')
})) }))
</script> </script>
@ -104,7 +104,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="albums-search">{{ $t('components.manage.library.AlbumsTable.searchLabel') }}</label> <label for="albums-search">{{ $t('components.manage.library.AlbumsTable.label.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="albums-search" id="albums-search"
@ -117,7 +117,7 @@ const labels = computed(() => ({
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="albums-ordering">{{ $t('components.manage.library.AlbumsTable.orderingLabel') }}</label> <label for="albums-ordering">{{ $t('components.manage.library.AlbumsTable.ordering.label') }}</label>
<select <select
id="albums-ordering" id="albums-ordering"
v-model="ordering" v-model="ordering"
@ -133,16 +133,16 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="albums-ordering-direction">{{ $t('components.manage.library.AlbumsTable.orderingDirectionLabel') }}</label> <label for="albums-ordering-direction">{{ $t('components.manage.library.AlbumsTable.ordering.direction.label') }}</label>
<select <select
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.library.AlbumsTable.ascendingOrdering') }} {{ $t('components.manage.library.AlbumsTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.library.AlbumsTable.descendingOrdering') }} {{ $t('components.manage.library.AlbumsTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -165,22 +165,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.library.AlbumsTable.nameTableHeader') }} {{ $t('components.manage.library.AlbumsTable.table.album.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.AlbumsTable.artistTableHeader') }} {{ $t('components.manage.library.AlbumsTable.table.album.header.artist') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.AlbumsTable.domainTableHeader') }} {{ $t('components.manage.library.AlbumsTable.table.album.header.domain') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.AlbumsTable.tracksTableHeader') }} {{ $t('components.manage.library.AlbumsTable.table.album.header.tracks') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.AlbumsTable.releaseDateTableHeader') }} {{ $t('components.manage.library.AlbumsTable.table.album.header.releaseDate') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.AlbumsTable.creationDateTableHeader') }} {{ $t('components.manage.library.AlbumsTable.table.album.header.creationDate') }}
</th> </th>
</template> </template>
<template <template
@ -222,7 +222,7 @@ const labels = computed(() => ({
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
{{ $t('components.manage.library.AlbumsTable.localLink') }} {{ $t('components.manage.library.AlbumsTable.link.local') }}
</a> </a>
</td> </td>
<td> <td>
@ -255,7 +255,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.library.AlbumsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.library.AlbumsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

34
front/src/components/manage/library/ArtistsTable.vue
View File

@ -52,8 +52,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('components.manage.library.ArtistsTable.deleteActionLabel'), label: t('components.manage.library.ArtistsTable.action.delete.label'),
confirmationMessage: t('components.manage.library.ArtistsTable.deleteActionConfirmation'), confirmationMessage: t('components.manage.library.ArtistsTable.action.delete.warning'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -93,7 +93,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.library.ArtistsTable.searchPlaceholder') searchPlaceholder: t('components.manage.library.ArtistsTable.placeholder.search')
})) }))
const getUrl = (artist: { channel?: number; id: number }) => { const getUrl = (artist: { channel?: number; id: number }) => {
@ -108,7 +108,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="artists-serarch">{{ $t('components.manage.library.ArtistsTable.searchLabel') }}</label> <label for="artists-serarch">{{ $t('components.manage.library.ArtistsTable.label.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="artists-search" id="artists-search"
@ -121,7 +121,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="artists-category">{{ $t('components.manage.library.ArtistsTable.categoryLabel') }}</label> <label for="artists-category">{{ $t('components.manage.library.ArtistsTable.label.category') }}</label>
<select <select
id="artists-category" id="artists-category"
class="ui dropdown" class="ui dropdown"
@ -129,7 +129,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
@change="addSearchToken('category', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('category', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
{{ $t('components.manage.library.ArtistsTable.allOption') }} {{ $t('components.manage.library.ArtistsTable.option.all') }}
</option> </option>
<option value="podcast"> <option value="podcast">
{{ sharedLabels.fields.content_category.choices.podcast }} {{ sharedLabels.fields.content_category.choices.podcast }}
@ -143,7 +143,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artists-ordering">{{ $t('components.manage.library.ArtistsTable.orderingLabel') }}</label> <label for="artists-ordering">{{ $t('components.manage.library.ArtistsTable.ordering.label') }}</label>
<select <select
id="artists-ordering" id="artists-ordering"
v-model="ordering" v-model="ordering"
@ -159,17 +159,17 @@ const getUrl = (artist: { channel?: number; id: number }) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="artists-ordering-direction">{{ $t('components.manage.library.ArtistsTable.orderingDirectionLabel') }}</label> <label for="artists-ordering-direction">{{ $t('components.manage.library.ArtistsTable.ordering.direction.label') }}</label>
<select <select
id="artists-ordering-direction" id="artists-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.library.ArtistsTable.ascendingOrdering') }} {{ $t('components.manage.library.ArtistsTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.library.ArtistsTable.descendingOrdering') }} {{ $t('components.manage.library.ArtistsTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -192,19 +192,19 @@ const getUrl = (artist: { channel?: number; id: number }) => {
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.library.ArtistsTable.nameTableHeader') }} {{ $t('components.manage.library.ArtistsTable.table.artist.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.ArtistsTable.domainTableHeader') }} {{ $t('components.manage.library.ArtistsTable.table.artist.header.domain') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.ArtistsTable.albumsTableHeader') }} {{ $t('components.manage.library.ArtistsTable.table.artist.header.albums') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.ArtistsTable.tracksTableHeader') }} {{ $t('components.manage.library.ArtistsTable.table.artist.header.tracks') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.ArtistsTable.creationDateTableHeader') }} {{ $t('components.manage.library.ArtistsTable.table.artist.header.creationDate') }}
</th> </th>
</template> </template>
<template <template
@ -234,7 +234,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
{{ $t('components.manage.library.ArtistsTable.localLink') }} {{ $t('components.manage.library.ArtistsTable.link.local') }}
</a> </a>
</td> </td>
<td> <td>
@ -259,7 +259,7 @@ const getUrl = (artist: { channel?: number; id: number }) => {
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.library.ArtistsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.library.ArtistsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

24
front/src/components/manage/library/EditsCardList.vue
View File

@ -142,7 +142,7 @@ fetchData()
const { t } = useI18n() const { t } = useI18n()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.library.EditsCardList.searchPlaceholder') searchPlaceholder: t('components.manage.library.EditsCardList.placeholder.search')
})) }))
const handle = (type: 'delete' | 'approved', id: string, value: boolean) => { const handle = (type: 'delete' | 'approved', id: string, value: boolean) => {
@ -165,7 +165,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label for="search-edits">{{ $t('components.manage.library.EditsCardList.searchPlaceholder') }}</label> <label for="search-edits">{{ $t('components.manage.library.EditsCardList.placeholder.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="search-edits" id="search-edits"
@ -178,7 +178,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="edit-status">{{ $t('components.manage.library.EditsCardList.statusLabel') }}</label> <label for="edit-status">{{ $t('components.manage.library.EditsCardList.label.status') }}</label>
<select <select
id="edit-status" id="edit-status"
class="ui dropdown" class="ui dropdown"
@ -186,21 +186,21 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
@change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('is_approved', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
{{ $t('components.manage.library.EditsCardList.allOption') }} {{ $t('components.manage.library.EditsCardList.option.all') }}
</option> </option>
<option value="null"> <option value="null">
{{ $t('components.manage.library.EditsCardList.pendingReviewLabel') }} {{ $t('components.manage.library.EditsCardList.option.pending') }}
</option> </option>
<option value="yes"> <option value="yes">
{{ $t('components.manage.library.EditsCardList.approvedLabel') }} {{ $t('components.manage.library.EditsCardList.option.approved') }}
</option> </option>
<option value="no"> <option value="no">
{{ $t('components.manage.library.EditsCardList.rejectedLabel') }} {{ $t('components.manage.library.EditsCardList.option.rejected') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="edit-ordering">{{ $t('components.manage.library.EditsCardList.orderingLabel') }}</label> <label for="edit-ordering">{{ $t('components.manage.library.EditsCardList.ordering.label') }}</label>
<select <select
id="edit-ordering" id="edit-ordering"
v-model="ordering" v-model="ordering"
@ -216,17 +216,17 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="edit-ordering-direction">{{ $t('components.manage.library.EditsCardList.orderingDirectionLabel') }}</label> <label for="edit-ordering-direction">{{ $t('components.manage.library.EditsCardList.ordering.direction.label') }}</label>
<select <select
id="edit-ordering-direction" id="edit-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.library.EditsCardList.ascendingOrdering') }} {{ $t('components.manage.library.EditsCardList.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.library.EditsCardList.descendingOrdering') }} {{ $t('components.manage.library.EditsCardList.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -266,7 +266,7 @@ const getCurrentState = (target?: StateTarget): ReviewState => {
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.library.EditsCardList.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.library.EditsCardList.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

38
front/src/components/manage/library/LibrariesTable.vue
View File

@ -54,8 +54,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('components.manage.library.LibrariesTable.deleteActionLabel'), label: t('components.manage.library.LibrariesTable.action.delete.label'),
confirmationMessage: t('components.manage.library.LibrariesTable.deleteActionConfirmation'), confirmationMessage: t('components.manage.library.LibrariesTable.action.delete.warning'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -94,7 +94,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.library.LibrariesTable.searchPlaceholder') searchPlaceholder: t('components.manage.library.LibrariesTable.placeholder.search')
})) }))
const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => { const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@ -107,7 +107,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="libraries-search">{{ $t('components.manage.library.LibrariesTable.searchLabel') }}</label> <label for="libraries-search">{{ $t('components.manage.library.LibrariesTable.label.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="libraries-search" id="libraries-search"
@ -120,7 +120,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="libraries-visibility">{{ $t('components.manage.library.LibrariesTable.visibilityLabel') }}</label> <label for="libraries-visibility">{{ $t('components.manage.library.LibrariesTable.label.visibility') }}</label>
<select <select
id="libraries-visibility" id="libraries-visibility"
class="ui dropdown" class="ui dropdown"
@ -128,7 +128,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
{{ $t('components.manage.library.LibrariesTable.allOption') }} {{ $t('components.manage.library.LibrariesTable.option.all') }}
</option> </option>
<option value="me"> <option value="me">
{{ sharedLabels.fields.privacy_level.shortChoices.me }} {{ sharedLabels.fields.privacy_level.shortChoices.me }}
@ -142,7 +142,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="libraries-ordering">{{ $t('components.manage.library.LibrariesTable.orderingLabel') }}</label> <label for="libraries-ordering">{{ $t('components.manage.library.LibrariesTable.ordering.label') }}</label>
<select <select
id="libraries-ordering" id="libraries-ordering"
v-model="ordering" v-model="ordering"
@ -158,17 +158,17 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="libraries-ordering-direction">{{ $t('components.manage.library.LibrariesTable.orderingDirectionLabel') }}</label> <label for="libraries-ordering-direction">{{ $t('components.manage.library.LibrariesTable.ordering.direction.label') }}</label>
<select <select
id="libraries-ordering-direction" id="libraries-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.library.LibrariesTable.ascendingOrdering') }} {{ $t('components.manage.library.LibrariesTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.library.LibrariesTable.descendingOrdering') }} {{ $t('components.manage.library.LibrariesTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -191,25 +191,25 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.library.LibrariesTable.nameTableHeader') }} {{ $t('components.manage.library.LibrariesTable.table.library.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.LibrariesTable.accountTableHeader') }} {{ $t('components.manage.library.LibrariesTable.table.library.header.account') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.LibrariesTable.domainTableHeader') }} {{ $t('components.manage.library.LibrariesTable.table.library.header.domain') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.LibrariesTable.visibilityTableHeader') }} {{ $t('components.manage.library.LibrariesTable.table.library.header.visibility') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.LibrariesTable.uploadsTableHeader') }} {{ $t('components.manage.library.LibrariesTable.table.library.header.uploads') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.LibrariesTable.followersTableHeader') }} {{ $t('components.manage.library.LibrariesTable.table.library.header.followers') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.LibrariesTable.creationDateTableHeader') }} {{ $t('components.manage.library.LibrariesTable.table.library.header.creationDate') }}
</th> </th>
</template> </template>
<template #row-cells="scope"> <template #row-cells="scope">
@ -248,7 +248,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
{{ $t('components.manage.library.LibrariesTable.localLink') }} {{ $t('components.manage.library.LibrariesTable.link.local') }}
</a> </a>
</td> </td>
<td> <td>
@ -283,7 +283,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.library.LibrariesTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.library.LibrariesTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

28
front/src/components/manage/library/TagsTable.vue
View File

@ -57,8 +57,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('components.manage.library.TagsTable.deleteActionLabel'), label: t('components.manage.library.TagsTable.action.delete.label'),
confirmationMessage: t('components.manage.library.TagsTable.deleteActionConfirmation'), confirmationMessage: t('components.manage.library.TagsTable.action.delete.warning'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -97,7 +97,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.library.TagsTable.searchPlaceholder') searchPlaceholder: t('components.manage.library.TagsTable.placeholder.search')
})) }))
const detailedUpload = ref() const detailedUpload = ref()
@ -109,7 +109,7 @@ const showUploadDetailModal = ref(false)
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="tags-search">{{ $t('components.manage.library.TagsTable.searchLabel') }}</label> <label for="tags-search">{{ $t('components.manage.library.TagsTable.label.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="tags-search" id="tags-search"
@ -122,7 +122,7 @@ const showUploadDetailModal = ref(false)
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-ordering">{{ $t('components.manage.library.TagsTable.orderingLabel') }}</label> <label for="tags-ordering">{{ $t('components.manage.library.TagsTable.ordering.label') }}</label>
<select <select
id="tags-ordering" id="tags-ordering"
v-model="ordering" v-model="ordering"
@ -138,17 +138,17 @@ const showUploadDetailModal = ref(false)
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="tags-ordering-direction">{{ $t('components.manage.library.TagsTable.orderingDirectionLabel') }}</label> <label for="tags-ordering-direction">{{ $t('components.manage.library.TagsTable.ordering.direction.label') }}</label>
<select <select
id="tags-ordering-direction" id="tags-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.library.TagsTable.ascendingOrdering') }} {{ $t('components.manage.library.TagsTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.library.TagsTable.descendingOrdering') }} {{ $t('components.manage.library.TagsTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -177,19 +177,19 @@ const showUploadDetailModal = ref(false)
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.library.TagsTable.nameTableHeader') }} {{ $t('components.manage.library.TagsTable.table.tag.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TagsTable.artistsTableHeader') }} {{ $t('components.manage.library.TagsTable.table.tag.header.artists') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TagsTable.albumsTableHeader') }} {{ $t('components.manage.library.TagsTable.table.tag.header.albums') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TagsTable.tracksTableHeader') }} {{ $t('components.manage.library.TagsTable.table.tag.header.tracks') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TagsTable.creationDateTableHeader') }} {{ $t('components.manage.library.TagsTable.table.tag.header.creationDate') }}
</th> </th>
</template> </template>
<template <template
@ -225,7 +225,7 @@ const showUploadDetailModal = ref(false)
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.library.TagsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.library.TagsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

32
front/src/components/manage/library/TracksTable.vue
View File

@ -52,8 +52,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('components.manage.library.TracksTable.deleteActionLabel'), label: t('components.manage.library.TracksTable.action.delete.label'),
confirmationMessage: t('components.manage.library.TracksTable.deleteActionConfirmation'), confirmationMessage: t('components.manage.library.TracksTable.action.delete.warning'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -92,7 +92,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.library.TracksTable.searchPlaceholder') searchPlaceholder: t('components.manage.library.TracksTable.placeholder.search')
})) }))
</script> </script>
@ -101,7 +101,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="tracks-search">{{ $t('components.manage.library.TracksTable.searchLabel') }}</label> <label for="tracks-search">{{ $t('components.manage.library.TracksTable.label.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="tracks-search" id="tracks-search"
@ -114,7 +114,7 @@ const labels = computed(() => ({
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="tracks-ordering">{{ $t('components.manage.library.TracksTable.orderingLabel') }}</label> <label for="tracks-ordering">{{ $t('components.manage.library.TracksTable.ordering.label') }}</label>
<select <select
id="tracks-ordering" id="tracks-ordering"
v-model="ordering" v-model="ordering"
@ -130,17 +130,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="tracks-ordering-direction">{{ $t('components.manage.library.TracksTable.orderingDirectionLabel') }}</label> <label for="tracks-ordering-direction">{{ $t('components.manage.library.TracksTable.ordering.direction.label') }}</label>
<select <select
id="tracks-ordering-direction" id="tracks-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.library.TracksTable.ascendingOrdering') }} {{ $t('components.manage.library.TracksTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.library.TracksTable.descendingOrdering') }} {{ $t('components.manage.library.TracksTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -163,22 +163,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.library.TracksTable.titleTableHeader') }} {{ $t('components.manage.library.TracksTable.table.track.header.title') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TracksTable.albumTableHeader') }} {{ $t('components.manage.library.TracksTable.table.track.header.album') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TracksTable.artistTableHeader') }} {{ $t('components.manage.library.TracksTable.table.track.header.artist') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TracksTable.domainTableHeader') }} {{ $t('components.manage.library.TracksTable.table.track.header.domain') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TracksTable.licenseTableHeader') }} {{ $t('components.manage.library.TracksTable.table.track.header.license') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.TracksTable.creationDateTableHeader') }} {{ $t('components.manage.library.TracksTable.table.track.header.creationDate') }}
</th> </th>
</template> </template>
<template <template
@ -232,7 +232,7 @@ const labels = computed(() => ({
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
{{ $t('components.manage.library.TracksTable.localLink') }} {{ $t('components.manage.library.TracksTable.link.local') }}
</a> </a>
</td> </td>
<td> <td>
@ -265,7 +265,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.library.TracksTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.library.TracksTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

54
front/src/components/manage/library/UploadsTable.vue
View File

@ -59,8 +59,8 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('components.manage.library.UploadsTable.deleteActionLabel'), label: t('components.manage.library.UploadsTable.action.delete.label'),
confirmationMessage: t('components.manage.library.UploadsTable.deleteActionConfirmation'), confirmationMessage: t('components.manage.library.UploadsTable.action.delete.warning'),
isDangerous: true, isDangerous: true,
allowAll: false, allowAll: false,
confirmColor: 'danger' confirmColor: 'danger'
@ -99,7 +99,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.library.UploadsTable.searchPlaceholder') searchPlaceholder: t('components.manage.library.UploadsTable.placeholder.search')
})) }))
const displayName = (upload: Upload): string => { const displayName = (upload: Upload): string => {
@ -123,7 +123,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="uploads-search">{{ $t('components.manage.library.UploadsTable.searchLabel') }}</label> <label for="uploads-search">{{ $t('components.manage.library.UploadsTable.label.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="uploads-search" id="uploads-search"
@ -136,7 +136,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="uploads-visibility">{{ $t('components.manage.library.UploadsTable.visibilityLabel') }}</label> <label for="uploads-visibility">{{ $t('components.manage.library.UploadsTable.label.visibility') }}</label>
<select <select
id="uploads-visibility" id="uploads-visibility"
class="ui dropdown" class="ui dropdown"
@ -144,7 +144,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('privacy_level', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
{{ $t('components.manage.library.UploadsTable.allOption') }} {{ $t('components.manage.library.UploadsTable.option.all') }}
</option> </option>
<option value="me"> <option value="me">
{{ sharedLabels.fields.privacy_level.shortChoices.me }} {{ sharedLabels.fields.privacy_level.shortChoices.me }}
@ -158,7 +158,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="uploads-status">{{ $t('components.manage.library.UploadsTable.importStatusLabel') }}</label> <label for="uploads-status">{{ $t('components.manage.library.UploadsTable.label.status') }}</label>
<select <select
id="uploads-status" id="uploads-status"
class="ui dropdown" class="ui dropdown"
@ -166,24 +166,24 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@change="addSearchToken('status', ($event.target as HTMLSelectElement).value)" @change="addSearchToken('status', ($event.target as HTMLSelectElement).value)"
> >
<option value=""> <option value="">
{{ $t('components.manage.library.UploadsTable.allOption') }} {{ $t('components.manage.library.UploadsTable.option.all') }}
</option> </option>
<option value="pending"> <option value="pending">
{{ $t('components.manage.library.UploadsTable.pendingStatus') }} {{ $t('components.manage.library.UploadsTable.option.pending') }}
</option> </option>
<option value="skipped"> <option value="skipped">
{{ $t('components.manage.library.UploadsTable.skippedStatus') }} {{ $t('components.manage.library.UploadsTable.option.skipped') }}
</option> </option>
<option value="errored"> <option value="errored">
{{ $t('components.manage.library.UploadsTable.failedStatus') }} {{ $t('components.manage.library.UploadsTable.option.failed') }}
</option> </option>
<option value="finished"> <option value="finished">
{{ $t('components.manage.library.UploadsTable.finishedStatus') }} {{ $t('components.manage.library.UploadsTable.option.finished') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="uploads-ordering">{{ $t('components.manage.library.UploadsTable.orderingLabel') }}</label> <label for="uploads-ordering">{{ $t('components.manage.library.UploadsTable.ordering.label') }}</label>
<select <select
id="uploads-ordering" id="uploads-ordering"
v-model="ordering" v-model="ordering"
@ -199,17 +199,17 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="uploads-ordering-direction">{{ $t('components.manage.library.UploadsTable.orderingDirectionLabel') }}</label> <label for="uploads-ordering-direction">{{ $t('components.manage.library.UploadsTable.ordering.direction.label') }}</label>
<select <select
id="uploads-ordering-direction" id="uploads-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.library.UploadsTable.ascendingOrdering') }} {{ $t('components.manage.library.UploadsTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.library.UploadsTable.descendingOrdering') }} {{ $t('components.manage.library.UploadsTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -238,31 +238,31 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.library.UploadsTable.nameTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.UploadsTable.libraryTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.library') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.UploadsTable.accountTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.account') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.UploadsTable.domainTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.domain') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.UploadsTable.visibilityTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.visibility') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.UploadsTable.importStatusTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.importStatus') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.UploadsTable.sizeTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.size') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.UploadsTable.creationDateTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.creationDate') }}
</th> </th>
<th> <th>
{{ $t('components.manage.library.UploadsTable.creationDateTableHeader') }} {{ $t('components.manage.library.UploadsTable.table.upload.header.accessedDate') }}
</th> </th>
</template> </template>
<template #row-cells="scope"> <template #row-cells="scope">
@ -312,7 +312,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
{{ $t('components.manage.library.UploadsTable.localLink') }} {{ $t('components.manage.library.UploadsTable.link.local') }}
</a> </a>
</td> </td>
<td> <td>
@ -377,7 +377,7 @@ const getPrivacyLevelChoice = (privacyLevel: PrivacyLevel) => {
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.library.UploadsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.library.UploadsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

32
front/src/components/manage/moderation/AccountsTable.vue
View File

@ -56,7 +56,7 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'purge', name: 'purge',
label: t('components.manage.moderation.AccountsTable.purgeLabel'), label: t('components.manage.moderation.AccountsTable.action.purge.label'),
isDangerous: true isDangerous: true
} }
]) ])
@ -93,7 +93,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.moderation.AccountsTable.searchPlaceholder') searchPlaceholder: t('components.manage.moderation.AccountsTable.placeholder.search')
})) }))
</script> </script>
@ -102,7 +102,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui six wide field"> <div class="ui six wide field">
<label for="accounts-search">{{ $t('components.manage.moderation.AccountsTable.searchLabel') }}</label> <label for="accounts-search">{{ $t('components.manage.moderation.AccountsTable.label.search') }}</label>
<form @submit.prevent="query = search.value"> <form @submit.prevent="query = search.value">
<input <input
id="accounts-search" id="accounts-search"
@ -115,7 +115,7 @@ const labels = computed(() => ({
</form> </form>
</div> </div>
<div class="field"> <div class="field">
<label for="accounts-ordering">{{ $t('components.manage.moderation.AccountsTable.orderingLabel') }}</label> <label for="accounts-ordering">{{ $t('components.manage.moderation.AccountsTable.ordering.label') }}</label>
<select <select
id="accounts-ordering" id="accounts-ordering"
v-model="ordering" v-model="ordering"
@ -131,17 +131,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="accounts-ordering-direction">{{ $t('components.manage.moderation.AccountsTable.orderingDirectionLabel') }}</label> <label for="accounts-ordering-direction">{{ $t('components.manage.moderation.AccountsTable.ordering.direction.label') }}</label>
<select <select
id="accounts-ordering-direction" id="accounts-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.moderation.AccountsTable.ascendingOrdering') }} {{ $t('components.manage.moderation.AccountsTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.moderation.AccountsTable.descendingOrdering') }} {{ $t('components.manage.moderation.AccountsTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -164,22 +164,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.moderation.AccountsTable.nameTableHeader') }} {{ $t('components.manage.moderation.AccountsTable.table.account.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.AccountsTable.domainTableHeader') }} {{ $t('components.manage.moderation.AccountsTable.table.account.header.domain') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.AccountsTable.uploadsTableHeader') }} {{ $t('components.manage.moderation.AccountsTable.table.account.header.uploads') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.AccountsTable.firstSeenTableHeader') }} {{ $t('components.manage.moderation.AccountsTable.table.account.header.firstSeen') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.AccountsTable.lastSeenTableHeader') }} {{ $t('components.manage.moderation.AccountsTable.table.account.header.lastSeen') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.AccountsTable.moderationRuleTableHeader') }} {{ $t('components.manage.moderation.AccountsTable.table.account.header.moderationRule') }}
</th> </th>
</template> </template>
<template <template
@ -209,7 +209,7 @@ const labels = computed(() => ({
@click.prevent="addSearchToken('domain', scope.obj.domain)" @click.prevent="addSearchToken('domain', scope.obj.domain)"
> >
<i class="home icon" /> <i class="home icon" />
{{ $t('components.manage.moderation.AccountsTable.localLink') }} {{ $t('components.manage.moderation.AccountsTable.link.local') }}
</a> </a>
</td> </td>
<td> <td>
@ -225,7 +225,7 @@ const labels = computed(() => ({
/> />
</td> </td>
<td> <td>
<span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ $t('components.manage.moderation.AccountsTable.moderationRuleStatus') }}</span> <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ $t('components.manage.moderation.AccountsTable.table.account.moderationRule') }}</span>
</td> </td>
</template> </template>
</action-table> </action-table>
@ -240,7 +240,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.moderation.AccountsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.moderation.AccountsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

44
front/src/components/manage/moderation/DomainsTable.vue
View File

@ -50,19 +50,19 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'purge', name: 'purge',
label: t('components.manage.moderation.DomainsTable.purgeLabel'), label: t('components.manage.moderation.DomainsTable.action.purge.label'),
isDangerous: true isDangerous: true
}, },
{ {
name: 'allow_list_add', name: 'allow_list_add',
label: t('components.manage.moderation.DomainsTable.allowListAddLabel'), label: t('components.manage.moderation.DomainsTable.action.add.label'),
filterCheckable: (obj: { allowed: boolean }) => { filterCheckable: (obj: { allowed: boolean }) => {
return !obj.allowed return !obj.allowed
} }
}, },
{ {
name: 'allow_list_remove', name: 'allow_list_remove',
label: t('components.manage.moderation.DomainsTable.allowListRemoveLabel'), label: t('components.manage.moderation.DomainsTable.action.remove.label'),
filterCheckable: (obj: { allowed: boolean }) => { filterCheckable: (obj: { allowed: boolean }) => {
return obj.allowed return obj.allowed
} }
@ -108,8 +108,8 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.moderation.DomainsTable.searchPlaceholder'), searchPlaceholder: t('components.manage.moderation.DomainsTable.placeholder.search'),
allowListTitle: t('components.manage.moderation.DomainsTable.allowListTitle') allowListTitle: t('components.manage.moderation.DomainsTable.link.list')
})) }))
</script> </script>
@ -118,7 +118,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label for="domains-search">{{ $t('components.manage.moderation.DomainsTable.searchLabel') }}</label> <label for="domains-search">{{ $t('components.manage.moderation.DomainsTable.label.search') }}</label>
<input <input
id="domains-search" id="domains-search"
v-model="query" v-model="query"
@ -131,25 +131,25 @@ const labels = computed(() => ({
v-if="allowListEnabled" v-if="allowListEnabled"
class="field" class="field"
> >
<label for="domains-allow-list">{{ $t('components.manage.moderation.DomainsTable.inAllowListLabel') }}</label> <label for="domains-allow-list">{{ $t('components.manage.moderation.DomainsTable.label.inList') }}</label>
<select <select
id="domains-allow-list" id="domains-allow-list"
v-model="allowed" v-model="allowed"
class="ui dropdown" class="ui dropdown"
> >
<option :value="null"> <option :value="null">
{{ $t('components.manage.moderation.DomainsTable.allOption') }} {{ $t('components.manage.moderation.DomainsTable.option.all') }}
</option> </option>
<option :value="true"> <option :value="true">
{{ $t('components.manage.moderation.DomainsTable.positiveOption') }} {{ $t('components.manage.moderation.DomainsTable.option.yes') }}
</option> </option>
<option :value="false"> <option :value="false">
{{ $t('components.manage.moderation.DomainsTable.negativeOption') }} {{ $t('components.manage.moderation.DomainsTable.option.no') }}
</option> </option>
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="domains-ordering">{{ $t('components.manage.moderation.DomainsTable.orderingLabel') }}</label> <label for="domains-ordering">{{ $t('components.manage.moderation.DomainsTable.ordering.label') }}</label>
<select <select
id="domains-ordering" id="domains-ordering"
v-model="ordering" v-model="ordering"
@ -165,17 +165,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="domains-ordering-direction">{{ $t('components.manage.moderation.DomainsTable.orderingDirectionLabel') }}</label> <label for="domains-ordering-direction">{{ $t('components.manage.moderation.DomainsTable.ordering.direction.label') }}</label>
<select <select
id="domains-ordering-direction" id="domains-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.moderation.DomainsTable.ascendingOrdering') }} {{ $t('components.manage.moderation.DomainsTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.moderation.DomainsTable.descendingOrdering') }} {{ $t('components.manage.moderation.DomainsTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -199,19 +199,19 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.moderation.DomainsTable.nameTableHeader') }} {{ $t('components.manage.moderation.DomainsTable.table.domain.header.name') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.DomainsTable.usersTableHeader') }} {{ $t('components.manage.moderation.DomainsTable.table.domain.header.users') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.DomainsTable.receivedMessagesTableHeader') }} {{ $t('components.manage.moderation.DomainsTable.table.domain.header.receivedMessages') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.DomainsTable.firstSeenTableHeader') }} {{ $t('components.manage.moderation.DomainsTable.table.domain.header.firstSeen') }}
</th> </th>
<th> <th>
{{ $t('components.manage.moderation.DomainsTable.moderationRuleTableHeader') }} {{ $t('components.manage.moderation.DomainsTable.table.domain.header.moderationRule') }}
</th> </th>
</template> </template>
<template <template
@ -237,7 +237,7 @@ const labels = computed(() => ({
<human-date :date="scope.obj.creation_date" /> <human-date :date="scope.obj.creation_date" />
</td> </td>
<td> <td>
<span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ $t('components.manage.moderation.DomainsTable.moderationRuleStatus') }}</span> <span v-if="scope.obj.instance_policy"><i class="shield icon" />{{ $t('components.manage.moderation.DomainsTable.table.domain.moderationRule') }}</span>
</td> </td>
</template> </template>
</action-table> </action-table>
@ -247,7 +247,7 @@ const labels = computed(() => ({
> >
<div class="ui icon header"> <div class="ui icon header">
<i class="server icon" /> <i class="server icon" />
{{ $t('components.manage.moderation.DomainsTable.emptyState') }} {{ $t('components.manage.moderation.DomainsTable.empty.noPods') }}
</div> </div>
</div> </div>
</div> </div>
@ -261,7 +261,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.moderation.DomainsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.moderation.DomainsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

18
front/src/components/manage/moderation/InstancePolicyCard.vue
View File

@ -25,18 +25,18 @@ const summary = useMarkdown(() => props.object.summary)
<i class="user icon" />{{ object.actor }} &nbsp; <i class="user icon" />{{ object.actor }} &nbsp;
<template v-if="object.is_active"> <template v-if="object.is_active">
<i class="play icon" /> <i class="play icon" />
{{ $t('components.manage.moderation.InstancePolicyCard.enabledStatus') }} {{ $t('components.manage.moderation.InstancePolicyCard.status.enabled') }}
</template> </template>
<template v-if="!object.is_active"> <template v-if="!object.is_active">
<i class="pause icon" /> <i class="pause icon" />
{{ $t('components.manage.moderation.InstancePolicyCard.pausedStatus') }} {{ $t('components.manage.moderation.InstancePolicyCard.status.paused') }}
</template> </template>
</p> </p>
<div> <div>
<p><strong>{{ $t('components.manage.moderation.InstancePolicyCard.ruleHeader') }}</strong></p> <p><strong>{{ $t('components.manage.moderation.InstancePolicyCard.header.rule') }}</strong></p>
<p v-if="object.block_all"> <p v-if="object.block_all">
<i class="ban icon" /> <i class="ban icon" />
{{ $t('components.manage.moderation.InstancePolicyCard.blockAllRule') }} {{ $t('components.manage.moderation.InstancePolicyCard.label.blockAll') }}
</p> </p>
<div <div
v-else v-else
@ -48,7 +48,7 @@ const summary = useMarkdown(() => props.object.summary)
> >
<i class="feed icon" /> <i class="feed icon" />
<div class="content"> <div class="content">
{{ $t('components.manage.moderation.InstancePolicyCard.muteActivityRule') }} {{ $t('components.manage.moderation.InstancePolicyCard.label.muteActivity') }}
</div> </div>
</div> </div>
<div <div
@ -57,7 +57,7 @@ const summary = useMarkdown(() => props.object.summary)
> >
<i class="bell icon" /> <i class="bell icon" />
<div class="content"> <div class="content">
{{ $t('components.manage.moderation.InstancePolicyCard.muteNotificationsRule') }} {{ $t('components.manage.moderation.InstancePolicyCard.label.muteNotifications') }}
</div> </div>
</div> </div>
<div <div
@ -66,14 +66,14 @@ const summary = useMarkdown(() => props.object.summary)
> >
<i class="file icon" /> <i class="file icon" />
<div class="content"> <div class="content">
{{ $t('components.manage.moderation.InstancePolicyCard.rejectMediaRule') }} {{ $t('components.manage.moderation.InstancePolicyCard.label.rejectMedia') }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div v-if="summary"> <div v-if="summary">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<p><strong>{{ $t('components.manage.moderation.InstancePolicyCard.ruleReason') }}</strong></p> <p><strong>{{ $t('components.manage.moderation.InstancePolicyCard.label.reason') }}</strong></p>
<sanitized-html :html="summary" /> <sanitized-html :html="summary" />
</div> </div>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -82,7 +82,7 @@ const summary = useMarkdown(() => props.object.summary)
@click="emit('update')" @click="emit('update')"
> >
<i class="edit icon" /> <i class="edit icon" />
{{ $t('components.manage.moderation.InstancePolicyCard.editButton') }} {{ $t('components.manage.moderation.InstancePolicyCard.button.edit') }}
</button> </button>
</div> </div>
</template> </template>

48
front/src/components/manage/moderation/InstancePolicyForm.vue
View File

@ -27,20 +27,20 @@ const props = withDefaults(defineProps<Props>(), {
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
summaryHelp: t('components.manage.moderation.InstancePolicyForm.summaryHelp'), summaryHelp: t('components.manage.moderation.InstancePolicyForm.tooltip.summary'),
isActiveHelp: t('components.manage.moderation.InstancePolicyForm.isActiveHelp'), isActiveHelp: t('components.manage.moderation.InstancePolicyForm.tooltip.isActive'),
blockAllHelp: t('components.manage.moderation.InstancePolicyForm.blockAllHelp'), blockAllHelp: t('components.manage.moderation.InstancePolicyForm.tooltip.blockAll'),
silenceActivity: { silenceActivity: {
help: t('components.manage.moderation.InstancePolicyForm.silenceActivityHelp'), help: t('components.manage.moderation.InstancePolicyForm.tooltip.silenceActivity'),
label: t('components.manage.moderation.InstancePolicyForm.silenceActivityLabel') label: t('components.manage.moderation.InstancePolicyForm.label.silenceActivity')
}, },
silenceNotifications: { silenceNotifications: {
help: t('components.manage.moderation.InstancePolicyForm.silenceNotificationsHelp'), help: t('components.manage.moderation.InstancePolicyForm.tooltip.silenceNotifications'),
label: t('components.manage.moderation.InstancePolicyForm.silenceNotificationsLabel') label: t('components.manage.moderation.InstancePolicyForm.label.silenceNotifications')
}, },
rejectMedia: { rejectMedia: {
help: t('components.manage.moderation.InstancePolicyForm.rejectMediaHelp'), help: t('components.manage.moderation.InstancePolicyForm.tooltip.rejectMedia'),
label: t('components.manage.moderation.InstancePolicyForm.rejectMediaLabel') label: t('components.manage.moderation.InstancePolicyForm.label.rejectMedia')
} }
})) }))
@ -125,12 +125,12 @@ const remove = async () => {
<span <span
v-if="object" v-if="object"
> >
{{ $t('components.manage.moderation.InstancePolicyForm.editRuleHeader') }} {{ $t('components.manage.moderation.InstancePolicyForm.header.editRule') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.manage.moderation.InstancePolicyForm.addRuleHeader') }} {{ $t('components.manage.moderation.InstancePolicyForm.header.addRule') }}
</span> </span>
</h3> </h3>
<div <div
@ -139,7 +139,7 @@ const remove = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.manage.moderation.InstancePolicyForm.createRuleFailureHeader') }} {{ $t('components.manage.moderation.InstancePolicyForm.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -164,17 +164,17 @@ const remove = async () => {
<label for="policy-is-active"> <label for="policy-is-active">
<span <span
v-if="current.isActive" v-if="current.isActive"
>{{ $t('components.manage.moderation.InstancePolicyForm.policyEnabled') }}</span> >{{ $t('components.manage.moderation.InstancePolicyForm.label.policyEnabled') }}</span>
<span <span
v-else v-else
>{{ $t('components.manage.moderation.InstancePolicyForm.policyDisabled') }}</span> >{{ $t('components.manage.moderation.InstancePolicyForm.label.policyDisabled') }}</span>
<tooltip :content="labels.isActiveHelp" /> <tooltip :content="labels.isActiveHelp" />
</label> </label>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label for="policy-summary"> <label for="policy-summary">
{{ $t('components.manage.moderation.InstancePolicyForm.policyReasonLabel') }} {{ $t('components.manage.moderation.InstancePolicyForm.label.policyReason') }}
<tooltip :content="labels.summaryHelp" /> <tooltip :content="labels.summaryHelp" />
</label> </label>
<textarea <textarea
@ -192,13 +192,13 @@ const remove = async () => {
type="checkbox" type="checkbox"
> >
<label for="policy-is-active"> <label for="policy-is-active">
{{ $t('components.manage.moderation.InstancePolicyForm.blockAllLabel') }} {{ $t('components.manage.moderation.InstancePolicyForm.label.blockAll') }}
<tooltip :content="labels.blockAllHelp" /> <tooltip :content="labels.blockAllHelp" />
</label> </label>
</div> </div>
</div> </div>
<div class="ui horizontal divider"> <div class="ui horizontal divider">
{{ $t('components.manage.moderation.InstancePolicyForm.customizeRuleMessage') }} {{ $t('components.manage.moderation.InstancePolicyForm.label.customizeRule') }}
</div> </div>
<div <div
v-for="(config, key) in fieldConfig" v-for="(config, key) in fieldConfig"
@ -223,7 +223,7 @@ const remove = async () => {
class="ui basic left floated button" class="ui basic left floated button"
@click.prevent="emit('cancel')" @click.prevent="emit('cancel')"
> >
{{ $t('components.manage.moderation.InstancePolicyForm.cancelButton') }} {{ $t('components.manage.moderation.InstancePolicyForm.button.cancel') }}
</button> </button>
<button <button
:class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']" :class="['ui', 'right', 'floated', 'success', {'disabled loading': isLoading}, 'button']"
@ -232,12 +232,12 @@ const remove = async () => {
<span <span
v-if="object" v-if="object"
> >
{{ $t('components.manage.moderation.InstancePolicyForm.updateButton') }} {{ $t('components.manage.moderation.InstancePolicyForm.button.update') }}
</span> </span>
<span <span
v-else v-else
> >
{{ $t('components.manage.moderation.InstancePolicyForm.createButton') }} {{ $t('components.manage.moderation.InstancePolicyForm.button.create') }}
</span> </span>
</button> </button>
<dangerous-button <dangerous-button
@ -245,20 +245,20 @@ const remove = async () => {
class="ui right floated basic danger button" class="ui right floated basic danger button"
@confirm="remove" @confirm="remove"
> >
{{ $t('components.manage.moderation.InstancePolicyForm.deleteButton') }} {{ $t('components.manage.moderation.InstancePolicyForm.button.delete') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.manage.moderation.InstancePolicyForm.deleteRuleModalHeader') }} {{ $t('components.manage.moderation.InstancePolicyForm.modal.delete.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<p> <p>
{{ $t('components.manage.moderation.InstancePolicyForm.deleteRuleModalMessage') }} {{ $t('components.manage.moderation.InstancePolicyForm.modal.delete.content.warning') }}
</p> </p>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<div> <div>
{{ $t('components.manage.moderation.InstancePolicyForm.deleteRuleModalConfirm') }} {{ $t('components.manage.moderation.InstancePolicyForm.button.confirm') }}
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>

8
front/src/components/manage/moderation/InstancePolicyModal.vue
View File

@ -62,14 +62,14 @@ const fetchData = async () => {
> >
<i class="shield icon" />&nbsp; <i class="shield icon" />&nbsp;
<slot> <slot>
{{ $t('components.manage.moderation.InstancePolicyModal.moderationRulesHeader') }} {{ $t('components.manage.moderation.InstancePolicyModal.button.show') }}
</slot> </slot>
<semantic-modal <semantic-modal
v-model:show="show" v-model:show="show"
@show="fetchData" @show="fetchData"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.manage.moderation.InstancePolicyModal.manageRulesHeader', {obj: target}) }} {{ $t('components.manage.moderation.InstancePolicyModal.modal.manage.header', {obj: target}) }}
</h4> </h4>
<div class="content"> <div class="content">
<div class="description"> <div class="description">
@ -84,7 +84,7 @@ const fetchData = async () => {
> >
<header class="ui header"> <header class="ui header">
<h3> <h3>
{{ $t('components.manage.moderation.InstancePolicyModal.manageRulesHeader', {obj: target}) }} {{ $t('components.manage.moderation.InstancePolicyModal.modal.manage.content.warning', {obj: target}) }}
</h3> </h3>
</header> </header>
</instance-policy-card> </instance-policy-card>
@ -103,7 +103,7 @@ const fetchData = async () => {
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui deny button"> <button class="ui deny button">
{{ $t('components.manage.moderation.InstancePolicyModal.closeButton') }} {{ $t('components.manage.moderation.InstancePolicyModal.button.close') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

6
front/src/components/manage/moderation/NoteForm.vue
View File

@ -18,7 +18,7 @@ const props = defineProps<Props>()
const { t } = useI18n() const { t } = useI18n()
const labels = computed(() => ({ const labels = computed(() => ({
summaryPlaceholder: t('components.manage.moderation.NoteForm.summaryPlaceholder') summaryPlaceholder: t('components.manage.moderation.NoteForm.placeholder.summary')
})) }))
const summary = ref('') const summary = ref('')
@ -56,7 +56,7 @@ const submit = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.manage.moderation.NoteForm.submissionFailureHeader') }} {{ $t('components.manage.moderation.NoteForm.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -81,7 +81,7 @@ const submit = async () => {
type="submit" type="submit"
:disabled="isLoading" :disabled="isLoading"
> >
{{ $t('components.manage.moderation.NoteForm.addNoteButton') }} {{ $t('components.manage.moderation.NoteForm.button.add') }}
</button> </button>
</form> </form>
</template> </template>

8
front/src/components/manage/moderation/NotesThread.vue
View File

@ -64,22 +64,22 @@ const remove = async (note: Note) => {
@confirm="remove(note)" @confirm="remove(note)"
> >
<i class="trash icon" /> <i class="trash icon" />
{{ $t('components.manage.moderation.NotesThread.deleteButton') }} {{ $t('components.manage.moderation.NotesThread.button.delete') }}
<template #modal-header> <template #modal-header>
<p> <p>
{{ $t('components.manage.moderation.NotesThread.deleteModalHeader') }} {{ $t('components.manage.moderation.NotesThread.modal.delete.header') }}
</p> </p>
</template> </template>
<template #modal-content> <template #modal-content>
<div> <div>
<p> <p>
{{ $t('components.manage.moderation.NotesThread.deleteModalMessage') }} {{ $t('components.manage.moderation.NotesThread.modal.delete.content.warning') }}
</p> </p>
</div> </div>
</template> </template>
<template #modal-confirm> <template #modal-confirm>
<p> <p>
{{ $t('components.manage.moderation.NotesThread.deleteButton') }} {{ $t('components.manage.moderation.NotesThread.button.delete') }}
</p> </p>
</template> </template>
</dangerous-button> </dangerous-button>

58
front/src/components/manage/moderation/ReportCard.vue
View File

@ -66,10 +66,10 @@ const actions = computed(() => {
const deleteUrl = typeConfig.getDeleteUrl?.(target.value) const deleteUrl = typeConfig.getDeleteUrl?.(target.value)
return deleteUrl return deleteUrl
? [{ ? [{
label: t('components.manage.moderation.ReportCard.deleteLabel'), label: t('components.manage.moderation.ReportCard.button.delete'),
modalHeader: t('components.manage.moderation.ReportCard.deleteModalHeader'), modalHeader: t('components.manage.moderation.ReportCard.modal.delete.header'),
modalContent: t('components.manage.moderation.ReportCard.deleteModalMessage'), modalContent: t('components.manage.moderation.ReportCard.modal.delete.content.warning'),
modalConfirmLabel: t('components.manage.moderation.ReportCard.deleteConfirmLabel'), modalConfirmLabel: t('components.manage.moderation.ReportCard.button.confirmDelete'),
icon: 'x', icon: 'x',
iconColor: 'danger', iconColor: 'danger',
show: (obj: Report) => { return !!obj.target }, show: (obj: Report) => { return !!obj.target },
@ -141,7 +141,7 @@ const handleRemovedNote = (uuid: string) => {
<div class="content"> <div class="content">
<h4 class="header"> <h4 class="header">
<router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}"> <router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}">
{{ $t('components.manage.moderation.ReportCard.reportHeader', {id: obj.uuid.substring(0, 8)}) }} {{ $t('components.manage.moderation.ReportCard.link.report', {id: obj.uuid.substring(0, 8)}) }}
</router-link> </router-link>
<collapse-link <collapse-link
v-model="isCollapsed" v-model="isCollapsed"
@ -156,7 +156,7 @@ const handleRemovedNote = (uuid: string) => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.ReportCard.submittedByLabel') }} {{ $t('components.manage.moderation.ReportCard.table.report.submittedBy') }}
</td> </td>
<td> <td>
<div v-if="obj.submitter"> <div v-if="obj.submitter">
@ -172,7 +172,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.ReportCard.categoryLabel') }} {{ $t('components.manage.moderation.ReportCard.table.report.category') }}
</td> </td>
<td> <td>
<report-category-dropdown <report-category-dropdown
@ -186,7 +186,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.ReportCard.creationDateLabel') }} {{ $t('components.manage.moderation.ReportCard.table.report.creationDate') }}
</td> </td>
<td> <td>
<human-date <human-date
@ -203,22 +203,22 @@ const handleRemovedNote = (uuid: string) => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.ReportCard.statusLabel') }} {{ $t('components.manage.moderation.ReportCard.table.status.status') }}
</td> </td>
<td v-if="obj.is_handled"> <td v-if="obj.is_handled">
<span v-if="obj.is_handled"> <span v-if="obj.is_handled">
<i class="success check icon" /> <i class="success check icon" />
{{ $t('components.manage.moderation.ReportCard.resolvedStatus') }} {{ $t('components.manage.moderation.ReportCard.table.status.resolved') }}
</span> </span>
</td> </td>
<td v-else> <td v-else>
<i class="danger x icon" /> <i class="danger x icon" />
{{ $t('components.manage.moderation.ReportCard.unresolvedStatus') }} {{ $t('components.manage.moderation.ReportCard.table.status.unresolved') }}
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.ReportCard.assignedToLabel') }} {{ $t('components.manage.moderation.ReportCard.table.status.assignedTo') }}
</td> </td>
<td> <td>
<div v-if="obj.assigned_to"> <div v-if="obj.assigned_to">
@ -236,7 +236,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.ReportCard.resolutionDateLabel') }} {{ $t('components.manage.moderation.ReportCard.table.status.resolutionDate') }}
</td> </td>
<td> <td>
<human-date <human-date
@ -253,7 +253,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.ReportCard.internalNotesLabel') }} {{ $t('components.manage.moderation.ReportCard.table.status.internalNotes') }}
</td> </td>
<td> <td>
<i class="comment icon" /> <i class="comment icon" />
@ -273,7 +273,7 @@ const handleRemovedNote = (uuid: string) => {
<div class="ui stackable two column grid"> <div class="ui stackable two column grid">
<div class="column"> <div class="column">
<h3> <h3>
{{ $t('components.manage.moderation.ReportCard.messageHeader') }} {{ $t('components.manage.moderation.ReportCard.header.message') }}
</h3> </h3>
<expandable-div <expandable-div
v-if="summary" v-if="summary"
@ -285,14 +285,14 @@ const handleRemovedNote = (uuid: string) => {
</div> </div>
<aside class="column"> <aside class="column">
<h3> <h3>
{{ $t('components.manage.moderation.ReportCard.reportedObjectHeader') }} {{ $t('components.manage.moderation.ReportCard.header.reportedObject') }}
</h3> </h3>
<div <div
v-if="!obj.target" v-if="!obj.target"
role="alert" role="alert"
class="ui warning message" class="ui warning message"
> >
{{ $t('components.manage.moderation.ReportCard.objectDeletedWarning') }} {{ $t('components.manage.moderation.ReportCard.warning.objectDeleted') }}
</div> </div>
<router-link <router-link
v-if="target && configs[target.type].urls.getDetail" v-if="target && configs[target.type].urls.getDetail"
@ -300,7 +300,7 @@ const handleRemovedNote = (uuid: string) => {
:to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'" :to="configs[target.type].urls.getDetail?.(obj.target_state) ?? '/'"
> >
<i class="eye icon" /> <i class="eye icon" />
{{ $t('components.manage.moderation.ReportCard.publicPageLink') }} {{ $t('components.manage.moderation.ReportCard.link.publicPage') }}
</router-link> </router-link>
<router-link <router-link
v-if="target && configs[target.type].urls.getAdminDetail" v-if="target && configs[target.type].urls.getAdminDetail"
@ -308,13 +308,13 @@ const handleRemovedNote = (uuid: string) => {
:to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'" :to="configs[target.type].urls.getAdminDetail?.(obj.target_state) ?? '/'"
> >
<i class="wrench icon" /> <i class="wrench icon" />
{{ $t('components.manage.moderation.ReportCard.moderationLink') }} {{ $t('components.manage.moderation.ReportCard.link.moderation') }}
</router-link> </router-link>
<table class="ui very basic unstackable table"> <table class="ui very basic unstackable table">
<tbody> <tbody>
<tr v-if="target"> <tr v-if="target">
<td> <td>
{{ $t('components.manage.moderation.ReportCard.objectTypeLabel') }} {{ $t('components.manage.moderation.ReportCard.table.object.type') }}
</td> </td>
<td colspan="2"> <td colspan="2">
<i :class="[configs[target.type].icon, 'icon']" /> <i :class="[configs[target.type].icon, 'icon']" />
@ -323,7 +323,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr v-if="obj.target_owner && (!target || target.type !== 'account')"> <tr v-if="obj.target_owner && (!target || target.type !== 'account')">
<td> <td>
{{ $t('components.manage.moderation.ReportCard.objectOwnerLabel') }} {{ $t('components.manage.moderation.ReportCard.table.object.owner') }}
</td> </td>
<td> <td>
<actor-link <actor-link
@ -342,7 +342,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr v-if="target && target.type === 'account'"> <tr v-if="target && target.type === 'account'">
<td> <td>
{{ $t('components.manage.moderation.ReportCard.accountLabel') }} {{ $t('components.manage.moderation.ReportCard.table.object.account') }}
</td> </td>
<td> <td>
<actor-link <actor-link
@ -361,17 +361,17 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr v-if="obj.target_state.is_local"> <tr v-if="obj.target_state.is_local">
<td> <td>
{{ $t('components.manage.moderation.ReportCard.domainLabel') }} {{ $t('components.manage.moderation.ReportCard.table.object.domain') }}
</td> </td>
<td colspan="2"> <td colspan="2">
<i class="home icon" /> <i class="home icon" />
{{ $t('components.manage.moderation.ReportCard.localLabel') }} {{ $t('components.manage.moderation.ReportCard.table.object.local') }}
</td> </td>
</tr> </tr>
<tr v-else-if="obj.target_state.domain"> <tr v-else-if="obj.target_state.domain">
<td> <td>
<router-link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}"> <router-link :to="{name: 'manage.moderation.domains.detail', params: { id: obj.target_state.domain }}">
{{ $t('components.manage.moderation.ReportCard.domainLabel') }} {{ $t('components.manage.moderation.ReportCard.table.object.domain') }}
</router-link> </router-link>
</td> </td>
<td> <td>
@ -410,7 +410,7 @@ const handleRemovedNote = (uuid: string) => {
<div class="ui stackable two column grid"> <div class="ui stackable two column grid">
<div class="column"> <div class="column">
<h3> <h3>
{{ $t('components.manage.moderation.ReportCard.internalNotesLabel') }} {{ $t('components.manage.moderation.ReportCard.header.notes') }}
</h3> </h3>
<notes-thread <notes-thread
:notes="obj.notes" :notes="obj.notes"
@ -423,7 +423,7 @@ const handleRemovedNote = (uuid: string) => {
</div> </div>
<div class="column"> <div class="column">
<h3> <h3>
{{ $t('components.manage.moderation.ReportCard.actionsLabel') }} {{ $t('components.manage.moderation.ReportCard.header.actions') }}
</h3> </h3>
<div class="ui labelled icon basic buttons"> <div class="ui labelled icon basic buttons">
<button <button
@ -432,7 +432,7 @@ const handleRemovedNote = (uuid: string) => {
@click="resolveReport(true)" @click="resolveReport(true)"
> >
<i class="success check icon" />&nbsp; <i class="success check icon" />&nbsp;
{{ $t('components.manage.moderation.ReportCard.resolveLabel') }} {{ $t('components.manage.moderation.ReportCard.button.resolve') }}
</button> </button>
<button <button
v-if="obj.is_handled === true" v-if="obj.is_handled === true"
@ -440,7 +440,7 @@ const handleRemovedNote = (uuid: string) => {
@click="resolveReport(false)" @click="resolveReport(false)"
> >
<i class="warning redo icon" />&nbsp; <i class="warning redo icon" />&nbsp;
{{ $t('components.manage.moderation.ReportCard.unresolveLabel') }} {{ $t('components.manage.moderation.ReportCard.button.unresolve') }}
</button> </button>
<template <template
v-for="action in actions" v-for="action in actions"

32
front/src/components/manage/moderation/UserRequestCard.vue
View File

@ -67,7 +67,7 @@ const handleRemovedNote = (uuid: string) => {
<div class="content"> <div class="content">
<h4 class="header"> <h4 class="header">
<router-link :to="{name: 'manage.moderation.requests.detail', params: {id: obj.uuid}}"> <router-link :to="{name: 'manage.moderation.requests.detail', params: {id: obj.uuid}}">
{{ $t('components.manage.moderation.UserRequestCard.requestHeader', {id: obj.uuid.substring(0, 8)}) }} {{ $t('components.manage.moderation.UserRequestCard.link.request', {id: obj.uuid.substring(0, 8)}) }}
</router-link> </router-link>
<collapse-link <collapse-link
v-model="isCollapsed" v-model="isCollapsed"
@ -82,7 +82,7 @@ const handleRemovedNote = (uuid: string) => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.UserRequestCard.submittedByLabel') }} {{ $t('components.manage.moderation.UserRequestCard.table.request.submittedBy') }}
</td> </td>
<td> <td>
<actor-link <actor-link
@ -93,7 +93,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.UserRequestCard.creationDateLabel') }} {{ $t('components.manage.moderation.UserRequestCard.table.request.creationDate') }}
</td> </td>
<td> <td>
<human-date <human-date
@ -110,26 +110,26 @@ const handleRemovedNote = (uuid: string) => {
<tbody> <tbody>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.UserRequestCard.statusLabel') }} {{ $t('components.manage.moderation.UserRequestCard.table.status.status') }}
</td> </td>
<td> <td>
<template v-if="obj.status === 'pending'"> <template v-if="obj.status === 'pending'">
<i class="warning hourglass icon" /> <i class="warning hourglass icon" />
{{ $t('components.manage.moderation.UserRequestCard.pendingStatus') }} {{ $t('components.manage.moderation.UserRequestCard.table.status.pending') }}
</template> </template>
<template v-else-if="obj.status === 'refused'"> <template v-else-if="obj.status === 'refused'">
<i class="danger x icon" /> <i class="danger x icon" />
{{ $t('components.manage.moderation.UserRequestCard.refusedStatus') }} {{ $t('components.manage.moderation.UserRequestCard.table.status.refused') }}
</template> </template>
<template v-else-if="obj.status === 'approved'"> <template v-else-if="obj.status === 'approved'">
<i class="success check icon" /> <i class="success check icon" />
{{ $t('components.manage.moderation.UserRequestCard.approvedStatus') }} {{ $t('components.manage.moderation.UserRequestCard.table.status.approved') }}
</template> </template>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.UserRequestCard.assignedToLabel') }} {{ $t('components.manage.moderation.UserRequestCard.table.status.assignedTo') }}
</td> </td>
<td> <td>
<div v-if="obj.assigned_to"> <div v-if="obj.assigned_to">
@ -147,7 +147,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.UserRequestCard.resolutionDateLabel') }} {{ $t('components.manage.moderation.UserRequestCard.table.status.resolutionDate') }}
</td> </td>
<td> <td>
<human-date <human-date
@ -164,7 +164,7 @@ const handleRemovedNote = (uuid: string) => {
</tr> </tr>
<tr> <tr>
<td> <td>
{{ $t('components.manage.moderation.UserRequestCard.internalNotesLabel') }} {{ $t('components.manage.moderation.UserRequestCard.table.status.internalNotes') }}
</td> </td>
<td> <td>
<i class="comment icon" /> <i class="comment icon" />
@ -184,10 +184,10 @@ const handleRemovedNote = (uuid: string) => {
<div class="ui stackable two column grid"> <div class="ui stackable two column grid">
<div class="column"> <div class="column">
<h3> <h3>
{{ $t('components.manage.moderation.UserRequestCard.messageHeader') }} {{ $t('components.manage.moderation.UserRequestCard.header.signup') }}
</h3> </h3>
<p> <p>
{{ $t('components.manage.moderation.UserRequestCard.messageBody') }} {{ $t('components.manage.moderation.UserRequestCard.message.signup') }}
</p> </p>
<template v-if="obj.metadata"> <template v-if="obj.metadata">
<div class="ui hidden divider" /> <div class="ui hidden divider" />
@ -211,7 +211,7 @@ const handleRemovedNote = (uuid: string) => {
<aside class="column"> <aside class="column">
<div v-if="obj.status != 'approved'"> <div v-if="obj.status != 'approved'">
<h3> <h3>
{{ $t('components.manage.moderation.UserRequestCard.actionsHeader') }} {{ $t('components.manage.moderation.UserRequestCard.header.actions') }}
</h3> </h3>
<div class="ui labelled icon basic buttons"> <div class="ui labelled icon basic buttons">
<button <button
@ -220,7 +220,7 @@ const handleRemovedNote = (uuid: string) => {
@click="approve(true)" @click="approve(true)"
> >
<i class="success check icon" />&nbsp; <i class="success check icon" />&nbsp;
{{ $t('components.manage.moderation.UserRequestCard.approveButton') }} {{ $t('components.manage.moderation.UserRequestCard.button.approve') }}
</button> </button>
<button <button
v-if="obj.status === 'pending'" v-if="obj.status === 'pending'"
@ -228,12 +228,12 @@ const handleRemovedNote = (uuid: string) => {
@click="approve(false)" @click="approve(false)"
> >
<i class="danger x icon" />&nbsp; <i class="danger x icon" />&nbsp;
{{ $t('components.manage.moderation.UserRequestCard.rejectButton') }} {{ $t('components.manage.moderation.UserRequestCard.button.reject') }}
</button> </button>
</div> </div>
</div> </div>
<h3> <h3>
{{ $t('components.manage.moderation.UserRequestCard.internalNotesLabel') }} {{ $t('components.manage.moderation.UserRequestCard.header.notes') }}
</h3> </h3>
<notes-thread <notes-thread
:notes="obj.notes" :notes="obj.notes"

14
front/src/components/manage/users/InvitationForm.vue
View File

@ -17,7 +17,7 @@ const router = useRouter()
const store = useStore() const store = useStore()
const labels = computed(() => ({ const labels = computed(() => ({
placeholder: t('components.manage.users.InvitationForm.placeholder') placeholder: t('components.manage.users.InvitationForm.placeholder.invitation')
})) }))
const invitations = reactive([] as Invitation[]) const invitations = reactive([] as Invitation[])
@ -56,7 +56,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.manage.users.InvitationForm.inviteCreateFailureHeader') }} {{ $t('components.manage.users.InvitationForm.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -69,7 +69,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
</div> </div>
<div class="inline fields"> <div class="inline fields">
<div class="ui field"> <div class="ui field">
<label for="invitation-code">{{ $t('components.manage.users.InvitationForm.invitationCodeLabel') }}</label> <label for="invitation-code">{{ $t('components.manage.users.InvitationForm.label.invite') }}</label>
<input <input
v-model="code" v-model="code"
for="invitation-code" for="invitation-code"
@ -84,7 +84,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
:disabled="isLoading" :disabled="isLoading"
type="submit" type="submit"
> >
{{ $t('components.manage.users.InvitationForm.newInviteCodeButton') }} {{ $t('components.manage.users.InvitationForm.button.new') }}
</button> </button>
</div> </div>
</div> </div>
@ -95,10 +95,10 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
<thead> <thead>
<tr> <tr>
<th> <th>
{{ $t('components.manage.users.InvitationForm.codeLabel') }} {{ $t('components.manage.users.InvitationForm.table.invitation.header.code') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.InvitationForm.shareLinkLabel') }} {{ $t('components.manage.users.InvitationForm.table.invitation.header.link') }}
</th> </th>
</tr> </tr>
</thead> </thead>
@ -121,7 +121,7 @@ const getUrl = (code: string) => store.getters['instance/absoluteUrl'](router.re
class="ui basic button" class="ui basic button"
@click="invitations = []" @click="invitations = []"
> >
{{ $t('components.manage.users.InvitationForm.clearButton') }} {{ $t('components.manage.users.InvitationForm.button.clear') }}
</button> </button>
</div> </div>
</div> </div>

36
front/src/components/manage/users/InvitationsTable.vue
View File

@ -48,7 +48,7 @@ const actionFilters = computed(() => ({ q: query.value, ...props.filters }))
const actions = computed(() => [ const actions = computed(() => [
{ {
name: 'delete', name: 'delete',
label: t('components.manage.users.InvitationsTable.deleteLabel'), label: t('components.manage.users.InvitationsTable.action.delete'),
filterCheckable: (obj: { users: unknown[], expiration_date: Date }) => { filterCheckable: (obj: { users: unknown[], expiration_date: Date }) => {
return obj.users.length === 0 && moment().isBefore(obj.expiration_date) return obj.users.length === 0 && moment().isBefore(obj.expiration_date)
} }
@ -89,7 +89,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.users.InvitationsTable.searchPlaceholder') searchPlaceholder: t('components.manage.users.InvitationsTable.placeholder.search')
})) }))
</script> </script>
@ -98,7 +98,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label for="invitations-search">{{ $t('components.manage.users.InvitationsTable.searchLabel') }}</label> <label for="invitations-search">{{ $t('components.manage.users.InvitationsTable.label.search') }}</label>
<input <input
id="invitations-search" id="invitations-search"
v-model="query" v-model="query"
@ -108,7 +108,7 @@ const labels = computed(() => ({
> >
</div> </div>
<div class="field"> <div class="field">
<label for="invitations-ordering">{{ $t('components.manage.users.InvitationsTable.orderingLabel') }}</label> <label for="invitations-ordering">{{ $t('components.manage.users.InvitationsTable.ordering.label') }}</label>
<select <select
id="invitations-ordering" id="invitations-ordering"
v-model="ordering" v-model="ordering"
@ -124,20 +124,20 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="invitations-status">{{ $t('components.manage.users.InvitationsTable.statusLabel') }}</label> <label for="invitations-status">{{ $t('components.manage.users.InvitationsTable.label.status') }}</label>
<select <select
id="invitations-status" id="invitations-status"
v-model="isOpen" v-model="isOpen"
class="ui dropdown" class="ui dropdown"
> >
<option :value="null"> <option :value="null">
{{ $t('components.manage.users.InvitationsTable.allOption') }} {{ $t('components.manage.users.InvitationsTable.option.all') }}
</option> </option>
<option :value="true"> <option :value="true">
{{ $t('components.manage.users.InvitationsTable.openStatus') }} {{ $t('components.manage.users.InvitationsTable.option.open') }}
</option> </option>
<option :value="false"> <option :value="false">
{{ $t('components.manage.users.InvitationsTable.expiredStatus') }} {{ $t('components.manage.users.InvitationsTable.option.expired') }}
</option> </option>
</select> </select>
</div> </div>
@ -160,22 +160,22 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.users.InvitationsTable.ownerTableHeader') }} {{ $t('components.manage.users.InvitationsTable.table.invitation.header.owner') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.InvitationsTable.userTableHeader') }} {{ $t('components.manage.users.InvitationsTable.table.invitation.header.user') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.InvitationsTable.statusTableHeader') }} {{ $t('components.manage.users.InvitationsTable.table.invitation.header.status') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.InvitationsTable.creationDateTableHeader') }} {{ $t('components.manage.users.InvitationsTable.table.invitation.header.creationDate') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.InvitationsTable.expirationDateTableHeader') }} {{ $t('components.manage.users.InvitationsTable.table.invitation.header.expirationDate') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.InvitationsTable.codeTableHeader') }} {{ $t('components.manage.users.InvitationsTable.table.invitation.header.code') }}
</th> </th>
</template> </template>
<template <template
@ -195,15 +195,15 @@ const labels = computed(() => ({
<span <span
v-if="scope.obj.users.length > 0" v-if="scope.obj.users.length > 0"
class="ui success basic label" class="ui success basic label"
>{{ $t('components.manage.users.InvitationsTable.usedStatusLabel') }}</span> >{{ $t('components.manage.users.InvitationsTable.label.used') }}</span>
<span <span
v-else-if="moment().isAfter(scope.obj.expiration_date)" v-else-if="moment().isAfter(scope.obj.expiration_date)"
class="ui danger basic label" class="ui danger basic label"
>{{ $t('components.manage.users.InvitationsTable.expiredStatusLabel') }}</span> >{{ $t('components.manage.users.InvitationsTable.label.expired') }}</span>
<span <span
v-else v-else
class="ui basic label" class="ui basic label"
>{{ $t('components.manage.users.InvitationsTable.unusedStatusLabel') }}</span> >{{ $t('components.manage.users.InvitationsTable.label.unused') }}</span>
</td> </td>
<td> <td>
<human-date :date="scope.obj.creation_date" /> <human-date :date="scope.obj.creation_date" />
@ -227,7 +227,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.users.InvitationsTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.users.InvitationsTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

44
front/src/components/manage/users/UsersTable.vue
View File

@ -44,15 +44,15 @@ const orderingOptions: [OrderingField, keyof typeof sharedLabels.filters][] = [
const permissions = computed(() => [ const permissions = computed(() => [
{ {
code: 'library', code: 'library',
label: t('components.manage.users.UsersTable.libraryLabel') label: t('components.manage.users.UsersTable.permission.library')
}, },
{ {
code: 'moderation', code: 'moderation',
label: t('components.manage.users.UsersTable.moderationLabel') label: t('components.manage.users.UsersTable.permission.moderation')
}, },
{ {
code: 'settings', code: 'settings',
label: t('components.manage.users.UsersTable.settingsLabel') label: t('components.manage.users.UsersTable.permission.settings')
} }
]) ])
@ -91,7 +91,7 @@ fetchData()
const sharedLabels = useSharedLabels() const sharedLabels = useSharedLabels()
const labels = computed(() => ({ const labels = computed(() => ({
searchPlaceholder: t('components.manage.users.UsersTable.searchPlaceholder') searchPlaceholder: t('components.manage.users.UsersTable.placeholder.search')
})) }))
</script> </script>
@ -100,7 +100,7 @@ const labels = computed(() => ({
<div class="ui inline form"> <div class="ui inline form">
<div class="fields"> <div class="fields">
<div class="ui field"> <div class="ui field">
<label for="users-search">{{ $t('components.manage.users.UsersTable.searchLabel') }}</label> <label for="users-search">{{ $t('components.manage.users.UsersTable.label.search') }}</label>
<input <input
id="users-search" id="users-search"
v-model="query" v-model="query"
@ -110,7 +110,7 @@ const labels = computed(() => ({
> >
</div> </div>
<div class="field"> <div class="field">
<label for="users-ordering">{{ $t('components.manage.users.UsersTable.orderingLabel') }}</label> <label for="users-ordering">{{ $t('components.manage.users.UsersTable.ordering.label') }}</label>
<select <select
id="users-ordering" id="users-ordering"
v-model="ordering" v-model="ordering"
@ -126,17 +126,17 @@ const labels = computed(() => ({
</select> </select>
</div> </div>
<div class="field"> <div class="field">
<label for="users-ordering-direction">{{ $t('components.manage.users.UsersTable.orderingDirectionLabel') }}</label> <label for="users-ordering-direction">{{ $t('components.manage.users.UsersTable.ordering.direction.label') }}</label>
<select <select
id="users-ordering-direction" id="users-ordering-direction"
v-model="orderingDirection" v-model="orderingDirection"
class="ui dropdown" class="ui dropdown"
> >
<option value="+"> <option value="+">
{{ $t('components.manage.users.UsersTable.ascendingOrdering') }} {{ $t('components.manage.users.UsersTable.ordering.direction.ascending') }}
</option> </option>
<option value="-"> <option value="-">
{{ $t('components.manage.users.UsersTable.descendingOrdering') }} {{ $t('components.manage.users.UsersTable.ordering.direction.descending') }}
</option> </option>
</select> </select>
</div> </div>
@ -159,25 +159,25 @@ const labels = computed(() => ({
> >
<template #header-cells> <template #header-cells>
<th> <th>
{{ $t('components.manage.users.UsersTable.usernameTableHeader') }} {{ $t('components.manage.users.UsersTable.table.user.header.username') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.UsersTable.emailTableHeader') }} {{ $t('components.manage.users.UsersTable.table.user.header.email') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.UsersTable.accountStatusTableHeader') }} {{ $t('components.manage.users.UsersTable.table.user.header.accountStatus') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.UsersTable.signupTableHeader') }} {{ $t('components.manage.users.UsersTable.table.user.header.signup') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.UsersTable.lastActivityTableHeader') }} {{ $t('components.manage.users.UsersTable.table.user.header.lastActivity') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.UsersTable.permissionsTableHeader') }} {{ $t('components.manage.users.UsersTable.table.user.header.permissions') }}
</th> </th>
<th> <th>
{{ $t('components.manage.users.UsersTable.statusTableHeader') }} {{ $t('components.manage.users.UsersTable.table.user.header.status') }}
</th> </th>
</template> </template>
<template <template
@ -204,11 +204,11 @@ const labels = computed(() => ({
<span <span
v-if="scope.obj.is_active" v-if="scope.obj.is_active"
class="ui basic success label" class="ui basic success label"
>{{ $t('components.manage.users.UsersTable.activeStatus') }}</span> >{{ $t('components.manage.users.UsersTable.table.user.accountStatus.active') }}</span>
<span <span
v-else v-else
class="ui basic label" class="ui basic label"
>{{ $t('components.manage.users.UsersTable.inactiveStatus') }}</span> >{{ $t('components.manage.users.UsersTable.table.user.accountStatus.inactive') }}</span>
</td> </td>
<td> <td>
<human-date :date="scope.obj.date_joined" /> <human-date :date="scope.obj.date_joined" />
@ -237,15 +237,15 @@ const labels = computed(() => ({
<span <span
v-if="scope.obj.is_superuser" v-if="scope.obj.is_superuser"
class="ui pink label" class="ui pink label"
>{{ $t('components.manage.users.UsersTable.adminPermission') }}</span> >{{ $t('components.manage.users.UsersTable.table.user.status.admin') }}</span>
<span <span
v-else-if="scope.obj.is_staff" v-else-if="scope.obj.is_staff"
class="ui purple label" class="ui purple label"
>{{ $t('components.manage.users.UsersTable.staffPermission') }}</span> >{{ $t('components.manage.users.UsersTable.table.user.status.staff') }}</span>
<span <span
v-else v-else
class="ui basic label" class="ui basic label"
>{{ $t('components.manage.users.UsersTable.regularPermission') }}</span> >{{ $t('components.manage.users.UsersTable.table.user.status.regular') }}</span>
</td> </td>
</template> </template>
</action-table> </action-table>
@ -260,7 +260,7 @@ const labels = computed(() => ({
/> />
<span v-if="result && result.results.length > 0"> <span v-if="result && result.results.length > 0">
{{ $t('components.manage.users.UsersTable.resultsDisplay', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }} {{ $t('components.manage.users.UsersTable.pagination.results', {start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}) }}
</span> </span>
</div> </div>
</div> </div>

22
front/src/components/moderation/FilterModal.vue
View File

@ -45,7 +45,7 @@ const hide = async () => {
store.state.moderation.lastUpdate = new Date() store.state.moderation.lastUpdate = new Date()
store.commit('moderation/contentFilter', response.data) store.commit('moderation/contentFilter', response.data)
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('components.moderation.FilterModal.contentSuccessMessage'), content: t('components.moderation.FilterModal.message.success'),
date: new Date() date: new Date()
}) })
} catch (error) { } catch (error) {
@ -63,7 +63,7 @@ const hide = async () => {
v-if="type === 'artist'" v-if="type === 'artist'"
class="header" class="header"
> >
{{ $t('components.moderation.FilterModal.hideContentHeader', {name: target?.name}) }} {{ $t('components.moderation.FilterModal.header.modal', {name: target?.name}) }}
</h4> </h4>
<div class="scrolling content"> <div class="scrolling content">
<div class="description"> <div class="description">
@ -73,7 +73,7 @@ const hide = async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.moderation.FilterModal.filterCreateFailureHeader') }} {{ $t('components.moderation.FilterModal.header.failure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -86,37 +86,37 @@ const hide = async () => {
</div> </div>
<template v-if="type === 'artist'"> <template v-if="type === 'artist'">
<p> <p>
{{ $t('components.moderation.FilterModal.filterCreateWarning') }} {{ $t('components.moderation.FilterModal.warning.createFilter.listIntro') }}
</p> </p>
<ul> <ul>
<li> <li>
{{ $t('components.moderation.FilterModal.filterWarningList1') }} {{ $t('components.moderation.FilterModal.warning.createFilter.listItem1') }}
</li> </li>
<li> <li>
{{ $t('components.moderation.FilterModal.filterWarningList2') }} {{ $t('components.moderation.FilterModal.warning.createFilter.listItem2') }}
</li> </li>
<li> <li>
{{ $t('components.moderation.FilterModal.filterWarningList3') }} {{ $t('components.moderation.FilterModal.warning.createFilter.listItem3') }}
</li> </li>
<li> <li>
{{ $t('components.moderation.FilterModal.filterWarningList4') }} {{ $t('components.moderation.FilterModal.warning.createFilter.listItem4') }}
</li> </li>
</ul> </ul>
<p> <p>
{{ $t('components.moderation.FilterModal.filterCreateHelp') }} {{ $t('components.moderation.FilterModal.help.createFilter') }}
</p> </p>
</template> </template>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
{{ $t('components.moderation.FilterModal.cancelButton') }} {{ $t('components.moderation.FilterModal.button.cancel') }}
</button> </button>
<button <button
:class="['ui', 'success', {loading: isLoading}, 'button']" :class="['ui', 'success', {loading: isLoading}, 'button']"
@click="hide" @click="hide"
> >
{{ $t('components.moderation.FilterModal.hideContentButton') }} {{ $t('components.moderation.FilterModal.button.hide') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

4
front/src/components/moderation/ReportCategoryDropdown.vue
View File

@ -35,7 +35,7 @@ const sharedChoices = sharedLabels.fields.report_type.choices
const allCategories = computed(() => { const allCategories = computed(() => {
const res = [] const res = []
if (props.all) { if (props.all) {
res.push({ value: '', label: t('components.moderation.ReportCategoryDropdown.allOption') }) res.push({ value: '', label: t('components.moderation.ReportCategoryDropdown.option.all') })
} }
const choices = props.restrictTo.length === 0 const choices = props.restrictTo.length === 0
@ -59,7 +59,7 @@ const allCategories = computed(() => {
<template> <template>
<div> <div>
<label v-if="label">{{ $t('components.moderation.ReportCategoryDropdown.categoryLabel') }}</label> <label v-if="label">{{ $t('components.moderation.ReportCategoryDropdown.label.category') }}</label>
<select <select
v-model="value" v-model="value"
class="ui dropdown" class="ui dropdown"

28
front/src/components/moderation/ReportModal.vue
View File

@ -84,7 +84,7 @@ const submit = async () => {
store.commit('moderation/contentFilter', response.data) store.commit('moderation/contentFilter', response.data)
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('components.moderation.ReportModal.reportSubmitSuccessMessage'), content: t('components.moderation.ReportModal.message.submissionSuccess'),
date: new Date() date: new Date()
}) })
@ -110,7 +110,7 @@ watchEffect(async () => {
reportTypes.value = response.data.metadata.reportTypes ?? [] reportTypes.value = response.data.metadata.reportTypes ?? []
} catch (error) { } catch (error) {
store.commit('ui/addMessage', { store.commit('ui/addMessage', {
content: t('components.moderation.ReportModal.nodeinfoFetchFailure', { error: `${error}` }), content: t('components.moderation.ReportModal.error.nodeinfoFetch', { error: `${error}` }),
date: new Date() date: new Date()
}) })
} }
@ -125,7 +125,7 @@ watchEffect(async () => {
v-if="target" v-if="target"
class="ui header" class="ui header"
> >
{{ $t('components.moderation.ReportModal.reportModalHeader') }} {{ $t('components.moderation.ReportModal.header.modal') }}
<div class="ui sub header"> <div class="ui sub header">
{{ target.typeLabel }} {{ target.typeLabel }}
<span class="middle hyphen symbol" /> <span class="middle hyphen symbol" />
@ -140,7 +140,7 @@ watchEffect(async () => {
class="ui negative message" class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.moderation.ReportModal.submissionFailureHeader') }} {{ $t('components.moderation.ReportModal.header.submissionFailure') }}
</h4> </h4>
<ul class="list"> <ul class="list">
<li <li
@ -153,7 +153,7 @@ watchEffect(async () => {
</div> </div>
</div> </div>
<p> <p>
{{ $t('components.moderation.ReportModal.reportModalDescription') }} {{ $t('components.moderation.ReportModal.description.modal') }}
</p> </p>
<form <form
v-if="canSubmit" v-if="canSubmit"
@ -175,7 +175,7 @@ watchEffect(async () => {
class="ui eight wide required field" class="ui eight wide required field"
> >
<label for="report-submitter-email"> <label for="report-submitter-email">
{{ $t('components.moderation.ReportModal.emailLabel') }} {{ $t('components.moderation.ReportModal.label.email') }}
</label> </label>
<input <input
id="report-submitter-email" id="report-submitter-email"
@ -185,16 +185,16 @@ watchEffect(async () => {
required required
> >
<p> <p>
{{ $t('components.moderation.ReportModal.emailDescription') }} {{ $t('components.moderation.ReportModal.description.email') }}
</p> </p>
</div> </div>
</div> </div>
<div class="ui field"> <div class="ui field">
<label for="report-summary"> <label for="report-summary">
{{ $t('components.moderation.ReportModal.messageLabel') }} {{ $t('components.moderation.ReportModal.label.message') }}
</label> </label>
<p> <p>
{{ $t('components.moderation.ReportModal.messageDescription') }} {{ $t('components.moderation.ReportModal.description.message') }}
</p> </p>
<content-form <content-form
v-model="summary" v-model="summary"
@ -214,10 +214,10 @@ watchEffect(async () => {
> >
<label for="report-forward"> <label for="report-forward">
<strong> <strong>
{{ $t('components.moderation.ReportModal.forwardToDomainLabel', {domain: targetDomain}) }} {{ $t('components.moderation.ReportModal.label.forwardToDomain', {domain: targetDomain}) }}
</strong> </strong>
<p> <p>
{{ $t('components.moderation.ReportModal.forwardToDomainDescription') }} {{ $t('components.moderation.ReportModal.description.forwardToDomain') }}
</p> </p>
</label> </label>
</div> </div>
@ -234,13 +234,13 @@ watchEffect(async () => {
class="ui warning message" class="ui warning message"
> >
<h4 class="header"> <h4 class="header">
{{ $t('components.moderation.ReportModal.anonymousReportsDisabled') }} {{ $t('components.moderation.ReportModal.header.disabled') }}
</h4> </h4>
</div> </div>
</div> </div>
<div class="actions"> <div class="actions">
<button class="ui basic cancel button"> <button class="ui basic cancel button">
{{ $t('components.moderation.ReportModal.cancelButton') }} {{ $t('components.moderation.ReportModal.button.cancel') }}
</button> </button>
<button <button
v-if="canSubmit" v-if="canSubmit"
@ -248,7 +248,7 @@ watchEffect(async () => {
type="submit" type="submit"
form="report-form" form="report-form"
> >
{{ $t('components.moderation.ReportModal.submitReportButton') }} {{ $t('components.moderation.ReportModal.button.submit') }}
</button> </button>
</div> </div>
</semantic-modal> </semantic-modal>

Some files were not shown because too many files have changed in this diff Show More