src/views/user/Settings.vue

@@ -115,7 +115,7 @@
 				</p>
 			</header>
 			<div class="card-content">
-				<div class="control">
+				<div class="control mb-4">
 					<label class="radio">
 						<input type="radio" name="avatarProvider" v-model="avatarProvider" value="default"/>
 						Default
@@ -134,9 +134,16 @@
 					</label>
 				</div>
 
+				<a
+						v-if="avatarProvider === 'upload'"
+						class="button is-primary"
+						:class="{ 'is-loading': avatarService.loading}">
+					Upload Avatar
+				</a>
+
 				<div class="bigbuttons">
-					<button @click="updateEmail()" class="button is-primary is-fullwidth"
-							:class="{ 'is-loading': emailUpdateService.loading}">
+					<button @click="updateAvatarStatus()" class="button is-primary is-fullwidth"
+							:class="{ 'is-loading': avatarService.loading}">
 						Save
 					</button>
 				</div>
@@ -237,6 +244,7 @@
 
 	import {mapState} from 'vuex'
 	import AvatarService from '../../services/avatar'
+	import AvatarModel from '../../models/avatar'
 
 	export default {
 		name: 'Settings',
@@ -362,6 +370,14 @@
 					})
 					.catch(e => this.error(e, this))
 			},
+			updateAvatarStatus() {
+				const avatarStatus = new AvatarModel({avatarProvider: this.avatarProvider})
+				this.avatarService.update(avatarStatus)
+					.then(() => {
+						this.success({message: 'Avatar status was updated successfully!'}, this)
+					})
+					.catch(e => this.error(e, this))
+			},
 		},
 	}
 </script>