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

[WIP]refactor(front): new components for user settings

This commit is contained in:
ArneBo 2025-01-30 17:59:24 +01:00
parent 1576890933
commit 6ecb344b73
2 changed files with 114 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,11 @@ import useLogger from '~/composables/useLogger'
import SubsonicTokenForm from '~/components/auth/SubsonicTokenForm.vue' import SubsonicTokenForm from '~/components/auth/SubsonicTokenForm.vue'
import AttachmentInput from '~/components/common/AttachmentInput.vue' import AttachmentInput from '~/components/common/AttachmentInput.vue'
import PasswordInput from '~/components/forms/PasswordInput.vue' import PasswordInput from '~/components/forms/PasswordInput.vue'
import Input from '~/components/ui/Input.vue'
import Layout from '~/components/ui/Layout.vue'
import Header from '~/components/ui/Header.vue'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import Link from '~/components/ui/Link.vue'
const SETTINGS_ORDER: FieldId[] = ['summary', 'privacy_level'] const SETTINGS_ORDER: FieldId[] = ['summary', 'privacy_level']
@ -266,31 +270,24 @@ fetchOwnedApps()
</script> </script>
<template> <template>
<main <Layout main stack
v-title="labels.title" v-title="labels.title"
class="main"
> >
<div class="ui vertical stripe segment"> <Header :h1="t('components.auth.Settings.header.accountSettings')">
<section class="ui text container"> </Header>
<h2 class="ui header"> <Layout form
{{ t('components.auth.Settings.header.accountSettings') }}
</h2>
<form
class="ui form"
@submit.prevent="submitSettings()" @submit.prevent="submitSettings()"
> >
<div <Alert green
v-if="settings.success" v-if="settings.success"
class="ui positive message"
> >
<h4 class="header"> <h4 class="header">
{{ t('components.auth.Settings.header.settingsUpdated') }} {{ t('components.auth.Settings.header.settingsUpdated') }}
</h4> </h4>
</div> </Alert>
<div <Alert red
v-if="settings.errors.length > 0" v-if="settings.errors.length > 0"
role="alert" role="alert"
class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ t('components.auth.Settings.header.updateFailure') }} {{ t('components.auth.Settings.header.updateFailure') }}
@ -303,7 +300,7 @@ fetchOwnedApps()
{{ error }} {{ error }}
</li> </li>
</ul> </ul>
</div> </Alert>
<div <div
v-for="f in orderedSettingsFields" v-for="f in orderedSettingsFields"
:key="f.id" :key="f.id"
@ -334,23 +331,21 @@ fetchOwnedApps()
/> />
</div> </div>
<Button <Button
primary
:is-loading="isLoading" :is-loading="isLoading"
type="submit" type="submit"
> >
{{ t('components.auth.Settings.button.updateSettings') }} {{ t('components.auth.Settings.button.updateSettings') }}
</Button> </Button>
</form> </Layout>
</section>
<section class="ui text container"> <section class="ui text container">
<div class="ui hidden divider" />
<h2 class="ui header"> <h2 class="ui header">
{{ t('components.auth.Settings.header.avatar') }} {{ t('components.auth.Settings.header.avatar') }}
</h2> </h2>
<div class="ui form"> <Layout form>
<div <Alert red
v-if="avatarErrors.length > 0" v-if="avatarErrors.length > 0"
role="alert" role="alert"
class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ t('components.auth.Settings.header.avatarFailure') }} {{ t('components.auth.Settings.header.avatarFailure') }}
@ -363,7 +358,7 @@ fetchOwnedApps()
{{ error }} {{ error }}
</li> </li>
</ul> </ul>
</div> </Alert>
<attachment-input <attachment-input
v-model="avatar.uuid" v-model="avatar.uuid"
:initial-value="initialAvatar" :initial-value="initialAvatar"
@ -372,25 +367,22 @@ fetchOwnedApps()
> >
{{ t('components.auth.Settings.label.avatar') }} {{ t('components.auth.Settings.label.avatar') }}
</attachment-input> </attachment-input>
</div> </Layout>
</section> </section>
<section class="ui text container"> <section class="ui text container">
<div class="ui hidden divider" />
<h2 class="ui header"> <h2 class="ui header">
{{ t('components.auth.Settings.header.changePassword') }} {{ t('components.auth.Settings.header.changePassword') }}
</h2> </h2>
<div class="ui message"> <div class="ui message">
{{ t('components.auth.Settings.description.changePassword.paragraph1') }}&nbsp;{{ t('components.auth.Settings.description.changePassword.paragraph2') }} {{ t('components.auth.Settings.description.changePassword.paragraph1') }}&nbsp;{{ t('components.auth.Settings.description.changePassword.paragraph2') }}
</div> </div>
<form <Layout form
class="ui form"
@submit.prevent="submitPassword()" @submit.prevent="submitPassword()"
> >
<div <Alert
v-if="passwordError" v-if="passwordError"
role="alert" role="alert"
class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ t('components.auth.Settings.header.passwordFailure') }} {{ t('components.auth.Settings.header.passwordFailure') }}
@ -400,7 +392,7 @@ fetchOwnedApps()
{{ t('components.auth.Settings.help.changePassword') }} {{ t('components.auth.Settings.help.changePassword') }}
</li> </li>
</ul> </ul>
</div> </Alert>
<div class="field"> <div class="field">
<label for="old-password-field">{{ t('components.auth.Settings.label.currentPassword') }}</label> <label for="old-password-field">{{ t('components.auth.Settings.label.currentPassword') }}</label>
<password-input <password-input
@ -448,7 +440,7 @@ fetchOwnedApps()
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>
</form> </Layout>
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<subsonic-token-form /> <subsonic-token-form />
</section> </section>
@ -457,9 +449,8 @@ fetchOwnedApps()
id="content-filters" id="content-filters"
class="ui text container" class="ui text container"
> >
<div class="ui hidden divider" />
<h2 class="ui header"> <h2 class="ui header">
<i class="eye slash outline icon" /> <i class="bi bi-eye-slash" />
<div class="content"> <div class="content">
{{ t('components.auth.Settings.header.contentFilters') }} {{ t('components.auth.Settings.header.contentFilters') }}
</div> </div>
@ -469,6 +460,7 @@ fetchOwnedApps()
</p> </p>
<Button <Button
primary
icon="bi-arrow-clockwise" icon="bi-arrow-clockwise"
@click="store.dispatch('moderation/fetchContentFilters')" @click="store.dispatch('moderation/fetchContentFilters')"
> >
@ -504,6 +496,7 @@ fetchOwnedApps()
</td> </td>
<td> <td>
<Button <Button
secondary
@click="store.dispatch('moderation/deleteContentFilter', filter.uuid)" @click="store.dispatch('moderation/deleteContentFilter', filter.uuid)"
> >
{{ t('components.auth.Settings.button.delete') }} {{ t('components.auth.Settings.button.delete') }}
@ -519,7 +512,7 @@ fetchOwnedApps()
> >
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h2 class="ui header"> <h2 class="ui header">
<i class="open lock icon" /> <i class="bi bi-unlock-fill" />
<div class="content"> <div class="content">
{{ t('components.auth.Settings.header.authorizedApps') }} {{ t('components.auth.Settings.header.authorizedApps') }}
</div> </div>
@ -528,6 +521,7 @@ fetchOwnedApps()
{{ t('components.auth.Settings.description.authorizedApps') }} {{ t('components.auth.Settings.description.authorizedApps') }}
</p> </p>
<Button <Button
primary
icon="bi-arrow-clockwise" icon="bi-arrow-clockwise"
:is-loading="isLoadingApps" :is-loading="isLoadingApps"
@click="fetchApps()" @click="fetchApps()"
@ -599,7 +593,7 @@ fetchOwnedApps()
> >
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h2 class="ui header"> <h2 class="ui header">
<i class="code icon" /> <i class="bi bi-code-slash" />
<div class="content"> <div class="content">
{{ t('components.auth.Settings.header.yourApps') }} {{ t('components.auth.Settings.header.yourApps') }}
</div> </div>
@ -607,12 +601,12 @@ fetchOwnedApps()
<p> <p>
{{ t('components.auth.Settings.description.yourApps') }} {{ t('components.auth.Settings.description.yourApps') }}
</p> </p>
<router-link <Link
class="ui success button" class="ui success button"
:to="{name: 'settings.applications.new'}" :to="{name: 'settings.applications.new'}"
> >
{{ t('components.auth.Settings.link.newApp') }} {{ t('components.auth.Settings.link.newApp') }}
</router-link> </Link>
<table <table
v-if="ownedApps.length > 0" v-if="ownedApps.length > 0"
class="ui compact very basic unstackable table" class="ui compact very basic unstackable table"
@ -648,12 +642,12 @@ fetchOwnedApps()
<human-date :date="app.created" /> <human-date :date="app.created" />
</td> </td>
<td> <td>
<router-link <Link
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.button.edit') }} {{ t('components.auth.Settings.button.edit') }}
</router-link> </Link>
<Button <Button
color="destructive" color="destructive"
:is-loading="isDeleting.has(app.client_id)" :is-loading="isDeleting.has(app.client_id)"
@ -695,7 +689,7 @@ fetchOwnedApps()
> >
<div class="ui hidden divider" /> <div class="ui hidden divider" />
<h2 class="ui header"> <h2 class="ui header">
<i class="code icon" /> <i class="bi bi-code" />
<div class="content"> <div class="content">
{{ t('components.auth.Settings.header.plugins') }} {{ t('components.auth.Settings.header.plugins') }}
</div> </div>
@ -703,17 +697,17 @@ fetchOwnedApps()
<p> <p>
{{ t('components.auth.Settings.description.plugins') }} {{ t('components.auth.Settings.description.plugins') }}
</p> </p>
<router-link <Button
class="ui success button" primary
:to="{name: 'settings.plugins'}" :to="{name: 'settings.plugins'}"
> >
{{ t('components.auth.Settings.link.managePlugins') }} {{ t('components.auth.Settings.link.managePlugins') }}
</router-link> </Button>
</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">
<i class="comment icon" /> <i class="bi bi-envelope-at" />
<div class="content"> <div class="content">
{{ t('components.auth.Settings.header.changeEmail') }} {{ t('components.auth.Settings.header.changeEmail') }}
</div> </div>
@ -724,14 +718,12 @@ fetchOwnedApps()
<p> <p>
{{ t('components.auth.Settings.message.currentEmail', { email: store.state.auth.profile?.email }) }} {{ t('components.auth.Settings.message.currentEmail', { email: store.state.auth.profile?.email }) }}
</p> </p>
<form <Layout form
class="ui form"
@submit.prevent="changeEmail" @submit.prevent="changeEmail"
> >
<div <Alert red
v-if="changeEmailErrors.length > 0" v-if="changeEmailErrors.length > 0"
role="alert" role="alert"
class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ t('components.auth.Settings.header.emailFailure') }} {{ t('components.auth.Settings.header.emailFailure') }}
@ -744,15 +736,15 @@ fetchOwnedApps()
{{ error }} {{ error }}
</li> </li>
</ul> </ul>
</div> </Alert>
<div class="field"> <div class="field">
<label for="new-email">{{ t('components.auth.Settings.label.newEmail') }}</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"
required required
type="email" type="email"
> />
</div> </div>
<div class="field"> <div class="field">
<label for="current-password-field-email">{{ t('components.auth.Settings.label.password') }}</label> <label for="current-password-field-email">{{ t('components.auth.Settings.label.password') }}</label>
@ -763,16 +755,17 @@ fetchOwnedApps()
/> />
</div> </div>
<Button <Button
primary
type="submit" type="submit"
> >
{{ t('components.auth.Settings.button.update') }} {{ t('components.auth.Settings.button.update') }}
</Button> </Button>
</form> </Layout>
</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">
<i class="trash icon" /> <i class="bi bi-trash" />
<div class="content"> <div class="content">
{{ t('components.auth.Settings.header.deleteAccount') }} {{ t('components.auth.Settings.header.deleteAccount') }}
</div> </div>
@ -780,17 +773,15 @@ fetchOwnedApps()
<p> <p>
{{ t('components.auth.Settings.description.deleteAccount') }} {{ t('components.auth.Settings.description.deleteAccount') }}
</p> </p>
<div <Alert yellow
role="alert" role="alert"
class="ui warning message"
> >
{{ t('components.auth.Settings.warning.deleteAccount') }} {{ t('components.auth.Settings.warning.deleteAccount') }}
</div> </Alert>
<div class="ui form"> <Layout form>
<div <Alert red
v-if="accountDeleteErrors.length > 0" v-if="accountDeleteErrors.length > 0"
role="alert" role="alert"
class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ t('components.auth.Settings.header.accountFailure') }} {{ t('components.auth.Settings.header.accountFailure') }}
@ -803,7 +794,7 @@ fetchOwnedApps()
{{ error }} {{ error }}
</li> </li>
</ul> </ul>
</div> </Alert>
<div class="field"> <div class="field">
<label for="current-password-field">{{ t('components.auth.Settings.label.currentPassword') }}</label> <label for="current-password-field">{{ t('components.auth.Settings.label.currentPassword') }}</label>
<password-input <password-input
@ -835,8 +826,7 @@ fetchOwnedApps()
</div> </div>
</template> </template>
</dangerous-button> </dangerous-button>
</div> </Layout>
</section> </section>
</div> </Layout>
</main>
</template> </template>

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

@ -7,6 +7,7 @@ import { useStore } from '~/store'
import axios from 'axios' import axios from 'axios'
import PasswordInput from '~/components/forms/PasswordInput.vue' import PasswordInput from '~/components/forms/PasswordInput.vue'
import Alert from '~/components/ui/Alert.vue'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
const { t } = useI18n() const { t } = useI18n()
@ -105,18 +106,16 @@ fetchToken()
{{ t('components.auth.SubsonicTokenForm.link.apps') }} {{ t('components.auth.SubsonicTokenForm.link.apps') }}
</a> </a>
</p> </p>
<div <Alert green
v-if="success" v-if="success"
class="ui positive message"
> >
<h4 class="header"> <h4 class="header">
{{ successMessage }} {{ successMessage }}
</h4> </h4>
</div> </Alert>
<div <Alert red
v-if="subsonicEnabled && errors.length > 0" v-if="subsonicEnabled && errors.length > 0"
role="alert" role="alert"
class="ui negative message"
> >
<h4 class="header"> <h4 class="header">
{{ t('components.auth.SubsonicTokenForm.header.error') }} {{ t('components.auth.SubsonicTokenForm.header.error') }}
@ -129,7 +128,7 @@ fetchToken()
{{ error }} {{ error }}
</li> </li>
</ul> </ul>
</div> </Alert>
<template v-if="subsonicEnabled"> <template v-if="subsonicEnabled">
<div <div
v-if="token" v-if="token"
@ -150,7 +149,7 @@ fetchToken()
</div> </div>
<Button <Button
v-if="token" v-if="token"
color="destructive" destructive
:is-loading="isLoading" :is-loading="isLoading"
:action="requestNewToken" :action="requestNewToken"
> >
@ -172,6 +171,7 @@ fetchToken()
</template> </template>
</Button> </Button>
<Button <Button
primary
v-else v-else
:is-loading="isLoading" :is-loading="isLoading"
@click="requestNewToken" @click="requestNewToken"
@ -179,6 +179,7 @@ fetchToken()
{{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }} {{ t('components.auth.SubsonicTokenForm.button.confirmNewPassword') }}
</Button> </Button>
<Button <Button
primary
v-if="token" v-if="token"
:is-loading="isLoading" :is-loading="isLoading"
color="destructive" color="destructive"