aboutsummaryrefslogtreecommitdiff
path: root/src/components/user_settings
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/user_settings')
-rw-r--r--src/components/user_settings/user_settings.js26
-rw-r--r--src/components/user_settings/user_settings.vue389
2 files changed, 303 insertions, 112 deletions
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index b6a0479d..a8d7b6b6 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -134,12 +134,12 @@ const UserSettings = {
hide_followers,
show_role
/* eslint-enable camelcase */
- }}).then((user) => {
- if (!user.error) {
- this.$store.commit('addNewUsers', [user])
- this.$store.commit('setCurrentUser', user)
- }
- })
+ } }).then((user) => {
+ if (!user.error) {
+ this.$store.commit('addNewUsers', [user])
+ this.$store.commit('setCurrentUser', user)
+ }
+ })
},
changeVis (visibility) {
this.newDefaultScope = visibility
@@ -150,12 +150,12 @@ const UserSettings = {
if (file.size > this.$store.state.instance[slot + 'limit']) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size)
const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
- this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
+ this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
return
}
// eslint-disable-next-line no-undef
const reader = new FileReader()
- reader.onload = ({target}) => {
+ reader.onload = ({ target }) => {
const img = target.result
this[slot + 'Preview'] = img
}
@@ -195,7 +195,7 @@ const UserSettings = {
offset_top = 0
offset_left = 0
this.bannerUploading = true
- this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => {
+ this.$store.state.api.backendInteractor.updateBanner({ params: { banner, offset_top, offset_left, width, height } }).then((data) => {
if (!data.error) {
let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
clone.cover_photo = data.url
@@ -221,7 +221,7 @@ const UserSettings = {
cropW = imginfo.width
cropH = imginfo.width
this.backgroundUploading = true
- this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
+ this.$store.state.api.backendInteractor.updateBg({ params: { img, cropX, cropY, cropW, cropH } }).then((data) => {
if (!data.error) {
let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
clone.background_image = data.url
@@ -237,7 +237,7 @@ const UserSettings = {
importFollows () {
this.followListUploading = true
const followList = this.followList
- this.$store.state.api.backendInteractor.followImport({params: followList})
+ this.$store.state.api.backendInteractor.followImport({ params: followList })
.then((status) => {
if (status) {
this.followsImported = true
@@ -295,11 +295,11 @@ const UserSettings = {
this.deletingAccount = true
},
deleteAccount () {
- this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
+ this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
.then((res) => {
if (res.status === 'success') {
this.$store.dispatch('logout')
- this.$router.push({name: 'root'})
+ this.$router.push({ name: 'root' })
} else {
this.deleteAccountError = res.error
}
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index c08698dc..ee5d368b 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -2,15 +2,23 @@
<div class="settings panel panel-default">
<div class="panel-heading">
<div class="title">
- {{$t('settings.user_settings')}}
+ {{ $t('settings.user_settings') }}
</div>
<transition name="fade">
<template v-if="currentSaveStateNotice">
- <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+ <div
+ v-if="currentSaveStateNotice.error"
+ class="alert error"
+ @click.prevent
+ >
{{ $t('settings.saving_err') }}
</div>
- <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
+ <div
+ v-if="!currentSaveStateNotice.error"
+ class="alert transparent"
+ @click.prevent
+ >
{{ $t('settings.saving_ok') }}
</div>
</template>
@@ -19,132 +27,258 @@
<div class="panel-body profile-edit">
<tab-switcher>
<div :label="$t('settings.profile_tab')">
- <div class="setting-item" >
- <h2>{{$t('settings.name_bio')}}</h2>
- <p>{{$t('settings.name')}}</p>
- <EmojiInput
- type="text"
- v-model="newName"
+ <div class="setting-item">
+ <h2>{{ $t('settings.name_bio') }}</h2>
+ <p>{{ $t('settings.name') }}</p>
+ <EmojiInput
id="username"
+ v-model="newName"
+ type="text"
classname="name-changer"
/>
- <p>{{$t('settings.bio')}}</p>
+ <p>{{ $t('settings.bio') }}</p>
<EmojiInput
- type="textarea"
v-model="newBio"
+ type="textarea"
classname="bio"
/>
<p>
- <input type="checkbox" v-model="newLocked" id="account-locked">
- <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
+ <input
+ id="account-locked"
+ v-model="newLocked"
+ type="checkbox"
+ >
+ <label for="account-locked">{{ $t('settings.lock_account_description') }}</label>
</p>
<div>
- <label for="default-vis">{{$t('settings.default_vis')}}</label>
- <div id="default-vis" class="visibility-tray">
+ <label for="default-vis">{{ $t('settings.default_vis') }}</label>
+ <div
+ id="default-vis"
+ class="visibility-tray"
+ >
<scope-selector
- :showAll="true"
- :userDefault="newDefaultScope"
- :onScopeChange="changeVis"/>
+ :show-all="true"
+ :user-default="newDefaultScope"
+ :on-scope-change="changeVis"
+ />
</div>
</div>
<p>
- <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text">
- <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
+ <input
+ id="account-no-rich-text"
+ v-model="newNoRichText"
+ type="checkbox"
+ >
+ <label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label>
</p>
<p>
- <input type="checkbox" v-model="hideFollows" id="account-hide-follows">
- <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label>
+ <input
+ id="account-hide-follows"
+ v-model="hideFollows"
+ type="checkbox"
+ >
+ <label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label>
</p>
<p>
- <input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
- <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
+ <input
+ id="account-hide-followers"
+ v-model="hideFollowers"
+ type="checkbox"
+ >
+ <label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label>
</p>
<p>
- <input type="checkbox" v-model="showRole" id="account-show-role">
- <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
- <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
+ <input
+ id="account-show-role"
+ v-model="showRole"
+ type="checkbox"
+ >
+ <label
+ v-if="role === 'admin'"
+ for="account-show-role"
+ >{{ $t('settings.show_admin_badge') }}</label>
+ <label
+ v-if="role === 'moderator'"
+ for="account-show-role"
+ >{{ $t('settings.show_moderator_badge') }}</label>
</p>
- <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
+ <button
+ :disabled="newName && newName.length === 0"
+ class="btn btn-default"
+ @click="updateProfile"
+ >
+ {{ $t('general.submit') }}
+ </button>
</div>
<div class="setting-item">
- <h2>{{$t('settings.avatar')}}</h2>
- <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
- <p>{{$t('settings.current_avatar')}}</p>
- <img :src="user.profile_image_url_original" class="current-avatar" />
- <p>{{$t('settings.set_new_avatar')}}</p>
- <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
- <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
+ <h2>{{ $t('settings.avatar') }}</h2>
+ <p class="visibility-notice">
+ {{ $t('settings.avatar_size_instruction') }}
+ </p>
+ <p>{{ $t('settings.current_avatar') }}</p>
+ <img
+ :src="user.profile_image_url_original"
+ class="current-avatar"
+ >
+ <p>{{ $t('settings.set_new_avatar') }}</p>
+ <button
+ v-show="pickAvatarBtnVisible"
+ id="pick-avatar"
+ class="btn"
+ type="button"
+ >
+ {{ $t('settings.upload_a_photo') }}
+ </button>
+ <image-cropper
+ trigger="#pick-avatar"
+ :submit-handler="submitAvatar"
+ @open="pickAvatarBtnVisible=false"
+ @close="pickAvatarBtnVisible=true"
+ />
</div>
<div class="setting-item">
- <h2>{{$t('settings.profile_banner')}}</h2>
- <p>{{$t('settings.current_profile_banner')}}</p>
- <img :src="user.cover_photo" class="banner" />
- <p>{{$t('settings.set_new_profile_banner')}}</p>
- <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" />
+ <h2>{{ $t('settings.profile_banner') }}</h2>
+ <p>{{ $t('settings.current_profile_banner') }}</p>
+ <img
+ :src="user.cover_photo"
+ class="banner"
+ >
+ <p>{{ $t('settings.set_new_profile_banner') }}</p>
+ <img
+ v-if="bannerPreview"
+ class="banner"
+ :src="bannerPreview"
+ >
<div>
- <input type="file" @change="uploadFile('banner', $event)" />
+ <input
+ type="file"
+ @change="uploadFile('banner', $event)"
+ >
</div>
- <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
- <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
- <div class='alert error' v-if="bannerUploadError">
+ <i
+ v-if="bannerUploading"
+ class=" icon-spin4 animate-spin uploading"
+ />
+ <button
+ v-else-if="bannerPreview"
+ class="btn btn-default"
+ @click="submitBanner"
+ >
+ {{ $t('general.submit') }}
+ </button>
+ <div
+ v-if="bannerUploadError"
+ class="alert error"
+ >
Error: {{ bannerUploadError }}
- <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
+ <i
+ class="button-icon icon-cancel"
+ @click="clearUploadError('banner')"
+ />
</div>
</div>
<div class="setting-item">
- <h2>{{$t('settings.profile_background')}}</h2>
- <p>{{$t('settings.set_new_profile_background')}}</p>
- <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" />
+ <h2>{{ $t('settings.profile_background') }}</h2>
+ <p>{{ $t('settings.set_new_profile_background') }}</p>
+ <img
+ v-if="backgroundPreview"
+ class="bg"
+ :src="backgroundPreview"
+ >
<div>
- <input type="file" @change="uploadFile('background', $event)" />
+ <input
+ type="file"
+ @change="uploadFile('background', $event)"
+ >
</div>
- <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
- <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
- <div class='alert error' v-if="backgroundUploadError">
+ <i
+ v-if="backgroundUploading"
+ class=" icon-spin4 animate-spin uploading"
+ />
+ <button
+ v-else-if="backgroundPreview"
+ class="btn btn-default"
+ @click="submitBg"
+ >
+ {{ $t('general.submit') }}
+ </button>
+ <div
+ v-if="backgroundUploadError"
+ class="alert error"
+ >
Error: {{ backgroundUploadError }}
- <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
+ <i
+ class="button-icon icon-cancel"
+ @click="clearUploadError('background')"
+ />
</div>
</div>
</div>
<div :label="$t('settings.security_tab')">
<div class="setting-item">
- <h2>{{$t('settings.change_password')}}</h2>
+ <h2>{{ $t('settings.change_password') }}</h2>
<div>
- <p>{{$t('settings.current_password')}}</p>
- <input type="password" v-model="changePasswordInputs[0]">
+ <p>{{ $t('settings.current_password') }}</p>
+ <input
+ v-model="changePasswordInputs[0]"
+ type="password"
+ >
</div>
<div>
- <p>{{$t('settings.new_password')}}</p>
- <input type="password" v-model="changePasswordInputs[1]">
+ <p>{{ $t('settings.new_password') }}</p>
+ <input
+ v-model="changePasswordInputs[1]"
+ type="password"
+ >
</div>
<div>
- <p>{{$t('settings.confirm_new_password')}}</p>
- <input type="password" v-model="changePasswordInputs[2]">
+ <p>{{ $t('settings.confirm_new_password') }}</p>
+ <input
+ v-model="changePasswordInputs[2]"
+ type="password"
+ >
</div>
- <button class="btn btn-default" @click="changePassword">{{$t('general.submit')}}</button>
- <p v-if="changedPassword">{{$t('settings.changed_password')}}</p>
- <p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p>
- <p v-if="changePasswordError">{{changePasswordError}}</p>
+ <button
+ class="btn btn-default"
+ @click="changePassword"
+ >
+ {{ $t('general.submit') }}
+ </button>
+ <p v-if="changedPassword">
+ {{ $t('settings.changed_password') }}
+ </p>
+ <p v-else-if="changePasswordError !== false">
+ {{ $t('settings.change_password_error') }}
+ </p>
+ <p v-if="changePasswordError">
+ {{ changePasswordError }}
+ </p>
</div>
<div class="setting-item">
- <h2>{{$t('settings.oauth_tokens')}}</h2>
+ <h2>{{ $t('settings.oauth_tokens') }}</h2>
<table class="oauth-tokens">
<thead>
<tr>
- <th>{{$t('settings.app_name')}}</th>
- <th>{{$t('settings.valid_until')}}</th>
- <th></th>
+ <th>{{ $t('settings.app_name') }}</th>
+ <th>{{ $t('settings.valid_until') }}</th>
+ <th />
</tr>
</thead>
<tbody>
- <tr v-for="oauthToken in oauthTokens" :key="oauthToken.id">
- <td>{{oauthToken.appName}}</td>
- <td>{{oauthToken.validUntil}}</td>
+ <tr
+ v-for="oauthToken in oauthTokens"
+ :key="oauthToken.id"
+ >
+ <td>{{ oauthToken.appName }}</td>
+ <td>{{ oauthToken.validUntil }}</td>
<td class="actions">
- <button class="btn btn-default" @click="revokeToken(oauthToken.id)">
- {{$t('settings.revoke_token')}}
+ <button
+ class="btn btn-default"
+ @click="revokeToken(oauthToken.id)"
+ >
+ {{ $t('settings.revoke_token') }}
</button>
</td>
</tr>
@@ -153,56 +287,113 @@
</div>
<div class="setting-item">
- <h2>{{$t('settings.delete_account')}}</h2>
- <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
+ <h2>{{ $t('settings.delete_account') }}</h2>
+ <p v-if="!deletingAccount">
+ {{ $t('settings.delete_account_description') }}
+ </p>
<div v-if="deletingAccount">
- <p>{{$t('settings.delete_account_instructions')}}</p>
- <p>{{$t('login.password')}}</p>
- <input type="password" v-model="deleteAccountConfirmPasswordInput">
- <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button>
+ <p>{{ $t('settings.delete_account_instructions') }}</p>
+ <p>{{ $t('login.password') }}</p>
+ <input
+ v-model="deleteAccountConfirmPasswordInput"
+ type="password"
+ >
+ <button
+ class="btn btn-default"
+ @click="deleteAccount"
+ >
+ {{ $t('settings.delete_account') }}
+ </button>
</div>
- <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p>
- <p v-if="deleteAccountError">{{deleteAccountError}}</p>
- <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button>
+ <p v-if="deleteAccountError !== false">
+ {{ $t('settings.delete_account_error') }}
+ </p>
+ <p v-if="deleteAccountError">
+ {{ deleteAccountError }}
+ </p>
+ <button
+ v-if="!deletingAccount"
+ class="btn btn-default"
+ @click="confirmDelete"
+ >
+ {{ $t('general.submit') }}
+ </button>
</div>
</div>
- <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend">
+ <div
+ v-if="pleromaBackend"
+ :label="$t('settings.data_import_export_tab')"
+ >
<div class="setting-item">
- <h2>{{$t('settings.follow_import')}}</h2>
- <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
+ <h2>{{ $t('settings.follow_import') }}</h2>
+ <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
<form>
- <input type="file" ref="followlist" v-on:change="followListChange" />
+ <input
+ ref="followlist"
+ type="file"
+ @change="followListChange"
+ >
</form>
- <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
- <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button>
+ <i
+ v-if="followListUploading"
+ class=" icon-spin4 animate-spin uploading"
+ />
+ <button
+ v-else
+ class="btn btn-default"
+ @click="importFollows"
+ >
+ {{ $t('general.submit') }}
+ </button>
<div v-if="followsImported">
- <i class="icon-cross" @click="dismissImported"></i>
- <p>{{$t('settings.follows_imported')}}</p>
+ <i
+ class="icon-cross"
+ @click="dismissImported"
+ />
+ <p>{{ $t('settings.follows_imported') }}</p>
</div>
<div v-else-if="followImportError">
- <i class="icon-cross" @click="dismissImported"></i>
- <p>{{$t('settings.follow_import_error')}}</p>
+ <i
+ class="icon-cross"
+ @click="dismissImported"
+ />
+ <p>{{ $t('settings.follow_import_error') }}</p>
</div>
</div>
- <div class="setting-item" v-if="enableFollowsExport">
- <h2>{{$t('settings.follow_export')}}</h2>
- <button class="btn btn-default" @click="exportFollows">{{$t('settings.follow_export_button')}}</button>
+ <div
+ v-if="enableFollowsExport"
+ class="setting-item"
+ >
+ <h2>{{ $t('settings.follow_export') }}</h2>
+ <button
+ class="btn btn-default"
+ @click="exportFollows"
+ >
+ {{ $t('settings.follow_export_button') }}
+ </button>
</div>
- <div class="setting-item" v-else>
- <h2>{{$t('settings.follow_export_processing')}}</h2>
+ <div
+ v-else
+ class="setting-item"
+ >
+ <h2>{{ $t('settings.follow_export_processing') }}</h2>
</div>
</div>
<div :label="$t('settings.blocks_tab')">
<block-list :refresh="true">
- <template slot="empty">{{$t('settings.no_blocks')}}</template>
+ <template slot="empty">
+ {{ $t('settings.no_blocks') }}
+ </template>
</block-list>
</div>
<div :label="$t('settings.mutes_tab')">
<mute-list :refresh="true">
- <template slot="empty">{{$t('settings.no_mutes')}}</template>
+ <template slot="empty">
+ {{ $t('settings.no_mutes') }}
+ </template>
</mute-list>
</div>
</tab-switcher>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-15 19:15:42 +0000