Add basic avatar changing.

This commit is contained in:
Roger Braun 2017-04-16 13:44:11 +02:00
parent 55edd6d8c2
commit 37c10be5e2
4 changed files with 58 additions and 2 deletions

View file

@ -13,6 +13,28 @@ const settings = {
components: { components: {
StyleSwitcher StyleSwitcher
}, },
computed: {
user () {
return this.$store.state.users.currentUser
}
},
methods: {
uploadAvatar ({target}) {
const file = target.files[0]
const reader = new FileReader()
reader.onload = ({target}) => {
const img = target.result
this.$store.state.api.backendInteractor.updateAvatar({params: {img}}).then((user) => {
if (!user.error) {
this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user)
}
})
}
reader.readAsDataURL(file)
}
},
watch: { watch: {
hideAttachmentsLocal (value) { hideAttachmentsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachments', value }) this.$store.dispatch('setOption', { name: 'hideAttachments', value })

View file

@ -8,6 +8,13 @@
<h2>Theme</h2> <h2>Theme</h2>
<style-switcher></style-switcher> <style-switcher></style-switcher>
</div> </div>
<div class="setting-item">
<h2>Avatar</h2>
<img :src="user.profile_image_url_original"></img>
<div>
<input name="avatar-upload" id="avatar-upload" type="file" @change="uploadAvatar" ></input>
</div>
</div>
<div class="setting-item"> <div class="setting-item">
<h2>Filtering</h2> <h2>Filtering</h2>
<p>All notices containing these words will be muted, one per line</p> <p>All notices containing these words will be muted, one per line</p>

View file

@ -18,6 +18,7 @@ const FOLLOWING_URL = '/api/friendships/create.json'
const UNFOLLOWING_URL = '/api/friendships/destroy.json' const UNFOLLOWING_URL = '/api/friendships/destroy.json'
const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json' const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
const REGISTRATION_URL = '/api/account/register.json' const REGISTRATION_URL = '/api/account/register.json'
const AVATAR_UPDATE_URL = '/api/qvitter/update_avatar.json'
// const USER_URL = '/api/users/show.json' // const USER_URL = '/api/users/show.json'
import { each } from 'lodash' import { each } from 'lodash'
@ -30,6 +31,29 @@ let fetch = (url, options) => {
return oldfetch(fullUrl, options) return oldfetch(fullUrl, options)
} }
// Params
// cropH
// cropW
// cropX
// cropY
// img (base 64 encodend data url)
const updateAvatar = ({credentials, params}) => {
let url = AVATAR_UPDATE_URL
const form = new FormData()
each(params, (value, key) => {
if (value) {
form.append(key, value)
}
})
return fetch(url, {
headers: authHeaders(credentials),
method: 'POST',
body: form
}).then((data) => data.json())
}
// Params needed: // Params needed:
// nickname // nickname
// email // email
@ -228,7 +252,8 @@ const apiService = {
fetchAllFollowing, fetchAllFollowing,
setUserMute, setUserMute,
fetchMutes, fetchMutes,
register register,
updateAvatar
} }
export default apiService export default apiService

View file

@ -37,6 +37,7 @@ const backendInteractorService = (credentials) => {
const fetchMutes = () => apiService.fetchMutes({credentials}) const fetchMutes = () => apiService.fetchMutes({credentials})
const register = (params) => apiService.register(params) const register = (params) => apiService.register(params)
const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params})
const backendInteractorServiceInstance = { const backendInteractorServiceInstance = {
fetchStatus, fetchStatus,
@ -49,7 +50,8 @@ const backendInteractorService = (credentials) => {
startFetching, startFetching,
setUserMute, setUserMute,
fetchMutes, fetchMutes,
register register,
updateAvatar
} }
return backendInteractorServiceInstance return backendInteractorServiceInstance