akkoma-fe/src/components/user_settings/user_settings.js

356 lines
12 KiB
JavaScript
Raw Normal View History

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'
2019-02-07 08:05:59 +00:00
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'
2019-02-13 19:55:02 +00:00
import BlockCard from '../block_card/block_card.vue'
2019-02-14 03:04:28 +00:00
import MuteCard from '../mute_card/mute_card.vue'
import SelectableList from '../selectable_list/selectable_list.vue'
2019-04-04 17:30:34 +00:00
import ProgressButton from '../progress_button/progress_button.vue'
import EmojiInput from '../emoji-input/emoji-input.vue'
import suggestor from '../emoji-input/suggestor.js'
2019-04-02 20:10:03 +00:00
import Autosuggest from '../autosuggest/autosuggest.vue'
import Importer from '../importer/importer.vue'
2019-03-30 12:03:40 +00:00
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)
2019-02-14 03:04:28 +00:00
const UserSettings = {
data () {
return {
newName: this.$store.state.users.currentUser.name,
2019-02-04 20:03:01 +00:00
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,
2019-02-09 02:59:33 +00:00
pickAvatarBtnVisible: true,
2018-12-13 08:25:03 +00:00
bannerUploading: false,
backgroundUploading: false,
bannerPreview: null,
backgroundPreview: null,
bannerUploadError: null,
backgroundUploadError: null,
deletingAccount: false,
deleteAccountConfirmPasswordInput: '',
2018-05-21 22:01:09 +00:00
deleteAccountError: false,
changePasswordInputs: [ '', '', '' ],
changedPassword: false,
2018-08-18 23:23:03 +00:00
changePasswordError: false,
2019-05-25 07:01:02 +00:00
activeTab: 'profile',
notificationSettings: this.$store.state.users.currentUser.notification_settings
}
},
created () {
this.$store.dispatch('fetchTokens')
},
components: {
StyleSwitcher,
ScopeSelector,
2019-02-07 08:05:59 +00:00
TabSwitcher,
ImageCropper,
BlockList,
MuteList,
2019-04-02 10:12:31 +00:00
EmojiInput,
2019-04-02 20:10:03 +00:00
Autosuggest,
2019-04-02 20:14:45 +00:00
BlockCard,
2019-04-04 17:30:34 +00:00
MuteCard,
ProgressButton,
2019-03-30 12:03:40 +00:00
Importer,
Exporter
},
computed: {
user () {
return this.$store.state.users.currentUser
2017-12-23 14:44:22 +00:00
},
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
]})
},
2017-12-23 14:44:22 +00:00
pleromaBackend () {
2018-09-09 18:21:23 +00:00
return this.$store.state.instance.pleromaBackend
},
2019-03-30 10:41:42 +00:00
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()
}
})
2018-06-27 13:28:07 +00:00
}
},
methods: {
updateProfile () {
this.$store.state.api.backendInteractor
.updateProfile({
params: {
2019-04-27 18:04:30 +00:00
note: this.newBio,
locked: this.newLocked,
// Backend notation.
/* eslint-disable camelcase */
2019-04-27 18:04:30 +00:00
display_name: this.newName,
2019-04-28 01:51:17 +00:00
default_scope: this.newDefaultScope,
2019-04-27 18:04:30 +00:00
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)
})
},
2019-05-25 07:01:02 +00:00
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 }
2018-12-13 14:51:29 +00:00
if (file.size > this.$store.state.instance[slot + 'limit']) {
const filesize = fileSizeFormatService.fileSizeFormat(file.size)
2018-12-13 14:51:29 +00:00
const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
2018-12-13 14:44:37 +00:00
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
2018-12-13 14:44:37 +00:00
this[slot + 'Preview'] = img
2019-03-13 17:56:28 +00:00
this[slot] = file
}
reader.readAsDataURL(file)
},
submitAvatar (cropper, file) {
2019-03-22 17:00:58 +00:00
const that = this
return new Promise((resolve, reject) => {
function updateAvatar (avatar) {
2019-03-22 17:00:58 +00:00
that.$store.state.api.backendInteractor.updateAvatar({ avatar })
.then((user) => {
2019-03-22 17:00:58 +00:00
that.$store.commit('addNewUsers', [user])
that.$store.commit('setCurrentUser', user)
resolve()
})
.catch((err) => {
2019-03-22 17:00:58 +00:00
reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
})
}
2019-03-19 01:19:42 +00:00
if (cropper) {
cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
2018-12-12 16:31:16 +00:00
} else {
updateAvatar(file)
}
})
},
clearUploadError (slot) {
2018-12-13 14:44:37 +00:00
this[slot + 'UploadError'] = null
},
submitBanner () {
2018-12-13 08:25:03 +00:00
if (!this.bannerPreview) { return }
2018-12-13 08:25:03 +00:00
this.bannerUploading = true
2019-03-13 17:56:28 +00:00
this.$store.state.api.backendInteractor.updateBanner({banner: this.banner})
.then((user) => {
this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user)
2018-12-13 08:25:03 +00:00
this.bannerPreview = null
2019-03-13 17:56:28 +00:00
})
.catch((err) => {
this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
})
.then(() => { this.bannerUploading = false })
},
submitBg () {
2018-12-13 08:25:03 +00:00
if (!this.backgroundPreview) { return }
let img = this.backgroundPreview
2017-08-15 21:46:55 +00:00
// 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
2018-12-13 08:25:03 +00:00
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)
2018-12-13 08:25:03 +00:00
this.backgroundPreview = null
2018-12-12 16:31:16 +00:00
} else {
2018-12-13 08:25:03 +00:00
this.backgroundUploadError = this.$t('upload.error.base') + data.error
}
2018-12-13 08:25:03 +00:00
this.backgroundUploading = false
})
2017-12-23 14:44:22 +00:00
},
2019-03-30 09:10:57 +00:00
importFollows (file) {
2019-03-30 11:22:30 +00:00
return this.$store.state.api.backendInteractor.importFollows(file)
2019-03-30 09:10:57 +00:00
.then((status) => {
if (!status) {
throw new Error('failed')
}
})
},
2019-03-30 11:27:53 +00:00
importBlocks (file) {
return this.$store.state.api.backendInteractor.importBlocks(file)
.then((status) => {
if (!status) {
throw new Error('failed')
}
})
},
2019-03-30 12:17:37 +00:00
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')
},
2019-03-30 12:03:40 +00:00
getFollowsContent () {
return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
2019-03-30 12:17:37 +00:00
.then(this.generateExportableUsersContent)
2019-03-30 12:14:52 +00:00
},
getBlocksContent () {
return this.$store.state.api.backendInteractor.fetchBlocks()
2019-03-30 12:17:37 +00:00
.then(this.generateExportableUsersContent)
2018-05-13 23:47:08 +00:00
},
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
}
})
2018-05-21 22:01:09 +00:00
},
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()
2018-05-21 22:01:09 +00:00
} else {
this.changedPassword = false
this.changePasswordError = res.error
}
})
2018-08-18 23:23:03 +00:00
},
activateTab (tabName) {
this.activeTab = tabName
2018-11-30 13:30:55 +00:00
},
logout () {
2018-11-30 13:30:55 +00:00
this.$store.dispatch('logout')
this.$router.replace('/')
},
revokeToken (id) {
2019-02-20 23:51:28 +00:00
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
})
},
2019-04-02 20:14:45 +00:00
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')
})
2019-04-04 17:54:52 +00:00
},
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)
2019-04-06 18:56:50 +00:00
},
identity (value) {
return value
}
}
}
export default UserSettings