Commit 17b3e26c authored by feld's avatar feld

Merge branch 'wyatt777/pleroma-fe-issue-353' into 'mfc-develop'

Merge wyatt777/pleroma-fe-issue-353 into mfc-develop with some improvements

See merge request mfc/pleroma-fe!68
parents b8d317f8 549294f8
......@@ -6,6 +6,11 @@ const UserAvatar = {
'betterShadow',
'compact'
],
data () {
return {
defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
}
},
components: {
StillImage
}
......
......@@ -4,7 +4,7 @@
:alt="user.screen_name"
:title="user.screen_name"
:src="user.profile_image_url_original"
error-src="/images/avi.png"
:error-src="defaultAvatar"
:class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
/>
</template>
......
......@@ -53,8 +53,9 @@ const UserSettings = {
bannerPreview: null,
background: null,
backgroundPreview: null,
bannerUploadError: null,
backgroundUploadError: null,
bannerError: null,
backgroundError: null,
avatarResetError: null,
deactivatingAccount: false,
deactivateAccountConfirmTextInput: '',
deactivateAccountError: false,
......@@ -66,6 +67,8 @@ const UserSettings = {
changePasswordError: false,
activeTab: 'profile',
notificationSettings: this.$store.state.users.currentUser.notification_settings,
defaultAvatar: (this.$store.state.instance.server + this.$store.state.instance.defaultAvatar),
defaultBanner: (this.$store.state.instance.server + this.$store.state.instance.defaultBanner),
customFields: [],
customFieldCounter: 1,
fieldsSaveState: false,
......@@ -162,6 +165,27 @@ const UserSettings = {
validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
}
})
},
isDefaultAvatar () {
const baseAvatar = this.$store.state.instance.defaultAvatar
return !(this.$store.state.users.currentUser.profile_image_url) ||
this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
},
isDefaultBanner () {
const baseBanner = this.$store.state.instance.defaultBanner
return !(this.$store.state.users.currentUser.cover_photo) ||
this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
},
isDefaultBackground () {
return !(this.$store.state.users.currentUser.background_image)
},
avatarImgSrc () {
const src = this.$store.state.users.currentUser.profile_image_url_original
return (!src) ? this.defaultAvatar : src
},
bannerImgSrc () {
const src = this.$store.state.users.currentUser.cover_photo
return (!src) ? this.defaultBanner : src
}
},
methods: {
......@@ -247,6 +271,63 @@ const UserSettings = {
}
reader.readAsDataURL(file)
},
resetAvatar () {
const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
if (confirmed) {
this.removeAvatar()
}
},
resetBanner () {
const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
if (confirmed) {
this.removeBanner()
}
},
resetBg () {
const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
if (confirmed) {
this.removeBackground()
}
},
// TODO: Backend returns a user with undefined values. Should be made to match submitAvatar's
// response with the image set to nil.
removeAvatar () {
this.avatarResetError = null
this.$store.state.api.backendInteractor.removeAvatar()
.then(() => {
let currentUser = this.$store.state.users.currentUser
currentUser.profile_image_url = ''
currentUser.profile_image_url_original = ''
this.$store.commit('addNewUsers', [currentUser])
})
.catch((err) => {
this.avatarResetError = err.message
})
},
removeBanner () {
this.bannerError = null
this.$store.state.api.backendInteractor.removeBanner()
.then(() => {
let currentUser = this.$store.state.users.currentUser
currentUser.cover_photo = ''
this.$store.commit('addNewUsers', [currentUser])
})
.catch((err) => {
this.bannerError = err.message
})
},
removeBackground () {
this.backgroundError = null
this.$store.state.api.backendInteractor.removeBackground()
.then(() => {
let currentUser = this.$store.state.users.currentUser
currentUser.background_image = ''
this.$store.commit('addNewUsers', [currentUser])
})
.catch((err) => {
this.backgroundError = err.message
})
},
submitAvatar (cropper, file) {
const that = this
return new Promise((resolve, reject) => {
......@@ -269,9 +350,6 @@ const UserSettings = {
}
})
},
clearUploadError (slot) {
this[slot + 'UploadError'] = null
},
submitBanner () {
if (!this.bannerPreview) { return }
......@@ -283,7 +361,7 @@ const UserSettings = {
this.bannerPreview = null
})
.catch((err) => {
this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
this.bannerError = this.$t('upload.error.base') + ' ' + err.message
})
.then(() => { this.bannerUploading = false })
},
......@@ -297,7 +375,7 @@ const UserSettings = {
this.$store.commit('setCurrentUser', data)
this.backgroundPreview = null
} else {
this.backgroundUploadError = this.$t('upload.error.base') + data.error
this.backgroundError = this.$t('upload.error.base') + data.error
}
this.backgroundUploading = false
})
......
......@@ -202,7 +202,7 @@
</p>
<p>{{ $t('settings.current_avatar') }}</p>
<img
:src="user.profile_image_url_original"
:src="avatarImgSrc"
class="current-avatar"
>
<p>{{ $t('settings.set_new_avatar') }}</p>
......@@ -220,12 +220,29 @@
@open="pickAvatarBtnVisible=false"
@close="pickAvatarBtnVisible=true"
/>
<button
v-if="!isDefaultAvatar"
class="btn"
@click="resetAvatar"
>
{{ $t('settings.reset_avatar') }}
</button>
<div
v-if="avatarResetError"
class="alert error"
>
Error: {{ avatarResetError }}
<i
class="button-icon icon-cancel"
@click="avatarResetError = null"
/>
</div>
</div>
<div class="setting-item">
<h2>{{ $t('settings.profile_banner') }}</h2>
<p>{{ $t('settings.current_profile_banner') }}</p>
<img
:src="user.cover_photo"
:src="bannerImgSrc"
class="banner"
>
<p>{{ $t('settings.set_new_profile_banner') }}</p>
......@@ -251,14 +268,21 @@
>
{{ $t('general.submit') }}
</button>
<button
v-if="!isDefaultBanner"
class="btn btn-default"
@click="resetBanner"
>
{{ $t('settings.reset_profile_banner') }}
</button>
<div
v-if="bannerUploadError"
v-if="bannerError"
class="alert error"
>
Error: {{ bannerUploadError }}
Error: {{ bannerError }}
<i
class="button-icon icon-cancel"
@click="clearUploadError('banner')"
@click="bannerError = null"
/>
</div>
</div>
......@@ -287,14 +311,21 @@
>
{{ $t('general.submit') }}
</button>
<button
v-if="!isDefaultBackground"
class="btn btn-default"
@click="resetBg"
>
{{ $t('settings.reset_profile_background') }}
</button>
<div
v-if="backgroundUploadError"
v-if="backgroundError"
class="alert error"
>
Error: {{ backgroundUploadError }}
Error: {{ backgroundError }}
<i
class="button-icon icon-cancel"
@click="clearUploadError('background')"
@click="backgroundError = null"
/>
</div>
</div>
......
......@@ -7,7 +7,7 @@ function showWhoToFollow (panel, reply) {
panel.usersToFollow.forEach((toFollow, index) => {
let user = shuffled[index]
let img = user.avatar || '/images/avi.png'
let img = user.avatar || this.$store.state.instance.defaultAvatar
let name = user.acct
toFollow.img = img
......@@ -40,7 +40,7 @@ const WhoToFollowPanel = {
data: () => ({
usersToFollow: new Array(3).fill().map(x => (
{
img: '/images/avi.png',
img: this.$store.state.instance.defaultAvatar,
name: '',
id: 0
}
......
......@@ -330,6 +330,12 @@
"set_new_avatar": "Set new avatar",
"set_new_profile_background": "Set new profile background",
"set_new_profile_banner": "Set new profile banner",
"reset_avatar": "Reset avatar",
"reset_profile_background": "Reset profile background",
"reset_profile_banner": "Reset profile banner",
"reset_avatar_confirm": "Do you really want to reset the avatar?",
"reset_banner_confirm": "Do you really want to reset the banner?",
"reset_background_confirm": "Do you really want to reset the background?",
"settings": "Settings",
"subject_input_always_show": "Always show subject field",
"subject_line_behavior": "Copy subject when replying",
......
......@@ -310,6 +310,12 @@
"set_new_avatar": "あたらしいアバターをせっていする",
"set_new_profile_background": "あたらしいプロフィールのバックグラウンドをせっていする",
"set_new_profile_banner": "あたらしいプロフィールバナーを設定する",
"reset_avatar": "アバター削除",
"reset_profile_background": "プロフィールのバックグラウンド削除",
"reset_profile_banner": "プロフィールバナー削除",
"reset_avatar_confirm": "アバターを削除しますか?",
"reset_banner_confirm": "プロフィールバナーを削除しますか?",
"reset_background_confirm": "プロフィールのバックグラウンドを削除しますか?",
"settings": "せってい",
"subject_input_always_show": "サブジェクトフィールドをいつでもひょうじする",
"subject_line_behavior": "リプライするときサブジェクトをコピーする",
......
......@@ -17,6 +17,8 @@ const defaultState = {
redirectRootLogin: '/main/friends',
showInstanceSpecificPanel: false,
alwaysShowSubjectInput: true,
defaultAvatar: '/images/avi.png',
defaultBanner: '/images/banner.png',
hideMutedPosts: false,
// collapseMessageWithSubject: false, // MFC disabled
hidePostStats: false,
......
......@@ -28,6 +28,10 @@ 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 AVATAR_PATCH_URL = '/api/v1/pleroma/accounts/update_avatar'
const BANNER_PATCH_URL = '/api/v1/pleroma/accounts/update_banner'
const BACKGROUND_PATCH_URL = '/api/v1/pleroma/accounts/update_background'
const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
......@@ -143,6 +147,33 @@ const updateAvatar = ({ credentials, avatar }) => {
.then((data) => parseUser(data))
}
const removeAvatar = ({ credentials }) => {
return promisedRequest({
url: AVATAR_PATCH_URL,
method: 'PATCH',
payload: { img: '' },
credentials
}).then((data) => parseUser(data))
}
const removeBanner = ({ credentials }) => {
return promisedRequest({
url: BANNER_PATCH_URL,
method: 'PATCH',
payload: { banner: '' },
credentials
}).then((data) => parseUser(data))
}
const removeBackground = ({ credentials }) => {
return promisedRequest({
url: BACKGROUND_PATCH_URL,
method: 'PATCH',
payload: { img: '' },
credentials
}).then((data) => parseUser(data))
}
const updateBg = ({ credentials, background }) => {
const form = new FormData()
form.append('pleroma_background_image', background)
......@@ -976,6 +1007,9 @@ const apiService = {
register,
getCaptcha,
updateAvatar,
removeAvatar,
removeBanner,
removeBackground,
updateBg,
updateProfile,
updateBanner,
......
......@@ -123,6 +123,9 @@ const backendInteractorService = credentials => {
const getCaptcha = () => apiService.getCaptcha()
const register = (params) => apiService.register({ credentials, params })
const updateAvatar = ({ avatar }) => apiService.updateAvatar({ credentials, avatar })
const removeAvatar = () => apiService.removeAvatar({ credentials })
const removeBanner = () => apiService.removeBanner({ credentials })
const removeBackground = () => apiService.removeBackground({ credentials })
const updateBg = ({ background }) => apiService.updateBg({ credentials, background })
const updateBanner = ({ banner }) => apiService.updateBanner({ credentials, banner })
const updateProfile = ({ params }) => apiService.updateProfile({ credentials, params })
......@@ -193,6 +196,9 @@ const backendInteractorService = credentials => {
register,
getCaptcha,
updateAvatar,
removeAvatar,
removeBanner,
removeBackground,
updateBg,
updateBanner,
updateProfile,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment