No OneTemporary
Actions

Size

108 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
	index 924c38daf9..bc0f7b9dc3 100644
	--- a/BREAKING_CHANGES.md
	+++ b/BREAKING_CHANGES.md
	@@ -1,10 +1,13 @@
	# v1.0
	## Removed features/radically changed behavior
	+### formattingOptionsEnabled
	+as of !833 `formattingOptionsEnabled` is no longer available and instead FE check for available post formatting options and enables formatting control if there's more than one option.
	+
	### minimalScopesMode
	As of !633, `scopeOptions` is no longer available and instead is changed for `minimalScopesMode` (default: `false`)

	Reasoning is that scopeOptions option originally existed mostly as a backwards-compatibility with GNU Social which only had `public` scope available and using scope selector would''t work. Since at some point we dropped GNU Social support, this option was mostly a nuisance (being default `false`'), however some people think scopes are an annoyance to a certain degree and want as less of that feature as possible.

	Solution - to only show minimal set among: Direct, User default and Scope of post replying to. This also makes it impossible to reply to a DM with a non-DM post from UI.

	This setting is admin-default, user-configurable. Admin can choose different default for their instance but user can override it.
	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 9d4a0d5d3d..21a69e7728 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,307 +1,306 @@
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import routes from './routes'
	import App from '../App.vue'
	import { windowWidth } from '../services/window_utils/window_utils'
	import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'

	const getStatusnetConfig = async ({ store }) => {
	try {
	const res = await window.fetch('/api/statusnet/config.json')
	if (res.ok) {
	const data = await res.json()
	const { name, closed: registrationClosed, textlimit, uploadlimit, server, vapidPublicKey, safeDMMentionsEnabled } = data.site

	store.dispatch('setInstanceOption', { name: 'name', value: name })
	store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
	store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
	store.dispatch('setInstanceOption', { name: 'server', value: server })
	store.dispatch('setInstanceOption', { name: 'safeDM', value: safeDMMentionsEnabled !== '0' })

	// TODO: default values for this stuff, added if to not make it break on
	// my dev config out of the box.
	if (uploadlimit) {
	store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
	store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
	store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
	store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
	}

	if (vapidPublicKey) {
	store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
	}

	return data.site.pleromafe
	} else {
	throw (res)
	}
	} catch (error) {
	console.error('Could not load statusnet config, potentially fatal')
	console.error(error)
	}
	}

	const getStaticConfig = async () => {
	try {
	const res = await window.fetch('/static/config.json')
	if (res.ok) {
	return res.json()
	} else {
	throw (res)
	}
	} catch (error) {
	console.warn('Failed to load static/config.json, continuing without it.')
	console.warn(error)
	return {}
	}
	}

	const setSettings = async ({ apiConfig, staticConfig, store }) => {
	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const env = window.___pleromafe_mode.NODE_ENV

	// This takes static config and overrides properties that are present in apiConfig
	let config = {}
	if (overrides.staticConfigPreference && env === 'development') {
	console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG')
	config = Object.assign({}, apiConfig, staticConfig)
	} else {
	config = Object.assign({}, staticConfig, apiConfig)
	}

	const copyInstanceOption = (name) => {
	store.dispatch('setInstanceOption', { name, value: config[name] })
	}

	copyInstanceOption('nsfwCensorImage')
	copyInstanceOption('background')
	copyInstanceOption('hidePostStats')
	copyInstanceOption('hideUserStats')
	copyInstanceOption('hideFilteredStatuses')
	copyInstanceOption('logo')

	store.dispatch('setInstanceOption', {
	name: 'logoMask',
	value: typeof config.logoMask === 'undefined'
	? true
	: config.logoMask
	})

	store.dispatch('setInstanceOption', {
	name: 'logoMargin',
	value: typeof config.logoMargin === 'undefined'
	? 0
	: config.logoMargin
	})
	store.commit('authFlow/setInitialStrategy', config.loginMethod)

	copyInstanceOption('redirectRootNoLogin')
	copyInstanceOption('redirectRootLogin')
	copyInstanceOption('showInstanceSpecificPanel')
	copyInstanceOption('minimalScopesMode')
	- copyInstanceOption('formattingOptionsEnabled')
	copyInstanceOption('hideMutedPosts')
	copyInstanceOption('collapseMessageWithSubject')
	copyInstanceOption('scopeCopy')
	copyInstanceOption('subjectLineBehavior')
	copyInstanceOption('postContentType')
	copyInstanceOption('alwaysShowSubjectInput')
	copyInstanceOption('noAttachmentLinks')
	copyInstanceOption('showFeaturesPanel')

	if ((config.chatDisabled)) {
	store.dispatch('disableChat')
	} else {
	store.dispatch('initializeSocket')
	}

	return store.dispatch('setTheme', config['theme'])
	}

	const getTOS = async ({ store }) => {
	try {
	const res = await window.fetch('/static/terms-of-service.html')
	if (res.ok) {
	const html = await res.text()
	store.dispatch('setInstanceOption', { name: 'tos', value: html })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load TOS")
	console.warn(e)
	}
	}

	const getInstancePanel = async ({ store }) => {
	try {
	const res = await window.fetch('/instance/panel.html')
	if (res.ok) {
	const html = await res.text()
	store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load instance panel")
	console.warn(e)
	}
	}

	const getStaticEmoji = async ({ store }) => {
	try {
	const res = await window.fetch('/static/emoji.json')
	if (res.ok) {
	const values = await res.json()
	const emoji = Object.keys(values).map((key) => {
	return { shortcode: key, image_url: false, 'utf': values[key] }
	})
	store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn("Can't load static emoji")
	console.warn(e)
	}
	}

	// This is also used to indicate if we have a 'pleroma backend' or not.
	// Somewhat weird, should probably be somewhere else.
	const getCustomEmoji = async ({ store }) => {
	try {
	const res = await window.fetch('/api/pleroma/emoji.json')
	if (res.ok) {
	const result = await res.json()
	const values = Array.isArray(result) ? Object.assign({}, ...result) : result
	const emoji = Object.keys(values).map((key) => {
	return { shortcode: key, image_url: values[key].image_url \|\| values[key] }
	})
	store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
	} else {
	throw (res)
	}
	} catch (e) {
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false })
	console.warn("Can't load custom emojis, maybe not a Pleroma instance?")
	console.warn(e)
	}
	}

	const getAppSecret = async ({ store }) => {
	const { state, commit } = store
	const { oauth, instance } = state
	return getOrCreateApp({ ...oauth, instance: instance.server, commit })
	.then((app) => getClientToken({ ...app, instance: instance.server }))
	.then((token) => {
	commit('setAppToken', token.access_token)
	commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
	})
	}

	const getNodeInfo = async ({ store }) => {
	try {
	const res = await window.fetch('/nodeinfo/2.0.json')
	if (res.ok) {
	const data = await res.json()
	const metadata = data.metadata
	const features = metadata.features
	store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
	store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
	store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
	store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
	store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })

	store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
	store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })

	const suggestions = metadata.suggestions
	store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
	store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })

	const software = data.software
	store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })

	const frontendVersion = window.___pleromafe_commit_hash
	store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })
	store.dispatch('setInstanceOption', { name: 'tagPolicyAvailable', value: metadata.federation.mrf_policies.includes('TagPolicy') })
	} else {
	throw (res)
	}
	} catch (e) {
	console.warn('Could not load nodeinfo')
	console.warn(e)
	}
	}

	const setConfig = async ({ store }) => {
	// apiConfig, staticConfig
	const configInfos = await Promise.all([getStatusnetConfig({ store }), getStaticConfig()])
	const apiConfig = configInfos[0]
	const staticConfig = configInfos[1]

	await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
	}

	const checkOAuthToken = async ({ store }) => {
	return new Promise(async (resolve, reject) => {
	if (store.getters.getUserToken()) {
	try {
	await store.dispatch('loginUser', store.getters.getUserToken())
	} catch (e) {
	console.log(e)
	}
	}
	resolve()
	})
	}

	const afterStoreSetup = async ({ store, i18n }) => {
	if (store.state.config.customTheme) {
	// This is a hack to deal with async loading of config.json and themes
	// See: style_setter.js, setPreset()
	window.themeLoaded = true
	store.dispatch('setOption', {
	name: 'customTheme',
	value: store.state.config.customTheme
	})
	}

	const width = windowWidth()
	store.dispatch('setMobileLayout', width <= 800)

	// Now we can try getting the server settings and logging in
	await Promise.all([
	checkOAuthToken({ store }),
	setConfig({ store }),
	getTOS({ store }),
	getInstancePanel({ store }),
	getStaticEmoji({ store }),
	getCustomEmoji({ store }),
	getNodeInfo({ store })
	])

	const router = new VueRouter({
	mode: 'history',
	routes: routes(store),
	scrollBehavior: (to, _from, savedPosition) => {
	if (to.matched.some(m => m.meta.dontScroll)) {
	return false
	}
	return savedPosition \|\| { x: 0, y: 0 }
	}
	})

	/* eslint-disable no-new */
	return new Vue({
	router,
	store,
	i18n,
	el: '#app',
	render: h => h(App)
	})
	}

	export default afterStoreSetup
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 454a05ee35..ccd3bd8f2d 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,380 +1,377 @@
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import EmojiInput from '../emoji-input/emoji-input.vue'
	import PollForm from '../poll/poll_form.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import Completion from '../../services/completion/completion.js'
	import { take, filter, reject, map, uniqBy } from 'lodash'

	const buildMentionsString = ({ user, attentions }, currentUser) => {
	let allAttentions = [...attentions]

	allAttentions.unshift(user)

	allAttentions = uniqBy(allAttentions, 'id')
	allAttentions = reject(allAttentions, { id: currentUser.id })

	let mentions = map(allAttentions, (attention) => {
	return `@${attention.screen_name}`
	})

	return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
	}

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector
	},
	mounted () {
	this.resize(this.$refs.textarea)
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)

	if (this.replyTo) {
	this.$refs.textarea.focus()
	}
	},
	data () {
	const preset = this.$route.query.message
	let statusText = preset \|\| ''

	const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
	? this.$store.state.instance.scopeCopy
	: this.$store.state.config.scopeCopy

	if (this.replyTo) {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
	}

	const scope = (this.copyMessageScope && scopeCopy \|\| this.copyMessageScope === 'direct')
	? this.copyMessageScope
	: this.$store.state.users.currentUser.default_scope

	const contentType = typeof this.$store.state.config.postContentType === 'undefined'
	? this.$store.state.instance.postContentType
	: this.$store.state.config.postContentType

	return {
	dropFiles: [],
	submitDisabled: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: {
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: false,
	files: [],
	poll: {},
	visibility: scope,
	contentType
	},
	caret: 0,
	pollFormVisible: false
	}
	},
	computed: {
	candidates () {
	const firstchar = this.textAtCaret.charAt(0)
	if (firstchar === '@') {
	const query = this.textAtCaret.slice(1).toUpperCase()
	const matchedUsers = filter(this.users, (user) => {
	return user.screen_name.toUpperCase().startsWith(query) \|\|
	user.name && user.name.toUpperCase().startsWith(query)
	})
	if (matchedUsers.length <= 0) {
	return false
	}
	// eslint-disable-next-line camelcase
	return map(take(matchedUsers, 5), ({ screen_name, name, profile_image_url_original }, index) => ({
	// eslint-disable-next-line camelcase
	screen_name: `@${screen_name}`,
	name: name,
	img: profile_image_url_original,
	highlighted: index === this.highlighted
	}))
	} else if (firstchar === ':') {
	if (this.textAtCaret === ':') { return }
	const matchedEmoji = filter(this.emoji.concat(this.customEmoji), (emoji) => emoji.shortcode.startsWith(this.textAtCaret.slice(1)))
	if (matchedEmoji.length <= 0) {
	return false
	}
	return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
	screen_name: `:${shortcode}:`,
	name: '',
	utf: utf \|\| '',
	// eslint-disable-next-line camelcase
	img: utf ? '' : this.$store.state.instance.server + image_url,
	highlighted: index === this.highlighted
	}))
	} else {
	return false
	}
	},
	textAtCaret () {
	return (this.wordAtCaret \|\| {}).word \|\| ''
	},
	wordAtCaret () {
	const word = Completion.wordAtPosition(this.newStatus.status, this.caret - 1) \|\| {}
	return word
	},
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
	? this.$store.state.instance.minimalScopesMode
	: this.$store.state.config.minimalScopesMode
	return !minimalScopesMode
	},
	emoji () {
	return this.$store.state.instance.emoji \|\| []
	},
	customEmoji () {
	return this.$store.state.instance.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	spoilerTextLength () {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit () {
	return this.$store.state.instance.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.charactersLeft < 0)
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	alwaysShowSubject () {
	if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
	return this.$store.state.config.alwaysShowSubjectInput
	} else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
	return this.$store.state.instance.alwaysShowSubjectInput
	} else {
	return true
	}
	},
	- formattingOptionsEnabled () {
	- return this.$store.state.instance.formattingOptionsEnabled
	- },
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	safeDMEnabled () {
	return this.$store.state.instance.safeDM
	},
	pollsAvailable () {
	return this.$store.state.instance.pollsAvailable &&
	this.$store.state.instance.pollLimits.max_options >= 2
	},
	hideScopeNotice () {
	return this.$store.state.config.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	}
	},
	methods: {
	replace (replacement) {
	this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement)
	const el = this.$el.querySelector('textarea')
	el.focus()
	this.caret = 0
	},
	replaceCandidate (e) {
	const len = this.candidates.length \|\| 0
	if (this.textAtCaret === ':' \|\| e.ctrlKey) { return }
	if (len > 0) {
	e.preventDefault()
	const candidate = this.candidates[this.highlighted]
	const replacement = candidate.utf \|\| (candidate.screen_name + ' ')
	this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement)
	const el = this.$el.querySelector('textarea')
	el.focus()
	this.caret = 0
	this.highlighted = 0
	}
	},
	cycleBackward (e) {
	const len = this.candidates.length \|\| 0
	if (len > 0) {
	e.preventDefault()
	this.highlighted -= 1
	if (this.highlighted < 0) {
	this.highlighted = this.candidates.length - 1
	}
	} else {
	this.highlighted = 0
	}
	},
	cycleForward (e) {
	const len = this.candidates.length \|\| 0
	if (len > 0) {
	if (e.shiftKey) { return }
	e.preventDefault()
	this.highlighted += 1
	if (this.highlighted >= len) {
	this.highlighted = 0
	}
	} else {
	this.highlighted = 0
	}
	},
	onKeydown (e) {
	e.stopPropagation()
	},
	setCaret ({ target: { selectionStart } }) {
	this.caret = selectionStart
	},
	postStatus (newStatus) {
	if (this.posting) { return }
	if (this.submitDisabled) { return }

	if (this.newStatus.status === '') {
	if (this.newStatus.files.length > 0) {
	this.newStatus.status = '\u200b' // hack
	} else {
	this.error = 'Cannot post an empty status with no files'
	return
	}
	}

	const poll = this.pollFormVisible ? this.newStatus.poll : {}
	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true
	statusPoster.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll
	}).then((data) => {
	if (!data.error) {
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {}
	}
	this.pollFormVisible = false
	this.$refs.mediaUpload.clearFile()
	this.$refs.pollForm.clear()
	this.$emit('posted')
	let el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	addMediaFile (fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.enableSubmit()
	},
	removeMediaFile (fileInfo) {
	let index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	},
	uploadFailed (errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
	this.enableSubmit()
	},
	disableSubmit () {
	this.submitDisabled = true
	},
	enableSubmit () {
	this.submitDisabled = false
	},
	type (fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	paste (e) {
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop (e) {
	if (e.dataTransfer.files.length > 0) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	}
	},
	fileDrag (e) {
	e.dataTransfer.dropEffect = 'copy'
	},
	resize (e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) { return }
	const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) +
	Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1))
	// Auto is needed to make textbox shrink when removing lines
	target.style.height = 'auto'
	target.style.height = `${target.scrollHeight - vertPadding}px`
	if (target.value === '') {
	target.style.height = null
	}
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm () {
	this.pollFormVisible = !this.pollFormVisible
	},
	setPoll (poll) {
	this.newStatus.poll = poll
	},
	dismissScopeNotice () {
	this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index a41df32106..70fe6629d8 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,318 +1,331 @@
	<template>
	<div class="post-status-form">
	<form @submit.prevent="postStatus(newStatus)" autocomplete="off">
	<div class="form-group" >
	<i18n
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
	path="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice">
	<router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
	</i18n>
	<p v-if="!hideScopeNotice && newStatus.visibility === 'public'" class="visibility-notice notice-dismissible">
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
	<i class='icon-cancel'></i>
	</a>
	</p>
	<p v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" class="visibility-notice notice-dismissible">
	<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
	<a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
	<i class='icon-cancel'></i>
	</a>
	</p>
	<p v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked" class="visibility-notice notice-dismissible">
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
	<i class='icon-cancel'></i>
	</a>
	</p>
	<p v-else-if="newStatus.visibility === 'direct'" class="visibility-notice">
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<EmojiInput
	v-if="newStatus.spoilerText \|\| alwaysShowSubject"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	v-model="newStatus.spoilerText"
	classname="form-control"
	/>
	<textarea
	ref="textarea"
	@click="setCaret"
	@keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
	@keydown="onKeydown"
	@keydown.down="cycleForward"
	@keydown.up="cycleBackward"
	@keydown.shift.tab="cycleBackward"
	@keydown.tab="cycleForward"
	@keydown.enter="replaceCandidate"
	@keydown.meta.enter="postStatus(newStatus)"
	@keyup.ctrl.enter="postStatus(newStatus)"
	@drop="fileDrop"
	@dragover.prevent="fileDrag"
	@input="resize"
	@paste="paste"
	:disabled="posting"
	>
	</textarea>
	<div class="visibility-tray">
	- <div class="text-format" v-if="formattingOptionsEnabled">
	+ <div class="text-format" v-if="postFormats.length > 1">
	<label for="post-content-type" class="select">
	<select id="post-content-type" v-model="newStatus.contentType" class="form-control">
	<option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
	{{$t(`post_status.content_type["${postFormat}"]`)}}
	</option>
	</select>
	<i class="icon-down-open"></i>
	</label>
	</div>
	+ <div class="text-format" v-if="postFormats.length === 1">
	+ <span class="only-format">
	+ {{$t(`post_status.content_type["${postFormats[0]}"]`)}}
	+ </span>
	+ </div>

	<scope-selector
	:showAll="showAllScopes"
	:userDefault="userDefaultScope"
	:originalScope="copyMessageScope"
	:initialScope="newStatus.visibility"
	:onScopeChange="changeVis"/>
	</div>
	</div>
	<div class="autocomplete-panel" v-if="candidates">
	<div class="autocomplete-panel-body">
	<div
	v-for="(candidate, index) in candidates"
	:key="index"
	@click="replace(candidate.utf \|\| (candidate.screen_name + ' '))"
	class="autocomplete-item"
	:class="{ highlighted: candidate.highlighted }"
	>
	<span v-if="candidate.img"><img :src="candidate.img" /></span>
	<span v-else>{{candidate.utf}}</span>
	<span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
	</div>
	</div>
	</div>
	<poll-form
	ref="pollForm"
	v-if="pollsAvailable"
	:visible="pollFormVisible"
	@update-poll="setPoll"
	/>
	<div class='form-bottom'>
	<media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
	<div v-if="pollsAvailable" class="poll-icon">
	<label
	class="btn btn-default"
	:title="$t('polls.add_poll')"
	@click="togglePollForm">
	<i class="icon-chart-bar" :class="pollFormVisible && 'selected'" />
	</label>
	</div>
	<p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
	<p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>

	<button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
	<button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
	<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
	</div>
	<div class='alert error' v-if="error">
	Error: {{ error }}
	<i class="button-icon icon-cancel" @click="clearError"></i>
	</div>
	<div class="attachments">
	<div class="media-upload-wrapper" v-for="file in newStatus.files">
	<i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
	<div class="media-upload-container attachment">
	<img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
	<video v-if="type(file) === 'video'" :src="file.url" controls></video>
	<audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
	<a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
	</div>
	</div>
	</div>
	<div class="upload_settings" v-if="newStatus.files.length > 0">
	<input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
	<label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
	</div>
	</form>
	</div>
	</template>

	<script src="./post_status_form.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.tribute-container {
	ul {
	padding: 0px;
	li {
	display: flex;
	align-items: center;
	}
	}
	img {
	padding: 3px;
	width: 16px;
	height: 16px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}
	}

	.post-status-form {
	.visibility-tray {
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
	padding-top: 5px;
	}
	}

	.post-status-form {
	.form-bottom {
	display: flex;
	padding: 0.5em;
	height: 32px;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	+ .text-format {
	+ .only-format {
	+ color: $fallback--faint;
	+ color: var(--faint, $fallback--faint);
	+ }
	+ }
	+
	+
	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	flex: 0 0 auto;
	max-width: 100%;
	min-width: 50px;
	margin-right: .2em;
	margin-bottom: .5em;

	.icon-cancel {
	display: inline-block;
	position: static;
	margin: 0;
	padding-bottom: 0;
	margin-left: $fallback--attachmentRadius;
	margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	}
	}

	.attachments {
	padding: 0 0.5em;

	.attachment {
	margin: 0;
	position: relative;
	flex: 0 0 auto;
	border: 1px solid $fallback--border;
	border: 1px solid var(--border, $fallback--border);
	text-align: center;

	audio {
	min-width: 300px;
	flex: 1 0 auto;
	}

	a {
	display: block;
	text-align: left;
	line-height: 1.2;
	padding: .5em;
	}
	}

	i {
	position: absolute;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	font-weight: bold;
	}
	}


	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	form {
	display: flex;
	flex-direction: column;
	padding: 0.6em;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.25em 0.5em 0.5em;
	line-height:24px;
	}

	form textarea.form-cw {
	line-height:16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 1px;
	}

	form textarea.form-control {
	line-height:16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 1px;
	box-sizing: content-box;
	}

	form textarea.form-control:focus {
	min-height: 48px;
	}

	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	.icon-cancel {
	cursor: pointer;
	z-index: 4;
	}
	}
	.poll-icon {
	font-size: 26px;
	flex: 1;

	.selected {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	.icon-chart-bar {
	cursor: pointer;
	}
	</style>
	diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
	index f7850e3349..528c13cc16 100644
	--- a/src/components/settings/settings.vue
	+++ b/src/components/settings/settings.vue
	@@ -1,305 +1,305 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	<div class="title">
	{{$t('settings.settings')}}
	</div>

	<transition name="fade">
	<template v-if="currentSaveStateNotice">
	<div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
	{{ $t('settings.saving_err') }}
	</div>

	<div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
	{{ $t('settings.saving_ok') }}
	</div>
	</template>
	</transition>
	</div>
	<div class="panel-body">
	<keep-alive>
	<tab-switcher>
	<div :label="$t('settings.general')" >
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher />
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<input type="checkbox" id="hideISP" v-model="hideISPLocal">
	<label for="hideISP">{{$t('settings.hide_isp')}}</label>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{$t('nav.timeline')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="hideMutedPosts" v-model="hideMutedPostsLocal">
	<label for="hideMutedPosts">{{$t('settings.hide_muted_posts')}} {{$t('settings.instance_default', { value: hideMutedPostsDefault })}}</label>
	</li>
	<li>
	<input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
	<label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}</label>
	</li>
	<li>
	<input type="checkbox" id="streaming" v-model="streamingLocal">
	<label for="streaming">{{$t('settings.streaming')}}</label>
	<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
	<li>
	<input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
	<label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
	</li>
	</ul>
	</li>
	<li>
	<input type="checkbox" id="autoload" v-model="autoLoadLocal">
	<label for="autoload">{{$t('settings.autoload')}}</label>
	</li>
	<li>
	<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
	<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.composing')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal">
	<label for="scopeCopy">
	{{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal">
	<label for="subjectHide">
	{{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}}
	</label>
	</li>
	<li>
	<div>
	{{$t('settings.subject_line_behavior')}}
	<label for="subjectLineBehavior" class="select">
	<select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal">
	<option value="email">
	{{$t('settings.subject_line_email')}}
	{{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}}
	</option>
	<option value="masto">
	{{$t('settings.subject_line_mastodon')}}
	{{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}}
	</option>
	<option value="noop">
	{{$t('settings.subject_line_noop')}}
	{{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}}
	</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	</li>
	- <li>
	+ <li v-if="postFormats.length > 0">
	<div>
	{{$t('settings.post_status_content_type')}}
	<label for="postContentType" class="select">
	<select id="postContentType" v-model="postContentTypeLocal">
	<option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
	{{$t(`post_status.content_type["${postFormat}"]`)}}
	{{postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : ''}}
	</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	</li>
	<li>
	<input type="checkbox" id="minimalScopesMode" v-model="minimalScopesModeLocal">
	<label for="minimalScopesMode">
	{{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="autohideFloatingPostButton" v-model="autohideFloatingPostButtonLocal">
	<label for="autohideFloatingPostButton">{{$t('settings.autohide_floating_post_button')}}</label>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.attachments')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
	<label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
	</li>
	<li>
	<input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
	<label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
	</li>
	<li>
	<label for="maxThumbnails">{{$t('settings.max_thumbnails')}}</label>
	<input class="number-input" type="number" id="maxThumbnails" v-model.number="maxThumbnails" min="0" step="1">
	</li>
	<li>
	<input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
	<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
	</li>
	<ul class="setting-list suboptions" >
	<li>
	<input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
	<label for="preloadImage">{{$t('settings.preload_images')}}</label>
	</li>
	<li>
	<input :disabled="!hideNsfwLocal" type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
	<label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
	</li>
	</ul>
	<li>
	<input type="checkbox" id="stopGifs" v-model="stopGifs">
	<label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
	</li>
	<li>
	<input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
	<label for="loopVideo">{{$t('settings.loop_video')}}</label>
	<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
	<li>
	<input :disabled="!loopVideoLocal \|\| !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
	<label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
	<div v-if="!loopSilentAvailable" class="unavailable">
	<i class="icon-globe"/>! {{$t('settings.limited_availability')}}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<input type="checkbox" id="playVideosInModal" v-model="playVideosInModal">
	<label for="playVideosInModal">{{$t('settings.play_videos_in_modal')}}</label>
	</li>
	<li>
	<input type="checkbox" id="useContainFit" v-model="useContainFit">
	<label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.notifications')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal">
	<label for="webPushNotifications">
	{{$t('settings.enable_web_push_notifications')}}
	</label>
	</li>
	</ul>
	</div>
	</div>

	<div :label="$t('settings.theme')" >
	<div class="setting-item">
	<style-switcher></style-switcher>
	</div>
	</div>

	<div :label="$t('settings.filtering')" >
	<div class="setting-item">
	<div class="select-multiple">
	<span class="label">{{$t('settings.notification_visibility')}}</span>
	<ul class="option-list">
	<li>
	<input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes">
	<label for="notification-visibility-likes">
	{{$t('settings.notification_visibility_likes')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats">
	<label for="notification-visibility-repeats">
	{{$t('settings.notification_visibility_repeats')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows">
	<label for="notification-visibility-follows">
	{{$t('settings.notification_visibility_follows')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions">
	<label for="notification-visibility-mentions">
	{{$t('settings.notification_visibility_mentions')}}
	</label>
	</li>
	</ul>
	</div>
	<div>
	{{$t('settings.replies_in_timeline')}}
	<label for="replyVisibility" class="select">
	<select id="replyVisibility" v-model="replyVisibilityLocal">
	<option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
	<option value="following">{{$t('settings.reply_visibility_following')}}</option>
	<option value="self">{{$t('settings.reply_visibility_self')}}</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	<div>
	<input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
	<label for="hidePostStats">
	{{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}}
	</label>
	</div>
	<div>
	<input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal">
	<label for="hideUserStats">
	{{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
	</label>
	</div>
	</div>
	<div class="setting-item">
	<div>
	<p>{{$t('settings.filtering_explanation')}}</p>
	<textarea id="muteWords" v-model="muteWordsString"></textarea>
	</div>
	<div>
	<input type="checkbox" id="hideFilteredStatuses" v-model="hideFilteredStatusesLocal">
	<label for="hideFilteredStatuses">
	{{$t('settings.hide_filtered_statuses')}} {{$t('settings.instance_default', { value: hideFilteredStatusesDefault })}}
	</label>
	</div>
	</div>
	</div>
	<div :label="$t('settings.version.title')" >
	<div class="setting-item">
	<ul class="setting-list">
	<li>
	<p>{{$t('settings.version.backend_version')}}</p>
	<ul class="option-list">
	<li>
	<a :href="backendVersionLink" target="_blank">{{backendVersion}}</a>
	</li>
	</ul>
	</li>
	<li>
	<p>{{$t('settings.version.frontend_version')}}</p>
	<ul class="option-list">
	<li>
	<a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</tab-switcher>
	</keep-alive>
	</div>
	</div>
	</template>

	<script src="./settings.js">
	</script>
	\ No newline at end of file
	diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
	index 69505806fb..37d9e61b49 100644
	--- a/src/components/user_settings/user_settings.js
	+++ b/src/components/user_settings/user_settings.js
	@@ -1,341 +1,333 @@
	import unescape from 'lodash/unescape'
	import get from 'lodash/get'
	import map from 'lodash/map'
	import reject from 'lodash/reject'
	import TabSwitcher from '../tab_switcher/tab_switcher.js'
	import ImageCropper from '../image_cropper/image_cropper.vue'
	import StyleSwitcher from '../style_switcher/style_switcher.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
	import BlockCard from '../block_card/block_card.vue'
	import MuteCard from '../mute_card/mute_card.vue'
	import SelectableList from '../selectable_list/selectable_list.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import EmojiInput from '../emoji-input/emoji-input.vue'
	import Autosuggest from '../autosuggest/autosuggest.vue'
	import Importer from '../importer/importer.vue'
	import Exporter from '../exporter/exporter.vue'
	import withSubscription from '../../hocs/with_subscription/with_subscription'
	import userSearchApi from '../../services/new_api/user_search.js'
	import Mfa from './mfa.vue'

	const BlockList = withSubscription({
	fetch: (props, $store) => $store.dispatch('fetchBlocks'),
	select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
	childPropName: 'items'
	})(SelectableList)

	const MuteList = withSubscription({
	fetch: (props, $store) => $store.dispatch('fetchMutes'),
	select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
	childPropName: 'items'
	})(SelectableList)

	const UserSettings = {
	data () {
	return {
	newName: this.$store.state.users.currentUser.name,
	newBio: unescape(this.$store.state.users.currentUser.description),
	newLocked: this.$store.state.users.currentUser.locked,
	newNoRichText: this.$store.state.users.currentUser.no_rich_text,
	newDefaultScope: this.$store.state.users.currentUser.default_scope,
	hideFollows: this.$store.state.users.currentUser.hide_follows,
	hideFollowers: this.$store.state.users.currentUser.hide_followers,
	showRole: this.$store.state.users.currentUser.show_role,
	role: this.$store.state.users.currentUser.role,
	pickAvatarBtnVisible: true,
	bannerUploading: false,
	backgroundUploading: false,
	+ banner: null,
	bannerPreview: null,
	+ background: null,
	backgroundPreview: null,
	bannerUploadError: null,
	backgroundUploadError: null,
	deletingAccount: false,
	deleteAccountConfirmPasswordInput: '',
	deleteAccountError: false,
	changePasswordInputs: [ '', '', '' ],
	changedPassword: false,
	changePasswordError: false,
	activeTab: 'profile',
	notificationSettings: this.$store.state.users.currentUser.notification_settings
	}
	},
	created () {
	this.$store.dispatch('fetchTokens')
	},
	components: {
	StyleSwitcher,
	ScopeSelector,
	TabSwitcher,
	ImageCropper,
	BlockList,
	MuteList,
	EmojiInput,
	Autosuggest,
	BlockCard,
	MuteCard,
	ProgressButton,
	Importer,
	Exporter,
	Mfa
	},
	computed: {
	user () {
	return this.$store.state.users.currentUser
	},
	pleromaBackend () {
	return this.$store.state.instance.pleromaBackend
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	vis () {
	return {
	public: { selected: this.newDefaultScope === 'public' },
	unlisted: { selected: this.newDefaultScope === 'unlisted' },
	private: { selected: this.newDefaultScope === 'private' },
	direct: { selected: this.newDefaultScope === 'direct' }
	}
	},
	currentSaveStateNotice () {
	return this.$store.state.interface.settings.currentSaveStateNotice
	},
	oauthTokens () {
	return this.$store.state.oauthTokens.tokens.map(oauthToken => {
	return {
	id: oauthToken.id,
	appName: oauthToken.app_name,
	validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
	}
	})
	}
	},
	methods: {
	updateProfile () {
	this.$store.state.api.backendInteractor
	.updateProfile({
	params: {
	note: this.newBio,
	locked: this.newLocked,
	// Backend notation.
	/* eslint-disable camelcase */
	display_name: this.newName,
	default_scope: this.newDefaultScope,
	no_rich_text: this.newNoRichText,
	hide_follows: this.hideFollows,
	hide_followers: this.hideFollowers,
	show_role: this.showRole
	/* eslint-enable camelcase */
	}}).then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	})
	},
	updateNotificationSettings () {
	this.$store.state.api.backendInteractor
	.updateNotificationSettings({ settings: this.notificationSettings })
	},
	changeVis (visibility) {
	this.newDefaultScope = visibility
	},
	uploadFile (slot, e) {
	const file = e.target.files[0]
	if (!file) { return }
	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})
	return
	}
	// eslint-disable-next-line no-undef
	const reader = new FileReader()
	reader.onload = ({target}) => {
	const img = target.result
	this[slot + 'Preview'] = img
	this[slot] = file
	}
	reader.readAsDataURL(file)
	},
	submitAvatar (cropper, file) {
	const that = this
	return new Promise((resolve, reject) => {
	function updateAvatar (avatar) {
	that.$store.state.api.backendInteractor.updateAvatar({ avatar })
	.then((user) => {
	that.$store.commit('addNewUsers', [user])
	that.$store.commit('setCurrentUser', user)
	resolve()
	})
	.catch((err) => {
	reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
	})
	}

	if (cropper) {
	cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
	} else {
	updateAvatar(file)
	}
	})
	},
	clearUploadError (slot) {
	this[slot + 'UploadError'] = null
	},
	submitBanner () {
	if (!this.bannerPreview) { return }

	this.bannerUploading = true
	this.$store.state.api.backendInteractor.updateBanner({banner: this.banner})
	.then((user) => {
	this.$store.commit('addNewUsers', [user])
	this.$store.commit('setCurrentUser', user)
	this.bannerPreview = null
	})
	.catch((err) => {
	this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
	})
	.then(() => { this.bannerUploading = false })
	},
	submitBg () {
	if (!this.backgroundPreview) { return }
	- let img = this.backgroundPreview
	- // eslint-disable-next-line no-undef
	- let imginfo = new Image()
	- let cropX, cropY, cropW, cropH
	- imginfo.src = img
	- cropX = 0
	- cropY = 0
	- cropW = imginfo.width
	- cropH = imginfo.width
	+ let background = this.background
	this.backgroundUploading = true
	- this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
	+ this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
	if (!data.error) {
	- let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
	- clone.background_image = data.url
	- this.$store.commit('addNewUsers', [clone])
	- this.$store.commit('setCurrentUser', clone)
	+ this.$store.commit('addNewUsers', [data])
	+ this.$store.commit('setCurrentUser', data)
	this.backgroundPreview = null
	} else {
	this.backgroundUploadError = this.$t('upload.error.base') + data.error
	}
	this.backgroundUploading = false
	})
	},
	importFollows (file) {
	return this.$store.state.api.backendInteractor.importFollows(file)
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	importBlocks (file) {
	return this.$store.state.api.backendInteractor.importBlocks(file)
	.then((status) => {
	if (!status) {
	throw new Error('failed')
	}
	})
	},
	generateExportableUsersContent (users) {
	// Get addresses
	return users.map((user) => {
	// check is it's a local user
	if (user && user.is_local) {
	// append the instance address
	// eslint-disable-next-line no-undef
	return user.screen_name + '@' + location.hostname
	}
	return user.screen_name
	}).join('\n')
	},
	getFollowsContent () {
	return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
	.then(this.generateExportableUsersContent)
	},
	getBlocksContent () {
	return this.$store.state.api.backendInteractor.fetchBlocks()
	.then(this.generateExportableUsersContent)
	},
	confirmDelete () {
	this.deletingAccount = true
	},
	deleteAccount () {
	this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
	.then((res) => {
	if (res.status === 'success') {
	this.$store.dispatch('logout')
	this.$router.push({name: 'root'})
	} else {
	this.deleteAccountError = res.error
	}
	})
	},
	changePassword () {
	const params = {
	password: this.changePasswordInputs[0],
	newPassword: this.changePasswordInputs[1],
	newPasswordConfirmation: this.changePasswordInputs[2]
	}
	this.$store.state.api.backendInteractor.changePassword(params)
	.then((res) => {
	if (res.status === 'success') {
	this.changedPassword = true
	this.changePasswordError = false
	this.logout()
	} else {
	this.changedPassword = false
	this.changePasswordError = res.error
	}
	})
	},
	activateTab (tabName) {
	this.activeTab = tabName
	},
	logout () {
	this.$store.dispatch('logout')
	this.$router.replace('/')
	},
	revokeToken (id) {
	if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
	this.$store.dispatch('revokeToken', id)
	}
	},
	filterUnblockedUsers (userIds) {
	return reject(userIds, (userId) => {
	const user = this.$store.getters.findUser(userId)
	return !user \|\| user.statusnet_blocking \|\| user.id === this.$store.state.users.currentUser.id
	})
	},
	filterUnMutedUsers (userIds) {
	return reject(userIds, (userId) => {
	const user = this.$store.getters.findUser(userId)
	return !user \|\| user.muted \|\| user.id === this.$store.state.users.currentUser.id
	})
	},
	queryUserIds (query) {
	return userSearchApi.search({query, store: this.$store})
	.then((users) => {
	this.$store.dispatch('addNewUsers', users)
	return map(users, 'id')
	})
	},
	blockUsers (ids) {
	return this.$store.dispatch('blockUsers', ids)
	},
	unblockUsers (ids) {
	return this.$store.dispatch('unblockUsers', ids)
	},
	muteUsers (ids) {
	return this.$store.dispatch('muteUsers', ids)
	},
	unmuteUsers (ids) {
	return this.$store.dispatch('unmuteUsers', ids)
	},
	identity (value) {
	return value
	}
	}
	}

	export default UserSettings
	diff --git a/src/modules/instance.js b/src/modules/instance.js
	index 6c4849ed83..22addb9b4d 100644
	--- a/src/modules/instance.js
	+++ b/src/modules/instance.js
	@@ -1,92 +1,91 @@
	import { set } from 'vue'
	import { setPreset } from '../services/style_setter/style_setter.js'

	const defaultState = {
	// Stuff from static/config.json and apiConfig
	name: 'Pleroma FE',
	registrationOpen: true,
	safeDM: true,
	textlimit: 5000,
	server: 'http://localhost:4040/',
	theme: 'pleroma-dark',
	background: '/static/aurora_borealis.jpg',
	logo: '/static/logo.png',
	logoMask: true,
	logoMargin: '.2em',
	redirectRootNoLogin: '/main/all',
	redirectRootLogin: '/main/friends',
	showInstanceSpecificPanel: false,
	- formattingOptionsEnabled: false,
	alwaysShowSubjectInput: true,
	hideMutedPosts: false,
	collapseMessageWithSubject: false,
	hidePostStats: false,
	hideUserStats: false,
	hideFilteredStatuses: false,
	disableChat: false,
	scopeCopy: true,
	subjectLineBehavior: 'email',
	postContentType: 'text/plain',
	nsfwCensorImage: undefined,
	vapidPublicKey: undefined,
	noAttachmentLinks: false,
	showFeaturesPanel: true,
	minimalScopesMode: false,

	// Nasty stuff
	pleromaBackend: true,
	emoji: [],
	customEmoji: [],
	restrictedNicknames: [],
	postFormats: [],

	// Feature-set, apparently, not everything here is reported...
	mediaProxyAvailable: false,
	chatAvailable: false,
	gopherAvailable: false,
	suggestionsEnabled: false,
	suggestionsWeb: '',

	// Html stuff
	instanceSpecificPanelContent: '',
	tos: '',

	// Version Information
	backendVersion: '',
	frontendVersion: '',

	pollsAvailable: false,
	pollLimits: {
	max_options: 4,
	max_option_chars: 255,
	min_expiration: 60,
	max_expiration: 60 * 60 * 24
	}
	}

	const instance = {
	state: defaultState,
	mutations: {
	setInstanceOption (state, { name, value }) {
	if (typeof value !== 'undefined') {
	set(state, name, value)
	}
	}
	},
	actions: {
	setInstanceOption ({ commit, dispatch }, { name, value }) {
	commit('setInstanceOption', {name, value})
	switch (name) {
	case 'name':
	dispatch('setPageTitle')
	break
	}
	},
	setTheme ({ commit }, themeName) {
	commit('setInstanceOption', { name: 'theme', value: themeName })
	return setPreset(themeName, commit)
	}
	}
	}

	export default instance
	diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
	index 1285a3b8c2..d5fc418d66 100644
	--- a/src/services/api/api.service.js
	+++ b/src/services/api/api.service.js
	@@ -1,933 +1,905 @@
	import { each, map, concat, last } from 'lodash'
	import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
	import 'whatwg-fetch'
	import { StatusCodeError } from '../errors/errors'

	/* eslint-env browser */
	-const BG_UPDATE_URL = '/api/qvitter/update_background_image.json'
	const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
	const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
	const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
	const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
	const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
	const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
	const FOLLOW_REQUESTS_URL = '/api/pleroma/friend_requests'
	const APPROVE_USER_URL = '/api/pleroma/friendships/approve'
	const DENY_USER_URL = '/api/pleroma/friendships/deny'
	const TAG_USER_URL = '/api/pleroma/admin/users/tag'
	const PERMISSION_GROUP_URL = (screenName, right) => `/api/pleroma/admin/users/${screenName}/permission_group/${right}`
	const ACTIVATION_STATUS_URL = screenName => `/api/pleroma/admin/users/${screenName}/activation_status`
	const ADMIN_USERS_URL = '/api/pleroma/admin/users'
	const SUGGESTIONS_URL = '/api/v1/suggestions'
	const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'

	const MFA_SETTINGS_URL = '/api/pleroma/profile/mfa'
	const MFA_BACKUP_CODES_URL = '/api/pleroma/profile/mfa/backup_codes'

	const MFA_SETUP_OTP_URL = '/api/pleroma/profile/mfa/setup/totp'
	const MFA_CONFIRM_OTP_URL = '/api/pleroma/profile/mfa/confirm/totp'
	const MFA_DISABLE_OTP_URL = '/api/pleroma/profile/mfa/totp'

	const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
	const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
	-const GET_BACKGROUND_HACK = '/api/account/verify_credentials.json'
	const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
	const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
	const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
	const MASTODON_UNFAVORITE_URL = id => `/api/v1/statuses/${id}/unfavourite`
	const MASTODON_RETWEET_URL = id => `/api/v1/statuses/${id}/reblog`
	const MASTODON_UNRETWEET_URL = id => `/api/v1/statuses/${id}/unreblog`
	const MASTODON_DELETE_URL = id => `/api/v1/statuses/${id}`
	const MASTODON_FOLLOW_URL = id => `/api/v1/accounts/${id}/follow`
	const MASTODON_UNFOLLOW_URL = id => `/api/v1/accounts/${id}/unfollow`
	const MASTODON_FOLLOWING_URL = id => `/api/v1/accounts/${id}/following`
	const MASTODON_FOLLOWERS_URL = id => `/api/v1/accounts/${id}/followers`
	const MASTODON_DIRECT_MESSAGES_TIMELINE_URL = '/api/v1/timelines/direct'
	const MASTODON_PUBLIC_TIMELINE = '/api/v1/timelines/public'
	const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
	const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
	const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
	const MASTODON_USER_URL = '/api/v1/accounts'
	const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
	const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
	const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
	const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/'
	const MASTODON_USER_MUTES_URL = '/api/v1/mutes/'
	const MASTODON_BLOCK_USER_URL = id => `/api/v1/accounts/${id}/block`
	const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock`
	const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
	const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
	const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
	const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
	const MASTODON_VOTE_URL = id => `/api/v1/polls/${id}/votes`
	const MASTODON_POLL_URL = id => `/api/v1/polls/${id}`
	const MASTODON_STATUS_FAVORITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by`
	const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by`
	const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
	const MASTODON_REPORT_USER_URL = '/api/v1/reports'
	const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin`
	const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin`

	const oldfetch = window.fetch

	let fetch = (url, options) => {
	options = options \|\| {}
	const baseUrl = ''
	const fullUrl = baseUrl + url
	options.credentials = 'same-origin'
	return oldfetch(fullUrl, options)
	}

	const promisedRequest = ({ method, url, payload, credentials, headers = {} }) => {
	const options = {
	method,
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	...headers
	}
	}
	if (payload) {
	options.body = JSON.stringify(payload)
	}
	if (credentials) {
	options.headers = {
	...options.headers,
	...authHeaders(credentials)
	}
	}
	return fetch(url, options)
	.then((response) => {
	return new Promise((resolve, reject) => response.json()
	.then((json) => {
	if (!response.ok) {
	return reject(new StatusCodeError(response.status, json, { url, options }, response))
	}
	return resolve(json)
	}))
	})
	}

	const updateNotificationSettings = ({ credentials, settings }) => {
	const form = new FormData()

	each(settings, (value, key) => {
	form.append(key, value)
	})

	return fetch(NOTIFICATION_SETTINGS_URL, {
	headers: authHeaders(credentials),
	method: 'PUT',
	body: form
	}).then((data) => data.json())
	}

	const updateAvatar = ({ credentials, avatar }) => {
	const form = new FormData()
	form.append('avatar', avatar)
	return fetch(MASTODON_PROFILE_UPDATE_URL, {
	headers: authHeaders(credentials),
	method: 'PATCH',
	body: form
	}).then((data) => data.json())
	.then((data) => parseUser(data))
	}

	-const updateBg = ({ credentials, params }) => {
	- let url = BG_UPDATE_URL
	-
	+const updateBg = ({ credentials, background }) => {
	const form = new FormData()
	-
	- each(params, (value, key) => {
	- if (value) {
	- form.append(key, value)
	- }
	- })
	-
	- return fetch(url, {
	+ form.append('pleroma_background_image', background)
	+ return fetch(MASTODON_PROFILE_UPDATE_URL, {
	headers: authHeaders(credentials),
	- method: 'POST',
	+ method: 'PATCH',
	body: form
	- }).then((data) => data.json())
	+ })
	+ .then((data) => data.json())
	+ .then((data) => parseUser(data))
	}

	const updateBanner = ({ credentials, banner }) => {
	const form = new FormData()
	form.append('header', banner)
	return fetch(MASTODON_PROFILE_UPDATE_URL, {
	headers: authHeaders(credentials),
	method: 'PATCH',
	body: form
	}).then((data) => data.json())
	.then((data) => parseUser(data))
	}

	const updateProfile = ({ credentials, params }) => {
	return promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	method: 'PATCH',
	payload: params,
	credentials
	}).then((data) => parseUser(data))
	}

	// Params needed:
	// nickname
	// email
	// fullname
	// password
	// password_confirm
	//
	// Optional
	// bio
	// homepage
	// location
	// token
	const register = ({ params, credentials }) => {
	const { nickname, ...rest } = params
	return fetch(MASTODON_REGISTRATION_URL, {
	method: 'POST',
	headers: {
	...authHeaders(credentials),
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	nickname,
	locale: 'en_US',
	agreement: true,
	...rest
	})
	})
	.then((response) => [response.ok, response])
	.then(([ok, response]) => {
	if (ok) {
	return response.json()
	} else {
	return response.json().then((error) => { throw new Error(error) })
	}
	})
	}

	const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json())

	const authHeaders = (accessToken) => {
	if (accessToken) {
	return { 'Authorization': `Bearer ${accessToken}` }
	} else {
	return { }
	}
	}

	const externalProfile = ({ profileUrl, credentials }) => {
	let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}`
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}

	const followUser = ({ id, credentials }) => {
	let url = MASTODON_FOLLOW_URL(id)
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const unfollowUser = ({ id, credentials }) => {
	let url = MASTODON_UNFOLLOW_URL(id)
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const pinOwnStatus = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const unpinOwnStatus = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNPIN_OWN_STATUS(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const blockUser = ({ id, credentials }) => {
	return fetch(MASTODON_BLOCK_USER_URL(id), {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const unblockUser = ({ id, credentials }) => {
	return fetch(MASTODON_UNBLOCK_USER_URL(id), {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const approveUser = ({ id, credentials }) => {
	let url = `${APPROVE_USER_URL}?user_id=${id}`
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const denyUser = ({ id, credentials }) => {
	let url = `${DENY_USER_URL}?user_id=${id}`
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const fetchUser = ({ id, credentials }) => {
	let url = `${MASTODON_USER_URL}/${id}`
	return promisedRequest({ url, credentials })
	.then((data) => parseUser(data))
	}

	const fetchUserRelationship = ({ id, credentials }) => {
	let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
	return fetch(url, { headers: authHeaders(credentials) })
	.then((response) => {
	return new Promise((resolve, reject) => response.json()
	.then((json) => {
	if (!response.ok) {
	return reject(new StatusCodeError(response.status, json, { url }, response))
	}
	return resolve(json)
	}))
	})
	}

	const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
	let url = MASTODON_FOLLOWING_URL(id)
	const args = [
	maxId && `max_id=${maxId}`,
	sinceId && `since_id=${sinceId}`,
	limit && `limit=${limit}`
	].filter(_ => _).join('&')

	url = url + (args ? '?' + args : '')
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(parseUser))
	}

	const exportFriends = ({ id, credentials }) => {
	return new Promise(async (resolve, reject) => {
	try {
	let friends = []
	let more = true
	while (more) {
	const maxId = friends.length > 0 ? last(friends).id : undefined
	const users = await fetchFriends({id, maxId, credentials})
	friends = concat(friends, users)
	if (users.length === 0) {
	more = false
	}
	}
	resolve(friends)
	} catch (err) {
	reject(err)
	}
	})
	}

	const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
	let url = MASTODON_FOLLOWERS_URL(id)
	const args = [
	maxId && `max_id=${maxId}`,
	sinceId && `since_id=${sinceId}`,
	limit && `limit=${limit}`
	].filter(_ => _).join('&')

	url += args ? '?' + args : ''
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(parseUser))
	}

	const fetchFollowRequests = ({ credentials }) => {
	const url = FOLLOW_REQUESTS_URL
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	}

	const fetchConversation = ({ id, credentials }) => {
	let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
	return fetch(urlContext, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching timeline', data)
	})
	.then((data) => data.json())
	.then(({ ancestors, descendants }) => ({
	ancestors: ancestors.map(parseStatus),
	descendants: descendants.map(parseStatus)
	}))
	}

	const fetchStatus = ({ id, credentials }) => {
	let url = MASTODON_STATUS_URL(id)
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching timeline', data)
	})
	.then((data) => data.json())
	.then((data) => parseStatus(data))
	}

	const tagUser = ({ tag, credentials, ...options }) => {
	const screenName = options.screen_name
	const form = {
	nicknames: [screenName],
	tags: [tag]
	}

	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(TAG_USER_URL, {
	method: 'PUT',
	headers: headers,
	body: JSON.stringify(form)
	})
	}

	const untagUser = ({ tag, credentials, ...options }) => {
	const screenName = options.screen_name
	const body = {
	nicknames: [screenName],
	tags: [tag]
	}

	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(TAG_USER_URL, {
	method: 'DELETE',
	headers: headers,
	body: JSON.stringify(body)
	})
	}

	const addRight = ({ right, credentials, ...user }) => {
	const screenName = user.screen_name

	return fetch(PERMISSION_GROUP_URL(screenName, right), {
	method: 'POST',
	headers: authHeaders(credentials),
	body: {}
	})
	}

	const deleteRight = ({ right, credentials, ...user }) => {
	const screenName = user.screen_name

	return fetch(PERMISSION_GROUP_URL(screenName, right), {
	method: 'DELETE',
	headers: authHeaders(credentials),
	body: {}
	})
	}

	const setActivationStatus = ({ status, credentials, ...user }) => {
	const screenName = user.screen_name
	const body = {
	status: status
	}

	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(ACTIVATION_STATUS_URL(screenName), {
	method: 'PUT',
	headers: headers,
	body: JSON.stringify(body)
	})
	}

	const deleteUser = ({ credentials, ...user }) => {
	const screenName = user.screen_name
	const headers = authHeaders(credentials)

	return fetch(`${ADMIN_USERS_URL}?nickname=${screenName}`, {
	method: 'DELETE',
	headers: headers
	})
	}

	const fetchTimeline = ({
	timeline,
	credentials,
	since = false,
	until = false,
	userId = false,
	tag = false,
	withMuted = false
	}) => {
	const timelineUrls = {
	public: MASTODON_PUBLIC_TIMELINE,
	friends: MASTODON_USER_HOME_TIMELINE_URL,
	dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
	notifications: MASTODON_USER_NOTIFICATIONS_URL,
	'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
	user: MASTODON_USER_TIMELINE_URL,
	media: MASTODON_USER_TIMELINE_URL,
	favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
	tag: MASTODON_TAG_TIMELINE_URL
	}
	const isNotifications = timeline === 'notifications'
	const params = []

	let url = timelineUrls[timeline]

	if (timeline === 'user' \|\| timeline === 'media') {
	url = url(userId)
	}

	if (since) {
	params.push(['since_id', since])
	}
	if (until) {
	params.push(['max_id', until])
	}
	if (tag) {
	url = url(tag)
	}
	if (timeline === 'media') {
	params.push(['only_media', 1])
	}
	if (timeline === 'public') {
	params.push(['local', true])
	}
	if (timeline === 'public' \|\| timeline === 'publicAndExternal') {
	params.push(['only_media', false])
	}

	params.push(['count', 20])
	params.push(['with_muted', withMuted])

	const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
	url += `?${queryString}`

	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching timeline', data)
	})
	.then((data) => data.json())
	.then((data) => data.map(isNotifications ? parseNotification : parseStatus))
	}

	const fetchPinnedStatuses = ({ id, credentials }) => {
	const url = MASTODON_USER_TIMELINE_URL(id) + '?pinned=true'
	return promisedRequest({ url, credentials })
	.then((data) => data.map(parseStatus))
	}

	const verifyCredentials = (user) => {
	return fetch(MASTODON_LOGIN_URL, {
	headers: authHeaders(user)
	})
	.then((response) => {
	if (response.ok) {
	return response.json()
	} else {
	return {
	error: response
	}
	}
	})
	.then((data) => data.error ? data : parseUser(data))
	- .then((mastoUser) => {
	- // REMOVE WHEN BE SUPPORTS background_image
	- return fetch(GET_BACKGROUND_HACK, {
	- method: 'POST',
	- headers: authHeaders(user)
	- })
	- .then((response) => {
	- if (response.ok) {
	- return response.json()
	- } else {
	- return {}
	- }
	- })
	- /* eslint-disable camelcase */
	- .then(({ background_image }) => ({
	- ...mastoUser,
	- background_image
	- }))
	- /* eslint-enable camelcase */
	- })
	}

	const favorite = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_FAVORITE_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const unfavorite = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNFAVORITE_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const retweet = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_RETWEET_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const unretweet = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNRETWEET_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const postStatus = ({
	credentials,
	status,
	spoilerText,
	visibility,
	sensitive,
	poll,
	mediaIds = [],
	inReplyToStatusId,
	contentType
	}) => {
	const form = new FormData()
	const pollOptions = poll.options \|\| []

	form.append('status', status)
	form.append('source', 'Pleroma FE')
	if (spoilerText) form.append('spoiler_text', spoilerText)
	if (visibility) form.append('visibility', visibility)
	if (sensitive) form.append('sensitive', sensitive)
	if (contentType) form.append('content_type', contentType)
	mediaIds.forEach(val => {
	form.append('media_ids[]', val)
	})
	if (pollOptions.some(option => option !== '')) {
	const normalizedPoll = {
	expires_in: poll.expiresIn,
	multiple: poll.multiple
	}
	Object.keys(normalizedPoll).forEach(key => {
	form.append(`poll[${key}]`, normalizedPoll[key])
	})

	pollOptions.forEach(option => {
	form.append('poll[options][]', option)
	})
	}
	if (inReplyToStatusId) {
	form.append('in_reply_to_id', inReplyToStatusId)
	}

	return fetch(MASTODON_POST_STATUS_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => {
	if (response.ok) {
	return response.json()
	} else {
	return {
	error: response
	}
	}
	})
	.then((data) => data.error ? data : parseStatus(data))
	}

	const deleteStatus = ({ id, credentials }) => {
	return fetch(MASTODON_DELETE_URL(id), {
	headers: authHeaders(credentials),
	method: 'DELETE'
	})
	}

	const uploadMedia = ({ formData, credentials }) => {
	return fetch(MASTODON_MEDIA_UPLOAD_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((data) => data.json())
	.then((data) => parseAttachment(data))
	}

	const importBlocks = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return fetch(BLOCKS_IMPORT_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.ok)
	}

	const importFollows = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return fetch(FOLLOW_IMPORT_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.ok)
	}

	const deleteAccount = ({ credentials, password }) => {
	const form = new FormData()

	form.append('password', password)

	return fetch(DELETE_ACCOUNT_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('new_password', newPassword)
	form.append('new_password_confirmation', newPasswordConfirmation)

	return fetch(CHANGE_PASSWORD_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const settingsMFA = ({ credentials }) => {
	return fetch(MFA_SETTINGS_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}

	const mfaDisableOTP = ({ credentials, password }) => {
	const form = new FormData()

	form.append('password', password)

	return fetch(MFA_DISABLE_OTP_URL, {
	body: form,
	method: 'DELETE',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const mfaConfirmOTP = ({ credentials, password, token }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('code', token)

	return fetch(MFA_CONFIRM_OTP_URL, {
	body: form,
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}
	const mfaSetupOTP = ({ credentials }) => {
	return fetch(MFA_SETUP_OTP_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}
	const generateMfaBackupCodes = ({ credentials }) => {
	return fetch(MFA_BACKUP_CODES_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}

	const fetchMutes = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials })
	.then((users) => users.map(parseUser))
	}

	const muteUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST' })
	}

	const unmuteUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNMUTE_USER_URL(id), credentials, method: 'POST' })
	}

	const fetchBlocks = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials })
	.then((users) => users.map(parseUser))
	}

	const fetchOAuthTokens = ({ credentials }) => {
	const url = '/api/oauth_tokens.json'

	return fetch(url, {
	headers: authHeaders(credentials)
	}).then((data) => {
	if (data.ok) {
	return data.json()
	}
	throw new Error('Error fetching auth tokens', data)
	})
	}

	const revokeOAuthToken = ({ id, credentials }) => {
	const url = `/api/oauth_tokens/${id}`

	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'DELETE'
	})
	}

	const suggestions = ({ credentials }) => {
	return fetch(SUGGESTIONS_URL, {
	headers: authHeaders(credentials)
	}).then((data) => data.json())
	}

	const markNotificationsAsSeen = ({ id, credentials }) => {
	const body = new FormData()

	body.append('latest_id', id)

	return fetch(QVITTER_USER_NOTIFICATIONS_READ_URL, {
	body,
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const vote = ({ pollId, choices, credentials }) => {
	const form = new FormData()
	form.append('choices', choices)

	return promisedRequest({
	url: MASTODON_VOTE_URL(encodeURIComponent(pollId)),
	method: 'POST',
	credentials,
	payload: {
	choices: choices
	}
	})
	}

	const fetchPoll = ({ pollId, credentials }) => {
	return promisedRequest(
	{
	url: MASTODON_POLL_URL(encodeURIComponent(pollId)),
	method: 'GET',
	credentials
	}
	)
	}

	const fetchFavoritedByUsers = ({ id }) => {
	return promisedRequest({ url: MASTODON_STATUS_FAVORITEDBY_URL(id) }).then((users) => users.map(parseUser))
	}

	const fetchRebloggedByUsers = ({ id }) => {
	return promisedRequest({ url: MASTODON_STATUS_REBLOGGEDBY_URL(id) }).then((users) => users.map(parseUser))
	}

	const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
	return promisedRequest({
	url: MASTODON_REPORT_USER_URL,
	method: 'POST',
	payload: {
	'account_id': userId,
	'status_ids': statusIds,
	comment,
	forward
	},
	credentials
	})
	}

	const apiService = {
	verifyCredentials,
	fetchTimeline,
	fetchPinnedStatuses,
	fetchConversation,
	fetchStatus,
	fetchFriends,
	exportFriends,
	fetchFollowers,
	followUser,
	unfollowUser,
	pinOwnStatus,
	unpinOwnStatus,
	blockUser,
	unblockUser,
	fetchUser,
	fetchUserRelationship,
	favorite,
	unfavorite,
	retweet,
	unretweet,
	postStatus,
	deleteStatus,
	uploadMedia,
	fetchMutes,
	muteUser,
	unmuteUser,
	fetchBlocks,
	fetchOAuthTokens,
	revokeOAuthToken,
	tagUser,
	untagUser,
	deleteUser,
	addRight,
	deleteRight,
	setActivationStatus,
	register,
	getCaptcha,
	updateAvatar,
	updateBg,
	updateProfile,
	updateBanner,
	externalProfile,
	importBlocks,
	importFollows,
	deleteAccount,
	changePassword,
	settingsMFA,
	mfaDisableOTP,
	generateMfaBackupCodes,
	mfaSetupOTP,
	mfaConfirmOTP,
	fetchFollowRequests,
	approveUser,
	denyUser,
	suggestions,
	markNotificationsAsSeen,
	vote,
	fetchPoll,
	fetchFavoritedByUsers,
	fetchRebloggedByUsers,
	reportUser,
	updateNotificationSettings
	}

	export default apiService
	diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
	index bd5f621cde..0a774258c1 100644
	--- a/src/services/backend_interactor_service/backend_interactor_service.js
	+++ b/src/services/backend_interactor_service/backend_interactor_service.js
	@@ -1,207 +1,208 @@
	import apiService from '../api/api.service.js'
	import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js'
	import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'

	const backendInteractorService = credentials => {
	const fetchStatus = ({ id }) => {
	return apiService.fetchStatus({ id, credentials })
	}

	const fetchConversation = ({ id }) => {
	return apiService.fetchConversation({ id, credentials })
	}

	const fetchFriends = ({ id, maxId, sinceId, limit }) => {
	return apiService.fetchFriends({ id, maxId, sinceId, limit, credentials })
	}

	const exportFriends = ({ id }) => {
	return apiService.exportFriends({ id, credentials })
	}

	const fetchFollowers = ({ id, maxId, sinceId, limit }) => {
	return apiService.fetchFollowers({ id, maxId, sinceId, limit, credentials })
	}

	const fetchUser = ({ id }) => {
	return apiService.fetchUser({ id, credentials })
	}

	const fetchUserRelationship = ({ id }) => {
	return apiService.fetchUserRelationship({ id, credentials })
	}

	const followUser = (id) => {
	return apiService.followUser({ credentials, id })
	}

	const unfollowUser = (id) => {
	return apiService.unfollowUser({ credentials, id })
	}

	const blockUser = (id) => {
	return apiService.blockUser({ credentials, id })
	}

	const unblockUser = (id) => {
	return apiService.unblockUser({ credentials, id })
	}

	const approveUser = (id) => {
	return apiService.approveUser({ credentials, id })
	}

	const denyUser = (id) => {
	return apiService.denyUser({ credentials, id })
	}

	const startFetchingTimeline = ({ timeline, store, userId = false, tag }) => {
	return timelineFetcherService.startFetching({ timeline, store, credentials, userId, tag })
	}

	const startFetchingNotifications = ({ store }) => {
	return notificationsFetcher.startFetching({ store, credentials })
	}

	const tagUser = ({ screen_name }, tag) => {
	return apiService.tagUser({ screen_name, tag, credentials })
	}

	const untagUser = ({ screen_name }, tag) => {
	return apiService.untagUser({ screen_name, tag, credentials })
	}

	const addRight = ({ screen_name }, right) => {
	return apiService.addRight({ screen_name, right, credentials })
	}

	const deleteRight = ({ screen_name }, right) => {
	return apiService.deleteRight({ screen_name, right, credentials })
	}

	const setActivationStatus = ({ screen_name }, status) => {
	return apiService.setActivationStatus({ screen_name, status, credentials })
	}

	const deleteUser = ({ screen_name }) => {
	return apiService.deleteUser({ screen_name, credentials })
	}

	const vote = (pollId, choices) => {
	return apiService.vote({ credentials, pollId, choices })
	}

	const fetchPoll = (pollId) => {
	return apiService.fetchPoll({ credentials, pollId })
	}

	const updateNotificationSettings = ({ settings }) => {
	return apiService.updateNotificationSettings({ credentials, settings })
	}

	const fetchMutes = () => apiService.fetchMutes({ credentials })
	const muteUser = (id) => apiService.muteUser({ credentials, id })
	const unmuteUser = (id) => apiService.unmuteUser({ credentials, id })
	const fetchBlocks = () => apiService.fetchBlocks({ credentials })
	const fetchFollowRequests = () => apiService.fetchFollowRequests({ credentials })
	const fetchOAuthTokens = () => apiService.fetchOAuthTokens({ credentials })
	const revokeOAuthToken = (id) => apiService.revokeOAuthToken({ id, credentials })
	const fetchPinnedStatuses = (id) => apiService.fetchPinnedStatuses({ credentials, id })
	const pinOwnStatus = (id) => apiService.pinOwnStatus({ credentials, id })
	const unpinOwnStatus = (id) => apiService.unpinOwnStatus({ credentials, id })

	const getCaptcha = () => apiService.getCaptcha()
	- const register = (params) => apiService.register(params)
	+ const register = (params) => apiService.register({ credentials, params })
	const updateAvatar = ({ avatar }) => apiService.updateAvatar({ credentials, avatar })
	- const updateBg = ({ params }) => apiService.updateBg({ credentials, params })
	+ const updateBg = ({ params }) => apiService.updateBg({ credentials, background })
	const updateBanner = ({ banner }) => apiService.updateBanner({ credentials, banner })
	const updateProfile = ({ params }) => apiService.updateProfile({ credentials, params })

	-
	const externalProfile = (profileUrl) => apiService.externalProfile({ profileUrl, credentials })
	+
	const importBlocks = (file) => apiService.importBlocks({ file, credentials })
	const importFollows = (file) => apiService.importFollows({ file, credentials })

	const deleteAccount = ({ password }) => apiService.deleteAccount({ credentials, password })
	const changePassword = ({ password, newPassword, newPasswordConfirmation }) =>
	apiService.changePassword({ credentials, password, newPassword, newPasswordConfirmation })

	- const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id })
	- const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id })
	- const reportUser = (params) => apiService.reportUser({ credentials, ...params })
	const fetchSettingsMFA = () => apiService.settingsMFA({ credentials })
	const generateMfaBackupCodes = () => apiService.generateMfaBackupCodes({ credentials })
	const mfaSetupOTP = () => apiService.mfaSetupOTP({ credentials })
	const mfaConfirmOTP = ({ password, token }) => apiService.mfaConfirmOTP({ credentials, password, token })
	const mfaDisableOTP = ({ password }) => apiService.mfaDisableOTP({ credentials, password })

	+ const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id })
	+ const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id })
	+ const reportUser = (params) => apiService.reportUser({ credentials, ...params })
	+
	const favorite = (id) => apiService.favorite({ id, credentials })
	const unfavorite = (id) => apiService.unfavorite({ id, credentials })
	const retweet = (id) => apiService.retweet({ id, credentials })
	const unretweet = (id) => apiService.unretweet({ id, credentials })

	const backendInteractorServiceInstance = {
	fetchStatus,
	fetchConversation,
	fetchFriends,
	exportFriends,
	fetchFollowers,
	followUser,
	unfollowUser,
	blockUser,
	unblockUser,
	fetchUser,
	fetchUserRelationship,
	verifyCredentials: apiService.verifyCredentials,
	startFetchingTimeline,
	startFetchingNotifications,
	fetchMutes,
	muteUser,
	unmuteUser,
	fetchBlocks,
	fetchOAuthTokens,
	revokeOAuthToken,
	fetchPinnedStatuses,
	pinOwnStatus,
	unpinOwnStatus,
	tagUser,
	untagUser,
	addRight,
	deleteRight,
	deleteUser,
	setActivationStatus,
	register,
	getCaptcha,
	updateAvatar,
	updateBg,
	updateBanner,
	updateProfile,
	externalProfile,
	importBlocks,
	importFollows,
	deleteAccount,
	changePassword,
	fetchSettingsMFA,
	generateMfaBackupCodes,
	mfaSetupOTP,
	mfaConfirmOTP,
	mfaDisableOTP,
	fetchFollowRequests,
	approveUser,
	denyUser,
	vote,
	fetchPoll,
	fetchFavoritedByUsers,
	fetchRebloggedByUsers,
	reportUser,
	favorite,
	unfavorite,
	retweet,
	unretweet,
	updateNotificationSettings
	}

	return backendInteractorServiceInstance
	}

	export default backendInteractorService
	diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
	index d9de10322b..9af71e4f40 100644
	--- a/src/services/entity_normalizer/entity_normalizer.service.js
	+++ b/src/services/entity_normalizer/entity_normalizer.service.js
	@@ -1,342 +1,345 @@
	const qvitterStatusType = (status) => {
	if (status.is_post_verb) {
	return 'status'
	}

	if (status.retweeted_status) {
	return 'retweet'
	}

	if ((typeof status.uri === 'string' && status.uri.match(/(fave\|objectType=Favourite)/)) \|\|
	(typeof status.text === 'string' && status.text.match(/favorited/))) {
	return 'favorite'
	}

	if (status.text.match(/deleted notice {{tag/) \|\| status.qvitter_delete_notice) {
	return 'deletion'
	}

	if (status.text.match(/started following/) \|\| status.activity_type === 'follow') {
	return 'follow'
	}

	return 'unknown'
	}

	export const parseUser = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('acct')
	// case for users in "mentions" property for statuses in MastoAPI
	const mastoShort = masto && !data.hasOwnProperty('avatar')

	output.id = String(data.id)

	if (masto) {
	output.screen_name = data.acct
	output.statusnet_profile_url = data.url

	// There's nothing else to get
	if (mastoShort) {
	return output
	}

	output.name = data.display_name
	output.name_html = addEmojis(data.display_name, data.emojis)

	output.description = data.note
	output.description_html = addEmojis(data.note, data.emojis)

	// Utilize avatar_static for gif avatars?
	output.profile_image_url = data.avatar
	output.profile_image_url_original = data.avatar

	// Same, utilize header_static?
	output.cover_photo = data.header

	output.friends_count = data.following_count

	output.bot = data.bot

	if (data.pleroma) {
	const relationship = data.pleroma.relationship

	+ output.background_image = data.pleroma.background_image
	+ output.token = data.pleroma.chat_token
	+
	if (relationship) {
	output.follows_you = relationship.followed_by
	output.following = relationship.following
	output.statusnet_blocking = relationship.blocking
	output.muted = relationship.muting
	}

	output.rights = {
	moderator: data.pleroma.is_moderator,
	admin: data.pleroma.is_admin
	}
	// TODO: Clean up in UI? This is duplication from what BE does for qvitterapi
	if (output.rights.admin) {
	output.role = 'admin'
	} else if (output.rights.moderator) {
	output.role = 'moderator'
	} else {
	output.role = 'member'
	}
	}

	if (data.source) {
	output.description = data.source.note
	output.default_scope = data.source.privacy
	if (data.source.pleroma) {
	output.no_rich_text = data.source.pleroma.no_rich_text
	output.show_role = data.source.pleroma.show_role
	}
	}

	// TODO: handle is_local
	output.is_local = !output.screen_name.includes('@')
	} else {
	output.screen_name = data.screen_name

	output.name = data.name
	output.name_html = data.name_html

	output.description = data.description
	output.description_html = data.description_html

	output.profile_image_url = data.profile_image_url
	output.profile_image_url_original = data.profile_image_url_original

	output.cover_photo = data.cover_photo

	output.friends_count = data.friends_count

	// output.bot = ??? missing

	output.statusnet_profile_url = data.statusnet_profile_url

	output.statusnet_blocking = data.statusnet_blocking

	output.is_local = data.is_local
	output.role = data.role
	output.show_role = data.show_role

	output.follows_you = data.follows_you

	output.muted = data.muted

	if (data.rights) {
	output.rights = {
	moderator: data.rights.delete_others_notice,
	admin: data.rights.admin
	}
	}
	output.no_rich_text = data.no_rich_text
	output.default_scope = data.default_scope
	output.hide_follows = data.hide_follows
	output.hide_followers = data.hide_followers
	output.background_image = data.background_image
	// on mastoapi this info is contained in a "relationship"
	output.following = data.following
	// Websocket token
	output.token = data.token
	}

	output.created_at = new Date(data.created_at)
	output.locked = data.locked
	output.followers_count = data.followers_count
	output.statuses_count = data.statuses_count
	output.friendIds = []
	output.followerIds = []
	output.pinnedStatuseIds = []

	if (data.pleroma) {
	output.follow_request_count = data.pleroma.follow_request_count

	output.tags = data.pleroma.tags
	output.deactivated = data.pleroma.deactivated

	output.notification_settings = data.pleroma.notification_settings
	}

	output.tags = output.tags \|\| []
	output.rights = output.rights \|\| {}
	output.notification_settings = output.notification_settings \|\| {}

	return output
	}

	export const parseAttachment = (data) => {
	const output = {}
	const masto = !data.hasOwnProperty('oembed')

	if (masto) {
	// Not exactly same...
	output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type
	output.meta = data.meta // not present in BE yet
	output.id = data.id
	} else {
	output.mimetype = data.mimetype
	// output.meta = ??? missing
	}

	output.url = data.url
	output.description = data.description

	return output
	}
	export const addEmojis = (string, emojis) => {
	return emojis.reduce((acc, emoji) => {
	return acc.replace(
	new RegExp(`:${emoji.shortcode}:`, 'g'),
	`<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
	)
	}, string)
	}

	export const parseStatus = (data) => {
	const output = {}
	const masto = data.hasOwnProperty('account')

	if (masto) {
	output.favorited = data.favourited
	output.fave_num = data.favourites_count

	output.repeated = data.reblogged
	output.repeat_num = data.reblogs_count

	output.type = data.reblog ? 'retweet' : 'status'
	output.nsfw = data.sensitive

	output.statusnet_html = addEmojis(data.content, data.emojis)

	output.tags = data.tags

	if (data.pleroma) {
	const { pleroma } = data
	output.text = pleroma.content ? data.pleroma.content['text/plain'] : data.content
	output.summary = pleroma.spoiler_text ? data.pleroma.spoiler_text['text/plain'] : data.spoiler_text
	output.statusnet_conversation_id = data.pleroma.conversation_id
	output.is_local = pleroma.local
	output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct
	} else {
	output.text = data.content
	output.summary = data.spoiler_text
	}

	output.in_reply_to_status_id = data.in_reply_to_id
	output.in_reply_to_user_id = data.in_reply_to_account_id
	output.replies_count = data.replies_count

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.reblog)
	}

	output.summary_html = addEmojis(data.spoiler_text, data.emojis)
	output.external_url = data.url
	output.poll = data.poll
	output.pinned = data.pinned
	} else {
	output.favorited = data.favorited
	output.fave_num = data.fave_num

	output.repeated = data.repeated
	output.repeat_num = data.repeat_num

	// catchall, temporary
	// Object.assign(output, data)

	output.type = qvitterStatusType(data)

	if (data.nsfw === undefined) {
	output.nsfw = isNsfw(data)
	if (data.retweeted_status) {
	output.nsfw = data.retweeted_status.nsfw
	}
	} else {
	output.nsfw = data.nsfw
	}

	output.statusnet_html = data.statusnet_html
	output.text = data.text

	output.in_reply_to_status_id = data.in_reply_to_status_id
	output.in_reply_to_user_id = data.in_reply_to_user_id
	output.in_reply_to_screen_name = data.in_reply_to_screen_name
	output.statusnet_conversation_id = data.statusnet_conversation_id

	if (output.type === 'retweet') {
	output.retweeted_status = parseStatus(data.retweeted_status)
	}

	output.summary = data.summary
	output.summary_html = data.summary_html
	output.external_url = data.external_url
	output.is_local = data.is_local
	}

	output.id = String(data.id)
	output.visibility = data.visibility
	output.card = data.card
	output.created_at = new Date(data.created_at)

	// Converting to string, the right way.
	output.in_reply_to_status_id = output.in_reply_to_status_id
	? String(output.in_reply_to_status_id)
	: null
	output.in_reply_to_user_id = output.in_reply_to_user_id
	? String(output.in_reply_to_user_id)
	: null

	output.user = parseUser(masto ? data.account : data.user)

	output.attentions = ((masto ? data.mentions : data.attentions) \|\| []).map(parseUser)

	output.attachments = ((masto ? data.media_attachments : data.attachments) \|\| [])
	.map(parseAttachment)

	const retweetedStatus = masto ? data.reblog : data.retweeted_status
	if (retweetedStatus) {
	output.retweeted_status = parseStatus(retweetedStatus)
	}

	output.favoritedBy = []
	output.rebloggedBy = []

	return output
	}

	export const parseNotification = (data) => {
	const mastoDict = {
	'favourite': 'like',
	'reblog': 'repeat'
	}
	const masto = !data.hasOwnProperty('ntype')
	const output = {}

	if (masto) {
	output.type = mastoDict[data.type] \|\| data.type
	output.seen = data.pleroma.is_seen
	output.status = output.type === 'follow'
	? null
	: parseStatus(data.status)
	output.action = output.status // TODO: Refactor, this is unneeded
	output.from_profile = parseUser(data.account)
	} else {
	const parsedNotice = parseStatus(data.notice)
	output.type = data.ntype
	output.seen = Boolean(data.is_seen)
	output.status = output.type === 'like'
	? parseStatus(data.notice.favorited_status)
	: parsedNotice
	output.action = parsedNotice
	output.from_profile = parseUser(data.from_profile)
	}

	output.created_at = new Date(data.created_at)
	output.id = parseInt(data.id)

	return output
	}

	const isNsfw = (status) => {
	const nsfwRegex = /#nsfw/i
	return (status.tags \|\| []).includes('nsfw') \|\| !!(status.text \|\| '').match(nsfwRegex)
	}
	diff --git a/static/config.json b/static/config.json
	index 04cbb97b5a..5cdb33a0ad 100644
	--- a/static/config.json
	+++ b/static/config.json
	@@ -1,25 +1,24 @@
	{
	"theme": "pleroma-dark",
	"background": "/static/aurora_borealis.jpg",
	"logo": "/static/logo.png",
	"logoMask": true,
	"logoMargin": ".1em",
	"redirectRootNoLogin": "/main/all",
	"redirectRootLogin": "/main/friends",
	"chatDisabled": false,
	"showInstanceSpecificPanel": false,
	- "formattingOptionsEnabled": false,
	"collapseMessageWithSubject": false,
	"scopeCopy": true,
	"subjectLineBehavior": "email",
	"postContentType": "text/plain",
	"alwaysShowSubjectInput": true,
	"hidePostStats": false,
	"hideUserStats": false,
	"loginMethod": "password",
	"webPushNotifications": false,
	"noAttachmentLinks": false,
	"nsfwCensorImage": "",
	"showFeaturesPanel": true,
	"minimalScopesMode": false
	}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 9, 3:01 AM (1 d, 19 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724145
Default Alt Text: (108 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions