No OneTemporary
Actions

Authored By

Unknown

Size

69 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 603de3483a..ea5a3f58c0 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,293 +1,301 @@
	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'

	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
	})

	copyInstanceOption('redirectRootNoLogin')
	copyInstanceOption('redirectRootLogin')
	copyInstanceOption('showInstanceSpecificPanel')
	copyInstanceOption('minimalScopesMode')
	copyInstanceOption('formattingOptionsEnabled')
	copyInstanceOption('hideMutedPosts')
	copyInstanceOption('collapseMessageWithSubject')
	copyInstanceOption('loginMethod')
	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] }
	+ return {
	+ shortcode: key,
	+ image_url: false,
	+ 'replacement': 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] }
	+ return {
	+ shortcode: key,
	+ image_url: values[key].image_url \|\| values[key],
	+ replacement: `:${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 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: '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 })
	}

	const checkOAuthToken = async ({ store }) => {
	return new Promise(async (resolve, reject) => {
	if (store.state.oauth.token) {
	try {
	await store.dispatch('loginUser', store.state.oauth.token)
	} 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/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
	index a5bb6eaf4a..466341c07e 100644
	--- a/src/components/emoji-input/emoji-input.js
	+++ b/src/components/emoji-input/emoji-input.js
	@@ -1,107 +1,136 @@
	import Completion from '../../services/completion/completion.js'
	-import { take, filter, map } from 'lodash'
	+import { take } from 'lodash'

	const EmojiInput = {
	props: [
	- 'value',
	'placeholder',
	+ 'suggest',
	+ 'value',
	'type',
	'classname'
	],
	data () {
	return {
	+ input: undefined,
	highlighted: 0,
	caret: 0
	}
	},
	computed: {
	suggestions () {
	const firstchar = this.textAtCaret.charAt(0)
	- 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) => ({
	- shortcode: `:${shortcode}:`,
	- utf: utf \|\| '',
	- // eslint-disable-next-line camelcase
	- img: utf ? '' : this.$store.state.instance.server + image_url,
	- highlighted: index === this.highlighted
	- }))
	- } else {
	+ if (this.textAtCaret === firstchar) { return }
	+ const matchedSuggestions = this.suggest(this.textAtCaret)
	+ if (matchedSuggestions.length <= 0) {
	return false
	}
	+ return take(matchedSuggestions, 5).map(({shortcode, image_url, replacement}, index) => ({
	+ shortcode,
	+ replacement,
	+ // eslint-disable-next-line camelcase
	+ img: !image_url ? '' : this.$store.state.instance.server + image_url,
	+ highlighted: index === this.highlighted
	+ }))
	},
	textAtCaret () {
	return (this.wordAtCaret \|\| {}).word \|\| ''
	},
	wordAtCaret () {
	- const word = Completion.wordAtPosition(this.value, this.caret - 1) \|\| {}
	- return word
	- },
	- emoji () {
	- return this.$store.state.instance.emoji \|\| []
	+ if (this.value && this.caret) {
	+ const word = Completion.wordAtPosition(this.value, this.caret - 1) \|\| {}
	+ return word
	+ }
	},
	- customEmoji () {
	- return this.$store.state.instance.customEmoji \|\| []
	+ },
	+ mounted () {
	+ const slots = this.$slots.default
	+ if (slots.length === 0) return
	+ const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
	+ if (!input) return
	+ this.input = input
	+ input.elm.addEventListener('keyup', this.setCaret)
	+ input.elm.addEventListener('paste', this.setCaret)
	+ input.elm.addEventListener('focus', this.setCaret)
	+ input.elm.addEventListener('keydown', this.onKeyDown)
	+ },
	+ unmounted () {
	+ if (this.input) {
	+ this.input.elm.removeEventListener('keyup', this.setCaret)
	+ this.input.elm.removeEventListener('paste', this.setCaret)
	+ this.input.elm.removeEventListener('focus', this.setCaret)
	+ this.input.elm.removeEventListener('keydown', this.onKeyDown)
	}
	},
	methods: {
	replace (replacement) {
	const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
	this.$emit('input', newValue)
	this.caret = 0
	},
	- replaceEmoji (e) {
	+ replaceText () {
	const len = this.suggestions.length \|\| 0
	- if (this.textAtCaret === ':' \|\| e.ctrlKey) { return }
	+ if (this.textAtCaret.length === 1) { return }
	if (len > 0) {
	- e.preventDefault()
	- const emoji = this.suggestions[this.highlighted]
	- const replacement = emoji.utf \|\| (emoji.shortcode + ' ')
	+ const suggestion = this.suggestions[this.highlighted]
	+ const replacement = suggestion.replacement
	const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
	this.$emit('input', newValue)
	this.caret = 0
	this.highlighted = 0
	}
	},
	- cycleBackward (e) {
	+ cycleBackward () {
	const len = this.suggestions.length \|\| 0
	if (len > 0) {
	- e.preventDefault()
	this.highlighted -= 1
	if (this.highlighted < 0) {
	this.highlighted = this.suggestions.length - 1
	}
	} else {
	this.highlighted = 0
	}
	},
	- cycleForward (e) {
	+ cycleForward () {
	const len = this.suggestions.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) {
	+ onKeyDown (e) {
	+ this.setCaret(e)
	e.stopPropagation()
	+
	+ const { ctrlKey, shiftKey, key } = e
	+ if (key === 'Tab') {
	+ if (shiftKey) {
	+ this.cycleBackward()
	+ } else {
	+ this.cycleForward()
	+ }
	+ }
	+ if (key === 'ArrowUp') {
	+ this.cycleBackward()
	+ } else if (key === 'ArrowDown') {
	+ this.cycleForward()
	+ }
	+ if (key === 'Enter') {
	+ if (!ctrlKey) {
	+ this.replaceText()
	+ }
	+ }
	},
	onInput (e) {
	this.$emit('input', e.target.value)
	},
	- setCaret ({target: {selectionStart}}) {
	+ setCaret ({ target: { selectionStart, value } }) {
	this.caret = selectionStart
	}
	}
	}

	export default EmojiInput
	diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
	index 338b77cd06..eec33d1ad6 100644
	--- a/src/components/emoji-input/emoji-input.vue
	+++ b/src/components/emoji-input/emoji-input.vue
	@@ -1,64 +1,48 @@
	<template>
	<div class="emoji-input">
	- <input
	- v-if="type !== 'textarea'"
	+ <slot
	:class="classname"
	- :type="type"
	:value="value"
	:placeholder="placeholder"
	@input="onInput"
	@click="setCaret"
	@keyup="setCaret"
	@keydown="onKeydown"
	@keydown.down="cycleForward"
	@keydown.up="cycleBackward"
	@keydown.shift.tab="cycleBackward"
	@keydown.tab="cycleForward"
	@keydown.enter="replaceEmoji"
	- />
	- <textarea
	- v-else
	- :class="classname"
	- :value="value"
	- :placeholder="placeholder"
	- @input="onInput"
	- @click="setCaret"
	- @keyup="setCaret"
	- @keydown="onKeydown"
	- @keydown.down="cycleForward"
	- @keydown.up="cycleBackward"
	- @keydown.shift.tab="cycleBackward"
	- @keydown.tab="cycleForward"
	- @keydown.enter="replaceEmoji"
	- ></textarea>
	+ >
	+ </slot>
	<div class="autocomplete-panel" v-if="suggestions">
	<div class="autocomplete-panel-body">
	<div
	- v-for="(emoji, index) in suggestions"
	+ v-for="(suggestion, index) in suggestions"
	:key="index"
	- @click="replace(emoji.utf \|\| (emoji.shortcode + ' '))"
	+ @click="replace(suggestion.replacement)"
	class="autocomplete-item"
	- :class="{ highlighted: emoji.highlighted }"
	+ :class="{ highlighted: suggestion.highlighted }"
	>
	- <span v-if="emoji.img">
	- <img :src="emoji.img" />
	+ <span v-if="suggestion.img">
	+ <img :src="suggestion.img" />
	</span>
	- <span v-else>{{emoji.utf}}</span>
	- <span>{{emoji.shortcode}}</span>
	+ <span v-else>{{suggestion.replacement}}</span>
	+ <span>{{suggestion.shortcode}}</span>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./emoji-input.js"></script>

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

	.emoji-input {
	.form-control {
	width: 100%;
	}
	}
	</style>
	diff --git a/src/components/emoji-input/suggestor.js b/src/components/emoji-input/suggestor.js
	new file mode 100644
	index 0000000000..f1a0d0da85
	--- /dev/null
	+++ b/src/components/emoji-input/suggestor.js
	@@ -0,0 +1,38 @@
	+export default function suggest (data) {
	+ return input => {
	+ const trimmed = input.trim()
	+ const firstChar = trimmed[0]
	+ console.log(`'${trimmed}'`, firstChar, firstChar === ':')
	+ if (firstChar === ':' && data.emoji) {
	+ return suggestEmoji(data.emoji)(trimmed)
	+ }
	+ if (firstChar === '@' && data.users) {
	+ return suggestUsers(data.users)(trimmed)
	+ }
	+ return []
	+ }
	+}
	+
	+function suggestEmoji (emojis) {
	+ return input => {
	+ const shortcode = input.toLowerCase().substr(1)
	+ console.log(shortcode)
	+ return emojis.filter(emoji => emoji.shortcode.toLowerCase().startsWith(shortcode))
	+ }
	+}
	+
	+function suggestUsers (users) {
	+ return input => {
	+ const shortcode = input.toLowerCase().substr(1)
	+ return users.filter(
	+ user =>
	+ user.screen_name.toLowerCase().startsWith('@' + shortcode) \|\|
	+ user.name.toLowerCase().startsWith(shortcode)
	+ ).map(({ screen_name, name, profile_image_url_original }) => ({
	+ shortcode: screen_name,
	+ detail: name,
	+ image_url: profile_image_url_original,
	+ replacement: '@' + screen_name
	+ }))
	+ }
	+}
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index cbd2024a80..1516dd4349 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,351 +1,309 @@
	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 fileTypeService from '../../services/file_type/file_type.service.js'
	import Completion from '../../services/completion/completion.js'
	import { take, filter, reject, map, uniqBy } from 'lodash'
	+import suggestor from '../emoji-input/suggestor.js'

	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,
	ScopeSelector,
	EmojiInput
	},
	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: [],
	visibility: scope,
	contentType
	},
	caret: 0
	}
	},
	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
	},
	+ emojiUserSuggestor () {
	+ return suggestor({
	+ emoji: [
	+ ...this.$store.state.instance.emoji,
	+ ...this.$store.state.instance.customEmoji
	+ ],
	+ users: this.$store.state.users.users
	+ })
	+ },
	+ emojiSuggestor () {
	+ suggestor({ emoji: [
	+ ...this.$store.state.instance.emoji,
	+ ...this.$store.state.instance.customEmoji
	+ ]})
	+ },
	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
	},
	hideScopeNotice () {
	return this.$store.state.config.hideScopeNotice
	}
	},
	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
	}
	}

	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
	}).then((data) => {
	if (!data.error) {
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType
	}
	this.$refs.mediaUpload.clearFile()
	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
	},
	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 25c5284f64..507b14bf75 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,292 +1,280 @@
	<template>
	<div class="post-status-form">
	<form @submit.prevent="postStatus(newStatus)">
	<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
	+ <emoji-input
	+ :suggest="emojiSuggestor" v-model="newStatus.spoilerText"
	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>
	+ >
	+ <input
	+
	+ type="text"
	+ :placeholder="$t('post_status.content_warning')"
	+ v-model="newStatus.spoilerText"
	+ classname="form-control"
	+ />
	+ </emoji-input>
	+ <emoji-input :suggest="emojiUserSuggestor" v-model="newStatus.status">
	+ <textarea
	+ ref="textarea"
	+ v-model="newStatus.status"
	+ :placeholder="$t('post_status.default')"
	+ rows="1"
	+ class="form-control"
	+ @keydown.meta.enter="postStatus(newStatus)"
	+ @keyup.ctrl.enter="postStatus(newStatus)"
	+ @drop="fileDrop"
	+ @dragover.prevent="fileDrag"
	+ @input="resize"
	+ @paste="paste"
	+ :disabled="posting"
	+ >
	+ </textarea>
	+ </emoji-input>
	<div class="visibility-tray">
	<div class="text-format" v-if="formattingOptionsEnabled">
	<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>

	<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>
	<div class='form-bottom'>
	<media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>

	<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;
	}
	}

	.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;
	}
	}
	</style>
	diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
	index ae36e5e8fe..ca7c23ece4 100644
	--- a/src/components/user_settings/user_settings.js
	+++ b/src/components/user_settings/user_settings.js
	@@ -1,339 +1,355 @@
	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 suggestor from '../emoji-input/suggestor.js'
	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'

	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,
	bannerPreview: 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
	},
	computed: {
	user () {
	return this.$store.state.users.currentUser
	},
	+ emojiUserSuggestor () {
	+ return suggestor({
	+ emoji: [
	+ ...this.$store.state.instance.emoji,
	+ ...this.$store.state.instance.customEmoji
	+ ],
	+ users: this.$store.state.users.users
	+ })
	+ },
	+ emojiSuggestor () {
	+ suggestor({ emoji: [
	+ ...this.$store.state.instance.emoji,
	+ ...this.$store.state.instance.customEmoji
	+ ]})
	+ },
	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
	this.backgroundUploading = true
	this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
	if (!data.error) {
	let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
	clone.background_image = data.url
	this.$store.commit('addNewUsers', [clone])
	this.$store.commit('setCurrentUser', clone)
	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/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
	index 20b1097995..d3d333bd70 100644
	--- a/src/components/user_settings/user_settings.vue
	+++ b/src/components/user_settings/user_settings.vue
	@@ -1,351 +1,353 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	<div class="title">
	{{$t('settings.user_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 profile-edit">
	<tab-switcher>
	<div :label="$t('settings.profile_tab')">
	<div class="setting-item" >
	<h2>{{$t('settings.name_bio')}}</h2>
	<p>{{$t('settings.name')}}</p>
	- <EmojiInput
	- type="text"
	- v-model="newName"
	- id="username"
	- classname="name-changer"
	- />
	+ <emoji-input :suggest="emojiSuggestor" v-model="newName">
	+ <input
	+ v-model="newName"
	+ id="username"
	+ classname="name-changer"
	+ />
	+ </emoji-input>
	<p>{{$t('settings.bio')}}</p>
	- <EmojiInput
	- type="textarea"
	- v-model="newBio"
	- classname="bio"
	- />
	+ <emoji-input :suggest="emojiUserSuggestor" v-model="newBio">
	+ <textarea
	+ v-model="newBio"
	+ classname="bio"
	+ />
	+ </emoji-input>
	<p>
	<input type="checkbox" v-model="newLocked" id="account-locked">
	<label for="account-locked">{{$t('settings.lock_account_description')}}</label>
	</p>
	<div>
	<label for="default-vis">{{$t('settings.default_vis')}}</label>
	<div id="default-vis" class="visibility-tray">
	<scope-selector
	:showAll="true"
	:userDefault="newDefaultScope"
	:onScopeChange="changeVis"/>
	</div>
	</div>
	<p>
	<input type="checkbox" v-model="newNoRichText" id="account-no-rich-text">
	<label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
	</p>
	<p>
	<input type="checkbox" v-model="hideFollows" id="account-hide-follows">
	<label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label>
	</p>
	<p>
	<input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
	<label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
	</p>
	<p>
	<input type="checkbox" v-model="showRole" id="account-show-role">
	<label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
	<label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
	</p>
	<button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
	</div>
	<div class="setting-item">
	<h2>{{$t('settings.avatar')}}</h2>
	<p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
	<p>{{$t('settings.current_avatar')}}</p>
	<img :src="user.profile_image_url_original" class="current-avatar" />
	<p>{{$t('settings.set_new_avatar')}}</p>
	<button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
	<image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
	</div>
	<div class="setting-item">
	<h2>{{$t('settings.profile_banner')}}</h2>
	<p>{{$t('settings.current_profile_banner')}}</p>
	<img :src="user.cover_photo" class="banner" />
	<p>{{$t('settings.set_new_profile_banner')}}</p>
	<img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" />
	<div>
	<input type="file" @change="uploadFile('banner', $event)" />
	</div>
	<i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
	<button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
	<div class='alert error' v-if="bannerUploadError">
	Error: {{ bannerUploadError }}
	<i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
	</div>
	</div>
	<div class="setting-item">
	<h2>{{$t('settings.profile_background')}}</h2>
	<p>{{$t('settings.set_new_profile_background')}}</p>
	<img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" />
	<div>
	<input type="file" @change="uploadFile('background', $event)" />
	</div>
	<i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
	<button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
	<div class='alert error' v-if="backgroundUploadError">
	Error: {{ backgroundUploadError }}
	<i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
	</div>
	</div>
	</div>

	<div :label="$t('settings.security_tab')">
	<div class="setting-item">
	<h2>{{$t('settings.change_password')}}</h2>
	<div>
	<p>{{$t('settings.current_password')}}</p>
	<input type="password" v-model="changePasswordInputs[0]">
	</div>
	<div>
	<p>{{$t('settings.new_password')}}</p>
	<input type="password" v-model="changePasswordInputs[1]">
	</div>
	<div>
	<p>{{$t('settings.confirm_new_password')}}</p>
	<input type="password" v-model="changePasswordInputs[2]">
	</div>
	<button class="btn btn-default" @click="changePassword">{{$t('general.submit')}}</button>
	<p v-if="changedPassword">{{$t('settings.changed_password')}}</p>
	<p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p>
	<p v-if="changePasswordError">{{changePasswordError}}</p>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.oauth_tokens')}}</h2>
	<table class="oauth-tokens">
	<thead>
	<tr>
	<th>{{$t('settings.app_name')}}</th>
	<th>{{$t('settings.valid_until')}}</th>
	<th></th>
	</tr>
	</thead>
	<tbody>
	<tr v-for="oauthToken in oauthTokens" :key="oauthToken.id">
	<td>{{oauthToken.appName}}</td>
	<td>{{oauthToken.validUntil}}</td>
	<td class="actions">
	<button class="btn btn-default" @click="revokeToken(oauthToken.id)">
	{{$t('settings.revoke_token')}}
	</button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.delete_account')}}</h2>
	<p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
	<div v-if="deletingAccount">
	<p>{{$t('settings.delete_account_instructions')}}</p>
	<p>{{$t('login.password')}}</p>
	<input type="password" v-model="deleteAccountConfirmPasswordInput">
	<button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button>
	</div>
	<p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p>
	<p v-if="deleteAccountError">{{deleteAccountError}}</p>
	<button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button>
	</div>
	</div>

	<div :label="$t('settings.notifications')" v-if="pleromaBackend">
	<div class="setting-item">
	<div class="select-multiple">
	<span class="label">{{$t('settings.notification_setting')}}</span>
	<ul class="option-list">
	<li>
	<input type="checkbox" id="notification-setting-follows" v-model="notificationSettings.follows">
	<label for="notification-setting-follows">
	{{$t('settings.notification_setting_follows')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-setting-followers" v-model="notificationSettings.followers">
	<label for="notification-setting-followers">
	{{$t('settings.notification_setting_followers')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-setting-non-follows" v-model="notificationSettings.non_follows">
	<label for="notification-setting-non-follows">
	{{$t('settings.notification_setting_non_follows')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-setting-non-followers" v-model="notificationSettings.non_followers">
	<label for="notification-setting-non-followers">
	{{$t('settings.notification_setting_non_followers')}}
	</label>
	</li>
	</ul>
	</div>
	<p>{{$t('settings.notification_mutes')}}</p>
	<p>{{$t('settings.notification_blocks')}}</p>
	<button class="btn btn-default" @click="updateNotificationSettings">{{$t('general.submit')}}</button>
	</div>
	</div>

	<div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend">
	<div class="setting-item">
	<h2>{{$t('settings.follow_import')}}</h2>
	<p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
	<Importer :submitHandler="importFollows" :successMessage="$t('settings.follows_imported')" :errorMessage="$t('settings.follow_import_error')" />
	</div>
	<div class="setting-item">
	<h2>{{$t('settings.follow_export')}}</h2>
	<Exporter :getContent="getFollowsContent" filename="friends.csv" :exportButtonLabel="$t('settings.follow_export_button')" />
	</div>
	<div class="setting-item">
	<h2>{{$t('settings.block_import')}}</h2>
	<p>{{$t('settings.import_blocks_from_a_csv_file')}}</p>
	<Importer :submitHandler="importBlocks" :successMessage="$t('settings.blocks_imported')" :errorMessage="$t('settings.block_import_error')" />
	</div>
	<div class="setting-item">
	<h2>{{$t('settings.block_export')}}</h2>
	<Exporter :getContent="getBlocksContent" filename="blocks.csv" :exportButtonLabel="$t('settings.block_export_button')" />
	</div>
	</div>

	<div :label="$t('settings.blocks_tab')">
	<div class="profile-edit-usersearch-wrapper">
	<Autosuggest :filter="filterUnblockedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_block')">
	<BlockCard slot-scope="row" :userId="row.item"/>
	</Autosuggest>
	</div>
	<BlockList :refresh="true" :getKey="identity">
	<template slot="header" slot-scope="{selected}">
	<div class="profile-edit-bulk-actions">
	<ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => blockUsers(selected)">
	{{ $t('user_card.block') }}
	<template slot="progress">{{ $t('user_card.block_progress') }}</template>
	</ProgressButton>
	<ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unblockUsers(selected)">
	{{ $t('user_card.unblock') }}
	<template slot="progress">{{ $t('user_card.unblock_progress') }}</template>
	</ProgressButton>
	</div>
	</template>
	<template slot="item" slot-scope="{item}"><BlockCard :userId="item" /></template>
	<template slot="empty">{{$t('settings.no_blocks')}}</template>
	</BlockList>
	</div>

	<div :label="$t('settings.mutes_tab')">
	<div class="profile-edit-usersearch-wrapper">
	<Autosuggest :filter="filterUnMutedUsers" :query="queryUserIds" :placeholder="$t('settings.search_user_to_mute')">
	<MuteCard slot-scope="row" :userId="row.item"/>
	</Autosuggest>
	</div>
	<MuteList :refresh="true" :getKey="identity">
	<template slot="header" slot-scope="{selected}">
	<div class="profile-edit-bulk-actions">
	<ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => muteUsers(selected)">
	{{ $t('user_card.mute') }}
	<template slot="progress">{{ $t('user_card.mute_progress') }}</template>
	</ProgressButton>
	<ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unmuteUsers(selected)">
	{{ $t('user_card.unmute') }}
	<template slot="progress">{{ $t('user_card.unmute_progress') }}</template>
	</ProgressButton>
	</div>
	</template>
	<template slot="item" slot-scope="{item}"><MuteCard :userId="item" /></template>
	<template slot="empty">{{$t('settings.no_mutes')}}</template>
	</MuteList>
	</div>
	</tab-switcher>
	</div>
	</div>
	</template>

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

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

	.profile-edit {
	.bio {
	margin: 0;
	}

	.visibility-tray {
	padding-top: 5px;
	}

	input[type=file] {
	padding: 5px;
	height: auto;
	}

	.banner {
	max-width: 100%;
	}

	.uploading {
	font-size: 1.5em;
	margin: 0.25em;
	}

	.name-changer {
	width: 100%;
	}

	.bg {
	max-width: 100%;
	}

	.current-avatar {
	display: block;
	width: 150px;
	height: 150px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	}

	.oauth-tokens {
	width: 100%;

	th {
	text-align: left;
	}

	.actions {
	text-align: right;
	}
	}

	&-usersearch-wrapper {
	padding: 1em;
	}

	&-bulk-actions {
	text-align: right;
	padding: 0 1em;
	min-height: 28px;

	button {
	width: 10em;
	}
	}
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 5:24 AM (1 d, 3 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1799542
Default Alt Text: (69 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions