Commit caa748fa authored by Shpuld Shpludson's avatar Shpuld Shpludson

streamline profile image api, update reset ui for all profile images to match...

streamline profile image api, update reset ui for all profile images to match avatar, remove unnecessary stuff
parent 01e67cfd
Pipeline #27920 passed with stages
in 8 minutes and 50 seconds
......@@ -180,75 +180,26 @@ const ProfileTab = {
resetAvatar () {
const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
if (confirmed) {
this.removeAvatar()
this.submitAvatar(undefined, null)
}
},
resetBanner () {
const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
if (confirmed) {
this.removeBanner()
this.submitBanner(null)
}
},
resetBg () {
resetBackground () {
const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
if (confirmed) {
this.removeBackground()
this.submitBg(null)
}
},
// Backend returns a completely blank account object with undefined values.
// That's why we modify current account in state instead of adding the new one
// that was returned by the backend.
removeAvatar () {
return new Promise((resolve, reject) => {
this.$store.state.api.backendInteractor.removeAvatar({})
.then((user) => {
let currentUser = this.$store.state.users.currentUser
currentUser.profile_image_url = this.defaultAvatar
currentUser.profile_image_url_original = this.defaultAvatar
this.$store.commit('addNewUsers', [currentUser])
this.$store.commit('setCurrentUser', currentUser)
resolve()
})
.catch((err) => {
reject(new Error(this.$t('upload.error.base') + ' ' + err.message))
})
})
},
removeBanner () {
return new Promise((resolve, reject) => {
this.$store.state.api.backendInteractor.removeBanner({})
.then((user) => {
let currentUser = this.$store.state.users.currentUser
currentUser.cover_photo = this.defaultBanner
this.$store.commit('addNewUsers', [currentUser])
this.$store.commit('setCurrentUser', currentUser)
resolve()
})
.catch((err) => {
reject(new Error(this.$t('upload.error.base') + ' ' + err.message))
})
})
},
removeBackground () {
return new Promise((resolve, reject) => {
this.$store.state.api.backendInteractor.removeBackground({})
.then((user) => {
let currentUser = this.$store.state.users.currentUser
currentUser.background_image = ''
this.$store.commit('addNewUsers', [currentUser])
this.$store.commit('setCurrentUser', currentUser)
resolve()
})
.catch((err) => {
reject(new Error(this.$t('upload.error.base') + ' ' + err.message))
})
})
},
submitAvatar (cropper, file) {
const that = this
return new Promise((resolve, reject) => {
function updateAvatar (avatar) {
that.$store.state.api.backendInteractor.updateAvatar({ avatar })
that.$store.state.api.backendInteractor.updateProfileImages({ avatar })
.then((user) => {
that.$store.commit('addNewUsers', [user])
that.$store.commit('setCurrentUser', user)
......@@ -266,11 +217,11 @@ const ProfileTab = {
}
})
},
submitBanner () {
if (!this.bannerPreview) { return }
submitBanner (banner) {
if (!this.bannerPreview && banner !== null) { return }
this.bannerUploading = true
this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
this.$store.state.api.backendInteractor.updateProfileImages({ banner })
.then((user) => {
this.$store.commit('addNewUsers', [user])
this.$store.commit('setCurrentUser', user)
......@@ -281,11 +232,11 @@ const ProfileTab = {
})
.then(() => { this.bannerUploading = false })
},
submitBg () {
if (!this.backgroundPreview) { return }
let background = this.background
submitBackground (background) {
if (!this.backgroundPreview && background !== null) { return }
this.backgroundUploading = true
this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => {
if (!data.error) {
this.$store.commit('addNewUsers', [data])
this.$store.commit('setCurrentUser', data)
......
......@@ -13,8 +13,14 @@
height: auto;
}
.banner {
.banner-background-preview {
max-width: 100%;
width: 300px;
position: relative;
img {
width: 100%;
}
}
.uploading {
......@@ -26,10 +32,6 @@
width: 100%;
}
.bg {
max-width: 100%;
}
.current-avatar-container {
position: relative;
width: 150px;
......@@ -51,7 +53,7 @@
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
background-color: rgba(0, 0, 0, 0.6);
opacity: 0.6;
opacity: 0.7;
color: white;
width: 1.5em;
height: 1.5em;
......@@ -112,6 +114,7 @@
&>.emoji-input {
flex: 1 1 auto;
margin: 0 .2em .5em;
min-width: 0;
}
&>.icon-container {
......
......@@ -161,7 +161,6 @@
<p class="visibility-notice">
{{ $t('settings.avatar_size_instruction') }}
</p>
<p>{{ $t('settings.current_avatar') }}</p>
<div class="current-avatar-container">
<img
:src="user.profile_image_url_original"
......@@ -193,15 +192,20 @@
</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"
>
<div class="banner-background-preview">
<img :src="user.cover_photo">
<i
v-if="!isDefaultBanner"
:title="$t('settings.reset_profile_banner')"
class="reset-button icon-cancel"
type="button"
@click="resetBanner"
/>
</div>
<p>{{ $t('settings.set_new_profile_banner') }}</p>
<img
v-if="bannerPreview"
class="banner"
class="banner-background-preview"
:src="bannerPreview"
>
<div>
......@@ -217,17 +221,10 @@
<button
v-else-if="bannerPreview"
class="btn btn-default"
@click="submitBanner"
@click="submitBanner(banner)"
>
{{ $t('general.submit') }}
</button>
<button
v-if="!isDefaultBanner"
class="btn btn-default"
@click="resetBanner"
>
{{ $t('settings.reset_profile_banner') }}
</button>
<div
v-if="bannerUploadError"
class="alert error"
......@@ -241,10 +238,20 @@
</div>
<div class="setting-item">
<h2>{{ $t('settings.profile_background') }}</h2>
<div class="banner-background-preview">
<img :src="user.background_image">
<i
v-if="!isDefaultBackground"
:title="$t('settings.reset_profile_background')"
class="reset-button icon-cancel"
type="button"
@click="resetBackground"
/>
</div>
<p>{{ $t('settings.set_new_profile_background') }}</p>
<img
v-if="backgroundPreview"
class="bg"
class="banner-background-preview"
:src="backgroundPreview"
>
<div>
......@@ -260,17 +267,10 @@
<button
v-else-if="backgroundPreview"
class="btn btn-default"
@click="submitBg"
@click="submitBackground(background)"
>
{{ $t('general.submit') }}
</button>
<button
v-if="!isDefaultBackground"
class="btn btn-default"
@click="resetBg"
>
{{ $t('settings.reset_profile_background') }}
</button>
<div
v-if="backgroundUploadError"
class="alert error"
......
......@@ -281,9 +281,7 @@
"collapse_subject": "Collapse posts with subjects",
"composing": "Composing",
"confirm_new_password": "Confirm new password",
"current_avatar": "Your current avatar",
"current_password": "Current password",
"current_profile_banner": "Your current profile banner",
"mutes_and_blocks": "Mutes and Blocks",
"data_import_export_tab": "Data Import / Export",
"default_vis": "Default visibility scope",
......
......@@ -24,10 +24,6 @@ const MFA_SETUP_OTP_URL = '/api/pleroma/accounts/mfa/setup/totp'
const MFA_CONFIRM_OTP_URL = '/api/pleroma/accounts/mfa/confirm/totp'
const MFA_DISABLE_OTP_URL = '/api/pleroma/accounts/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'
......@@ -142,53 +138,11 @@ const updateNotificationSettings = ({ credentials, settings }) => {
}).then((data) => data.json())
}
const updateAvatar = ({ credentials, avatar }) => {
const updateProfileImages = ({ credentials, avatar, banner, background }) => {
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 removeAvatar = ({ credentials, params }) => {
const form = new FormData()
form.append('img', '')
return fetch(AVATAR_PATCH_URL, {
headers: authHeaders(credentials),
method: 'PATCH',
body: form
}).then((data) => data.json())
.then((data) => parseUser(data))
}
const removeBanner = ({ credentials, params }) => {
const form = new FormData()
form.append('banner', '')
return fetch(BANNER_PATCH_URL, {
headers: authHeaders(credentials),
method: 'PATCH',
body: form
}).then((data) => data.json())
.then((data) => parseUser(data))
}
const removeBackground = ({ credentials, params }) => {
const form = new FormData()
form.append('img', '')
return fetch(BACKGROUND_PATCH_URL, {
headers: authHeaders(credentials),
method: 'PATCH',
body: form
}).then((data) => data.json())
.then((data) => parseUser(data))
}
const updateBg = ({ credentials, background }) => {
const form = new FormData()
form.append('pleroma_background_image', background)
if (avatar) form.append('avatar', avatar)
if (banner) form.append('header', banner)
if (background) form.append('pleroma_background_image', background)
return fetch(MASTODON_PROFILE_UPDATE_URL, {
headers: authHeaders(credentials),
method: 'PATCH',
......@@ -198,17 +152,6 @@ const updateBg = ({ credentials, background }) => {
.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,
......@@ -1203,13 +1146,8 @@ const apiService = {
deactivateUser,
register,
getCaptcha,
updateAvatar,
removeAvatar,
removeBanner,
removeBackground,
updateBg,
updateProfileImages,
updateProfile,
updateBanner,
importBlocks,
importFollows,
deleteAccount,
......
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