Merge branch 'profile_pic'

frontend/src/components/routes/SettingsGeneral.vue

@@ -1,5 +1,14 @@
 <template>
 	<div class='route_container'>
+		<confirm-modal
+			v-model='picture.showRemoveProfilePictureModal'
+			@confirm='removeProfilePicture'
+			color='red'
+			text='Yes, remove it'
+		>
+			Are you sure you want to remove your profile picture?
+		</confirm-modal>
+
 		<modal-window v-model='picture.showProfilePictureModal' width='25rem' @input='hideProflePictureModal'>
 			<div
 				class='profile_picture_modal__overlay'
@@ -81,6 +90,14 @@
 			<button class='button' @click='picture.showProfilePictureModal = true'>
 				{{picture.current ? "Change" : "Add" }} profile picture
 			</button>
+			<button
+				v-if='picture.current'
+				class='button'
+				style='margin-left: 0.5rem;'
+				@click='picture.showRemoveProfilePictureModal = true'
+			>
+				Remove
+			</button>
 		</p>
 	</div>
 </template>
@@ -90,6 +107,7 @@
 	import LoadingButton from '../LoadingButton'
 	import LoadingIcon from '../LoadingIcon'
 	import ModalWindow from '../ModalWindow'
+	import ConfirmModal from '../ConfirmModal'
 
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 	import logger from '../../assets/js/logger'
@@ -100,7 +118,8 @@
 			FancyTextarea,
 			LoadingButton,
 			LoadingIcon,
-			ModalWindow
+			ModalWindow,
+			ConfirmModal
 		},
 		data () {
 			return {
@@ -113,6 +132,7 @@
 				picture: {
 					current: null,
 					showProfilePictureModal: false,
+					showRemoveProfilePictureModal: false,
 					dragging: false,
 					dataURL: null,
 					loading: false
@@ -158,6 +178,16 @@
 					})
 
 			},
+			removeProfilePicture () {
+				this.axios
+					.post('/api/v1/user/' + this.$store.state.username + '/picture', {
+						picture: null
+					})
+					.then(res => {
+						this.picture.current = null
+					})
+					.catch(AjaxErrorHandler(this.$store))
+			},
 			hideProflePictureModal () {
 				this.picture.showProfilePictureModal = false
 				

models/user.js

@@ -68,10 +68,10 @@ module.exports = (sequelize, DataTypes) => {
 						throw new sequelize.ValidationError('password must be a string')
 					}
 				},
-				isValidBase64 (val) {
+				isValidBase64OrNull (val) {
 					let base64Regexp = /^data:image\/(png|jpeg|jpg|gif);base64,[A-Za-z0-9+\/=]+$/g
 
-					if(!val.match(base64Regexp)) {
+					if(!val.match(base64Regexp) && val !== null) {
 						throw new sequelize.ValidationError('image must be valid base64')
 					}
 				}

test/profile_picture.js

@@ -138,6 +138,20 @@ describe('User', () => {
 					done()
 				})
 		})
+
+		it('should remove a picture if picture is null', async () => {
+			let res = await user
+				.post('/api/v1/user/useraccount1/picture')
+				.set('content-type', 'application/json')
+				.send({ picture: null })
+
+			res.should.be.json
+			res.should.have.status(200)
+
+			let foundUser = await User.findById(1)
+			foundUser.should.have.property('picture', null)
+		})
+
 		//it('should not add a picture if too large file size')
 
 	})